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

[material-ui][Autocomplete] Caret transformation issue with font size change #41066

Merged

Conversation

dpertsin
Copy link
Contributor

@dpertsin dpertsin commented Feb 12, 2024

The caret icon within the Autocomplete component was incorrectly positioned due to the following styles applied to the .css-1q60rmi-MuiAutocomplete-endAdornment class:

  • top: calc(50% - 14px);

This caused the caret icon to be misaligned when the font size was adjusted. Additionally, the 'right: 0;' style was redundant and was overridden by another class, so I removed it..

Bug Fix:

  1. Removed the 'top' style to ensure that the caret icon remains vertically centered regardless of the font size. The caret icon is now positioned correctly within the Autocomplete component.
  2. Removed the 'right: 0;' style as it was overridden, because it is unnecessary and the code is cleaner.

The caret icon's positioning is now consistent and follows the standard Material-UI styling.

Fix #40874

@mui-bot
Copy link

mui-bot commented Feb 12, 2024

Netlify deploy preview

https://deploy-preview-41066--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 6f76bef

@dpertsin dpertsin changed the title Caret icon centered regardless of the font size [material-ui][Autocomplete] Caret transformation issue with font size change #40874 Feb 12, 2024
@dpertsin
Copy link
Contributor Author

So, I discovered that if we remove the 'right: 0;' style, the other Autocomplete components are changing, so I will add this back.

@zannager zannager added the component: autocomplete This is the name of the generic UI component, not the React module! label Feb 12, 2024
So, I discovered that if we remove the 'right: 0;' style, the other Autocomplete components are changed and the caret icon goes to the left side, so I will add this back.



Signed-off-by: Dimitris Pertsinidis <76684058+dpertsin@users.noreply.github.com>
Because the Argos tool detected some changes I had to change the style.

Signed-off-by: Dimitris Pertsinidis <76684058+dpertsin@users.noreply.github.com>
Signed-off-by: Dimitris Pertsinidis <76684058+dpertsin@users.noreply.github.com>
@oliviertassinari oliviertassinari added the customization: css Design CSS customizability label Feb 12, 2024
@oliviertassinari oliviertassinari changed the title [material-ui][Autocomplete] Caret transformation issue with font size change #40874 [material-ui][Autocomplete] Caret transformation issue with font size change Feb 12, 2024
@ZeeshanTamboli ZeeshanTamboli added the package: material-ui Specific to @mui/material label Feb 14, 2024
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @dpertsin! 🎉

The CI check failing is not for this PR in particular, but it's failing on multiple PRs; I will merge this as soon as we figure out why that check is failing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module! customization: css Design CSS customizability package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[material-ui][Autocomplete] Caret transformation issue with font size change
6 participants