Merge branch 'master' into migrate-tslint-to-eslint

mui · Dec 5, 2023 · 34d004e · 34d004e
2 parents 5466dc7 + 237630b
commit 34d004e
Show file tree

Hide file tree

Showing 25 changed files with 267 additions and 227 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,42 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.20
+
+<!-- generated comparing v5.14.19..master -->
+
+_Dec 5, 2023_
+
+A big thanks to the 14 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material-next@6.0.0-alpha.112`
+
+- &#8203;<!-- 07 -->[Menu] Enable again the usage of the autoFocus prop (#39960) @mnajdova
+- &#8203;<!-- 06 -->[ProgressIndicator] Apply MD3 style to `CircularProgress` (#39825) @lhilgert9
+
+### Docs
+
+- &#8203;<!-- 15 -->Remove outdated showcase (#40063) @oliviertassinari
+- &#8203;<!-- 14 -->Support yaml as prism language (#40044) @Janpot
+- &#8203;<!-- 12 -->[material-ui] Fix SearchAppBar width on `sm` screens (#40049) @DiegoAndai
+- &#8203;<!-- 11 -->[material-ui] Update the basic Grid section copy (#40035) @REX500
+- &#8203;<!-- 10 -->[material-ui] Add a react-admin example project (#39972) @fzaninotto
+- &#8203;<!-- 09 -->[material-ui][TextField] Add a performance section (#39692) @anle9650
+- &#8203;<!-- 05 -->[material-ui][tabs] Refine scrollable tabs description (#40037) @zanivan
+- &#8203;<!-- 08 -->[system] Fix typo on the CSS theme variables page (#40040) @caweidmann
+
+### Core
+
+- &#8203;<!-- 17 -->[blog] Fix scrollbar on mobile (#40057) @oliviertassinari
+- &#8203;<!-- 16 -->[blog] Fix link to charts getting started page (#40043) @alexfauquette
+- &#8203;<!-- 13 -->[docs-infra] Simplify CSS classes extraction in API docs generator (#39808) @michaldudak
+- &#8203;<!-- 04 -->[website] Polish dark mode colors (#40052) @danilo-leal
+- &#8203;<!-- 03 -->[website] Add why Design Engineer for data grid (#40016) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Add stray fixes to the Base UI page (#40051) @danilo-leal
+- &#8203;<!-- 01 -->[website] Revise the Developer Advocate job posting (#39210) @samuelsycamore
+
+All contributors of this release in alphabetical order: @alexfauquette, @anle9650, @caweidmann, @danilo-leal, @DiegoAndai, @fzaninotto, @Janpot, @lhilgert9, @michaldudak, @mnajdova, @oliviertassinari, @REX500, @samuelsycamore, @zanivan
+
 ## 5.14.19
 
 <!-- generated comparing v5.14.18..master -->

diff --git a/benchmark/package.json b/benchmark/package.json
@@ -15,9 +15,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.19",
-    "@mui/styles": "^5.14.19",
-    "@mui/system": "^5.14.19",
+    "@mui/material": "^5.14.20",
+    "@mui/styles": "^5.14.20",
+    "@mui/system": "^5.14.20",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "docs": "^5.0.0",

diff --git a/docs/data/material/customization/typography/ResponsiveFontSizesChart.js b/docs/data/material/customization/typography/ResponsiveFontSizesChart.js
@@ -5,16 +5,7 @@ import * as React from 'react';
 import { convertLength } from '@mui/material/styles/cssUtils';
 import { createTheme, responsiveFontSizes } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import {
-  Legend,
-  Tooltip,
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  Label,
-  ResponsiveContainer,
-} from 'recharts';
+import { LineChart } from '@mui/x-charts';
 
 let theme = createTheme();
 theme = responsiveFontSizes(theme);
@@ -34,76 +25,85 @@ export default function ResponsiveFontSizesChart() {
   const convert = convertLength(theme.typography.htmlFontSize);
   const toPx = (rem) => parseFloat(convert(rem, 'px'));
 
-  const series = variants.map((variantName) => {
-    const variant = theme.typography[variantName];
-    const data = [];
-
-    data.push({
-      viewport: 0,
-      fontSize: toPx(variant.fontSize),
-    });
-
-    theme.breakpoints.keys.forEach((key) => {
-      const viewport = theme.breakpoints.values[key];
-      const value = theme.breakpoints.up(key);
+  let dataset = theme.breakpoints.keys.map((key) => {
+    const viewport = theme.breakpoints.values[key];
+    const value = theme.breakpoints.up(key);
 
+    const rep = { viewport };
+    variants.forEach((variantName) => {
+      const variant = theme.typography[variantName];
       if (variant[value]) {
-        data.push({
-          viewport: viewport - 1,
-          fontSize: data[data.length - 1].fontSize,
-        });
-        data.push({
-          viewport,
-          fontSize: toPx(variant[value].fontSize),
-        });
-      } else if (key === 'xl') {
-        data.push({
-          viewport,
-          fontSize: data[data.length - 1].fontSize,
-        });
+        const fontSize = toPx(variant[value].fontSize);
+        rep[variantName] = fontSize;
+      } else if (viewport === 0) {
+        const fontSize = toPx(variant.fontSize);
+        rep[variantName] = fontSize;
       }
     });
-
-    return {
-      name: variantName,
-      data,
-    };
+    return rep;
   });
 
+  dataset = [
+    ...dataset.slice(0, dataset.length - 1),
+    {
+      ...dataset[dataset.length - 2],
+      viewport: dataset[dataset.length - 1].viewport,
+
+      subtitle1: dataset[0].subtitle1,
+    },
+  ];
+
   return (
     <Box sx={{ height: 380, width: '100%', color: 'black' }}>
-      <ResponsiveContainer>
-        <LineChart
-          margin={{
-            top: 50,
-            right: 140,
-            bottom: 0,
-            left: 30,
-          }}
-        >
-          <XAxis dataKey="viewport" type="number">
-            <Label position="right" offset={30}>
-              viewport (px)
-            </Label>
-          </XAxis>
-          <YAxis dataKey="fontSize" type="number">
-            <Label position="top" offset={20}>
-              font-size (px)
-            </Label>
-          </YAxis>
-          <Tooltip />
-          <Legend />
-          {series.map((serie, index) => (
-            <Line
-              dataKey="fontSize"
-              stroke={colors[index % colors.length]}
-              data={serie.data}
-              name={serie.name}
-              key={serie.name}
-            />
-          ))}
-        </LineChart>
-      </ResponsiveContainer>
+      <LineChart
+        dataset={dataset}
+        series={variants.map((variantName) => ({
+          curve: 'stepAfter',
+          dataKey: variantName,
+          label: variantName,
+          connectNulls: true,
+        }))}
+        xAxis={[
+          {
+            scaleType: 'linear',
+            dataKey: 'viewport',
+            valueFormatter: (v) => v.toString(),
+            tickNumber: 10,
+            max: 1600,
+            tickLabelStyle: { fontSize: 15 },
+            label: 'viewport (px)',
+          },
+        ]}
+        yAxis={[
+          {
+            valueFormatter: (v) => v.toString(),
+            tickNumber: 5,
+            min: 0,
+            max: 100,
+            tickLabelStyle: { fontSize: 15 },
+            labelStyle: {
+              fontSize: 15,
+            },
+            label: 'font-size (px)',
+          },
+        ]}
+        colors={colors}
+        margin={{ left: 70 }}
+        sx={{
+          [`.MuiChartsAxis-left .MuiChartsAxis-label`]: {
+            transform: 'translateX(-5px)',
+          },
+          [`.MuiChartsAxis-bottom .MuiChartsAxis-label`]: {
+            transform: 'translateY(5px)',
+          },
+          [`.MuiChartsAxis-root text`]: {
+            fill: '#808080',
+          },
+          [`.MuiChartsAxis-root line`]: {
+            stroke: '#808080',
+          },
+        }}
+      />
     </Box>
   );
 }
diff --git a/docs/package.json b/docs/package.json
@@ -32,27 +32,27 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/base": "5.0.0-beta.25",
-    "@mui/docs": "^5.14.19",
+    "@mui/base": "5.0.0-beta.26",
+    "@mui/docs": "^5.14.20",
     "@mui/icons-material": "^5.14.19",
-    "@mui/joy": "5.0.0-beta.16",
-    "@mui/lab": "5.0.0-alpha.154",
+    "@mui/joy": "5.0.0-beta.17",
+    "@mui/lab": "5.0.0-alpha.155",
     "@mui/markdown": "^5.0.0",
-    "@mui/material": "^5.14.19",
-    "@mui/material-next": "6.0.0-alpha.111",
+    "@mui/material": "^5.14.20",
+    "@mui/material-next": "6.0.0-alpha.112",
     "@mui/styled-engine": "^5.14.19",
     "@mui/styled-engine-sc": "6.0.0-alpha.7",
-    "@mui/styles": "^5.14.19",
-    "@mui/system": "^5.14.19",
+    "@mui/styles": "^5.14.20",
+    "@mui/system": "^5.14.20",
     "@mui/types": "^7.2.10",
-    "@mui/utils": "^5.14.19",
-    "@mui/x-charts": "6.18.2",
-    "@mui/x-data-grid": "6.18.2",
-    "@mui/x-data-grid-generator": "6.18.2",
-    "@mui/x-data-grid-premium": "6.18.2",
-    "@mui/x-data-grid-pro": "6.18.2",
-    "@mui/x-date-pickers": "6.18.2",
-    "@mui/x-date-pickers-pro": "6.18.2",
+    "@mui/utils": "^5.14.20",
+    "@mui/x-charts": "6.18.3",
+    "@mui/x-data-grid": "6.18.3",
+    "@mui/x-data-grid-generator": "6.18.3",
+    "@mui/x-data-grid-premium": "6.18.3",
+    "@mui/x-data-grid-pro": "6.18.3",
+    "@mui/x-date-pickers": "6.18.3",
+    "@mui/x-date-pickers-pro": "6.18.3",
     "@mui/x-license-pro": "6.10.2",
     "@mui/x-tree-view": "6.17.0",
     "@popperjs/core": "^2.11.8",