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

[docs] Improve Multiselect demo styling #37120

Merged
merged 2 commits into from May 2, 2023

Conversation

michaldudak
Copy link
Member

@michaldudak michaldudak commented May 1, 2023

Improved the look of multiple selected options in Base UI's Select demos.

Before:
Screenshot 2023-05-01 at 05 18 11

After:
Screenshot 2023-05-01 at 05 17 59

This relies on the :has CSS selector and won't currently work on Firefox (it'll look like before).

Interestingly, I couldn't make it work by writing &.${optionClasses.selected}:has(+ .${optionClasses.selected}), as for some reason, Emotion was transforming this into &:has(+ .MuiSelected). I wasn't able to isolate this issue, though.

I discussed the issue with @siriwatknp, who proposed a fix in createEmotionCache that I included in the PR.

@michaldudak michaldudak added docs Improvements or additions to the documentation component: select This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base labels May 1, 2023
@mui-bot
Copy link

mui-bot commented May 1, 2023

Netlify deploy preview

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

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 3f6b77e

Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

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

👍 It's awesome to see new CSS selectors used in the docs.

@michaldudak michaldudak merged commit b710859 into mui:master May 2, 2023
18 checks passed
@michaldudak michaldudak deleted the multiselect-styling branch May 2, 2023 20:41
binh1298 pushed a commit to binh1298/material-ui that referenced this pull request May 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: select This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation package: base-ui Specific to @mui/base
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants