[core] Prepare for material v6 #14143

LukasTy · 2024-08-08T20:47:47Z

Apply changes based on https://next.mui.com/material-ui/migration/migrating-to-v6/#add-styles-for-specific-color-modes.
Run the following command on packages and docs folders:

npx @mui/codemod@next v6.0.0/styled
npx @mui/codemod@next v6.0.0/sx-prop
npx @mui/codemod@next v6.0.0/theme-v6
After running codemods, irrelevant changes have been removed and slight optimizations applied (i.e. replace border redeclaration with only overriding the borderColor)

I've also checked other usages of theme.palette.mode and tried adjusting them all (mostly docs) to play nicely with new API thus avoiding the possible dark mode flicker.

Actual changes on the code are limited, it's mostly docs.

mui-bot · 2024-08-08T20:52:08Z

Deploy preview: https://deploy-preview-14143--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 0b2a17a

cherniavskii · 2024-08-08T20:56:13Z

Great timing, I've just opened #14142 to run the tests against @mui/material@^6 😅

LukasTy · 2024-08-08T20:59:11Z

Yeah, I saw you opening that PR and decided to open the draft of moving to applyStyles. 😃

cherniavskii · 2024-08-15T11:05:37Z

docs/data/date-pickers/custom-opening-button/AddWarningIconWhenInvalidRange.tsx

+                opacity: 0,
+              },
+        ]}
+      />


Is this change required? It does not seem to make any difference, except that it now creates 2 objects instead of one 🤔

If I remember correctly, @siriwatknp confirmed that is is required for Pigment CSS to work, the previous syntax would not be supported by static extraction. 🤔

Tagging @brijeshb42 to confirm.
If that's the case, we should document this in the migration guide.

This is required. Please have a look at my explanation

By the way, in cases such as this one in which there's one condition, you can remove the array

sx={ hasError ? { opacity: 1, } : { opacity: 0, }, }

cherniavskii · 2024-08-15T11:11:04Z

docs/src/modules/components/DemoPropsForm.tsx

