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

[Chip] Fix hover and focus style with CSS Variables #35502

Merged
merged 1 commit into from Dec 16, 2022

Conversation

DimaAbr
Copy link
Contributor

@DimaAbr DimaAbr commented Dec 16, 2022

This PR fixes the chip hover and focus styles when using the CSSVarsProvider.

There were some missing braces which caused calc not to work and resulted in way lower numbers. This should align the behavior between css vars and regular themes

Before: https://codesandbox.io/s/elegant-sound-v0os54?file=/src/App.tsx:0-2257

After: https://codesandbox.io/s/create-react-app-with-typescript-forked-556ttt?file=/src/App.tsx

@mui-bot
Copy link

mui-bot commented Dec 16, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-35502--material-ui.netlify.app/

Details of bundle changes

Generated by 🚫 dangerJS against 8da1011

Signed-off-by: DimaAbr <13933191+DimaAbr@users.noreply.github.com>
@zannager zannager added the package: system Specific to @mui/system label Dec 16, 2022
@ZeeshanTamboli ZeeshanTamboli added bug 🐛 Something doesn't work component: chip This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material and removed package: system Specific to @mui/system labels Dec 16, 2022
@ZeeshanTamboli ZeeshanTamboli changed the title fixed chip hover and focus style with cssVars [Chip] Fix hover and focus style with CSS Vars Dec 16, 2022
@ZeeshanTamboli ZeeshanTamboli changed the title [Chip] Fix hover and focus style with CSS Vars [Chip] Fix hover and focus style with CSS Variables Dec 16, 2022
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

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

Nice catch! It's a great first pull request on MUI 👌 Thank you for working on it!

@ZeeshanTamboli ZeeshanTamboli merged commit 9c472c1 into mui:master Dec 16, 2022
@DimaAbr
Copy link
Contributor Author

DimaAbr commented Dec 16, 2022

Thanks! I ran into it while working with the chip. Figured I might as well chip in (sorry for the horrible pun)

@DimaAbr DimaAbr deleted the chip-broken-focus branch December 16, 2022 14:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: chip This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants