Skip to content

[docs][Menu] Fix dark mode styling of grouped header demo #46317

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 7 commits into from
Jun 17, 2025
Merged

[docs][Menu] Fix dark mode styling of grouped header demo #46317

merged 7 commits into from
Jun 17, 2025

Conversation

sai6855
Copy link
Contributor

@sai6855 sai6855 commented Jun 11, 2025 •
edited
Loading

@sai6855 sai6855 added bug 🐛 Something doesn't work docs Improvements or additions to the documentation component: menu This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature and removed bug 🐛 Something doesn't work labels Jun 11, 2025
@mui-bot
Copy link

mui-bot commented Jun 11, 2025 •
edited
Loading

Netlify deploy preview

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

Bundle size report

@mui/material parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/system parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/utils parsed: 0B(0.00%) gzip: 0B(0.00%)

Show details for 100 more bundles (86 more not shown)

@mui/lab/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/AdapterDayjs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/CalendarPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/CalendarPickerSkeleton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/ClockPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DateRangePickerDay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/LoadingButton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/Masonry parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MonthPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/PickersDay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TabContext parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TabList parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TabPanel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/Timeline parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineConnector parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineDot parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineItem parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineOppositeContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineSeparator parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TreeItem parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TreeView parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/useAutocomplete parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/YearPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Accordion parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AccordionActions parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AccordionDetails parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AccordionSummary parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Alert parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AlertTitle parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AppBar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Autocomplete parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Avatar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AvatarGroup parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Backdrop parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Badge parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/BottomNavigation parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/BottomNavigationAction parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Box parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Breadcrumbs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Button parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ButtonBase parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ButtonGroup parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Card parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardActionArea parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardActions parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardHeader parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardMedia parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Checkbox parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Chip parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CircularProgress parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ClickAwayListener parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Collapse parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Container parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CssBaseline parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DefaultPropsProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Dialog parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogActions parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogContentText parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogTitle parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Divider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Drawer parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Fab parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Fade parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FilledInput parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormControl parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormControlLabel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormGroup parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormHelperText parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormLabel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/GlobalStyles parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Grid parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/GridLegacy parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Grow parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Icon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/IconButton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ImageList parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ImageListItem parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ImageListItemBar parsed: 0B(0.00%) gzip: 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 7af3a2d

@sai6855 sai6855 marked this pull request as draft June 11, 2025 12:20
sai6855
sai6855 commented Jun 11, 2025
View reviewed changes
docs/data/material/components/menus/GroupedMenu.js
@@ -33,13 +33,32 @@ export default function GroupedMenu() {
slotProps={{
list: {
'aria-labelledby': 'basic-button',
sx: {
py: 0,
Copy link
Contributor Author

@sai6855 sai6855 Jun 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

without this style, demo is looking bit weird in dark mode.

With style
image

Without style
image

@sai6855 sai6855 requested a review from siriwatknp June 11, 2025 16:30
@sai6855 sai6855 marked this pull request as ready for review June 11, 2025 16:31
siriwatknp
siriwatknp reviewed Jun 16, 2025
View reviewed changes
docs/data/material/components/menus/GroupedMenu.js Outdated
Comment on lines 9 to 11
...theme.applyStyles('dark', {
backgroundColor: theme.palette.grey[900],
}),
Copy link
Member

@siriwatknp siriwatknp Jun 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
...theme.applyStyles('dark', {
backgroundColor: theme.palette.grey[900],
}),
backgroundImage: 'var(--Paper-overlay)',

siriwatknp
siriwatknp requested changes Jun 16, 2025
View reviewed changes
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.

Use backgroundImage: var(--Paper-overlay) is better in this case to mimic the background of the list.

@sai6855 sai6855 requested a review from siriwatknp June 17, 2025 03:16
@sai6855 sai6855 merged commit ac3dbe0 into mui:master Jun 17, 2025
23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@siriwatknp siriwatknp siriwatknp approved these changes

Assignees
No one assigned
Labels
component: menu This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation enhancement This is not a bug, nor a new feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@sai6855 @mui-bot @siriwatknp