@@ -129,15 +129,15 @@ function ControlledColorRadio(props: any) {
          <Check
            fontSize="medium"
            color="inherit"
-            sx={{
+            sx={(theme) => ({


Is this for future Pigment CSS support?
We seem to miss this in the migration guide https://next.mui.com/material-ui/migration/migrating-to-pigment-css/

AFAIK it's not included in the migration guide as it's covered by the codemod.

@siriwatknp, what do you think about adding an example for all cases covered by the codemod? Would there be too many?

For small cases like this, I can update the migration page but it should not block the v6.

Let's create an issue to add the additional examples, but I agree not to block the stable release on this one. May I ask you to create it when you have some time?

I'm not sure we can assume that everyone would be running codemod.
Also, having this covered in the guide is essential – we ran codemod, but I wasn't sure why this change even matters and I couldn't find any information about it.

Sure, I can update the codemod to link to the migration as well if that helps.

packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx

packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx

…erForm.tsx Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Signed-off-by: Lukas Tyla <llukas.tyla@gmail.com>

oliviertassinari · 2024-08-15T23:12:14Z

Will we need an isMuiV5() helper like for v5? https://github.com/mui/mui-x/pull/2108/files#diff-b4487b0ccf1b0178520560e5e9b18efbd0d4030106ae794bda6638be8cbdd526L36

oliviertassinari · 2024-08-15T23:15:43Z

docs/src/modules/components/LocalizationTable.js

@@ -29,26 +26,29 @@ const Root = styled('div')(({ theme }) => ({
      border: `1px solid`,
      borderColor: (theme.vars || theme).palette.error.light,
    },
+    ...theme.applyStyles('dark', {


I was curious about whether we could use applyStyles() or not. It was added with mui/material-ui#40667, released with @mui/material@5.15.7, we have this dependency:

mui-x/packages/x-data-grid/package.json

Line 61 in c0b5993

"@mui/material": "^5.15.14",

since #12516, v7.0.0, so it looks likes yes. Cool

Yes, I was pretty sure we can't use it 😅
But it turns out the minimum supported version guarantees that applyStyles will always be available 👍🏻

LukasTy · 2024-08-16T11:38:21Z

Will we need an isMuiV5() helper like for v5? https://github.com/mui/mui-x/pull/2108/files#diff-b4487b0ccf1b0178520560e5e9b18efbd0d4030106ae794bda6638be8cbdd526L36

From the initial investigation—it doesn't look like we'll need it @oliviertassinari, because all the changes are supported by the @mui/material version we have listed in peerDependencies. 🤔

alexfauquette

CHnages on docs and charts look good to me

packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx

siriwatknp

Please change https://github.com/mui/mui-x/pull/14143/files#diff-d2872fe72d025095f6347b61c0ac177d659c43b2b669a58e9c935760fa1b602e to:

<Box
   sx={[
        rootProps.rowGroupingColumnMode === 'multiple'
          ? {
              ml: 0,
            }
          : theme => ({
              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--_depth) * ${theme.spacing(1)})`,
            }),
      ]}
  style={{
    '--depth': rowNode.depth
  } as any}
>

packages/x-charts/src/Gauge/GaugeContainer.tsx

cherniavskii · 2024-08-20T19:43:36Z

docs/data/charts/styling/SxStyling.js

There are some components that I don't know how to migrate, e.g.

mui-x/packages/x-charts/src/BarChart/BarElement.tsx

Lines 48 to 59 in 8a75b22

export const BarElementPath = styled(animated.rect, {

name: 'MuiBarElement',

slot: 'Root',

overridesResolver: (_, styles) => styles.root,

})<{ ownerState: BarElementOwnerState }>(({ ownerState }) => ({

stroke: 'none',

fill: ownerState.isHighlighted

? d3Color(ownerState.color)!.brighter(0.5).formatHex()

: ownerState.color,

transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',

opacity: (ownerState.isFaded && 0.3) || 1,

}));

Any ideas?
@LukasTy @siriwatknp @DiegoAndai

I think this should work:

export const BarElementPath = styled(animated.rect, { name: 'MuiBarElement', slot: 'Root', overridesResolver: (_, styles) => styles.root, })<{ ownerState: BarElementOwnerState }>(() => ({ stroke: 'none', transition: 'opacity 0.2s ease-in, fill 0.2s ease-in', opacity: 1, // might not be required, but I'm not familiar with the animation variants: [ { props: { isHighlighted: true }, style: ({ ownerState }) => ({ fill: d3Color(ownerState.color)!.brighter(0.5).formatHex() }) }, { props: { isHighlighted: false }, style: ({ ownerState }) => ({ fill: ownerState.color }) }, { props: { isFaded: true }, style: { opacity: 0.3 }, }, ], }));

The props and ownerState are also available in the style callback, here's a demo: https://codesandbox.io/p/sandbox/epic-ioana-v8hmlc?file=%2Fsrc%2FApp.tsx%3A12%2C32

@siriwatknp can confirm if this is the correct usage.

This won't work with Pigment, the ownerState usage is still dynamic. It should be:

export const BarElementPath = styled(animated.rect, { name: 'MuiBarElement', slot: 'Root', overridesResolver: (_, styles) => styles.root, })<{ ownerState: BarElementOwnerState }>(() => ({ stroke: 'none', transition: 'opacity 0.2s ease-in, fill 0.2s ease-in', opacity: 1, // might not be required, but I'm not familiar with the animation fill: 'var(--_fill)', // the `_` is a convention in CSS to indicates that the variable is private. variants: [ { props: { isFaded: true }, style: { opacity: 0.3 }, }, ], })); <BarElementPath style={{ '--_fill': isHighlighted ? d3Color(ownerState.color)!.brighter(0.5).formatHex() : color, }}>

@cherniavskii Supporting PigmentCSS is not in the scope of this PR.
"Full support" for it is in the plans only for TreeView and Pickers, which have most of the work done.
I've only applied changes that were made by codemod, but for full support, we potentially need way more work and attention for it.
Personally, I would prefer omitting any manual changes for Pigment support to reduce the scope of the PR, need for review and the potential of errors. 🙈
WDYT?

@cherniavskii I've removed the additional changes you introduced to avoid potential problems.
They would not be enough for PigmentCSS support anyways. 🙈
I think that support for it should be handled separately.

Yes, the example I gave here was out of curiosity 👍🏻

packages/x-charts/src/Gauge/GaugeContainer.tsx

packages/x-charts/src/LineChart/LineHighlightElement.tsx

LukasTy added 4 commits August 7, 2024 22:35

Run v6.0.0/styled

9c64224

Run v6.0.0/styled on docs

d366b62

Run v6.0.0/sx-prop on docs

9c43e82

Run v6.0.0/sx-prop

9f5bb77

LukasTy added the core Infrastructure work going on behind the scenes label Aug 8, 2024

LukasTy self-assigned this Aug 8, 2024

LukasTy added 2 commits August 9, 2024 16:25

Refactor remaining possible instances of theme.palette.mode usage

330cf58

Fix "brain-fart"

365b997

LukasTy marked this pull request as ready for review August 13, 2024 10:23

LukasTy requested review from a team August 13, 2024 10:23

Fix style applying

e21fdcf

cherniavskii reviewed Aug 15, 2024

View reviewed changes

packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx Outdated Show resolved Hide resolved

cherniavskii reviewed Aug 15, 2024

View reviewed changes

packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx Outdated Show resolved Hide resolved

LukasTy requested a review from siriwatknp August 15, 2024 11:55

Update packages/x-data-grid/src/components/panel/filterPanel/GridFilt…

8275ef1

…erForm.tsx Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com> Signed-off-by: Lukas Tyla <llukas.tyla@gmail.com>

oliviertassinari reviewed Aug 15, 2024

View reviewed changes

alexfauquette approved these changes Aug 20, 2024

View reviewed changes

siriwatknp reviewed Aug 20, 2024

View reviewed changes

packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx Outdated Show resolved Hide resolved

siriwatknp requested changes Aug 20, 2024

View reviewed changes

cherniavskii added 2 commits August 20, 2024 20:25

Merge branch 'master' into prepare-for-material-v6

7ac8677

use style object callback signature

6de1856

cherniavskii reviewed Aug 20, 2024

View reviewed changes

packages/x-charts/src/Gauge/GaugeContainer.tsx Outdated Show resolved Hide resolved

cherniavskii reviewed Aug 20, 2024

View reviewed changes

siriwatknp reviewed Aug 21, 2024

View reviewed changes

packages/x-charts/src/Gauge/GaugeContainer.tsx Outdated Show resolved Hide resolved

siriwatknp reviewed Aug 21, 2024

View reviewed changes

packages/x-charts/src/LineChart/LineHighlightElement.tsx Outdated Show resolved Hide resolved

siriwatknp reviewed Aug 21, 2024

View reviewed changes

packages/x-charts/src/LineChart/LineHighlightElement.tsx Outdated Show resolved Hide resolved

LukasTy added 2 commits August 21, 2024 12:31

scripts

be69a13

Revert start of PigmentCSS support

0b2a17a

siriwatknp approved these changes Aug 21, 2024

View reviewed changes

LukasTy merged commit e570b4b into mui:master Aug 21, 2024
18 checks passed

LukasTy deleted the prepare-for-material-v6 branch August 21, 2024 10:43

shagg0r mentioned this pull request Sep 14, 2024

[Snyk] Upgrade: , , , , , , , , shagg0r/test#4

Open

alhabib5565 mentioned this pull request Sep 14, 2024

[Snyk] Upgrade: , , , , axios, dayjs, framer-motion, next, react-hook-form, swiper alhabib5565/quick-shop-client#15

Open

mbreadmachine mentioned this pull request Sep 14, 2024

[Snyk] Upgrade: , , , mbreadmachine/arany-d-osztaly-weboldal#33

Closed

KOTTAGENVH mentioned this pull request Sep 15, 2024

[Snyk] Upgrade: , , , , , , , , axios, chart.js, material-react-table, next KOTTAGENVH/converter-exchange#2

Open

alhabib5565 mentioned this pull request Sep 18, 2024

[Snyk] Upgrade: , , , , axios, dayjs, framer-motion, next, react-hook-form, swiper alhabib5565/quick-shop-client#16

Open

KOTTAGENVH mentioned this pull request Sep 18, 2024

[Snyk] Upgrade: , , , , , , , , axios, chart.js, material-react-table, next KOTTAGENVH/converter-exchange#3

Open

This was referenced Sep 19, 2024

[Snyk] Upgrade: , , , mbreadmachine/arany-d-osztaly-weboldal#34

Closed

[Snyk] Upgrade: , , , mbreadmachine/arany-d-osztaly-weboldal#35

Closed

mbreadmachine mentioned this pull request Sep 25, 2024

[Snyk] Upgrade @mui/x-date-pickers from 7.13.0 to 7.15.0 mbreadmachine/arany-d-osztaly-weboldal#37

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Prepare for material v6 #14143

[core] Prepare for material v6 #14143

LukasTy commented Aug 8, 2024 •

edited

Loading

mui-bot commented Aug 8, 2024 •

edited

Loading

cherniavskii commented Aug 8, 2024

LukasTy commented Aug 8, 2024

cherniavskii Aug 15, 2024

LukasTy Aug 15, 2024

cherniavskii Aug 15, 2024

siriwatknp Aug 20, 2024

DiegoAndai Aug 20, 2024

cherniavskii Aug 15, 2024

DiegoAndai Aug 20, 2024

siriwatknp Aug 20, 2024

DiegoAndai Aug 20, 2024 •

edited

Loading

cherniavskii Aug 20, 2024

siriwatknp Aug 21, 2024

oliviertassinari commented Aug 15, 2024 •

edited

Loading

oliviertassinari Aug 15, 2024

cherniavskii Aug 20, 2024

LukasTy commented Aug 16, 2024

alexfauquette left a comment

siriwatknp left a comment •

edited

Loading

cherniavskii Aug 20, 2024

DiegoAndai Aug 20, 2024 •

edited

Loading

siriwatknp Aug 21, 2024

LukasTy Aug 21, 2024 •

edited

Loading

LukasTy Aug 21, 2024

cherniavskii Aug 21, 2024

	export const BarElementPath = styled(animated.rect, {
	name: 'MuiBarElement',
	slot: 'Root',
	overridesResolver: (_, styles) => styles.root,
	})<{ ownerState: BarElementOwnerState }>(({ ownerState }) => ({
	stroke: 'none',
	fill: ownerState.isHighlighted
	? d3Color(ownerState.color)!.brighter(0.5).formatHex()
	: ownerState.color,
	transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
	opacity: (ownerState.isFaded && 0.3) \|\| 1,
	}));

[core] Prepare for material v6 #14143

[core] Prepare for material v6 #14143

Conversation

LukasTy commented Aug 8, 2024 • edited Loading

mui-bot commented Aug 8, 2024 • edited Loading

cherniavskii commented Aug 8, 2024

LukasTy commented Aug 8, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DiegoAndai Aug 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari commented Aug 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LukasTy commented Aug 16, 2024

alexfauquette left a comment

Choose a reason for hiding this comment

siriwatknp left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DiegoAndai Aug 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LukasTy Aug 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

LukasTy commented Aug 8, 2024 •

edited

Loading

mui-bot commented Aug 8, 2024 •

edited

Loading

DiegoAndai Aug 20, 2024 •

edited

Loading

oliviertassinari commented Aug 15, 2024 •

edited

Loading

siriwatknp left a comment •

edited

Loading

DiegoAndai Aug 20, 2024 •

edited

Loading

LukasTy Aug 21, 2024 •

edited

Loading