[material-ui] Add `DefaultPropsProvider` for Pigment CSS integration #42638

siriwatknp · 2024-06-13T10:28:01Z

The gist is https://github.com/mui/material-ui/pull/42638/files#diff-532de7437125015b5ab87338e5e5950bc513e99fc7d987838a0f3755ee01408b, the rests are replacing createUseThemeProps with useDefaultProps.

The signature changes but still support v5:

<DefaultPropsProvider
  value={{
    MuiButton: {
      disableTouchRipple: true,
    }
  }}
>

Testing

Only the spec is added because the logic is already tested by describeConformance from all the components.

I have followed (at least) the PR section of the contributing guide.

…-alpha.11

mui-bot · 2024-06-13T10:30:30Z

Netlify deploy preview

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

DefaultPropsProvider: parsed: +Infinity% , gzip: +Infinity%
@material-ui/core: parsed: -0.08% 😍, gzip: -0.50% 😍
Pagination: parsed: -0.35% 😍, gzip: -0.81% 😍
PaginationItem: parsed: -0.36% 😍, gzip: -0.75% 😍
StepButton: parsed: -0.40% 😍, gzip: -0.66% 😍
AvatarGroup: parsed: -0.46% 😍, gzip: -0.85% 😍
DialogActions: parsed: -0.51% 😍, gzip: -1.02% 😍
AccordionSummary: parsed: -0.41% 😍, gzip: -0.69% 😍
AccordionActions: parsed: -0.51% 😍, gzip: -1.01% 😍
CardActions: parsed: -0.52% 😍, gzip: -1.01% 😍
Toolbar: parsed: -0.51% 😍, gzip: -1.00% 😍
StepLabel: parsed: -0.47% 😍, gzip: -0.82% 😍
DialogContentText: parsed: -0.52% 😍, gzip: -0.86% 😍
LoadingButton: parsed: -0.40% 😍, gzip: -0.46% 😍
DialogContent: parsed: -0.51% 😍, gzip: -0.98% 😍
FormGroup: parsed: -0.51% 😍, gzip: -0.98% 😍
ListItemIcon: parsed: -0.51% 😍, gzip: -0.97% 😍
BottomNavigationAction: parsed: -0.41% 😍, gzip: -0.66% 😍
ListSubheader: parsed: -0.50% 😍, gzip: -0.96% 😍
TableSortLabel: parsed: -0.41% 😍, gzip: -0.61% 😍
and 68 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against f2b658a

…rops-provider

mnajdova

We have a bit of misalignment in the names:

PropsProvider vs useDefaultProps - we should either have DefaultPropsProvider and useDefaultProps, or PropsProvider and useProps

I like that the API is identical as before, but in ideal scenario this API in my opinion should be:

<DefaultPropsProvider
  value={{
    MuiButton: { disableRipple: true }, // note that I removed the defaultProps key
  }}
>

I would prefer this API ☝️

…rops-provider

siriwatknp · 2024-06-19T04:00:40Z

We have a bit of misalignment in the names:

PropsProvider vs useDefaultProps - we should either have DefaultPropsProvider and useDefaultProps, or PropsProvider and useProps

I like that the API is identical as before, but in ideal scenario this API in my opinion should be:
<DefaultPropsProvider
  value={{
    MuiButton: { disableRipple: true }, // note that I removed the defaultProps key
  }}
>
I would prefer this API ☝️

Changed to DefaultPropsProvider and support both signatures.

siriwatknp · 2024-06-19T04:12:05Z

packages/mui-codemod/src/deprecations/tab-classes/test-cases/expected.css

@@ -1,3 +1,4 @@
 .MuiTab-root .MuiTab-icon {
  color: red;
 }
+


This is not related to this PR. I have no idea how this passed the check before merging to next.

Fixed in #42686

mnajdova · 2024-06-20T06:30:26Z

packages/mui-system/src/DefaultPropsProvider/DefaultPropsProvider.tsx

