Merge branch 'master' into docs/table-components

mui · Sep 16, 2024 · 7264dd9 · 7264dd9
2 parents d500a80 + a1eec4f
commit 7264dd9
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 7 deletions.
diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md
@@ -94,7 +94,7 @@ You can learn more about this in the [overrides documentation page](/material-ui
 
 ### Music player
 
-{{"demo": "MusicPlayerSlider.js"}}
+{{"demo": "MusicPlayerSlider.js", "bg": "inline"}}
 
 ## Vertical sliders
 

diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js
@@ -237,7 +237,7 @@ function ColorTool() {
             onChange={handleChangeShade(intent)}
             aria-labelledby={`${intent}ShadeSliderLabel`}
           />
-          <Typography>{shades[intentShade]}</Typography>
+          <Typography minWidth={40}>{shades[intentShade]}</Typography>
         </Box>
         <Box sx={{ width: 192 }}>
           {hues.map((hue) => {

diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md
@@ -25,7 +25,7 @@ Feel free to submit a pull request!
 
 ### Layout
 
-- [MUI Treasury Layout](https://mui-treasury.com/?path=/docs/layout-introduction--docs): Components to handle the overall layout of a page. Check out examples such as [a legacy.reactjs.org clone](https://mui-treasury.com/?path=/story/layout-app-reactlegacy--react-legacy).
+- [MUI Treasury Layout](https://mui-treasury.com/?path=/docs/layout-v6-introduction--docs): Components to handle the overall layout of a page. Check out examples such as [a legacy.reactjs.org clone](https://mui-treasury.com/?path=/story/layout-v6-app-react-legacy--react-legacy).
 
 ### Image
 

diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md
@@ -16,7 +16,8 @@ For types to work, it's recommended that you have at least the following options
     "lib": ["es6", "dom"],
     "noImplicitAny": true,
     "noImplicitThis": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "allowSyntheticDefaultImports": true
   }
 }
 ```

diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -56,6 +56,8 @@ You can also manually update your components as shown in the snippet below:
 +<Button sx={{ mr: 2 }}>
 ```
 
+The `sx` prop supports all features of system props: callbacks with access to the theme, responsive values, direct access to theme values, shorthands, etc.
+
 ### Theme component variants
 
 Custom component variants defined in the theme are now merged with the theme style overrides, defined within the `root` slot of the component.

diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -360,6 +360,25 @@ As the `ListItem` no longer supports these props, the class names related to the
 
 In v6, the `children` prop passed to the Loading Button component is now wrapped in a `<span>` tag to avoid [issues](https://github.com/mui/material-ui/issues/27853) when using tools to translate websites.
 
+### Typography
+
+The `color` prop in the `Typography` component is not a [system prop](https://mui.com/system/properties/) anymore. You can use the `sx` prop instead:
+
+```diff
+-<Typography color={(theme) => theme.palette.primary.main}>
++<Typography sx={{ color: (theme) => theme.palette.primary.main }}>
+```
+
+:::info
+System props have been deprecated in favor of the `sx` prop. Check the [migration guide](/material-ui/migration/migrating-from-deprecated-apis/#system-props) for more information.
+:::
+
+You still can access some theme colors directly using the `color` prop. Check the [Typography component API page](/material-ui/api/typography/#typography-prop-color) for the whole list of colors.
+
+```jsx
+<Typography color="textSecondary">Secondary text</Typography>
+```
+
 ### useMediaQuery types
 
 The following deprecated types are removed in v6:

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
@@ -588,7 +588,7 @@ const rowHeaders: Record<string, React.ReactNode> = {
   // charts - features
   'charts/legend': <ColumnHead label="Legend" href="/x/react-charts/legend/" />,
   'charts/tooltip': <ColumnHead label="Tooltip" href="/x/react-charts/tooltip/" />,
-  'charts/zoom-and-pan': <ColumnHead label="Zoom and Pan" href="/x/react-charts/zoom-and-pan/" />,
+  'charts/zoom-and-pan': <ColumnHead label="Zoom & Pan" href="/x/react-charts/zoom-and-pan/" />,
   'charts/export': <ColumnHead label="Export" />,
   // charts - datagrid
   'charts/cell-with-charts': (

diff --git a/examples/material-ui-nextjs-ts/next-env.d.ts b/examples/material-ui-nextjs-ts/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/examples/material-ui-pigment-css-nextjs-ts/next-env.d.ts b/examples/material-ui-pigment-css-nextjs-ts/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.