Add more demos

docs/data/joy/components/alert/AlertSizes.js

@@ -0,0 +1,20 @@
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert size="sm" startDecorator={<AddShoppingCartIcon />}>
+        This is an alert in the small size.
+      </Alert>
+      <Alert size="md" startDecorator={<AddShoppingCartIcon />}>
+        This is an alert in the medium size.
+      </Alert>
+      <Alert size="lg" startDecorator={<AddShoppingCartIcon />}>
+        This is an alert in the large size.
+      </Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertSizes.tsx

@@ -0,0 +1,20 @@
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert size="sm" startDecorator={<AddShoppingCartIcon />}>
+        This is an alert in the small size.
+      </Alert>
+      <Alert size="md" startDecorator={<AddShoppingCartIcon />}>
+        This is an alert in the medium size.
+      </Alert>
+      <Alert size="lg" startDecorator={<AddShoppingCartIcon />}>
+        This is an alert in the large size.
+      </Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertSizes.tsx.preview

@@ -0,0 +1,3 @@
+<Alert size="sm" startDecorator={<AddShoppingCartIcon/>}>This is an alert in the small size.</Alert>
+<Alert size="md" startDecorator={<AddShoppingCartIcon/>}>This is an alert in the medium size.</Alert>
+<Alert size="lg" startDecorator={<AddShoppingCartIcon/>}>This is an alert in the large size.</Alert>

docs/data/joy/components/alert/AlertWithDecorators.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import Alert from '@mui/joy/Alert';
+import PlaylistAddCheckCircleRoundedIcon from '@mui/icons-material/PlaylistAddCheckCircleRounded';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+import IconButton from '@mui/joy/IconButton';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+export default function AlertWithDecorators() {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
+      <Alert
+        startDecorator={<PlaylistAddCheckCircleRoundedIcon />}
+        variant="soft"
+        color="success"
+        endDecorator={
+          <Button
+            size="sm"
+            variant="outlined"
+            color="success"
+            sx={{
+              textTransform: 'uppercase',
+              fontSize: 'xs',
+              fontWeight: 'xl',
+            }}
+          >
+            Close
+          </Button>
+        }
+      >
+        <Typography fontWeight="md" fontSize="sm">
+          Your message was sent successfully.
+        </Typography>
+      </Alert>
+      <Alert
+        startDecorator={<AccountCircleRoundedIcon />}
+        variant="outlined"
+        color="neutral"
+        endDecorator={
+          <IconButton variant="outlined" size="sm" color="neutral">
+            <CloseRoundedIcon />
+          </IconButton>
+        }
+      >
+        <Typography fontWeight="md" fontSize="sm">
+          Your account was updated.
+        </Typography>
+      </Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertWithDecorators.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import Alert from '@mui/joy/Alert';
+import PlaylistAddCheckCircleRoundedIcon from '@mui/icons-material/PlaylistAddCheckCircleRounded';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Typography from '@mui/joy/Typography';
+import IconButton from '@mui/joy/IconButton';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+export default function AlertWithDecorators() {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
+      <Alert
+        startDecorator={<PlaylistAddCheckCircleRoundedIcon />}
+        variant="soft"
+        color="success"
+        endDecorator={
+          <Button
+            size="sm"
+            variant="outlined"
+            color="success"
+            sx={{
+              textTransform: 'uppercase',
+              fontSize: 'xs',
+              fontWeight: 'xl',
+            }}
+          >
+            Close
+          </Button>
+        }
+      >
+        <Typography fontWeight="md" fontSize="sm">
+          Your message was sent successfully.
+        </Typography>
+      </Alert>
+      <Alert
+        startDecorator={<AccountCircleRoundedIcon />}
+        variant="outlined"
+        color="neutral"
+        endDecorator={
+          <IconButton variant="outlined" size="sm" color="neutral">
+            <CloseRoundedIcon />
+          </IconButton>
+        }
+      >
+        <Typography fontWeight="md" fontSize="sm">
+          Your account was updated.
+        </Typography>
+      </Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/alert.md

@@ -40,17 +40,17 @@ Play around combining different colors with different variants.
 
 {{"demo": "AlertColors.js"}}
 
-### With icons
+### Sizes
 
-You can add an icon as a decorator via the `icon` prop.
+The alert components comes with three sizes out of the box: `sm`, `md` (the default), and `lg`.
 
-{{"demo": "AlertIcons.js"}}
+{{"demo": "AlertSizes.js"}}
 
-### Actions
+### Decorators
 
-Use the `action` prop to insert actionable buttons or icon buttons on the Alert.
+Use the `startDecorator` and/or `endDecorator` props to insert actionable buttons or icon buttons on the Alert.
 
-{{"demo": "AlertAction.js"}}
+{{"demo": "AlertWithDecorators.js"}}
 
 ## Accessibility
 

packages/mui-joy/src/Alert/Alert.tsx

@@ -97,6 +97,7 @@ const AlertEndDecorator = styled('span', {
   display: 'inherit',
   alignItems: 'center',
   marginInlineStart: 'var(--Alert-gap)',
+  marginLeft: 'auto',
   color: theme.vars.palette[ownerState.color!]?.[`${ownerState.variant!}Color`],
 }));