Skip to content

Commit

Permalink
update the keyboard nav/menu/select demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@danilo-leal
danilo-leal committed Feb 7, 2024
1 parent a24c55e commit cb19d5b
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 67 deletions.
83 changes: 50 additions & 33 deletions docs/data/base/getting-started/accessibility/KeyboardNavigation.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
import { Option as BaseOption, optionClasses } from '@mui/base/Option';
import { Dropdown } from '@mui/base/Dropdown';
import { Menu } from '@mui/base/Menu';
import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton';
import { MenuItem as BaseMenuItem, menuItemClasses } from '@mui/base/MenuItem';
import { styled } from '@mui/system';
import { styled, alpha } from '@mui/system';
import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';

export default function KeyboardNavigation() {
return (
Expand All @@ -23,7 +25,7 @@ export default function KeyboardNavigation() {
</Select>

<Dropdown>
<MenuButton>Edit</MenuButton>
<MenuButton>Open menu</MenuButton>
<Menu slots={{ listbox: Listbox }}>
<MenuItem>Cut</MenuItem>
<MenuItem>Copy</MenuItem>
Expand All @@ -36,7 +38,7 @@ export default function KeyboardNavigation() {

const Select = React.forwardRef(function Select(props, ref) {
const slots = {
root: Button,
root: SelectButton,
listbox: Listbox,
popup: Popup,
...props.slots,
Expand All @@ -45,6 +47,21 @@ const Select = React.forwardRef(function Select(props, ref) {
return <BaseSelect {...props} ref={ref} slots={slots} />;
});

const SelectButton = React.forwardRef(function SelectButton(props, ref) {
const { ownerState, ...other } = props;
return (
<StyledSelectButton type="button" {...other} ref={ref}>
{other.children}
<UnfoldMoreRoundedIcon />
</StyledSelectButton>
);
});

SelectButton.propTypes = {
children: PropTypes.node,
ownerState: PropTypes.object.isRequired,
};

const blue = {
50: '#F0F7FF',
100: '#DAECFF',
Expand All @@ -69,8 +86,9 @@ const grey = {
900: '#24292f',
};

const Button = styled('button')(
const StyledSelectButton = styled('button')(
({ theme }) => `
position: relative;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
Expand All @@ -79,36 +97,34 @@ const Button = styled('button')(
border-radius: 8px;
text-align: left;
line-height: 1.5;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
background: ${theme.palette.mode === 'dark' ? alpha(grey[900], 0.4) : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
box-shadow: 0px 2px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.2)' : 'rgba(0,0,0, 0.1)'
};
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;
&:hover {
background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
}
&.${selectClasses.focusVisible} {
outline: 0;
border-color: ${blue[400]};
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
&.${selectClasses.expanded} {
&::after {
content: '▴';
}
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}
&::after {
content: '▾';
float: right;
& > svg {
font-size: 1rem;
position: absolute;
height: 100%;
top: 0;
right: 10px;
}
`,
);
Expand All @@ -120,14 +136,14 @@ const Listbox = styled('ul')(
box-sizing: border-box;
padding: 6px;
margin: 12px 0;
min-width: 150px;
min-width: 200px;
border-radius: 12px;
overflow: auto;
outline: 0px;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 6px ${
box-shadow: 0px 2px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
};
`,
Expand All @@ -154,15 +170,15 @@ const Option = styled(BaseOption)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&:focus-visible {
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}
&.${optionClasses.highlighted}.${optionClasses.selected} {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&:focus-visible {
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}
&.${optionClasses.disabled} {
color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
}
Expand Down Expand Up @@ -212,18 +228,19 @@ const MenuButton = styled(BaseMenuButton)(
border-radius: 8px;
padding: 8px 16px;
line-height: 1.5;
background: transparent;
background: ${
theme.palette.mode === 'dark' ? alpha(grey[900], 0.5) : alpha(grey[50], 0.5)
};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
cursor: pointer;
color: ${theme.palette.mode === 'dark' ? grey[200] : grey[800]};
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;
&:hover {
background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[300]};
}
&:focus-visible {
Expand All @@ -235,7 +252,7 @@ const MenuButton = styled(BaseMenuButton)(

const Container = styled('div')`
display: flex;
gap: 10px;
gap: 12px;
`;

const Popup = styled('div')`
Expand Down
90 changes: 56 additions & 34 deletions docs/data/base/getting-started/accessibility/KeyboardNavigation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import * as React from 'react';
import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
import {
Select as BaseSelect,
SelectProps,
SelectRootSlotProps,
selectClasses,
} from '@mui/base/Select';
import { Option as BaseOption, optionClasses } from '@mui/base/Option';
import { Dropdown } from '@mui/base/Dropdown';
import { Menu } from '@mui/base/Menu';
import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton';
import { MenuItem as BaseMenuItem, menuItemClasses } from '@mui/base/MenuItem';
import { styled } from '@mui/system';
import { styled, alpha } from '@mui/system';
import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';

export default function KeyboardNavigation() {
return (
Expand All @@ -23,7 +29,7 @@ export default function KeyboardNavigation() {
</Select>

<Dropdown>
<MenuButton>Edit</MenuButton>
<MenuButton>Open menu</MenuButton>
<Menu slots={{ listbox: Listbox }}>
<MenuItem>Cut</MenuItem>
<MenuItem>Copy</MenuItem>
Expand All @@ -39,7 +45,7 @@ const Select = React.forwardRef(function Select<
Multiple extends boolean,
>(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
const slots: SelectProps<TValue, Multiple>['slots'] = {
root: Button,
root: SelectButton,
listbox: Listbox,
popup: Popup,
...props.slots,
Expand All @@ -50,6 +56,22 @@ const Select = React.forwardRef(function Select<
props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
) => JSX.Element;

const SelectButton = React.forwardRef(function SelectButton<
TValue extends {},
Multiple extends boolean,
>(
props: SelectRootSlotProps<TValue, Multiple>,
ref: React.ForwardedRef<HTMLButtonElement>,
) {
const { ownerState, ...other } = props;
return (
<StyledSelectButton type="button" {...other} ref={ref}>
{other.children}
<UnfoldMoreRoundedIcon />
</StyledSelectButton>
);
});

const blue = {
50: '#F0F7FF',
100: '#DAECFF',
Expand All @@ -74,8 +96,9 @@ const grey = {
900: '#24292f',
};

const Button = styled('button')(
const StyledSelectButton = styled('button')(
({ theme }) => `
position: relative;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
box-sizing: border-box;
Expand All @@ -84,36 +107,34 @@ const Button = styled('button')(
border-radius: 8px;
text-align: left;
line-height: 1.5;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
background: ${theme.palette.mode === 'dark' ? alpha(grey[900], 0.4) : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
box-shadow: 0px 2px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.2)' : 'rgba(0,0,0, 0.1)'
};
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;
&:hover {
background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
}
&.${selectClasses.focusVisible} {
outline: 0;
border-color: ${blue[400]};
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}
&.${selectClasses.expanded} {
&::after {
content: '▴';
}
}
&::after {
content: '▾';
float: right;
& > svg {
font-size: 1rem;
position: absolute;
height: 100%;
top: 0;
right: 10px;
}
`,
);
Expand All @@ -125,14 +146,14 @@ const Listbox = styled('ul')(
box-sizing: border-box;
padding: 6px;
margin: 12px 0;
min-width: 150px;
min-width: 200px;
border-radius: 12px;
overflow: auto;
outline: 0px;
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 6px ${
box-shadow: 0px 2px 6px ${
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
};
`,
Expand All @@ -159,15 +180,15 @@ const Option = styled(BaseOption)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&:focus-visible {
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}
&.${optionClasses.highlighted}.${optionClasses.selected} {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&:focus-visible {
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
}
&.${optionClasses.disabled} {
color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
}
Expand Down Expand Up @@ -217,18 +238,19 @@ const MenuButton = styled(BaseMenuButton)(
border-radius: 8px;
padding: 8px 16px;
line-height: 1.5;
background: transparent;
background: ${
theme.palette.mode === 'dark' ? alpha(grey[900], 0.5) : alpha(grey[50], 0.5)
};
border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
cursor: pointer;
color: ${theme.palette.mode === 'dark' ? grey[200] : grey[800]};
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 120ms;
&:hover {
background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[300]};
}
&:focus-visible {
Expand All @@ -240,7 +262,7 @@ const MenuButton = styled(BaseMenuButton)(

const Container = styled('div')`
display: flex;
gap: 10px;
gap: 12px;
`;

const Popup = styled('div')`
Expand Down

0 comments on commit cb19d5b

Please sign in to comment.