You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, when using an Ant Design Input component in a React application where both Ant Design and the Design System coexist, the Design System's generated theme overrides some properties of the Ant Design theme.
Although Input is used as an example here, this issue applies to any Design System component that wraps Ant Design components.
The description of the bug or the rationale of your proposal
The ThemeProvider component wraps an AntThemeProvider component, which uses a function called generateAntTheme to generate a configuration for Ant Design based on an existing theme. This function allows for mapping component tokens to specific components.
For instance, in the Input component, the paddingBlock and paddingInline tokens are overridden and set to specific values to align with the Design System's Input component. While this works correctly when using only the Design System's Input component, it causes display issues when an Ant Design Input component is added to a page. Its padding values are overridden by the theme tokens, which affects the component's height and layout.
Below is a screenshot showing two Input components — one from the Design System and the other from Ant Design — illustrating how the paddingBlock and paddingInline properties impact the component height when overridden:
If the tokens are not set, the two components are correctly displayed:
In general, when creating a component that wraps Ant Design components, we should always check the effect of our theme on the Ant component.
The expected result for your bug
Design System theme should not override Ant theme.
Your environment
node:
v20.18.0
os:
Ubuntu 20.04.6 LTS
The text was updated successfully, but these errors were encountered:
Hello,
I question if this is really an issue. In what context do we expect inputs from antd but differ from the design system?
If the problem is that the introduced input component impacts the rendering of the input in an existing application, wouldn't it be recommended to migrate the existing inputs to the ones imlemented in the design system? I guess changing the imports could be practically enough.
Asking for your opinion, @Danielecina@fredmaggiowski@epessina, also regarding the linked pull request here #776
The feature or bug you are proposing
Currently, when using an Ant Design
Input
component in a React application where both Ant Design and the Design System coexist, the Design System's generated theme overrides some properties of the Ant Design theme.Although
Input
is used as an example here, this issue applies to any Design System component that wraps Ant Design components.The description of the bug or the rationale of your proposal
The
ThemeProvider
component wraps anAntThemeProvider
component, which uses a function calledgenerateAntTheme
to generate a configuration for Ant Design based on an existing theme. This function allows for mapping component tokens to specific components.For instance, in the
Input
component, thepaddingBlock
andpaddingInline
tokens are overridden and set to specific values to align with the Design System'sInput
component. While this works correctly when using only the Design System'sInput
component, it causes display issues when an Ant DesignInput
component is added to a page. Its padding values are overridden by the theme tokens, which affects the component's height and layout.Below is a screenshot showing two Input components — one from the Design System and the other from Ant Design — illustrating how the
paddingBlock
andpaddingInline
properties impact the component height when overridden:If the tokens are not set, the two components are correctly displayed:
In general, when creating a component that wraps Ant Design components, we should always check the effect of our theme on the Ant component.
The expected result for your bug
Design System theme should not override Ant theme.
Your environment
node:
v20.18.0
os:
Ubuntu 20.04.6 LTS
The text was updated successfully, but these errors were encountered: