init project

packages/mui-material/src/Alert/Alert.d.ts

@@ -0,0 +1,205 @@
+import * as React from 'react';
+import { OverridableStringUnion } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { SvgIconProps } from '../SvgIcon';
+import { Theme } from '../styles';
+import { InternalStandardProps as StandardProps } from '../internal';
+import { IconButtonProps } from '../IconButton';
+import { PaperProps } from '../Paper';
+import { AlertClasses } from './alertClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export type AlertColor = 'success' | 'info' | 'warning' | 'error';
+
+export interface AlertPropsVariantOverrides {}
+export interface AlertPropsColorOverrides {}
+
+export interface AlertRootSlotPropsOverrides {}
+
+export interface AlertIconSlotPropsOverrides {}
+
+export interface AlertMessageSlotPropsOverrides {}
+
+export interface AlertActionSlotPropsOverrides {}
+
+export interface AlertCloseButtonSlotPropsOverrides {}
+export interface AlertCloseIconSlotPropsOverrides {}
+
+export interface AlertSlots {
+  /**
+   * The component that renders the root slot.
+   * @default Paper
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the icon slot.
+   * @default div
+   */
+  icon: React.ElementType;
+  /**
+   * The component that renders the message slot.
+   * @default div
+   */
+  message: React.ElementType;
+  /**
+   * The component that renders the action slot.
+   * @default div
+   */
+  action: React.ElementType;
+  /**
+   * The component that renders the close button.
+   * @default IconButton
+   */
+  closeButton: React.ElementType;
+  /**
+   * The component that renders the close icon.
+   * @default svg
+   */
+  closeIcon: React.ElementType;
+}
+
+export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AlertSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the available props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+     */
+    root: SlotProps<React.ElementType<PaperProps>, AlertRootSlotPropsOverrides, AlertOwnerState>;
+    /**
+     * Props forwarded to the icon slot.
+     * By default, the available props are based on a div element.
+     */
+    icon: SlotProps<'div', AlertIconSlotPropsOverrides, AlertOwnerState>;
+    /**
+     * Props forwarded to the message slot.
+     * By default, the available props are based on a div element.
+     */
+    message: SlotProps<'div', AlertMessageSlotPropsOverrides, AlertOwnerState>;
+    /**
+     * Props forwarded to the action slot.
+     * By default, the available props are based on a div element.
+     */
+    action: SlotProps<'div', AlertActionSlotPropsOverrides, AlertOwnerState>;
+    /**
+     * Props forwarded to the closeButton slot.
+     * By default, the available props are based on the [IconButton](https://mui.com/material-ui/api/icon-button/#props) component.
+     */
+    closeButton: SlotProps<
+      React.ElementType<IconButtonProps>,
+      AlertCloseButtonSlotPropsOverrides,
+      AlertOwnerState
+    >;
+    /**
+     * Props forwarded to the closeIcon slot.
+     * By default, the available props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
+     */
+    closeIcon: SlotProps<
+      React.ElementType<SvgIconProps>,
+      AlertCloseIconSlotPropsOverrides,
+      AlertOwnerState
+    >;
+  }
+>;
+
+export interface AlertProps extends StandardProps<PaperProps, 'variant'>, AlertSlotsAndSlotProps {
+  /**
+   * The action to display. It renders after the message, at the end of the alert.
+   */
+  action?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<AlertClasses>;
+  /**
+   * Override the default label for the *close popup* icon button.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @default 'Close'
+   */
+  closeText?: string;
+  /**
+   * The color of the component. Unless provided, the value is taken from the `severity` prop.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color?: OverridableStringUnion<AlertColor, AlertPropsColorOverrides>;
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  components?: {
+    CloseButton?: React.ElementType;
+    CloseIcon?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  componentsProps?: {
+    closeButton?: IconButtonProps;
+    closeIcon?: SvgIconProps;
+  };
+  /**
+   * The severity of the alert. This defines the color and icon used.
+   * @default 'success'
+   */
+  severity?: OverridableStringUnion<AlertColor, AlertPropsColorOverrides>;
+  /**
+   * Override the icon displayed before the children.
+   * Unless provided, the icon is mapped to the value of the `severity` prop.
+   * Set to `false` to remove the `icon`.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The ARIA role attribute of the element.
+   * @default 'alert'
+   */
+  role?: string;
+  /**
+   * The component maps the `severity` prop to a range of different icons,
+   * for instance success to `<SuccessOutlined>`.
+   * If you wish to change this mapping, you can provide your own.
+   * Alternatively, you can use the `icon` prop to override the icon displayed.
+   */
+  iconMapping?: Partial<
+    Record<OverridableStringUnion<AlertColor, AlertPropsColorOverrides>, React.ReactNode>
+  >;
+  /**
+   * Callback fired when the component requests to be closed.
+   * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   */
+  onClose?: (event: React.SyntheticEvent) => void;
+  /**
+   * The variant to use.
+   * @default 'standard'
+   */
+  variant?: OverridableStringUnion<'standard' | 'filled' | 'outlined', AlertPropsVariantOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface AlertOwnerState extends AlertProps {}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Alert](https://mui.com/material-ui/react-alert/)
+ *
+ * API:
+ *
+ * - [Alert API](https://mui.com/material-ui/api/alert/)
+ * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
+ */
+export default function Alert(props: AlertProps): React.JSX.Element;

packages/mui-material/src/Alert/Alert.js

@@ -0,0 +1,416 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
+import { useDefaultProps } from '../DefaultPropsProvider';
+import useSlot from '../utils/useSlot';
+import capitalize from '../utils/capitalize';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
+import Paper from '../Paper';
+import alertClasses, { getAlertUtilityClass } from './alertClasses';
+import IconButton from '../IconButton';
+import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined';
+import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined';
+import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
+import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
+import CloseIcon from '../internal/svg-icons/Close';
+
+const useUtilityClasses = (ownerState) => {
+  const { variant, color, severity, classes } = ownerState;
+
+  const slots = {
+    root: [
+      'root',
+      `color${capitalize(color || severity)}`,
+      `${variant}${capitalize(color || severity)}`,
+      `${variant}`,
+    ],
+    icon: ['icon'],
+    message: ['message'],
+    action: ['action'],
+  };
+
+  return composeClasses(slots, getAlertUtilityClass, classes);
+};
+
+const AlertRoot = styled(Paper, {
+  name: 'MuiAlert',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [
+      styles.root,
+      styles[ownerState.variant],
+      styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`],
+    ];
+  },
+})(
+  memoTheme(({ theme }) => {
+    const getColor = theme.palette.mode === 'light' ? theme.darken : theme.lighten;
+    const getBackgroundColor = theme.palette.mode === 'light' ? theme.lighten : theme.darken;
+    return {
+      ...theme.typography.body2,
+      backgroundColor: 'transparent',
+      display: 'flex',
+      padding: '6px 16px',
+      variants: [
+        ...Object.entries(theme.palette)
+          .filter(createSimplePaletteValueFilter(['light']))
+          .map(([color]) => ({
+            props: { colorSeverity: color, variant: 'standard' },
+            style: {
+              color: theme.vars
+                ? theme.vars.palette.Alert[`${color}Color`]
+                : getColor(theme.palette[color].light, 0.6),
+              backgroundColor: theme.vars
+                ? theme.vars.palette.Alert[`${color}StandardBg`]
+                : getBackgroundColor(theme.palette[color].light, 0.9),
+              [`& .${alertClasses.icon}`]: theme.vars
+                ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
+                : {
+                    color: theme.palette[color].main,
+                  },
+            },
+          })),
+        ...Object.entries(theme.palette)
+          .filter(createSimplePaletteValueFilter(['light']))
+          .map(([color]) => ({
+            props: { colorSeverity: color, variant: 'outlined' },
+            style: {
+              color: theme.vars
+                ? theme.vars.palette.Alert[`${color}Color`]
+                : getColor(theme.palette[color].light, 0.6),
+              border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+              [`& .${alertClasses.icon}`]: theme.vars
+                ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
+                : {
+                    color: theme.palette[color].main,
+                  },
+            },
+          })),
+        ...Object.entries(theme.palette)
+          .filter(createSimplePaletteValueFilter(['dark']))
+          .map(([color]) => ({
+            props: { colorSeverity: color, variant: 'filled' },
+            style: {
+              fontWeight: theme.typography.fontWeightMedium,
+              ...(theme.vars
+                ? {
+                    color: theme.vars.palette.Alert[`${color}FilledColor`],
+                    backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`],
+                  }
+                : {
+                    backgroundColor:
+                      theme.palette.mode === 'dark'
+                        ? theme.palette[color].dark
+                        : theme.palette[color].main,
+                    color: theme.palette.getContrastText(theme.palette[color].main),
+                  }),
+            },
+          })),
+      ],
+    };
+  }),
+);
+
+const AlertIcon = styled('div', {
+  name: 'MuiAlert',
+  slot: 'Icon',
+})({
+  marginRight: 12,
+  padding: '7px 0',
+  display: 'flex',
+  fontSize: 22,
+  opacity: 0.9,
+});
+
+const AlertMessage = styled('div', {
+  name: 'MuiAlert',
+  slot: 'Message',
+})({
+  padding: '8px 0',
+  minWidth: 0,
+  overflow: 'auto',
+});
+
+const AlertAction = styled('div', {
+  name: 'MuiAlert',
+  slot: 'Action',
+})({
+  display: 'flex',
+  alignItems: 'flex-start',
+  padding: '4px 0 0 16px',
+  marginLeft: 'auto',
+  marginRight: -8,
+});
+
+const defaultIconMapping = {
+  success: <SuccessOutlinedIcon fontSize="inherit" />,
+  warning: <ReportProblemOutlinedIcon fontSize="inherit" />,
+  error: <ErrorOutlineIcon fontSize="inherit" />,
+  info: <InfoOutlinedIcon fontSize="inherit" />,
+};
+
+const Alert = React.forwardRef(function Alert(inProps, ref) {
+  const props = useDefaultProps({ props: inProps, name: 'MuiAlert' });
+  const {
+    action,
+    children,
+    className,
+    closeText = 'Close',
+    color,
+    components = {},
+    componentsProps = {},
+    icon,
+    iconMapping = defaultIconMapping,
+    onClose,
+    role = 'alert',
+    severity = 'success',
+    slotProps = {},
+    slots = {},
+    variant = 'standard',
+    ...other
+  } = props;
+
+  const ownerState = {
+    ...props,
+    color,
+    severity,
+    variant,
+    colorSeverity: color || severity,
+  };
+
+  const classes = useUtilityClasses(ownerState);
+
+  const externalForwardedProps = {
+    slots: {
+      closeButton: components.CloseButton,
+      closeIcon: components.CloseIcon,
+      ...slots,
+    },
+    slotProps: {
+      ...componentsProps,
+      ...slotProps,
+    },
+  };
+
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    shouldForwardComponentProp: true,
+    className: clsx(classes.root, className),
+    elementType: AlertRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    ownerState,
+    additionalProps: {
+      role,
+      elevation: 0,
+    },
+  });
+
+  const [IconSlot, iconSlotProps] = useSlot('icon', {
+    className: classes.icon,
+    elementType: AlertIcon,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [MessageSlot, messageSlotProps] = useSlot('message', {
+    className: classes.message,
+    elementType: AlertMessage,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [ActionSlot, actionSlotProps] = useSlot('action', {
+    className: classes.action,
+    elementType: AlertAction,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [CloseButtonSlot, closeButtonProps] = useSlot('closeButton', {
+    elementType: IconButton,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [CloseIconSlot, closeIconProps] = useSlot('closeIcon', {
+    elementType: CloseIcon,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  return (
+    <RootSlot {...rootSlotProps}>
+      {icon !== false ? (
+        <IconSlot {...iconSlotProps}>
+          {icon || iconMapping[severity] || defaultIconMapping[severity]}
+        </IconSlot>
+      ) : null}
+      <MessageSlot {...messageSlotProps}>{children}</MessageSlot>
+      {action != null ? <ActionSlot {...actionSlotProps}>{action}</ActionSlot> : null}
+      {action == null && onClose ? (
+        <ActionSlot {...actionSlotProps}>
+          <CloseButtonSlot
+            size="small"
+            aria-label={closeText}
+            title={closeText}
+            color="inherit"
+            onClick={onClose}
+            {...closeButtonProps}
+          >
+            <CloseIconSlot fontSize="small" {...closeIconProps} />
+          </CloseButtonSlot>
+        </ActionSlot>
+      ) : null}
+    </RootSlot>
+  );
+});
+
+Alert.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The action to display. It renders after the message, at the end of the alert.
+   */
+  action: PropTypes.node,
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Override the default label for the *close popup* icon button.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @default 'Close'
+   */
+  closeText: PropTypes.string,
+  /**
+   * The color of the component. Unless provided, the value is taken from the `severity` prop.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+    PropTypes.string,
+  ]),
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  components: PropTypes.shape({
+    CloseButton: PropTypes.elementType,
+    CloseIcon: PropTypes.elementType,
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    closeButton: PropTypes.object,
+    closeIcon: PropTypes.object,
+  }),
+  /**
+   * Override the icon displayed before the children.
+   * Unless provided, the icon is mapped to the value of the `severity` prop.
+   * Set to `false` to remove the `icon`.
+   */
+  icon: PropTypes.node,
+  /**
+   * The component maps the `severity` prop to a range of different icons,
+   * for instance success to `<SuccessOutlined>`.
+   * If you wish to change this mapping, you can provide your own.
+   * Alternatively, you can use the `icon` prop to override the icon displayed.
+   */
+  iconMapping: PropTypes.shape({
+    error: PropTypes.node,
+    info: PropTypes.node,
+    success: PropTypes.node,
+    warning: PropTypes.node,
+  }),
+  /**
+   * Callback fired when the component requests to be closed.
+   * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   */
+  onClose: PropTypes.func,
+  /**
+   * The ARIA role attribute of the element.
+   * @default 'alert'
+   */
+  role: PropTypes.string,
+  /**
+   * The severity of the alert. This defines the color and icon used.
+   * @default 'success'
+   */
+  severity: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+    PropTypes.string,
+  ]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    closeButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    message: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    action: PropTypes.elementType,
+    closeButton: PropTypes.elementType,
+    closeIcon: PropTypes.elementType,
+    icon: PropTypes.elementType,
+    message: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * The variant to use.
+   * @default 'standard'
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['filled', 'outlined', 'standard']),
+    PropTypes.string,
+  ]),
+};
+
+export default Alert;

packages/mui-material/src/Alert/Alert.spec.tsx

@@ -0,0 +1,38 @@
+import CloseRounded from '@mui/icons-material/CloseRounded';
+import { createTheme } from '@mui/material';
+import Alert from '@mui/material/Alert';
+
+createTheme({
+  components: {
+    MuiAlert: {
+      defaultProps: {
+        slots: {
+          closeIcon: CloseRounded,
+        },
+      },
+    },
+  },
+});
+
+<Alert
+  slotProps={{
+    root: {
+      className: 'px-4 py-3',
+    },
+    icon: {
+      className: 'mr-2',
+    },
+    message: {
+      className: 'flex-1',
+    },
+    action: {
+      className: 'ml-4',
+    },
+    closeButton: {
+      className: 'p-1',
+    },
+    closeIcon: {
+      className: 'w-5 h-5',
+    },
+  }}
+/>;

packages/mui-material/src/Alert/Alert.test.js

@@ -0,0 +1,229 @@
+import { expect } from 'chai';
+import { createRenderer, screen } from '@mui/internal-test-utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import Alert, { alertClasses as classes } from '@mui/material/Alert';
+import Paper, { paperClasses } from '@mui/material/Paper';
+import { iconButtonClasses } from '@mui/material/IconButton';
+import { svgIconClasses } from '@mui/material/SvgIcon';
+import describeConformance from '../../test/describeConformance';
+import capitalize from '../utils/capitalize';
+
+describe('<Alert />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Alert onClose={() => {}} />, () => ({
+    classes,
+    inheritComponent: Paper,
+    render,
+    refInstanceof: window.HTMLDivElement,
+    muiName: 'MuiAlert',
+    testVariantProps: { variant: 'standard', color: 'success' },
+    testDeepOverrides: { slotName: 'message', slotClassName: classes.message },
+    testLegacyComponentsProp: ['closeButton', 'closeIcon'],
+    slots: {
+      root: {
+        expectedClassName: classes.root,
+      },
+      icon: {
+        expectedClassName: classes.icon,
+      },
+      message: {
+        expectedClassName: classes.message,
+      },
+      action: {
+        expectedClassName: classes.action,
+      },
+      closeButton: {
+        expectedClassName: classes.closeButton,
+      },
+      closeIcon: {
+        expectedClassName: classes.closeIcon,
+      },
+    },
+    skip: ['componentsProp'],
+  }));
+
+  describe('prop: square', () => {
+    it('should have rounded corners by default', () => {
+      render(<Alert data-testid="root">Hello World</Alert>);
+
+      expect(screen.getByTestId('root')).to.have.class(paperClasses.rounded);
+    });
+
+    it('should disable rounded corners with square prop', () => {
+      render(
+        <Alert data-testid="root" square>
+          Hello World
+        </Alert>,
+      );
+
+      expect(screen.getByTestId('root')).not.to.have.class(paperClasses.rounded);
+    });
+  });
+
+  describe('prop: action', () => {
+    it('using ownerState in styleOverrides should not throw', () => {
+      const theme = createTheme({
+        components: {
+          MuiAlert: {
+            styleOverrides: {
+              root: (props) => {
+                return {
+                  ...(props.ownerState.variant === 'filled' && {
+                    border: '1px red solid',
+                  }),
+                };
+              },
+            },
+          },
+        },
+      });
+
+      expect(() =>
+        render(
+          <ThemeProvider theme={theme}>
+            <Alert action={<button>Action</button>}>Alert</Alert>
+          </ThemeProvider>,
+        ),
+      ).not.to.throw();
+    });
+
+    it('should render the action provided into the Alert', () => {
+      render(<Alert action={<button data-testid="action">Action</button>}>Hello World</Alert>);
+
+      expect(screen.getByTestId('action')).toBeVisible();
+    });
+  });
+
+  describe('prop: components', () => {
+    it('should override the default icon used in the close action', () => {
+      function MyCloseIcon() {
+        return <div data-testid="closeIcon">X</div>;
+      }
+
+      render(
+        <Alert onClose={() => {}} components={{ CloseIcon: MyCloseIcon }}>
+          Hello World
+        </Alert>,
+      );
+
+      expect(screen.getByTestId('closeIcon')).toBeVisible();
+    });
+
+    it('should override the default button used in the close action', () => {
+      function MyCloseButton() {
+        return <button data-testid="closeButton">X</button>;
+      }
+
+      render(
+        <Alert onClose={() => {}} components={{ CloseButton: MyCloseButton }}>
+          Hello World
+        </Alert>,
+      );
+
+      expect(screen.getByTestId('closeButton')).toBeVisible();
+    });
+  });
+
+  describe('prop: componentsProps', () => {
+    it('should apply the props on the close IconButton component', () => {
+      render(
+        <Alert
+          onClose={() => {}}
+          componentsProps={{
+            closeButton: {
+              'data-testid': 'closeButton',
+              size: 'large',
+              className: 'my-class',
+            },
+          }}
+        >
+          Hello World
+        </Alert>,
+      );
+
+      const closeIcon = screen.getByTestId('closeButton');
+      expect(closeIcon).to.have.class(iconButtonClasses.sizeLarge);
+      expect(closeIcon).to.have.class('my-class');
+    });
+
+    it('should apply the props on the close SvgIcon component', () => {
+      render(
+        <Alert
+          onClose={() => {}}
+          componentsProps={{
+            closeIcon: {
+              'data-testid': 'closeIcon',
+              fontSize: 'large',
+              className: 'my-class',
+            },
+          }}
+        >
+          Hello World
+        </Alert>,
+      );
+
+      const closeIcon = screen.getByTestId('closeIcon');
+      expect(closeIcon).to.have.class(svgIconClasses.fontSizeLarge);
+      expect(closeIcon).to.have.class('my-class');
+    });
+  });
+
+  describe('prop: icon', () => {
+    it('should render the icon provided into the Alert', () => {
+      render(<Alert icon={<div data-testid="icon" />}>Hello World</Alert>);
+
+      expect(screen.getByTestId('icon')).toBeVisible();
+    });
+
+    it('should not render any icon if false is provided', () => {
+      render(
+        <Alert
+          icon={false}
+          severity="success"
+          iconMapping={{ success: <div data-testid="success-icon" /> }}
+        >
+          Hello World
+        </Alert>,
+      );
+
+      expect(screen.queryByTestId('success-icon')).to.eq(null);
+    });
+  });
+
+  describe('prop: iconMapping', () => {
+    const severities = ['success', 'info', 'warning', 'error'];
+    const iconMapping = severities.reduce((acc, severity) => {
+      acc[severity] = <div data-testid={`${severity}-icon`} />;
+      return acc;
+    }, {});
+
+    severities.forEach((severity) => {
+      it(`should render the icon provided into the Alert for severity ${severity}`, () => {
+        render(
+          <Alert severity={severity} iconMapping={iconMapping}>
+            Hello World
+          </Alert>,
+        );
+
+        expect(screen.getByTestId(`${severity}-icon`)).toBeVisible();
+      });
+    });
+  });
+
+  describe('classes', () => {
+    it('should apply default color class to the root', () => {
+      render(<Alert data-testid="alert" />);
+
+      expect(screen.getByTestId('alert')).to.have.class(classes.colorSuccess);
+    });
+
+    ['success', 'info', 'warning', 'error'].forEach((color) => {
+      it('should apply color classes to the root', () => {
+        render(<Alert data-testid="alert" color={color} />);
+
+        expect(screen.getByTestId('alert')).to.have.class(classes[`color${capitalize(color)}`]);
+      });
+    });
+  });
+});

