[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.

Note

Running pnpm test:unit locally on this branch breakpoint-ultra-wide and on next both return 272 failed unit tests, which seem to be related to v6.0.0 (example @mui/codemod v6.0.0 dynamic spread sx-v6 should be idempotent:). I am assuming these changes are non-breaking and should not cause any issues. I tested these breakpoints in the playground (docs/pages/playground/index.tsx) with different window widths with the <Grid /> component: <Grid item uw={3} xl={4} md={6} xs={12}>

[AlexJSully]

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/@pigment-css+react@0.0.17_@types+react@18.3.3_react@18.3.1/node_modules/@pigment-css/react/build/theme-DUGebxRn").a | import("/home/runner/work/material-ui/material-ui/node_modules/.pnpm/@pigment-css+react@0.0.17_@types+react@18.3.3_react@18.3.1/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/@pigment-css+react@0.0.17_@types+react@18.3.3_react@18.3.1/node_modules/@pigment-css/react/build/theme-DUGebxRn").a | import("/home/runner/work/material-ui/material-ui/node_modules/.pnpm/@pigment-css+react@0.0.17_@types+react@18.3.3_react@18.3.1/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?