[material-ui][breakpoints] Add ultra-wide breakpoint

[AlexJSully]

Added an ultra-wide breakpoint to be used within the Material-UI . The uw (ultra-wide) breakpoint is set to 2560px.

The intent behind this new breakpoint is to enable the <Grid /> component to be more responsive on ultra-wide monitors. This provides a distinct layout experience for users with ultra-wide screens, different from the xl breakpoint.

The uw naming was chosen over xxl to maintain consistency with the two-letter format used for other breakpoints and to clearly distinguish it from the xl breakpoint.

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

[AlexJSully]

Note

This comment is out of date, please see comment below

Hi @siriwatknp & @brijeshb42 (sorry if tagged wrong people, just look at Git file history). I have a question regarding the Pigment CSS package which is causing this PR to fail in the CI / test-dev.

Essentially, the <Hidden /> component in the HiddenCss from PigmentHidden.tsx is grabbing the breakpoint from the Pigment-CSS package over the local breakpoint that I've updated with the new uw breakpoint.

Error:

  Error: src/PigmentHidden/PigmentHidden.tsx(173,11): error TS2769: No overload matches this call.
    Overload 1 of 2, '(props: PolymorphicComponentProps<HiddenBaseProps, undefined, object>): Element', gave the following error.
      Type '{ children?: ReactNode; implementation?: "js" | "css" | undefined; initialWidth?: Breakpoint | undefined; lgDown?: boolean | undefined; lgUp?: boolean | undefined; ... 11 more ...; className: string; }' is not assignable to type 'Omit<Substitute<HiddenBaseProps, object>, "as" | "component">'.
        Types of property 'only' are incompatible.
          Type 'import("/home/runner/work/material-ui/material-ui/packages/mui-system/src/createTheme/createBreakpoints").Breakpoint | import("/home/runner/work/material-ui/material-ui/packages/mui-system/src/createTheme/createBreakpoints").Breakpoint[] | undefined' is not assignable to type 'import("/home/runner/work/material-ui/material-ui/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@pigment-css/react/build/theme-DUGebxRn").a | import("/home/runner/work/material-ui/material-ui/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/no...'.
            Type '"uw"' is not assignable to type 'Breakpoint | Breakpoint[] | undefined'.
    Overload 2 of 2, '(props: HiddenBaseProps): ReactNode', gave the following error.
      Type '{ children?: ReactNode; implementation?: "js" | "css" | undefined; initialWidth?: Breakpoint | undefined; lgDown?: boolean | undefined; lgUp?: boolean | undefined; ... 11 more ...; className: string; }' is not assignable to type 'HiddenBaseProps'.
        Types of property 'only' are incompatible.
          Type 'import("/home/runner/work/material-ui/material-ui/packages/mui-system/src/createTheme/createBreakpoints").Breakpoint | import("/home/runner/work/material-ui/material-ui/packages/mui-system/src/createTheme/createBreakpoints").Breakpoint[] | undefined' is not assignable to type 'import("/home/runner/work/material-ui/material-ui/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@pigment-css/react/build/theme-DUGebxRn").a | import("/home/runner/work/material-ui/material-ui/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/no...'.
  buildTypes.mjs

I've tried to update the Pigment CSS package with the new uw breakpoint (draft PR #178) but that package depends on this package having the new breakpoint while this package depends on that package having the uw breakpoint which leads to a loop of each package depending on the other having this breakpoint, leading to this PR failing its CI build and the pigment CSS failing its unit tests.

Any advice on how to resolve this issue?

[AlexJSully]

Hi @siriwatknp & @brijeshb42 . In hopes to fix the failing CI / test-dev, the following PR in pigment-css is created to hopefully address the above issue: #178

[siriwatknp]

Thanks for submitting the PR. Even though this is a nice improvement but it comes with a cost for traversing the breakpoints especially in the sx prop.

This won't matter much with Pigment CSS integration but I'd hold this until v7 because ultra-wide customization is not a major use cases.

[AlexJSully]

Thanks for submitting the PR. Even though this is a nice improvement but it comes with a cost for traversing the breakpoints especially in the sx prop.

This won't matter much with Pigment CSS integration but I'd hold this until v7 because ultra-wide customization is not a major use cases.

@siriwatknp Thank you for your feedback and considering the PR! I'm happy to keep this PR on hold until v7 and would be more than willing to help with any necessary adjustments or updates when you're ready to revisit this feature. Feel free to ping me whenever the time comes!