[Alert] Add support for custom colors (#26831)

mui · Jun 21, 2021 · b1005ae · b1005ae
1 parent 16891c2
commit b1005ae
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/docs/pages/api-docs/alert.json b/docs/pages/api-docs/alert.json
@@ -6,8 +6,8 @@
     "closeText": { "type": { "name": "string" }, "default": "'Close'" },
     "color": {
       "type": {
-        "name": "enum",
-        "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
+        "name": "union",
+        "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       }
     },
     "icon": { "type": { "name": "node" } },

diff --git a/packages/material-ui/src/Alert/Alert.d.ts b/packages/material-ui/src/Alert/Alert.d.ts
@@ -5,10 +5,12 @@ import { InternalStandardProps as StandardProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 import { AlertClasses } from './alertClasses';
 
-export type Color = 'success' | 'info' | 'warning' | 'error';
+export type AlertColor = 'success' | 'info' | 'warning' | 'error';
 
 export interface AlertPropsVariantOverrides {}
 
+export interface AlertPropsColorOverrides {}
+
 export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
   /**
    * The action to display. It renders after the message, at the end of the alert.
@@ -28,12 +30,12 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
   /**
    * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
    */
-  color?: Color;
+  color?: OverridableStringUnion<AlertColor, AlertPropsColorOverrides>;
   /**
    * The severity of the alert. This defines the color and icon used.
    * @default 'success'
    */
-  severity?: Color;
+  severity?: AlertColor;
   /**
    * Override the icon displayed before the children.
    * Unless provided, the icon is mapped to the value of the `severity` prop.
@@ -50,11 +52,10 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
    * 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<Color, React.ReactNode>>;
+  iconMapping?: Partial<Record<AlertColor, 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 {object} event The event source of the callback.
    */
   onClose?: (event: React.SyntheticEvent) => void;

diff --git a/packages/material-ui/src/Alert/Alert.js b/packages/material-ui/src/Alert/Alert.js
@@ -141,9 +141,9 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
 
   const styleProps = {
     ...props,
-    variant,
     color,
     severity,
+    variant,
   };
 
   const classes = useUtilityClasses(styleProps);
@@ -215,7 +215,10 @@ Alert.propTypes /* remove-proptypes */ = {
   /**
    * The main color for the alert. Unless provided, the value is taken from the `severity` prop.
    */
-  color: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+    PropTypes.string,
+  ]),
   /**
    * Override the icon displayed before the children.
    * Unless provided, the icon is mapped to the value of the `severity` prop.
@@ -236,7 +239,6 @@ Alert.propTypes /* remove-proptypes */ = {
   /**
    * 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 {object} event The event source of the callback.
    */
   onClose: PropTypes.func,