[docs] Revise and expand Joy UI "Breadcrumbs" page (#35292)

Signed-off-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
mui · Dec 1, 2022 · 1ea442d · 1ea442d
1 parent 2f7afc2
commit 1ea442d
Show file tree

Hide file tree

Showing 17 changed files with 266 additions and 112 deletions.
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"

diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.tsx b/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.tsx
@@ -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"

diff --git a/...nents/breadcrumbs/CollapsedBreadcrumbs.js → ...nents/breadcrumbs/CondensedBreadcrumbs.js b/...nents/breadcrumbs/CollapsedBreadcrumbs.js → ...nents/breadcrumbs/CondensedBreadcrumbs.js
@@ -5,8 +5,8 @@ import Link from '@mui/joy/Link';
 import Typography from '@mui/joy/Typography';
 import * as React from 'react';
 
-export default function CollapsedBreadcrumbs() {
-  const [collapsed, setCollapsed] = React.useState(true);
+export default function CondensedBreadcrumbs() {
+  const [condensed, setCondensed] = React.useState(true);
   const [navigationItems, setNavigationItems] = React.useState([
     'Programs',
     'Files',
@@ -15,12 +15,12 @@ export default function CollapsedBreadcrumbs() {
 
   return (
     <Breadcrumbs separator="›" aria-label="breadcrumbs">
-      {collapsed ? (
+      {condensed ? (
         <Button
           size="sm"
           onClick={() => {
             setNavigationItems((prev) => ['Root', 'Home', ...prev]);
-            setCollapsed(false);
+            setCondensed(false);
           }}
           variant="plain"
           color="info"