Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
Dec 1, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2d63b3d
gh label, style first pass
mapache-salvaje Nov 29, 2022
a1e496b
intro
mapache-salvaje Nov 29, 2022
082f838
basic bread
mapache-salvaje Nov 29, 2022
23ed962
sizes, separator
mapache-salvaje Nov 29, 2022
8cb303e
usage with link and typog
mapache-salvaje Nov 29, 2022
d00c452
condensed not collapsed, common examples
mapache-salvaje Nov 29, 2022
bf5395c
accessibility
mapache-salvaje Nov 29, 2022
6d7ea51
anatomy
mapache-salvaje Nov 29, 2022
b7e4130
Cleanup
mapache-salvaje Nov 29, 2022
51c61c9
Apply suggestions from code review
mapache-salvaje Nov 30, 2022
1173389
update demo name
mapache-salvaje Nov 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -20,7 +21,7 @@ export default function BasicBreadcrumbs() {
</Link>
))}

<Typography fontSize="inherit">Amy</Typography>
<Typography fontSize="inherit">Dr. Zoidberg</Typography>
</Breadcrumbs>
);
}
9 changes: 5 additions & 4 deletions docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -19,7 +20,7 @@ export default function BasicBreadcrumbs() {
{item}
</Link>
))}
<Typography fontSize="inherit">Amy</Typography>
<Typography fontSize="inherit">Dr. Zoidberg</Typography>
</Breadcrumbs>
);
}
16 changes: 0 additions & 16 deletions docs/data/joy/components/breadcrumbs/BasicBreadcrumbs.tsx.preview
View file
Open in desktop

This file was deleted.

66 changes: 66 additions & 0 deletions docs/data/joy/components/breadcrumbs/BreadcrumbsSizes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
63 changes: 63 additions & 0 deletions docs/data/joy/components/breadcrumbs/BreadcrumbsSizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
3 changes: 2 additions & 1 deletion docs/data/joy/components/breadcrumbs/BreadcrumbsVariables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
3 changes: 2 additions & 1 deletion docs/data/joy/components/breadcrumbs/BreadcrumbsVariables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
18 changes: 10 additions & 8 deletions docs/data/joy/components/breadcrumbs/BreadcrumbsWithIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
);
}
18 changes: 10 additions & 8 deletions docs/data/joy/components/breadcrumbs/BreadcrumbsWithIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
);
}
9 changes: 6 additions & 3 deletions docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
9 changes: 6 additions & 3 deletions docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
8 changes: 4 additions & 4 deletions ...nents/breadcrumbs/CollapsedBreadcrumbs.js → ...nents/breadcrumbs/CondensedBreadcrumbs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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"
Expand Down
Loading