Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input: Design System theme overrides Ant theme properties #775

Open
fedepini opened this issue Dec 18, 2024 · 1 comment · May be fixed by #776
Open

Input: Design System theme overrides Ant theme properties #775

fedepini opened this issue Dec 18, 2024 · 1 comment · May be fixed by #776
Assignees
Labels
bug Something isn't working Input component Input component and hooks related activities

Comments

@fedepini
Copy link
Contributor

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 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:

image

If the tokens are not set, the two components are correctly displayed:

image

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

@fedepini fedepini added bug Something isn't working Input component Input component and hooks related activities labels Dec 18, 2024
@fedepini fedepini self-assigned this Dec 18, 2024
@fedepini fedepini linked a pull request Dec 18, 2024 that will close this issue
9 tasks
@nicmell
Copy link
Contributor

nicmell commented Jan 7, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Input component Input component and hooks related activities
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants