MUI v6

[fhammerschmidt]

I created a v6 branch.

Please submit your changes there until we have a first version out.

@illusionalsagacity you probably have some of the necessary changes lying around already?

[illusionalsagacity]

I do have some, but admittedly we've been fine with continuing to use some of the deprecated APIs (from v5 -> v6) for the moment. The one that stands out the most is Grid2 but the binding is nearly identical if I recall correctly.

[illusionalsagacity]

@fhammerschmidt I started working on finishing up the bindings for the slots / props, I have them mostly completed using OverridableComponent.t (the equivalent of React.ElementType in TS) and falling back to JsxDOM.domProps if there wasn't an explicit Mui component props type for them. Should they be CommonProps.t instead for sx compatibility?

I think with the props type casting from OverridableComponent it should pretty much work though.

[illusionalsagacity]

@fhammerschmidt what do you think of changing the current Grid2 bindings to be like this:

type breakpoints<'a> = {
  lg?: 'a,
  md?: 'a,
  sm?: 'a,
  xl?: 'a,
  xs?: 'a,
}

module Size = {
  @unboxed
  type value =
    | @as("auto") Auto
    | @as("grow") Grow
    | @as(false) False
    | Int(int)

  @unboxed
  type t = Array(array<value>) | Object(breakpoints<value>) | ...value
}

Then usage would allow for the other value variant constructors like this:

<Grid size=Object({md: Int(5)})>
  <Item> {"Left"->React.string} </Item>
</Grid>
<Grid size=Int(5)>
  <Item> {"Right"->React.string} </Item>
</Grid>

Here's the existing types for reference:

rescript-mui/packages/rescript-mui-material/src/components/Grid.res

Lines 149 to 206 in 2088778

	type gridSize =
	| @as("auto") Auto
	| @as("grow") Grow
	| @as(false) False
	| Int(int)
	type size = {
	/**
	* If a number, it sets the number of columns the grid item uses.
	* It can't be greater than the total number of columns of the container (12 by default).
	* If 'auto', the grid item's width matches its content.
	* If false, the prop is ignored.
	* If true, the grid item's width grows to use the space available in the grid container.
	* The value is applied for the `lg` breakpoint and wider screens if not overridden.
	* @default false
	*/
	lg?: gridSize,
	/**
	* If a number, it sets the number of columns the grid item uses.
	* It can't be greater than the total number of columns of the container (12 by default).
	* If 'auto', the grid item's width matches its content.
	* If false, the prop is ignored.
	* If true, the grid item's width grows to use the space available in the grid container.
	* The value is applied for the `md` breakpoint and wider screens if not overridden.
	* @default false
	*/
	md?: gridSize,
	/**
	* If a number, it sets the number of columns the grid item uses.
	* It can't be greater than the total number of columns of the container (12 by default).
	* If 'auto', the grid item's width matches its content.
	* If false, the prop is ignored.
	* If true, the grid item's width grows to use the space available in the grid container.
	* The value is applied for the `sm` breakpoint and wider screens if not overridden.
	* @default false
	*/
	sm?: gridSize,
	/**
	* If a number, it sets the number of columns the grid item uses.
	* It can't be greater than the total number of columns of the container (12 by default).
	* If 'auto', the grid item's width matches its content.
	* If false, the prop is ignored.
	* If true, the grid item's width grows to use the space available in the grid container.
	* The value is applied for the `xl` breakpoint and wider screens if not overridden.
	* @default false
	*/
	xl?: gridSize,
	/**
	* If a number, it sets the number of columns the grid item uses.
	* It can't be greater than the total number of columns of the container (12 by default).
	* If 'auto', the grid item's width matches its content.
	* If false, the prop is ignored.
	* If true, the grid item's width grows to use the space available in the grid container.
	* The value is applied for all the screen sizes with the lowest priority.
	* @default false
	*/
	xs?: gridSize,
	}

[fhammerschmidt]

Sounds great!

[illusionalsagacity]

Alright, tried out @rescript-mui/material@6.0.0-dev.2 and I seem to only have a few blocking issues, (beyond the obvious GridLegacy change) mostly around the Typography color prop change missing some values from before:

• Inherit
• PrimaryContrastText
• String escape hatch
• SecondaryDark
• SuccessDark
• PrimaryMain -> Primary
• ErrorMain -> Error
• SecondaryMain -> Secondary ?

I think the missing bits are just all these color theme tokens:

rescript-mui/packages/rescript-mui-material/src/types/System.res

Lines 27 to 54 in eeacfae

	| @as("primary.light") PrimaryLight
	| @as("primary.main") PrimaryMain
	| @as("primary.dark") PrimaryDark
	| @as("primary.contrastText") PrimaryContrastText
	| @as("secondary.light") SecondaryLight
	| @as("secondary.main") SecondaryMain
	| @as("secondary.dark") SecondaryDark
	| @as("secondary.contrastText") SecondaryContrastText
	| @as("error.light") ErrorLight
	| @as("error.main") ErrorMain
	| @as("error.dark") ErrorDark
	| @as("error.contrastText") ErrorContrastText
	| @as("warning.light") WarningLight
	| @as("warning.main") WarningMain
	| @as("warning.dark") WarningDark
	| @as("warning.contrastText") WarningContrastText
	| @as("info.light") InfoLight
	| @as("info.main") InfoMain
	| @as("info.dark") InfoDark
	| @as("info.contrastText") InfoContrastText
	| @as("success.light") SuccessLight
	| @as("success.main") SuccessMain
	| @as("success.dark") SuccessDark
	| @as("success.contrastText") SuccessContrastText
	| @as("text.primary") TextPrimary
	| @as("text.secondary") TextSecondary
	| @as("text.disabled") TextDisabled
	| @as("text.hint") TextHint

[illusionalsagacity]

reminder for myself, implement container queries: https://v6.mui.com/material-ui/customization/container-queries/

[fhammerschmidt]

Heads up, I published a 6.0.0 which might still be buggy, but I wanted to continue on the v7 branch. So feel free to continue with master for 6.0.0 for the foreseeable future.