[Joy] Add invertedColors to Menu and Alert (#36975)

mui · Apr 24, 2023 · 34f2253 · 34f2253
1 parent f3bf444
commit 34f2253
Show file tree

Hide file tree

Showing 23 changed files with 549 additions and 81 deletions.
diff --git a/docs/data/joy/components/alert/AlertInvertedColors.js b/docs/data/joy/components/alert/AlertInvertedColors.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import Alert from '@mui/joy/Alert';
+import AspectRatio from '@mui/joy/AspectRatio';
+import IconButton from '@mui/joy/IconButton';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import CircularProgress from '@mui/joy/CircularProgress';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+import Warning from '@mui/icons-material/Warning';
+
+export default function AlertBasic() {
+  return (
+    <Stack spacing={2} sx={{ maxWidth: 400 }}>
+      <Alert
+        size="lg"
+        color="success"
+        variant="solid"
+        invertedColors
+        startDecorator={
+          <AspectRatio
+            variant="solid"
+            ratio="1"
+            sx={{
+              minWidth: 40,
+              borderRadius: '50%',
+              boxShadow: '0 2px 12px 0 rgb(0 0 0/0.2)',
+            }}
+          >
+            <div>
+              <Check fontSize="xl2" />
+            </div>
+          </AspectRatio>
+        }
+        endDecorator={
+          <IconButton
+            variant="plain"
+            sx={{
+              '--IconButton-size': '32px',
+              transform: 'translate(0.5rem, -0.5rem)',
+            }}
+          >
+            <Close />
+          </IconButton>
+        }
+        sx={{ alignItems: 'flex-start', overflow: 'hidden' }}
+      >
+        <Box>
+          <Typography level="body1" fontWeight="lg">
+            Success
+          </Typography>
+          <Typography level="body3">
+            Success is walking from failure to failure with no loss of enthusiam.
+          </Typography>
+        </Box>
+        <LinearProgress
+          variant="soft"
+          value={40}
+          sx={(theme) => ({
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            color: `rgb(${theme.vars.palette.success.lightChannel} / 0.72)`,
+            '--LinearProgress-radius': '0px',
+          })}
+        />
+      </Alert>
+
+      <Alert
+        variant="soft"
+        color="danger"
+        invertedColors
+        startDecorator={
+          <CircularProgress size="lg">
+            <Warning />
+          </CircularProgress>
+        }
+        sx={{ alignItems: 'flex-start', '--Alert-gap': '1rem' }}
+      >
+        <Box sx={{ flex: 1 }}>
+          <Typography sx={{ mt: 1 }}>
+            Network loss, please recheck your connection.
+          </Typography>
+          <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+            <Button variant="outlined" size="sm">
+              Open network setting
+            </Button>
+            <Button variant="soft" size="sm">
+              Okay
+            </Button>
+          </Box>
+        </Box>
+      </Alert>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/alert/AlertInvertedColors.tsx b/docs/data/joy/components/alert/AlertInvertedColors.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import Alert from '@mui/joy/Alert';
+import AspectRatio from '@mui/joy/AspectRatio';
+import IconButton from '@mui/joy/IconButton';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import CircularProgress from '@mui/joy/CircularProgress';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+import Warning from '@mui/icons-material/Warning';
+
+export default function AlertBasic() {
+  return (
+    <Stack spacing={2} sx={{ maxWidth: 400 }}>
+      <Alert
+        size="lg"
+        color="success"
+        variant="solid"
+        invertedColors
+        startDecorator={
+          <AspectRatio
+            variant="solid"
+            ratio="1"
+            sx={{
+              minWidth: 40,
+              borderRadius: '50%',
+              boxShadow: '0 2px 12px 0 rgb(0 0 0/0.2)',
+            }}
+          >
+            <div>
+              <Check fontSize="xl2" />
+            </div>
+          </AspectRatio>
+        }
+        endDecorator={
+          <IconButton
+            variant="plain"
+            sx={{
+              '--IconButton-size': '32px',
+              transform: 'translate(0.5rem, -0.5rem)',
+            }}
+          >
+            <Close />
+          </IconButton>
+        }
+        sx={{ alignItems: 'flex-start', overflow: 'hidden' }}
+      >
+        <Box>
+          <Typography level="body1" fontWeight="lg">
+            Success
+          </Typography>
+          <Typography level="body3">
+            Success is walking from failure to failure with no loss of enthusiam.
+          </Typography>
+        </Box>
+        <LinearProgress
+          variant="soft"
+          value={40}
+          sx={(theme) => ({
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            color: `rgb(${theme.vars.palette.success.lightChannel} / 0.72)`,
+            '--LinearProgress-radius': '0px',
+          })}
+        />
+      </Alert>
+
+      <Alert
+        variant="soft"
+        color="danger"
+        invertedColors
+        startDecorator={
+          <CircularProgress size="lg">
+            <Warning />
+          </CircularProgress>
+        }
+        sx={{ alignItems: 'flex-start', '--Alert-gap': '1rem' }}
+      >
+        <Box sx={{ flex: 1 }}>
+          <Typography sx={{ mt: 1 }}>
+            Network loss, please recheck your connection.
+          </Typography>
+          <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+            <Button variant="outlined" size="sm">
+              Open network setting
+            </Button>
+            <Button variant="soft" size="sm">
+              Okay
+            </Button>
+          </Box>
+        </Box>
+      </Alert>
+    </Stack>
+  );
+}
diff --git a/docs/data/joy/components/alert/alert.md b/docs/data/joy/components/alert/alert.md
@@ -69,6 +69,12 @@ Use the `startDecorator` and `endDecorator` props to append actions and icons to
 
 {{"demo": "AlertWithDecorators.js"}}
 
+### Inverted colors
+
+The Alert component supports Joy UI's [color inversion](/joy-ui/main-features/color-inversion/) by using `invertedColors` prop.
+
+{{"demo": "AlertInvertedColors.js"}}
+
 ## Common examples
 
 ### Various states

diff --git a/docs/data/joy/components/menu/AppsMenu.js b/docs/data/joy/components/menu/AppsMenu.js
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import IconButton from '@mui/joy/IconButton';
+import Menu from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
+import Apps from '@mui/icons-material/Apps';
+
+export default function AppsMenu() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <Box>
+      <IconButton
+        id="apps-menu-demo"
+        aria-label="Applications"
+        aria-controls={open ? 'apps-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        variant="plain"
+        color="neutral"
+        onClick={handleClick}
+        sx={{ borderRadius: 40 }}
+      >
+        <Apps />
+      </IconButton>
+      <Menu
+        id="apps-menu"
+        variant="solid"
+        invertedColors
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="apps-menu-demo"
+        sx={{
+          '--List-padding': '0.5rem',
+          '--ListItemDecorator-size': '3rem',
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, 100px)',
+          gridAutoRows: '100px',
+          gap: 1,
+        }}
+      >
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>S</Avatar>
+          </ListItemDecorator>
+          Search
+        </MenuItem>
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>M</Avatar>
+          </ListItemDecorator>
+          Maps
+        </MenuItem>
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>M</Avatar>
+          </ListItemDecorator>
+          Mail
+        </MenuItem>
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>D</Avatar>
+          </ListItemDecorator>
+          Drive
+        </MenuItem>
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>C</Avatar>
+          </ListItemDecorator>
+          Calendar
+        </MenuItem>
+      </Menu>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/menu/AppsMenu.tsx b/docs/data/joy/components/menu/AppsMenu.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import IconButton from '@mui/joy/IconButton';
+import Menu from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
+import Apps from '@mui/icons-material/Apps';
+
+export default function AppsMenu() {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <Box>
+      <IconButton
+        id="apps-menu-demo"
+        aria-label="Applications"
+        aria-controls={open ? 'apps-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        variant="plain"
+        color="neutral"
+        onClick={handleClick}
+        sx={{ borderRadius: 40 }}
+      >
+        <Apps />
+      </IconButton>
+      <Menu
+        id="apps-menu"
+        variant="solid"
+        invertedColors
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="apps-menu-demo"
+        sx={{
+          '--List-padding': '0.5rem',
+          '--ListItemDecorator-size': '3rem',
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, 100px)',
+          gridAutoRows: '100px',
+          gap: 1,
+        }}
+      >
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>S</Avatar>
+          </ListItemDecorator>
+          Search
+        </MenuItem>
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>M</Avatar>
+          </ListItemDecorator>
+          Maps
+        </MenuItem>
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>M</Avatar>
+          </ListItemDecorator>
+          Mail
+        </MenuItem>
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>D</Avatar>
+          </ListItemDecorator>
+          Drive
+        </MenuItem>
+        <MenuItem orientation="vertical" onClick={handleClose}>
+          <ListItemDecorator>
+            <Avatar>C</Avatar>
+          </ListItemDecorator>
+          Calendar
+        </MenuItem>
+      </Menu>
+    </Box>
+  );
+}