diff --git a/docs/pages/api-docs/alert.json b/docs/pages/api-docs/alert.json index 4cbe542220066d..dac98c4ef6cbc2 100644 --- 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'
| 'info'
| 'success'
| 'warning'" + "name": "union", + "description": "'error'
| 'info'
| 'success'
| 'warning'
| 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 index e54b4319f14deb..c442d20af86369 100644 --- 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 { /** * The action to display. It renders after the message, at the end of the alert. @@ -28,12 +30,12 @@ export interface AlertProps extends StandardProps { /** * The main color for the alert. Unless provided, the value is taken from the `severity` prop. */ - color?: Color; + color?: OverridableStringUnion; /** * 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 { * 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>; + iconMapping?: Partial>; /** * 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 index 796b3e984b6794..f13e17cd535d92 100644 --- 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,