[material-ui] Add DefaultPropsProvider for Pigment CSS integration

[siriwatknp]

closes #42635

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.

[mui-bot]

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

[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 ☝️

[siriwatknp]

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]

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

[DiegoAndai]

Fixed in #42686

[mnajdova]

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]

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))

[oliviertassinari]

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.

[oliviertassinari]

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);