Merge remote-tracking branch 'upstream/master' into docs-scripts-hous…

…ekeeping
mui · Dec 2, 2022 · 10f186a · 10f186a
2 parents a4a4a13 + 1ea442d
commit 10f186a
Show file tree

Hide file tree

Showing 45 changed files with 738 additions and 257 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,6 @@
 [![Follow on Twitter](https://img.shields.io/twitter/follow/MUI_hq.svg?label=follow+MUI)](https://twitter.com/MUI_hq)
 [![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui/material-ui/issues/27062)
 [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui/material-ui.svg)](https://isitmaintained.com/project/mui/material-ui 'Average time to resolve an issue')
-[![Crowdin](https://badges.crowdin.net/material-ui-docs/localized.svg)](https://translate.mui.com/project/material-ui-docs)
 [![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/mui)](https://opencollective.com/mui)
 [![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320)
 
@@ -233,14 +232,6 @@ These great services sponsor MUI's core infrastructure:
 
 [Netlify](https://www.netlify.com/) lets us distribute the documentation.
 
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/crowdin-darkmode.svg">
-  <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/crowdin-lightmode.svg">
-  <img alt="Crowdin logo" src="/docs/public/static/readme/crowdin-darkmode.svg">
-</picture>
-
-[Crowdin](https://crowdin.com/) lets us translate the documentation.
-
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="/docs/public/static/readme/browserstack-darkmode.svg">
   <source media="(prefers-color-scheme: light)" srcset="/docs/public/static/readme/browserstack-lightmode.svg">

diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md
@@ -31,7 +31,7 @@ After [installation](/base/getting-started/installation/), you can start buildin
 
 ```jsx
 import TabUnstyled from '@mui/base/TabUnstyled';
-import TabsListUnstyled from '@mui/base/TabUnstyled';
+import TabsListUnstyled from '@mui/base/TabsListUnstyled';
 import TabPanelUnstyled from '@mui/base/TabPanelUnstyled';
 import TabsUnstyled from '@mui/base/TabsUnstyled';
 

diff --git a/docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.js b/docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.js
@@ -5,10 +5,11 @@ import Typography from '@mui/joy/Typography';
 
 export default function BasicBreadcrumbs() {
   return (
-    <Breadcrumbs separator="›" aria-label="breadcrumbs">
-      {['Fry', 'Leela', 'Bender', 'Linda'].map((item) => (
+    <Breadcrumbs aria-label="breadcrumbs">
+      {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item) => (
         <Link
-          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          // `preventDefault` is for demo purposes
+          // and is generally not needed in your app
           onClick={(event) => event.preventDefault()}
           key={item}
           underline="hover"
@@ -20,7 +21,7 @@ export default function BasicBreadcrumbs() {
         </Link>
       ))}
 
-      <Typography fontSize="inherit">Amy</Typography>
+      <Typography fontSize="inherit">Dr. Zoidberg</Typography>
     </Breadcrumbs>
   );
 }
diff --git a/docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.tsx b/docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.tsx
@@ -5,10 +5,11 @@ import Typography from '@mui/joy/Typography';
 
 export default function BasicBreadcrumbs() {
   return (
-    <Breadcrumbs separator="›" aria-label="breadcrumbs">
-      {['Fry', 'Leela', 'Bender', 'Linda'].map((item: string) => (
+    <Breadcrumbs aria-label="breadcrumbs">
+      {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item: string) => (
         <Link
-          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          // `preventDefault` is for demo purposes
+          // and is generally not needed in your app
           onClick={(event) => event.preventDefault()}
           key={item}
           underline="hover"
@@ -19,7 +20,7 @@ export default function BasicBreadcrumbs() {
           {item}
         </Link>
       ))}
-      <Typography fontSize="inherit">Amy</Typography>
+      <Typography fontSize="inherit">Dr. Zoidberg</Typography>
     </Breadcrumbs>
   );
 }
diff --git a/docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.tsx.preview b/docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.tsx.preview
diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsSizes.js b/docs/data/joy/components/breadcrumbs/BreadcrumbsSizes.js
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Link from '@mui/joy/Link';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+
+export default function BreadcrumbsSizes() {
+  return (
+    <Stack sx={{ display: 'flex', alignItems: 'center' }}>
+      <Breadcrumbs separator="—" aria-label="breadcrumbs" size="sm">
+        {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item) => (
+          <Link
+            // `preventDefault` is for demo purposes
+            // and is generally not needed in your app
+            onClick={(event) => event.preventDefault()}
+            key={item}
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
+            href="/"
+          >
+            {item}
+          </Link>
+        ))}
+
+        <Typography fontSize="inherit">Dr. Zoidberg</Typography>
+      </Breadcrumbs>
+      <Breadcrumbs separator="—" aria-label="breadcrumbs" size="md">
+        {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item) => (
+          <Link
+            // `preventDefault` is for demo purposes
+            // and is generally not needed in your app
+            onClick={(event) => event.preventDefault()}
+            key={item}
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
+            href="/"
+          >
+            {item}
+          </Link>
+        ))}
+
+        <Typography fontSize="inherit">Dr. Zoidberg</Typography>
+      </Breadcrumbs>
+      <Breadcrumbs separator="—" aria-label="breadcrumbs" size="lg">
+        {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item) => (
+          <Link
+            // `preventDefault` is for demo purposes
+            // and is generally not needed in your app
+            onClick={(event) => event.preventDefault()}
+            key={item}
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
+            href="/"
+          >
+            {item}
+          </Link>
+        ))}
+
+        <Typography fontSize="inherit">Dr. Zoidberg</Typography>
+      </Breadcrumbs>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsSizes.tsx b/docs/data/joy/components/breadcrumbs/BreadcrumbsSizes.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Link from '@mui/joy/Link';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+
+export default function BreadcrumbsSizes() {
+  return (
+    <Stack sx={{ display: 'flex', alignItems: 'center' }}>
+      <Breadcrumbs separator="—" aria-label="breadcrumbs" size="sm">
+        {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item: string) => (
+          <Link
+            // `preventDefault` is for demo purposes
+            // and is generally not needed in your app
+            onClick={(event) => event.preventDefault()}
+            key={item}
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
+            href="/"
+          >
+            {item}
+          </Link>
+        ))}
+        <Typography fontSize="inherit">Dr. Zoidberg</Typography>
+      </Breadcrumbs>
+      <Breadcrumbs separator="—" aria-label="breadcrumbs" size="md">
+        {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item: string) => (
+          <Link
+            // `preventDefault` is for demo purposes
+            // and is generally not needed in your app
+            onClick={(event) => event.preventDefault()}
+            key={item}
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
+            href="/"
+          >
+            {item}
+          </Link>
+        ))}
+        <Typography fontSize="inherit">Dr. Zoidberg</Typography>
+      </Breadcrumbs>
+      <Breadcrumbs separator="—" aria-label="breadcrumbs" size="lg">
+        {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item: string) => (
+          <Link
+            // `preventDefault` is for demo purposes
+            // and is generally not needed in your app
+            onClick={(event) => event.preventDefault()}
+            key={item}
+            underline="hover"
+            color="neutral"
+            fontSize="inherit"
+            href="/"
+          >
+            {item}
+          </Link>
+        ))}
+        <Typography fontSize="inherit">Dr. Zoidberg</Typography>
+      </Breadcrumbs>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsVariables.js b/docs/data/joy/components/breadcrumbs/BreadcrumbsVariables.js
@@ -18,7 +18,8 @@ export default function BreadcrumbsVariables() {
         <Breadcrumbs sx={sx}>
           {['Menu 1', 'Menu 2'].map((item) => (
             <Link
-              // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+              // `preventDefault` is for demo purposes
+              // and is generally not needed in your app
               onClick={(event) => event.preventDefault()}
               key={item}
               underline="hover"

diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsVariables.tsx b/docs/data/joy/components/breadcrumbs/BreadcrumbsVariables.tsx
@@ -18,7 +18,8 @@ export default function BreadcrumbsVariables() {
         <Breadcrumbs sx={sx}>
           {['Menu 1', 'Menu 2'].map((item: string) => (
             <Link
-              // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+              // `preventDefault` is for demo purposes
+              // and is generally not needed in your app
               onClick={(event) => event.preventDefault()}
               key={item}
               underline="hover"

diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsWithIcon.js b/docs/data/joy/components/breadcrumbs/BreadcrumbsWithIcon.js
@@ -1,4 +1,4 @@
-import HomeIcon from '@mui/icons-material/Home';
+import PublicIcon from '@mui/icons-material/Public';
 import * as React from 'react';
 import Breadcrumbs from '@mui/joy/Breadcrumbs';
 import Link from '@mui/joy/Link';
@@ -8,31 +8,33 @@ export default function BreadcrumbsWithIcon() {
   return (
     <Breadcrumbs separator="›" aria-label="breadcrumbs">
       <Link
-        // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+        // `preventDefault` is for demo purposes
+        // and is generally not needed in your app
         onClick={(event) => event.preventDefault()}
         underline="hover"
         color="primary"
         fontSize="inherit"
         href="/"
       >
-        <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
-        Jake
+        <PublicIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+        United States
       </Link>
-      {['Rosa', 'Charles'].map((item) => (
+      {['Springfield', 'Simpson'].map((item) => (
         <Link
-          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          // `preventDefault` is for demo purposes
+          // and is generally not needed in your app
           onClick={(event) => event.preventDefault()}
           key={item}
           underline="hover"
-          color="primary"
+          color="success"
           fontSize="inherit"
           href="/"
         >
           {item}
         </Link>
       ))}
 
-      <Typography fontSize="inherit">Hitchcock</Typography>
+      <Typography fontSize="inherit">Homer</Typography>
     </Breadcrumbs>
   );
 }
diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsWithIcon.tsx b/docs/data/joy/components/breadcrumbs/BreadcrumbsWithIcon.tsx
@@ -1,4 +1,4 @@
-import HomeIcon from '@mui/icons-material/Home';
+import PublicIcon from '@mui/icons-material/Public';
 import * as React from 'react';
 import Breadcrumbs from '@mui/joy/Breadcrumbs';
 import Link from '@mui/joy/Link';
@@ -8,30 +8,32 @@ export default function BreadcrumbsWithIcon() {
   return (
     <Breadcrumbs separator="›" aria-label="breadcrumbs">
       <Link
-        // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+        // `preventDefault` is for demo purposes
+        // and is generally not needed in your app
         onClick={(event) => event.preventDefault()}
         underline="hover"
         color="primary"
         fontSize="inherit"
         href="/"
       >
-        <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
-        Jake
+        <PublicIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+        United States
       </Link>
-      {['Rosa', 'Charles'].map((item: string) => (
+      {['Springfield', 'Simpson'].map((item: string) => (
         <Link
-          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          // `preventDefault` is for demo purposes
+          // and is generally not needed in your app
           onClick={(event) => event.preventDefault()}
           key={item}
           underline="hover"
-          color="primary"
+          color="success"
           fontSize="inherit"
           href="/"
         >
           {item}
         </Link>
       ))}
-      <Typography fontSize="inherit">Hitchcock</Typography>
+      <Typography fontSize="inherit">Homer</Typography>
     </Breadcrumbs>
   );
 }
diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.js b/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.js
@@ -31,7 +31,8 @@ export default function BreadcrumbsWithMenu() {
       </Menu>
       <Breadcrumbs aria-label="breadcrumbs">
         <Link
-          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          // `preventDefault` is for demo purposes
+          // and is generally not needed in your app
           onClick={(event) => event.preventDefault()}
           underline="hover"
           color="primary"
@@ -44,7 +45,8 @@ export default function BreadcrumbsWithMenu() {
           •••
         </Button>
         <Link
-          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          // `preventDefault` is for demo purposes
+          // and is generally not needed in your app
           onClick={(event) => event.preventDefault()}
           underline="hover"
           color="primary"
@@ -54,7 +56,8 @@ export default function BreadcrumbsWithMenu() {
           Breadcrumb 5
         </Link>
         <Link
-          // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
+          // `preventDefault` is for demo purposes
+          // and is generally not needed in your app
           onClick={(event) => event.preventDefault()}
           underline="hover"
           color="primary"