Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Alert] Add support for custom colors #26831

Merged
merged 3 commits into from
Jun 21, 2021
Merged

[Alert] Add support for custom colors #26831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea57ed8
Add AlertPropsColorOverrides
varandasi Jun 18, 2021
41c09cf
push one step further
oliviertassinari Jun 18, 2021
3c3ab7d
fix types
oliviertassinari Jun 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/pages/api-docs/alert.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" } },
Expand Down
11 changes: 6 additions & 5 deletions packages/material-ui/src/Alert/Alert.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand All @@ -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;
Expand Down
8 changes: 5 additions & 3 deletions packages/material-ui/src/Alert/Alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,9 +141,9 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {

const styleProps = {
...props,
variant,
color,
severity,
variant,
};

const classes = useUtilityClasses(styleProps);
Expand Down Expand Up @@ -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.
Expand All @@ -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,
Expand Down