[Alert][joy] Add Alert component (#33859)

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

@@ -0,0 +1,78 @@
+import Alert from '@mui/joy/Alert';
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet from '@mui/joy/Sheet';
+
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function AlertColors() {
+  const [variant, setVariant] = React.useState('solid');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, minmax(150px, 1fr))',
+          gap: 1,
+        }}
+      >
+        <Alert variant={variant} color="primary">
+          Primary
+        </Alert>
+        <Alert variant={variant} color="neutral">
+          Neutral
+        </Alert>
+        <Alert variant={variant} color="danger">
+          Danger
+        </Alert>
+        <Alert variant={variant} color="info">
+          Info
+        </Alert>
+        <Alert variant={variant} color="success">
+          Success
+        </Alert>
+        <Alert variant={variant} color="warning">
+          Warning
+        </Alert>
+      </Box>
+      <Sheet
+        sx={{
+          background: 'transparent',
+          pl: 4,
+          borderLeft: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Typography
+          level="body2"
+          fontWeight="xl"
+          id="variant-label"
+          textColor="text.primary"
+          mb={1}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}

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

@@ -0,0 +1,78 @@
+import Alert from '@mui/joy/Alert';
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet from '@mui/joy/Sheet';
+import { VariantProp } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function AlertColors() {
+  const [variant, setVariant] = React.useState<VariantProp>('solid');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, minmax(150px, 1fr))',
+          gap: 1,
+        }}
+      >
+        <Alert variant={variant} color="primary">
+          Primary
+        </Alert>
+        <Alert variant={variant} color="neutral">
+          Neutral
+        </Alert>
+        <Alert variant={variant} color="danger">
+          Danger
+        </Alert>
+        <Alert variant={variant} color="info">
+          Info
+        </Alert>
+        <Alert variant={variant} color="success">
+          Success
+        </Alert>
+        <Alert variant={variant} color="warning">
+          Warning
+        </Alert>
+      </Box>
+      <Sheet
+        sx={{
+          background: 'transparent',
+          pl: 4,
+          borderLeft: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Typography
+          level="body2"
+          fontWeight="xl"
+          id="variant-label"
+          textColor="text.primary"
+          mb={1}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value as VariantProp)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}

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

@@ -0,0 +1,13 @@
+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">This is an alert in the small size.</Alert>
+      <Alert size="md">This is an alert in the medium size.</Alert>
+      <Alert size="lg">This is an alert in the large size.</Alert>
+    </Box>
+  );
+}

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

@@ -0,0 +1,13 @@
+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">This is an alert in the small size.</Alert>
+      <Alert size="md">This is an alert in the medium size.</Alert>
+      <Alert size="lg">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">This is an alert in the small size.</Alert>
+<Alert size="md">This is an alert in the medium size.</Alert>
+<Alert size="lg">This is an alert in the large size.</Alert>

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Alert from '@mui/joy/Alert';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+
+export default function AlertUsage() {
+  return (
+    <JoyUsageDemo
+      componentName="Alert"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'select',
+          defaultValue: 'soft',
+          options: ['plain', 'outlined', 'soft', 'solid'],
+        },
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'primary',
+        },
+        {
+          propName: 'size',
+          knob: 'radio',
+          options: ['sm', 'md', 'lg'],
+          defaultValue: 'md',
+        },
+      ]}
+      renderDemo={(props) => (
+        <Alert {...props}>This is a Joy UI alert — check it out!</Alert>
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertVariants() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert variant="solid">This is an alert using the solid variant.</Alert>
+      <Alert variant="soft">This is an alert using the soft variant.</Alert>
+      <Alert variant="outlined">This is an alert using the outlined variant.</Alert>
+      <Alert variant="plain">This is an alert using the plain variant.</Alert>
+    </Box>
+  );
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertVariants() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert variant="solid">This is an alert using the solid variant.</Alert>
+      <Alert variant="soft">This is an alert using the soft variant.</Alert>
+      <Alert variant="outlined">This is an alert using the outlined variant.</Alert>
+      <Alert variant="plain">This is an alert using the plain variant.</Alert>
+    </Box>
+  );
+}

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

@@ -0,0 +1,4 @@
+<Alert variant="solid">This is an alert using the solid variant.</Alert>
+<Alert variant="soft">This is an alert using the soft variant.</Alert>
+<Alert variant="outlined">This is an alert using the outlined variant.</Alert>
+<Alert variant="plain">This is an alert using the plain variant.</Alert>

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

@@ -0,0 +1,50 @@
+import InfoIcon from '@mui/icons-material/Info';
+import WarningIcon from '@mui/icons-material/Warning';
+import ReportIcon from '@mui/icons-material/Report';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+import IconButton from '@mui/joy/IconButton';
+import Typography from '@mui/joy/Typography';
+
+export default function AlertVariousStates() {
+  const items = [
+    { title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
+    { title: 'Warning', color: 'warning', icon: <WarningIcon /> },
+    { title: 'Error', color: 'danger', icon: <ReportIcon /> },
+    { title: 'Info', color: 'info', icon: <InfoIcon /> },
+  ];
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      {items.map(({ title, color, icon }) => (
+        <Alert
+          key={title}
+          sx={{ alignItems: 'flex-start' }}
+          startDecorator={React.cloneElement(icon, {
+            sx: { mt: '2px', mx: '4px' },
+            fontSize: 'xl2',
+          })}
+          variant="soft"
+          color={color}
+          endDecorator={
+            <IconButton variant="soft" size="sm" color={color}>
+              <CloseRoundedIcon />
+            </IconButton>
+          }
+        >
+          <div>
+            <Typography fontWeight="lg" mt={0.25}>
+              {title}
+            </Typography>
+            <Typography fontSize="sm" sx={{ opacity: 0.8 }}>
+              This is a {title} message.
+            </Typography>
+          </div>
+        </Alert>
+      ))}
+    </Box>
+  );
+}

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

@@ -0,0 +1,54 @@
+import InfoIcon from '@mui/icons-material/Info';
+import WarningIcon from '@mui/icons-material/Warning';
+import ReportIcon from '@mui/icons-material/Report';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+import IconButton from '@mui/joy/IconButton';
+import Typography from '@mui/joy/Typography';
+import { ColorPaletteProp } from '@mui/joy/styles';
+
+export default function AlertVariousStates() {
+  const items: {
+    title: string;
+    color: ColorPaletteProp;
+    icon: React.ReactElement;
+  }[] = [
+    { title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
+    { title: 'Warning', color: 'warning', icon: <WarningIcon /> },
+    { title: 'Error', color: 'danger', icon: <ReportIcon /> },
+    { title: 'Info', color: 'info', icon: <InfoIcon /> },
+  ];
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      {items.map(({ title, color, icon }) => (
+        <Alert
+          key={title}
+          sx={{ alignItems: 'flex-start' }}
+          startDecorator={React.cloneElement(icon, {
+            sx: { mt: '2px', mx: '4px' },
+            fontSize: 'xl2',
+          })}
+          variant="soft"
+          color={color}
+          endDecorator={
+            <IconButton variant="soft" size="sm" color={color}>
+              <CloseRoundedIcon />
+            </IconButton>
+          }
+        >
+          <div>
+            <Typography fontWeight="lg" mt={0.25}>
+              {title}
+            </Typography>
+            <Typography fontSize="sm" sx={{ opacity: 0.8 }}>
+              This is a {title} message.
+            </Typography>
+          </div>
+        </Alert>
+      ))}
+    </Box>
+  );
+}