+  }
+
+  if (!config.styleOverrides && !config.variants) {
+    // v6 signature, no property 'defaultProps'


Good call for adding both APIs 👌

mnajdova

Nice work, let's merge this before the beta 🎉 This was the last missing part for interoperability, right?

siriwatknp · 2024-06-20T06:35:05Z

Nice work, let's merge this before the beta 🎉 This was the last missing part for interoperability, right?

No. There are 2 more, left over components and Pigment layout components (need decision on mui/pigment-css#144 (comment))

…rops-provider

oliviertassinari · 2024-07-07T21:11:11Z

packages/mui-system/src/DefaultPropsProvider/DefaultPropsProvider.tsx

+import PropTypes from 'prop-types';
+import resolveProps from '@mui/utils/resolveProps';
+
+const PropsContext = React.createContext<Record<string, any> | undefined>(undefined);


We are missing the codebase guideline for React context here:

Suggested change

const PropsContext = React.createContext<Record<string, any> | undefined>(undefined);

const PropsContext = React.createContext<Record<string, any> | undefined>(undefined);

if (process.env.NODE_ENV !== 'production') {

PropsContext.displayName = 'DefaultProps';

It's for the dev tools.

Also, the name of the variable looks inaccurate:

Suggested change

const PropsContext = React.createContext<Record<string, any> | undefined>(undefined);

const DefaultPropsContext = React.createContext<Record<string, any> | undefined>(undefined);

…ui#42638)

brijeshb42 and others added 9 commits June 12, 2024 13:02

v6.0.0-alpha.11

d8ae2b8

Bump versions

c1302e7

Merge branch 'next' of https://github.com/mui/material-ui into v6.0.0…

715df3c

…-alpha.11

restore

95ed43b

update changelog

8a138f9

fix non-breaking space

3caa5f8

Merge branch 'next' of https://github.com/mui/material-ui into v6.0.0…

dfa8bf9

…-alpha.11

add PropsProvider

e57ac7b

migrate to useDefaultProps

ea9650a

siriwatknp added package: material-ui Specific to @mui/material v6.x migration labels Jun 13, 2024

siriwatknp changed the title ~~[material-ui] Add PropsProvider for Pigment CSS~~ [material-ui] Add PropsProvider for Pigment CSS integration Jun 13, 2024

siriwatknp added 3 commits June 13, 2024 17:42

run proptypes and docs:api

66146d0

fix lint

672c180

fix lint and test

d2ddf3b

zannager requested a review from mnajdova June 13, 2024 16:29

siriwatknp added 2 commits June 13, 2024 23:43

fix lint plugin

37c6c5d

remove createUseThemeProps

4b89434

siriwatknp force-pushed the feat/props-provider branch from 9e6f101 to 4b89434 Compare June 13, 2024 16:46

siriwatknp added 3 commits June 14, 2024 07:08

remove useThemeProps

37e9996

Merge branch 'next' of https://github.com/mui/material-ui into feat/p…

ba20d00

…rops-provider

fix lint

0dec6b2

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 14, 2024

siriwatknp requested a review from DiegoAndai June 17, 2024 08:18

Merge branch 'next' of https://github.com/mui/material-ui into feat/p…

68fd0ca

…rops-provider

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 17, 2024

mnajdova reviewed Jun 18, 2024

View reviewed changes

siriwatknp added 2 commits June 19, 2024 10:33

Merge branch 'next' of https://github.com/mui/material-ui into feat/p…

57ad7b6

…rops-provider

apply suggestion

8f66700

use custom getThemeProps logic

e955495

siriwatknp changed the title ~~[material-ui] Add PropsProvider for Pigment CSS integration~~ [material-ui] Add DefaultPropsProvider for Pigment CSS integration Jun 19, 2024

siriwatknp requested a review from mnajdova June 19, 2024 04:07

fix line mismatch

894a6a4

siriwatknp commented Jun 19, 2024

View reviewed changes

mnajdova reviewed Jun 20, 2024

View reviewed changes

mnajdova approved these changes Jun 20, 2024

View reviewed changes

siriwatknp added 2 commits June 20, 2024 17:04

Merge branch 'next' of https://github.com/mui/material-ui into feat/p…

01b6988

…rops-provider

restore

f2b658a

siriwatknp enabled auto-merge (squash) June 20, 2024 10:15

siriwatknp merged commit 79f94eb into mui:next Jun 20, 2024
18 checks passed

flaviendelangle mentioned this pull request Jun 28, 2024

[core] Remove custom hooks from the mui-name-matches-component-name linting rule #42773

Merged

siriwatknp mentioned this pull request Jul 2, 2024

[material-ui] Add DefaultPropsProvider #42820

Merged

1 task

oliviertassinari reviewed Jul 7, 2024

View reviewed changes

o-alexandrov mentioned this pull request Jul 19, 2024

[docs] How to use Pigment CSS and Emotion at the same time with Material UI? mui/pigment-css#180

Open

joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024

[material-ui] Add DefaultPropsProvider for Pigment CSS integration (m…

217fd10

…ui#42638)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui] Add `DefaultPropsProvider` for Pigment CSS integration #42638

[material-ui] Add `DefaultPropsProvider` for Pigment CSS integration #42638

siriwatknp commented Jun 13, 2024 •

edited

Loading

mui-bot commented Jun 13, 2024 •

edited

Loading

mnajdova left a comment

siriwatknp commented Jun 19, 2024 •

edited

Loading

siriwatknp Jun 19, 2024

DiegoAndai Jun 19, 2024

mnajdova Jun 20, 2024

mnajdova left a comment

siriwatknp commented Jun 20, 2024

oliviertassinari Jul 7, 2024 •

edited

Loading

oliviertassinari Jul 7, 2024 •

edited

Loading

	const PropsContext = React.createContext<Record<string, any> \| undefined>(undefined);
	const DefaultPropsContext = React.createContext<Record<string, any> \| undefined>(undefined);

[material-ui] Add DefaultPropsProvider for Pigment CSS integration #42638

[material-ui] Add DefaultPropsProvider for Pigment CSS integration #42638

Conversation

siriwatknp commented Jun 13, 2024 • edited Loading

Testing

mui-bot commented Jun 13, 2024 • edited Loading

Netlify deploy preview

Bundle size report

mnajdova left a comment

Choose a reason for hiding this comment

siriwatknp commented Jun 19, 2024 • edited Loading

siriwatknp Jun 19, 2024

Choose a reason for hiding this comment

DiegoAndai Jun 19, 2024

Choose a reason for hiding this comment

mnajdova Jun 20, 2024

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

siriwatknp commented Jun 20, 2024

oliviertassinari Jul 7, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Jul 7, 2024 • edited Loading

Choose a reason for hiding this comment

[material-ui] Add `DefaultPropsProvider` for Pigment CSS integration #42638

[material-ui] Add `DefaultPropsProvider` for Pigment CSS integration #42638

siriwatknp commented Jun 13, 2024 •

edited

Loading

mui-bot commented Jun 13, 2024 •

edited

Loading

siriwatknp commented Jun 19, 2024 •

edited

Loading

oliviertassinari Jul 7, 2024 •

edited

Loading

oliviertassinari Jul 7, 2024 •

edited

Loading