Skip to content

Commit

Permalink
[joy-ui][docs] Fix menu in color inversion header demo (#39785)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sai6855
sai6855 authored Nov 9, 2023
1 parent 22f9c29 commit 05652f6
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 96 deletions.
96 changes: 48 additions & 48 deletions docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import * as React from 'react';
import Badge from '@mui/joy/Badge';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Dropdown from '@mui/joy/Dropdown';
import Input from '@mui/joy/Input';
import IconButton from '@mui/joy/IconButton';
import ListDivider from '@mui/joy/ListDivider';
import ListItemDecorator from '@mui/joy/ListItemDecorator';
import Menu from '@mui/joy/Menu';
import MenuButton from '@mui/joy/MenuButton';
import MenuItem from '@mui/joy/MenuItem';
import Typography from '@mui/joy/Typography';
import Sheet from '@mui/joy/Sheet';
Expand All @@ -19,7 +21,6 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded';

export default function ColorInversionHeader() {
const [anchorEl, setAnchorEl] = React.useState(null);
const [color, setColor] = React.useState('primary');
return (
<Sheet
Expand Down Expand Up @@ -52,53 +53,52 @@ export default function ColorInversionHeader() {
<ColorLensRoundedIcon fontSize="small" />
</IconButton>
<Box sx={{ flex: 1, display: 'flex', gap: 1, px: 2 }}>
<Chip
variant="outlined"
onClick={(event) => {
setAnchorEl(event.currentTarget);
}}
endDecorator={<KeyboardArrowDownIcon />}
>
Main
</Chip>
<Menu
variant="outlined"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
placement="bottom-start"
disablePortal
size="sm"
sx={{
'--ListItemDecorator-size': '24px',
'--ListItem-minHeight': '40px',
'--ListDivider-gap': '4px',
minWidth: 200,
}}
>
<MenuItem onClick={() => setAnchorEl(null)}>
<ListItemDecorator>
<BubbleChartIcon />
</ListItemDecorator>
Products
</MenuItem>
<ListDivider />
<MenuItem onClick={() => setAnchorEl(null)}>Pricing</MenuItem>
<MenuItem onClick={() => setAnchorEl(null)}>
Case studies{' '}
<Chip
variant="outlined"
size="sm"
sx={{
ml: 'auto',
bgcolor: (theme) =>
`rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
}}
>
Beta
</Chip>
</MenuItem>
</Menu>
<Dropdown>
<MenuButton
sx={{
'--Button-radius': '1.5rem',
}}
variant="outlined"
endDecorator={<KeyboardArrowDownIcon />}
>
Main
</MenuButton>
<Menu
variant="outlined"
placement="bottom-start"
disablePortal
size="sm"
sx={{
'--ListItemDecorator-size': '24px',
'--ListItem-minHeight': '40px',
'--ListDivider-gap': '4px',
minWidth: 200,
}}
>
<MenuItem>
<ListItemDecorator>
<BubbleChartIcon />
</ListItemDecorator>
Products
</MenuItem>
<ListDivider />
<MenuItem>Pricing</MenuItem>
<MenuItem>
Case studies{' '}
<Chip
variant="outlined"
size="sm"
sx={{
ml: 'auto',
bgcolor: (theme) =>
`rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
}}
>
Beta
</Chip>
</MenuItem>
</Menu>
</Dropdown>
</Box>
<Box sx={{ display: 'flex', flexShrink: 0, gap: 2 }}>
<Button
Expand Down
96 changes: 48 additions & 48 deletions docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ import { ColorPaletteProp } from '@mui/joy/styles';
import Badge from '@mui/joy/Badge';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Dropdown from '@mui/joy/Dropdown';
import Input from '@mui/joy/Input';
import IconButton from '@mui/joy/IconButton';
import ListDivider from '@mui/joy/ListDivider';
import ListItemDecorator from '@mui/joy/ListItemDecorator';
import Menu from '@mui/joy/Menu';
import MenuButton from '@mui/joy/MenuButton';
import MenuItem from '@mui/joy/MenuItem';
import Typography from '@mui/joy/Typography';
import Sheet from '@mui/joy/Sheet';
Expand All @@ -19,7 +21,6 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded';

export default function ColorInversionHeader() {
const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
const [color, setColor] = React.useState<ColorPaletteProp>('primary');
return (
<Sheet
Expand Down Expand Up @@ -57,53 +58,52 @@ export default function ColorInversionHeader() {
<ColorLensRoundedIcon fontSize="small" />
</IconButton>
<Box sx={{ flex: 1, display: 'flex', gap: 1, px: 2 }}>
<Chip
variant="outlined"
onClick={(event) => {
setAnchorEl(event.currentTarget);
}}
endDecorator={<KeyboardArrowDownIcon />}
>
Main
</Chip>
<Menu
variant="outlined"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
placement="bottom-start"
disablePortal
size="sm"
sx={{
'--ListItemDecorator-size': '24px',
'--ListItem-minHeight': '40px',
'--ListDivider-gap': '4px',
minWidth: 200,
}}
>
<MenuItem onClick={() => setAnchorEl(null)}>
<ListItemDecorator>
<BubbleChartIcon />
</ListItemDecorator>
Products
</MenuItem>
<ListDivider />
<MenuItem onClick={() => setAnchorEl(null)}>Pricing</MenuItem>
<MenuItem onClick={() => setAnchorEl(null)}>
Case studies{' '}
<Chip
variant="outlined"
size="sm"
sx={{
ml: 'auto',
bgcolor: (theme) =>
`rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
}}
>
Beta
</Chip>
</MenuItem>
</Menu>
<Dropdown>
<MenuButton
sx={{
'--Button-radius': '1.5rem',
}}
variant="outlined"
endDecorator={<KeyboardArrowDownIcon />}
>
Main
</MenuButton>
<Menu
variant="outlined"
placement="bottom-start"
disablePortal
size="sm"
sx={{
'--ListItemDecorator-size': '24px',
'--ListItem-minHeight': '40px',
'--ListDivider-gap': '4px',
minWidth: 200,
}}
>
<MenuItem>
<ListItemDecorator>
<BubbleChartIcon />
</ListItemDecorator>
Products
</MenuItem>
<ListDivider />
<MenuItem>Pricing</MenuItem>
<MenuItem>
Case studies{' '}
<Chip
variant="outlined"
size="sm"
sx={{
ml: 'auto',
bgcolor: (theme) =>
`rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
}}
>
Beta
</Chip>
</MenuItem>
</Menu>
</Dropdown>
</Box>
<Box sx={{ display: 'flex', flexShrink: 0, gap: 2 }}>
<Button
Expand Down

0 comments on commit 05652f6

Please sign in to comment.