packages/mui-material/src/Alert/alertClasses.ts

@@ -0,0 +1,133 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+
+export interface AlertClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the root element if `variant="standard"`. */
+  standard: string;
+  /** Styles applied to the root element if `color="success"`. */
+  colorSuccess: string;
+  /** Styles applied to the root element if `color="info"`. */
+  colorInfo: string;
+  /** Styles applied to the root element if `color="warning"`. */
+  colorWarning: string;
+  /** Styles applied to the root element if `color="error"`. */
+  colorError: string;
+  /** Styles applied to the root element if `variant="standard"` and `color="success"`.
+   * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-MuiAlert-standard)
+   * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-MuiAlert-colorSuccess) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  standardSuccess: string;
+  /** Styles applied to the root element if `variant="standard"` and `color="info"`.
+   * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-MuiAlert-standard)
+   * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-MuiAlert-colorInfo) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  standardInfo: string;
+  /** Styles applied to the root element if `variant="standard"` and `color="warning"`.
+   * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-MuiAlert-standard)
+   * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-MuiAlert-colorWarning) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  standardWarning: string;
+  /** Styles applied to the root element if `variant="standard"` and `color="error"`.
+   * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-MuiAlert-standard)
+   * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-MuiAlert-colorError) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  standardError: string;
+  /** Styles applied to the root element if `variant="outlined"` and `color="success"`.
+   * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-MuiAlert-outlined)
+   * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-MuiAlert-colorSuccess) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  outlinedSuccess: string;
+  /** Styles applied to the root element if `variant="outlined"` and `color="info"`.
+   * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-MuiAlert-outlined)
+   * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-MuiAlert-colorInfo) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  outlinedInfo: string;
+  /** Styles applied to the root element if `variant="outlined"` and `color="warning"`.
+   * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-MuiAlert-outlined)
+   * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-MuiAlert-colorWarning) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  outlinedWarning: string;
+  /** Styles applied to the root element if `variant="outlined"` and `color="error"`.
+   * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-MuiAlert-outlined)
+   * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-MuiAlert-colorError) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  outlinedError: string;
+  /** Styles applied to the root element if `variant="filled"` and `color="success"`.
+   * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-MuiAlert-filled)
+   * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-MuiAlert-colorSuccess) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  filledSuccess: string;
+  /** Styles applied to the root element if `variant="filled"` and `color="info"`.
+   * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-MuiAlert-filled)
+   * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-MuiAlert-colorInfo) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  filledInfo: string;
+  /** Styles applied to the root element if `variant="filled"` and `color="warning"`
+   * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-MuiAlert-filled)
+   * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-MuiAlert-colorWarning) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  filledWarning: string;
+  /** Styles applied to the root element if `variant="filled"` and `color="error"`.
+   * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-MuiAlert-filled)
+   * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-MuiAlert-colorError) classes instead.
+   * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  filledError: string;
+  /** Styles applied to the icon wrapper element. */
+  icon: string;
+  /** Styles applied to the message wrapper element. */
+  message: string;
+  /** Styles applied to the action wrapper element if `action` is provided. */
+  action: string;
+}
+
+export type AlertClassKey = keyof AlertClasses;
+
+export function getAlertUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiAlert', slot);
+}
+
+const alertClasses: AlertClasses = generateUtilityClasses('MuiAlert', [
+  'root',
+  'action',
+  'icon',
+  'message',
+  'filled',
+  'colorSuccess',
+  'colorInfo',
+  'colorWarning',
+  'colorError',
+  'filledSuccess',
+  'filledInfo',
+  'filledWarning',
+  'filledError',
+  'outlined',
+  'outlinedSuccess',
+  'outlinedInfo',
+  'outlinedWarning',
+  'outlinedError',
+  'standard',
+  'standardSuccess',
+  'standardInfo',
+  'standardWarning',
+  'standardError',
+]);
+
+export default alertClasses;

packages/mui-material/src/Alert/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './Alert';
+export * from './Alert';
+
+export { default as alertClasses } from './alertClasses';
+export * from './alertClasses';

packages/mui-material/src/Alert/index.js

@@ -0,0 +1,4 @@
+export { default } from './Alert';
+
+export { default as alertClasses } from './alertClasses';
+export * from './alertClasses';