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.

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

[material-ui] Support Pigment CSS for CssBaseline, ScopedCssBaseline and Popper #42640

Merged
merged 16 commits into from
Jun 24, 2024
Merged

[material-ui] Support Pigment CSS for CssBaseline, ScopedCssBaseline and Popper #42640

merged 16 commits into from
Jun 24, 2024

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jun 14, 2024 •
edited
Loading

Part of #41273

Screen.Recording.2567-06-21.at.15.34.32.mov

@siriwatknp siriwatknp added package: material-ui Specific to @mui/material v6.x package: pigment-css Specific to @pigment-css/* labels Jun 14, 2024
@siriwatknp siriwatknp mentioned this pull request Jun 14, 2024
Open
62 tasks
@siriwatknp siriwatknp requested review from mnajdova and DiegoAndai and removed request for michaldudak June 17, 2024 07:30
@mui-bot
Copy link

mui-bot commented Jun 17, 2024 •
edited
Loading

Netlify deploy preview

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

ScopedCssBaseline: parsed: +11.09% , gzip: +8.41%
@material-ui/core: parsed: +0.15% , gzip: +0.15%
CssBaseline: parsed: +1.51% , gzip: +0.88%
SpeedDialAction: parsed: -0.31% 😍, gzip: -0.30% 😍
Autocomplete: parsed: -0.24% 😍, gzip: -0.27% 😍
Tooltip: parsed: -0.35% 😍, gzip: -0.23% 😍

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against f3075f6

DiegoAndai
DiegoAndai reviewed Jun 18, 2024
View reviewed changes
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.

Only one question

packages/mui-material/src/zero-styled/index.tsx Outdated Show resolved Hide resolved
siriwatknp
siriwatknp commented Jun 19, 2024
View reviewed changes
packages/mui-material/src/CssBaseline/CssBaseline.js Outdated
@@ -13,7 +17,8 @@ export const html = (theme, enableColorScheme) => ({
// Fix font resize problem in iOS
WebkitTextSizeAdjust: '100%',
// When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications.
...(enableColorScheme && !theme.vars && { colorScheme: theme.palette.mode }),
...(enableColorScheme &&
!theme.vars && { [`&:has(.${SELECTOR})`]: { colorScheme: theme.palette.mode } }),
Copy link
Member Author

Choose a reason for hiding this comment

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

Glad we bump safari to 15.4, otherwise I have no clue how to make it work 😊

o-alexandrov
o-alexandrov reviewed Jun 20, 2024
View reviewed changes
packages/mui-material/src/CssBaseline/CssBaseline.js Outdated
@@ -71,7 +80,8 @@ function CssBaseline(inProps) {
const { children, enableColorScheme = false } = props;
return (
<React.Fragment>
<GlobalStyles styles={(theme) => styles(theme, enableColorScheme)} />
<GlobalStyles />
{enableColorScheme && <span className={SELECTOR} style={{ display: 'none' }} />}
Copy link

Choose a reason for hiding this comment

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

What’s the need for enableColorScheme: false?
In other words, why would anyone want the browser to show light color scheme for a dark theme?

Having a hanging span element is another freak (break of principle of least surprise).

Copy link
Member

Choose a reason for hiding this comment

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

That's a good argument, I think we should revisit in v7. For v6 we try to keep the breaking changes minimal, so I wouldn't just the API just yet, only add the opt in support for Pigment CSS.

Copy link
Member

@oliviertassinari oliviertassinari Jun 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Can we do the opposite here? Only a DOM node if the prop is false?

Copy link
Member Author

Choose a reason for hiding this comment

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

Good point, done.

@siriwatknp siriwatknp mentioned this pull request Jun 20, 2024
Merged
1 task
mnajdova
mnajdova reviewed Jun 20, 2024
View reviewed changes
Copy link
Member

@mnajdova mnajdova left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Can we please add some examples with this components? Just to verify everything works as before.

@o-alexandrov o-alexandrov mentioned this pull request Jun 20, 2024
Open
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 20, 2024
@siriwatknp siriwatknp mentioned this pull request Jun 21, 2024
Merged
1 task
@siriwatknp
Copy link
Member Author

Can we please add some examples with this components? Just to verify everything works as before.

Added the demo page and capture the clip in the PR description.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 21, 2024
@siriwatknp siriwatknp requested a review from mnajdova June 24, 2024 04:46
@siriwatknp siriwatknp merged commit f4f199b into mui:next Jun 24, 2024
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari left review comments

@o-alexandrov o-alexandrov o-alexandrov left review comments

@mnajdova mnajdova mnajdova approved these changes

@DiegoAndai DiegoAndai Awaiting requested review from DiegoAndai

Assignees
No one assigned
Labels
package: material-ui Specific to @mui/material package: pigment-css Specific to @pigment-css/* v6.x
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
6 participants
@siriwatknp @mui-bot @oliviertassinari @mnajdova @o-alexandrov @DiegoAndai