From 4d4936dce543d1f6b689052ab860059119059ab6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Jun 2021 14:45:44 +0700 Subject: [PATCH 01/40] fix AppBar color type --- packages/material-ui/src/AppBar/AppBar.d.ts | 15 +++++++++++++-- packages/material-ui/src/AppBar/AppBar.js | 12 +++++++++++- packages/material-ui/src/AppBar/appBarClasses.ts | 12 ++++++++++++ 3 files changed, 36 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/AppBar/AppBar.d.ts b/packages/material-ui/src/AppBar/AppBar.d.ts index 69d68835d99c7b..440fadaf35dbd2 100644 --- a/packages/material-ui/src/AppBar/AppBar.d.ts +++ b/packages/material-ui/src/AppBar/AppBar.d.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; import { DistributiveOmit, OverridableStringUnion } from '@material-ui/types'; import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent'; -import { PropTypes, Theme } from '..'; +import { Theme } from '..'; import { PaperProps } from '../Paper'; import { AppBarClasses } from './appBarClasses'; @@ -19,7 +19,18 @@ export interface AppBarTypeMap

{ * The color of the component. It supports those theme colors that make sense for this component. * @default 'primary' */ - color?: OverridableStringUnion; + color?: OverridableStringUnion< + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning' + | 'inherit' + | 'default' + | 'transparent', + AppBarPropsColorOverrides + >; /** * If true, the `color` prop is applied in dark mode. * @default false diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js index f188fdea338cc0..2a24b90429d550 100644 --- a/packages/material-ui/src/AppBar/AppBar.js +++ b/packages/material-ui/src/AppBar/AppBar.js @@ -168,7 +168,17 @@ AppBar.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), + PropTypes.oneOf([ + 'default', + 'inherit', + 'primary', + 'secondary', + 'error', + 'info', + 'succes', + 'warning', + 'transparent', + ]), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/AppBar/appBarClasses.ts b/packages/material-ui/src/AppBar/appBarClasses.ts index 1e86f739998b07..8c0d129f66c0a6 100644 --- a/packages/material-ui/src/AppBar/appBarClasses.ts +++ b/packages/material-ui/src/AppBar/appBarClasses.ts @@ -19,6 +19,14 @@ export interface AppBarClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; + /** Styles applied to the root element if `color="error"`. */ + colorError: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; /** Styles applied to the root element if `color="inherit"`. */ colorInherit: string; /** Styles applied to the root element if `color="transparent"`. */ @@ -41,6 +49,10 @@ const appBarClasses: AppBarClasses = generateUtilityClasses('MuiAppBar', [ 'colorDefault', 'colorPrimary', 'colorSecondary', + 'colorError', + 'colorInfo', + 'colorSuccess', + 'colorWarning', 'colorInherit', 'colorTransparent', ]); From f3ccd6a58dd31d4929ed2e926f665097ae557af0 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Jun 2021 14:46:21 +0700 Subject: [PATCH 02/40] add color button classes --- .../material-ui/src/Button/buttonClasses.ts | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/material-ui/src/Button/buttonClasses.ts b/packages/material-ui/src/Button/buttonClasses.ts index d401714687af1e..4c25be37a2cd10 100644 --- a/packages/material-ui/src/Button/buttonClasses.ts +++ b/packages/material-ui/src/Button/buttonClasses.ts @@ -11,6 +11,14 @@ export interface ButtonClasses { textPrimary: string; /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */ textSecondary: string; + /** Styles applied to the root element if `variant="text"` and `color="error"`. */ + textError: string; + /** Styles applied to the root element if `variant="text"` and `color="info"`. */ + textInfo: string; + /** Styles applied to the root element if `variant="text"` and `color="success"`. */ + textSuccess: string; + /** Styles applied to the root element if `variant="text"` and `color="warning"`. */ + textWarning: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. */ @@ -19,6 +27,14 @@ export interface ButtonClasses { outlinedPrimary: string; /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ outlinedSecondary: string; + /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */ + outlinedError: string; + /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */ + outlinedInfo: string; + /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */ + outlinedSuccess: string; + /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ + outlinedWarning: string; /** Styles applied to the root element if `variant="contained"`. */ contained: string; /** Styles applied to the root element if `variant="contained"` and `color="inherit"`. */ @@ -27,6 +43,14 @@ export interface ButtonClasses { containedPrimary: string; /** Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ containedSecondary: string; + /** Styles applied to the root element if `variant="contained"` and `color="error"`. */ + containedError: string; + /** Styles applied to the root element if `variant="contained"` and `color="info"`. */ + containedInfo: string; + /** Styles applied to the root element if `variant="contained"` and `color="success"`. */ + containedSuccess: string; + /** Styles applied to the root element if `variant="contained"` and `color="warning"`. */ + containedWarning: string; /** Styles applied to the root element if `disableElevation={true}`. */ disableElevation: string; /** Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */ @@ -85,14 +109,26 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ 'textInherit', 'textPrimary', 'textSecondary', + 'textError', + 'textInfo', + 'textSuccess', + 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', + 'outlinedError', + 'outlinedInfo', + 'outlinedSuccess', + 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', + 'containedError', + 'containedInfo', + 'containedSuccess', + 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', From 1fa7e0e635fe7e0c142b00e6b75bd5693fa133c3 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Jun 2021 14:49:05 +0700 Subject: [PATCH 03/40] fix Checkbox color type --- packages/material-ui/src/Checkbox/Checkbox.d.ts | 5 ++++- packages/material-ui/src/Checkbox/Checkbox.js | 2 +- packages/material-ui/src/Checkbox/checkboxClasses.ts | 12 ++++++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts index e54cdf08ec7d64..2b68350cb2f54f 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.d.ts +++ b/packages/material-ui/src/Checkbox/Checkbox.d.ts @@ -28,7 +28,10 @@ export interface CheckboxProps * The color of the component. It supports those theme colors that make sense for this component. * @default 'primary' */ - color?: OverridableStringUnion<'primary' | 'secondary' | 'default', CheckboxPropsColorOverrides>; + color?: OverridableStringUnion< + 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default', + CheckboxPropsColorOverrides + >; /** * If `true`, the component is disabled. */ diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 67f862a521c6b4..96cc77be58d039 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -143,7 +143,7 @@ Checkbox.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['default', 'primary', 'secondary']), + PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'succes', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/Checkbox/checkboxClasses.ts b/packages/material-ui/src/Checkbox/checkboxClasses.ts index ef20cd8fbc5444..0b48edd3553a9a 100644 --- a/packages/material-ui/src/Checkbox/checkboxClasses.ts +++ b/packages/material-ui/src/Checkbox/checkboxClasses.ts @@ -13,6 +13,14 @@ export interface CheckboxClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; + /** Styles applied to the root element if `color="error"`. */ + colorError: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; } export type CheckboxClassKey = keyof CheckboxClasses; @@ -28,6 +36,10 @@ const checkboxClasses: CheckboxClasses = generateUtilityClasses('MuiCheckbox', [ 'indeterminate', 'colorPrimary', 'colorSecondary', + 'colorError', + 'colorInfo', + 'colorSuccess', + 'colorWarning', ]); export default checkboxClasses; From 8b62042a93304c3b967448736d5570524a22af9c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Jun 2021 15:05:31 +0700 Subject: [PATCH 04/40] fix Chip color type --- packages/material-ui/src/Chip/Chip.d.ts | 7 +- packages/material-ui/src/Chip/Chip.js | 2 +- packages/material-ui/src/Chip/chipClasses.ts | 114 +++++++++++++++++++ 3 files changed, 120 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/Chip/Chip.d.ts b/packages/material-ui/src/Chip/Chip.d.ts index bc0e8e7da17493..cd5326f91eed80 100644 --- a/packages/material-ui/src/Chip/Chip.d.ts +++ b/packages/material-ui/src/Chip/Chip.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { OverridableStringUnion } from '@material-ui/types'; import { SxProps } from '@material-ui/system'; -import { PropTypes, Theme } from '..'; +import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ChipClasses } from './chipClasses'; @@ -39,7 +39,10 @@ export interface ChipTypeMap

{ * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ - color?: OverridableStringUnion, ChipPropsColorOverrides>; + color?: OverridableStringUnion< + 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', + ChipPropsColorOverrides + >; /** * Override the default delete icon element. Shown only if `onDelete` is set. */ diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 39b703a93122a2..b2fc798d1c6203 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -512,7 +512,7 @@ Chip.propTypes /* remove-proptypes */ = { * @default 'default' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['default', 'primary', 'secondary']), + PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/Chip/chipClasses.ts b/packages/material-ui/src/Chip/chipClasses.ts index 76cbfe53a2af85..faf7e5da5452b9 100644 --- a/packages/material-ui/src/Chip/chipClasses.ts +++ b/packages/material-ui/src/Chip/chipClasses.ts @@ -11,6 +11,14 @@ export interface ChipClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; + /** Styles applied to the root element if `color="error"`. */ + colorError: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; /** Pseudo-class applied to the root element if `disabled={true}`. */ disabled: string; /** Styles applied to the root element if `onClick` is defined or `clickable={true}`. */ @@ -19,20 +27,56 @@ export interface ChipClasses { clickableColorPrimary: string; /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */ clickableColorSecondary: string; + /** Styles applied to the root element if `onClick` and `color="error"` is defined or `clickable={true}`. */ + clickableColorError: string; + /** Styles applied to the root element if `onClick` and `color="info"` is defined or `clickable={true}`. */ + clickableColorInfo: string; + /** Styles applied to the root element if `onClick` and `color="success"` is defined or `clickable={true}`. */ + clickableColorSuccess: string; + /** Styles applied to the root element if `onClick` and `color="warning"` is defined or `clickable={true}`. */ + clickableColorWarning: string; /** Styles applied to the root element if `onDelete` is defined. */ deletable: string; /** Styles applied to the root element if `onDelete` and `color="primary"` is defined. */ deletableColorPrimary: string; /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */ deletableColorSecondary: string; + /** Styles applied to the root element if `onDelete` and `color="error"` is defined. */ + deletableColorError: string; + /** Styles applied to the root element if `onDelete` and `color="info"` is defined. */ + deletableColorInfo: string; + /** Styles applied to the root element if `onDelete` and `color="success"` is defined. */ + deletableColorSuccess: string; + /** Styles applied to the root element if `onDelete` and `color="warning"` is defined. */ + deletableColorWarning: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; /** Styles applied to the root element if `variant="filled"`. */ filled: string; + /** Styles applied to the root element if `variant="filled"` and `color="primary"`. */ + filledPrimary: string; + /** Styles applied to the root element if `variant="filled"` and `color="secondary"`. */ + filledSecondary: string; + /** Styles applied to the root element if `variant="filled"` and `color="error"`. */ + filledError: string; + /** Styles applied to the root element if `variant="filled"` and `color="info"`. */ + filledInfo: string; + /** Styles applied to the root element if `variant="filled"` and `color="success"`. */ + filledSuccess: string; + /** Styles applied to the root element if `variant="filled"` and `color="warning"`. */ + filledWarning: string; /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ outlinedPrimary: string; /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ outlinedSecondary: string; + /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */ + outlinedError: string; + /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */ + outlinedInfo: string; + /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */ + outlinedSuccess: string; + /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ + outlinedWarning: string; /** Styles applied to the avatar element. */ avatar: string; /** Styles applied to the avatar element if `size="small"`. */ @@ -43,6 +87,14 @@ export interface ChipClasses { avatarColorPrimary: string; /** Styles applied to the avatar element if `color="secondary"`. */ avatarColorSecondary: string; + /** Styles applied to the avatar element if `color="error"`. */ + avatarColorError: string; + /** Styles applied to the avatar element if `color="info"`. */ + avatarColorInfo: string; + /** Styles applied to the avatar element if `color="success"`. */ + avatarColorSuccess: string; + /** Styles applied to the avatar element if `color="warning"`. */ + avatarColorWarning: string; /** Styles applied to the icon element. */ icon: string; /** Styles applied to the icon element if `size="small"`. */ @@ -53,6 +105,14 @@ export interface ChipClasses { iconColorPrimary: string; /** Styles applied to the icon element if `color="secondary"`. */ iconColorSecondary: string; + /** Styles applied to the icon element if `color="error"`. */ + iconColorError: string; + /** Styles applied to the icon element if `color="info"`. */ + iconColorInfo: string; + /** Styles applied to the icon element if `color="success"`. */ + iconColorSuccess: string; + /** Styles applied to the icon element if `color="warning"`. */ + iconColorWarning: string; /** Styles applied to the label `span` element. */ label: string; /** Styles applied to the label `span` element if `size="small"`. */ @@ -69,10 +129,26 @@ export interface ChipClasses { deleteIconColorPrimary: string; /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ deleteIconColorSecondary: string; + /** Styles applied to the deleteIcon element if `color="error"` and `variant="filled"`. */ + deleteIconColorError: string; + /** Styles applied to the deleteIcon element if `color="info"` and `variant="filled"`. */ + deleteIconColorInfo: string; + /** Styles applied to the deleteIcon element if `color="success"` and `variant="filled"`. */ + deleteIconColorSuccess: string; + /** Styles applied to the deleteIcon element if `color="warning"` and `variant="filled"`. */ + deleteIconColorWarning: string; /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */ deleteIconOutlinedColorPrimary: string; /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */ deleteIconOutlinedColorSecondary: string; + /** Styles applied to the deleteIcon element if `color="error"` and `variant="outlined"`. */ + deleteIconOutlinedColorError: string; + /** Styles applied to the deleteIcon element if `color="info"` and `variant="outlined"`. */ + deleteIconOutlinedColorInfo: string; + /** Styles applied to the deleteIcon element if `color="success"` and `variant="outlined"`. */ + deleteIconOutlinedColorSuccess: string; + /** Styles applied to the deleteIcon element if `color="warning"` and `variant="outlined"`. */ + deleteIconOutlinedColorWarning: string; /** Pseudo-class applied to the root element if keyboard focused. */ focusVisible: string; } @@ -89,27 +165,57 @@ const chipClasses: ChipClasses = generateUtilityClasses('MuiChip', [ 'sizeMedium', 'colorPrimary', 'colorSecondary', + 'colorError', + 'colorInfo', + 'colorSuccess', + 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', + 'clickableColorError', + 'clickableColorInfo', + 'clickableColorSuccess', + 'clickableColorWarning', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', + 'deletableColorError', + 'deletableColorInfo', + 'deletableColorSuccess', + 'deletableColorWarning', 'outlined', 'filled', + 'filledPrimary', + 'filledSecondary', + 'filledError', + 'filledInfo', + 'filledSuccess', + 'filledWarning', 'outlinedPrimary', 'outlinedSecondary', + 'outlinedError', + 'outlinedInfo', + 'outlinedSuccess', + 'outlinedWarning', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', + 'avatarColorError', + 'avatarColorInfo', + 'avatarColorSuccess', + 'avatarColorWarning', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', + 'iconColorError', + 'iconColorInfo', + 'iconColorSuccess', + 'iconColorWarning', 'label', 'labelSmall', 'labelMedium', @@ -118,8 +224,16 @@ const chipClasses: ChipClasses = generateUtilityClasses('MuiChip', [ 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', + 'deleteIconColorError', + 'deleteIconColorInfo', + 'deleteIconColorSuccess', + 'deleteIconColorWarning', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', + 'deleteIconOutlinedColorError', + 'deleteIconOutlinedColorInfo', + 'deleteIconOutlinedColorSuccess', + 'deleteIconOutlinedColorWarning', 'focusVisible', ]); From 2ca359c3eee90ac5c4e09a831c943fa35ad62eb6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Jun 2021 15:08:29 +0700 Subject: [PATCH 05/40] add color type test --- .../typescript/color-palette-prop.spec.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 packages/material-ui/test/typescript/color-palette-prop.spec.tsx diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx new file mode 100644 index 00000000000000..5f4e462904339e --- /dev/null +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { AppBar, Button, Checkbox, Chip } from '@material-ui/core'; + +function TestBaseColorPaletteProp() { + const baseColorPalette = ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const; + return ( +

+ {baseColorPalette.map((color) => ( +
+ +
+ ))} +
+ ); +} From 0c02a2f95b34e961983d171a415ddb75d14e2eeb Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Jun 2021 15:33:17 +0700 Subject: [PATCH 06/40] run proptypes and docs:api --- docs/pages/api-docs/app-bar.json | 6 +- docs/pages/api-docs/button.json | 12 ++ docs/pages/api-docs/checkbox.json | 15 +- docs/pages/api-docs/chip.json | 40 +++- docs/pages/api-docs/loading-button.json | 12 ++ .../api-docs/app-bar/app-bar.json | 20 ++ docs/translations/api-docs/button/button.json | 60 ++++++ .../api-docs/checkbox/checkbox.json | 20 ++ docs/translations/api-docs/chip/chip.json | 190 ++++++++++++++++++ .../loading-button/loading-button.json | 60 ++++++ 10 files changed, 431 insertions(+), 4 deletions(-) diff --git a/docs/pages/api-docs/app-bar.json b/docs/pages/api-docs/app-bar.json index d5db76d28da810..00cbbce2e72087 100644 --- a/docs/pages/api-docs/app-bar.json +++ b/docs/pages/api-docs/app-bar.json @@ -5,7 +5,7 @@ "color": { "type": { "name": "union", - "description": "'default'
| 'inherit'
| 'primary'
| 'secondary'
| 'transparent'
| string" + "description": "'default'
| 'inherit'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'succes'
| 'warning'
| 'transparent'
| string" }, "default": "'primary'" }, @@ -31,6 +31,10 @@ "colorDefault", "colorPrimary", "colorSecondary", + "colorError", + "colorInfo", + "colorSuccess", + "colorWarning", "colorInherit", "colorTransparent" ], diff --git a/docs/pages/api-docs/button.json b/docs/pages/api-docs/button.json index afc9915d9adfc1..2f823def288d96 100644 --- a/docs/pages/api-docs/button.json +++ b/docs/pages/api-docs/button.json @@ -42,14 +42,26 @@ "textInherit", "textPrimary", "textSecondary", + "textError", + "textInfo", + "textSuccess", + "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", + "outlinedError", + "outlinedInfo", + "outlinedSuccess", + "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", + "containedError", + "containedInfo", + "containedSuccess", + "containedWarning", "disableElevation", "focusVisible", "disabled", diff --git a/docs/pages/api-docs/checkbox.json b/docs/pages/api-docs/checkbox.json index 1691c62db67a43..281906cbc01417 100644 --- a/docs/pages/api-docs/checkbox.json +++ b/docs/pages/api-docs/checkbox.json @@ -6,7 +6,7 @@ "color": { "type": { "name": "union", - "description": "'default'
| 'primary'
| 'secondary'
| string" + "description": "'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'succes'
| 'warning'
| string" }, "default": "'primary'" }, @@ -33,7 +33,18 @@ }, "name": "Checkbox", "styles": { - "classes": ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary"], + "classes": [ + "root", + "checked", + "disabled", + "indeterminate", + "colorPrimary", + "colorSecondary", + "colorError", + "colorInfo", + "colorSuccess", + "colorWarning" + ], "globalClasses": { "checked": "Mui-checked", "disabled": "Mui-disabled" }, "name": "MuiCheckbox" }, diff --git a/docs/pages/api-docs/chip.json b/docs/pages/api-docs/chip.json index 494b8cfedb62cf..c5f3ebed74d014 100644 --- a/docs/pages/api-docs/chip.json +++ b/docs/pages/api-docs/chip.json @@ -7,7 +7,7 @@ "color": { "type": { "name": "union", - "description": "'default'
| 'primary'
| 'secondary'
| string" + "description": "'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'default'" }, @@ -41,27 +41,57 @@ "sizeMedium", "colorPrimary", "colorSecondary", + "colorError", + "colorInfo", + "colorSuccess", + "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", + "clickableColorError", + "clickableColorInfo", + "clickableColorSuccess", + "clickableColorWarning", "deletable", "deletableColorPrimary", "deletableColorSecondary", + "deletableColorError", + "deletableColorInfo", + "deletableColorSuccess", + "deletableColorWarning", "outlined", "filled", + "filledPrimary", + "filledSecondary", + "filledError", + "filledInfo", + "filledSuccess", + "filledWarning", "outlinedPrimary", "outlinedSecondary", + "outlinedError", + "outlinedInfo", + "outlinedSuccess", + "outlinedWarning", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", + "avatarColorError", + "avatarColorInfo", + "avatarColorSuccess", + "avatarColorWarning", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", + "iconColorError", + "iconColorInfo", + "iconColorSuccess", + "iconColorWarning", "label", "labelSmall", "labelMedium", @@ -70,8 +100,16 @@ "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", + "deleteIconColorError", + "deleteIconColorInfo", + "deleteIconColorSuccess", + "deleteIconColorWarning", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", + "deleteIconOutlinedColorError", + "deleteIconOutlinedColorInfo", + "deleteIconOutlinedColorSuccess", + "deleteIconOutlinedColorWarning", "focusVisible" ], "globalClasses": { "disabled": "Mui-disabled", "focusVisible": "Mui-focusVisible" }, diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json index 4b101b6eee9e3b..abbd480a2d6b83 100644 --- a/docs/pages/api-docs/loading-button.json +++ b/docs/pages/api-docs/loading-button.json @@ -25,14 +25,26 @@ "textInherit", "textPrimary", "textSecondary", + "textError", + "textInfo", + "textSuccess", + "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", + "outlinedError", + "outlinedInfo", + "outlinedSuccess", + "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", + "containedError", + "containedInfo", + "containedSuccess", + "containedWarning", "disableElevation", "focusVisible", "disabled", diff --git a/docs/translations/api-docs/app-bar/app-bar.json b/docs/translations/api-docs/app-bar/app-bar.json index 5431f19c54e579..f25c93cdbbd468 100644 --- a/docs/translations/api-docs/app-bar/app-bar.json +++ b/docs/translations/api-docs/app-bar/app-bar.json @@ -50,6 +50,26 @@ "nodeName": "the root element", "conditions": "color=\"secondary\"" }, + "colorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"error\"" + }, + "colorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"info\"" + }, + "colorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"warning\"" + }, "colorInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index 7ae822919df2d0..e7e5b55328dcf3 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -39,6 +39,26 @@ "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"secondary\"" }, + "textError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"error\"" + }, + "textInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"info\"" + }, + "textSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"success\"" + }, + "textWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"warning\"" + }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -59,6 +79,26 @@ "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"secondary\"" }, + "outlinedError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"error\"" + }, + "outlinedInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"info\"" + }, + "outlinedSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"success\"" + }, + "outlinedWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"warning\"" + }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -79,6 +119,26 @@ "nodeName": "the root element", "conditions": "variant=\"contained\" and color=\"secondary\"" }, + "containedError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"error\"" + }, + "containedInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"info\"" + }, + "containedSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"success\"" + }, + "containedWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"warning\"" + }, "disableElevation": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/checkbox/checkbox.json b/docs/translations/api-docs/checkbox/checkbox.json index 725bf520d1c9d3..73c5e48bcd3a0c 100644 --- a/docs/translations/api-docs/checkbox/checkbox.json +++ b/docs/translations/api-docs/checkbox/checkbox.json @@ -46,6 +46,26 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "color=\"secondary\"" + }, + "colorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"error\"" + }, + "colorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"info\"" + }, + "colorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"warning\"" } } } diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json index f074a962067bfe..943dee73e83821 100644 --- a/docs/translations/api-docs/chip/chip.json +++ b/docs/translations/api-docs/chip/chip.json @@ -38,6 +38,26 @@ "nodeName": "the root element", "conditions": "color=\"secondary\"" }, + "colorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"error\"" + }, + "colorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"info\"" + }, + "colorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"warning\"" + }, "disabled": { "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -58,6 +78,26 @@ "nodeName": "the root element", "conditions": "onClick and color=\"secondary\" is defined or clickable={true}" }, + "clickableColorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "onClick and color=\"error\" is defined or clickable={true}" + }, + "clickableColorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "onClick and color=\"info\" is defined or clickable={true}" + }, + "clickableColorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "onClick and color=\"success\" is defined or clickable={true}" + }, + "clickableColorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "onClick and color=\"warning\" is defined or clickable={true}" + }, "deletable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -73,6 +113,26 @@ "nodeName": "the root element", "conditions": "onDelete and color=\"secondary\" is defined" }, + "deletableColorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "onDelete and color=\"error\" is defined" + }, + "deletableColorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "onDelete and color=\"info\" is defined" + }, + "deletableColorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "onDelete and color=\"success\" is defined" + }, + "deletableColorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "onDelete and color=\"warning\" is defined" + }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -83,6 +143,36 @@ "nodeName": "the root element", "conditions": "variant=\"filled\"" }, + "filledPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"filled\" and color=\"primary\"" + }, + "filledSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"filled\" and color=\"secondary\"" + }, + "filledError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"filled\" and color=\"error\"" + }, + "filledInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"filled\" and color=\"info\"" + }, + "filledSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"filled\" and color=\"success\"" + }, + "filledWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"filled\" and color=\"warning\"" + }, "outlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -93,6 +183,26 @@ "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"secondary\"" }, + "outlinedError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"error\"" + }, + "outlinedInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"info\"" + }, + "outlinedSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"success\"" + }, + "outlinedWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"warning\"" + }, "avatar": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the avatar element" @@ -117,6 +227,26 @@ "nodeName": "the avatar element", "conditions": "color=\"secondary\"" }, + "avatarColorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the avatar element", + "conditions": "color=\"error\"" + }, + "avatarColorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the avatar element", + "conditions": "color=\"info\"" + }, + "avatarColorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the avatar element", + "conditions": "color=\"success\"" + }, + "avatarColorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the avatar element", + "conditions": "color=\"warning\"" + }, "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon element" }, "iconSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -138,6 +268,26 @@ "nodeName": "the icon element", "conditions": "color=\"secondary\"" }, + "iconColorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "color=\"error\"" + }, + "iconColorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "color=\"info\"" + }, + "iconColorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "color=\"success\"" + }, + "iconColorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "color=\"warning\"" + }, "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label `span` element" @@ -176,6 +326,26 @@ "nodeName": "the deleteIcon element", "conditions": "color=\"secondary\" and variant=\"filled\"" }, + "deleteIconColorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the deleteIcon element", + "conditions": "color=\"error\" and variant=\"filled\"" + }, + "deleteIconColorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the deleteIcon element", + "conditions": "color=\"info\" and variant=\"filled\"" + }, + "deleteIconColorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the deleteIcon element", + "conditions": "color=\"success\" and variant=\"filled\"" + }, + "deleteIconColorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the deleteIcon element", + "conditions": "color=\"warning\" and variant=\"filled\"" + }, "deleteIconOutlinedColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", @@ -186,6 +356,26 @@ "nodeName": "the deleteIcon element", "conditions": "color=\"secondary\" and variant=\"outlined\"" }, + "deleteIconOutlinedColorError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the deleteIcon element", + "conditions": "color=\"error\" and variant=\"outlined\"" + }, + "deleteIconOutlinedColorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the deleteIcon element", + "conditions": "color=\"info\" and variant=\"outlined\"" + }, + "deleteIconOutlinedColorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the deleteIcon element", + "conditions": "color=\"success\" and variant=\"outlined\"" + }, + "deleteIconOutlinedColorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the deleteIcon element", + "conditions": "color=\"warning\" and variant=\"outlined\"" + }, "focusVisible": { "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json index e3dd419bfdd376..d68b152e58b0b7 100644 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ b/docs/translations/api-docs/loading-button/loading-button.json @@ -31,6 +31,26 @@ "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"secondary\"" }, + "textError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"error\"" + }, + "textInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"info\"" + }, + "textSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"success\"" + }, + "textWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"text\" and color=\"warning\"" + }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -51,6 +71,26 @@ "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"secondary\"" }, + "outlinedError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"error\"" + }, + "outlinedInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"info\"" + }, + "outlinedSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"success\"" + }, + "outlinedWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"outlined\" and color=\"warning\"" + }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -71,6 +111,26 @@ "nodeName": "the root element", "conditions": "variant=\"contained\" and color=\"secondary\"" }, + "containedError": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"error\"" + }, + "containedInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"info\"" + }, + "containedSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"success\"" + }, + "containedWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "variant=\"contained\" and color=\"warning\"" + }, "disableElevation": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", From 0cea9ddf40e8457350d8ecd507e2b605b783bf9c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 11 Jun 2021 15:37:51 +0700 Subject: [PATCH 07/40] fix CircularProgress color type --- .../src/CircularProgress/CircularProgress.d.ts | 2 +- .../src/CircularProgress/CircularProgress.js | 2 +- .../src/CircularProgress/circularProgressClasses.ts | 12 ++++++++++++ 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts index 5309b097166601..c96cd354671b4f 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts +++ b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts @@ -17,7 +17,7 @@ export interface CircularProgressProps * @default 'primary' */ color?: OverridableStringUnion< - 'primary' | 'secondary' | 'inherit', + 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit', CircularProgressPropsColorOverrides >; /** diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js index 5809f125e32285..05ea362ec93faa 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.js +++ b/packages/material-ui/src/CircularProgress/CircularProgress.js @@ -222,7 +222,7 @@ CircularProgress.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['inherit', 'primary', 'secondary']), + PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'succes', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/CircularProgress/circularProgressClasses.ts b/packages/material-ui/src/CircularProgress/circularProgressClasses.ts index dd5bd9a89d33c2..ea11e64c57e0b8 100644 --- a/packages/material-ui/src/CircularProgress/circularProgressClasses.ts +++ b/packages/material-ui/src/CircularProgress/circularProgressClasses.ts @@ -11,6 +11,14 @@ export interface CircularProgressClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; + /** Styles applied to the root element if `color="error"`. */ + colorError: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; /** Styles applied to the svg element. */ svg: string; /** Styles applied to the `circle` svg path. */ @@ -37,6 +45,10 @@ const circularProgressClasses: CircularProgressClasses = generateUtilityClasses( 'indeterminate', 'colorPrimary', 'colorSecondary', + 'colorError', + 'colorInfo', + 'colorSuccess', + 'colorWarning', 'svg', 'circle', 'circleDeterminate', From 6e8cb808fa55357407355faf7f4fde99623d58d3 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 17:23:12 +0700 Subject: [PATCH 08/40] Revert "fix AppBar color type" This reverts commit 4d4936dce543d1f6b689052ab860059119059ab6. --- packages/material-ui/src/AppBar/AppBar.d.ts | 15 ++------------- packages/material-ui/src/AppBar/AppBar.js | 12 +----------- packages/material-ui/src/AppBar/appBarClasses.ts | 12 ------------ 3 files changed, 3 insertions(+), 36 deletions(-) diff --git a/packages/material-ui/src/AppBar/AppBar.d.ts b/packages/material-ui/src/AppBar/AppBar.d.ts index 440fadaf35dbd2..69d68835d99c7b 100644 --- a/packages/material-ui/src/AppBar/AppBar.d.ts +++ b/packages/material-ui/src/AppBar/AppBar.d.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; import { DistributiveOmit, OverridableStringUnion } from '@material-ui/types'; import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent'; -import { Theme } from '..'; +import { PropTypes, Theme } from '..'; import { PaperProps } from '../Paper'; import { AppBarClasses } from './appBarClasses'; @@ -19,18 +19,7 @@ export interface AppBarTypeMap

{ * The color of the component. It supports those theme colors that make sense for this component. * @default 'primary' */ - color?: OverridableStringUnion< - | 'primary' - | 'secondary' - | 'error' - | 'info' - | 'success' - | 'warning' - | 'inherit' - | 'default' - | 'transparent', - AppBarPropsColorOverrides - >; + color?: OverridableStringUnion; /** * If true, the `color` prop is applied in dark mode. * @default false diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js index 2a24b90429d550..f188fdea338cc0 100644 --- a/packages/material-ui/src/AppBar/AppBar.js +++ b/packages/material-ui/src/AppBar/AppBar.js @@ -168,17 +168,7 @@ AppBar.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf([ - 'default', - 'inherit', - 'primary', - 'secondary', - 'error', - 'info', - 'succes', - 'warning', - 'transparent', - ]), + PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/AppBar/appBarClasses.ts b/packages/material-ui/src/AppBar/appBarClasses.ts index 8c0d129f66c0a6..1e86f739998b07 100644 --- a/packages/material-ui/src/AppBar/appBarClasses.ts +++ b/packages/material-ui/src/AppBar/appBarClasses.ts @@ -19,14 +19,6 @@ export interface AppBarClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; - /** Styles applied to the root element if `color="error"`. */ - colorError: string; - /** Styles applied to the root element if `color="info"`. */ - colorInfo: string; - /** Styles applied to the root element if `color="success"`. */ - colorSuccess: string; - /** Styles applied to the root element if `color="warning"`. */ - colorWarning: string; /** Styles applied to the root element if `color="inherit"`. */ colorInherit: string; /** Styles applied to the root element if `color="transparent"`. */ @@ -49,10 +41,6 @@ const appBarClasses: AppBarClasses = generateUtilityClasses('MuiAppBar', [ 'colorDefault', 'colorPrimary', 'colorSecondary', - 'colorError', - 'colorInfo', - 'colorSuccess', - 'colorWarning', 'colorInherit', 'colorTransparent', ]); From d9a66117d7984c7f8ec821fb940309b8d4189d7c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 17:23:35 +0700 Subject: [PATCH 09/40] Revert "fix CircularProgress color type" This reverts commit 0cea9ddf40e8457350d8ecd507e2b605b783bf9c. --- .../src/CircularProgress/CircularProgress.d.ts | 2 +- .../src/CircularProgress/CircularProgress.js | 2 +- .../src/CircularProgress/circularProgressClasses.ts | 12 ------------ 3 files changed, 2 insertions(+), 14 deletions(-) diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts index c96cd354671b4f..5309b097166601 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts +++ b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts @@ -17,7 +17,7 @@ export interface CircularProgressProps * @default 'primary' */ color?: OverridableStringUnion< - 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit', + 'primary' | 'secondary' | 'inherit', CircularProgressPropsColorOverrides >; /** diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js index 05ea362ec93faa..5809f125e32285 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.js +++ b/packages/material-ui/src/CircularProgress/CircularProgress.js @@ -222,7 +222,7 @@ CircularProgress.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'succes', 'warning']), + PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/CircularProgress/circularProgressClasses.ts b/packages/material-ui/src/CircularProgress/circularProgressClasses.ts index ea11e64c57e0b8..dd5bd9a89d33c2 100644 --- a/packages/material-ui/src/CircularProgress/circularProgressClasses.ts +++ b/packages/material-ui/src/CircularProgress/circularProgressClasses.ts @@ -11,14 +11,6 @@ export interface CircularProgressClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; - /** Styles applied to the root element if `color="error"`. */ - colorError: string; - /** Styles applied to the root element if `color="info"`. */ - colorInfo: string; - /** Styles applied to the root element if `color="success"`. */ - colorSuccess: string; - /** Styles applied to the root element if `color="warning"`. */ - colorWarning: string; /** Styles applied to the svg element. */ svg: string; /** Styles applied to the `circle` svg path. */ @@ -45,10 +37,6 @@ const circularProgressClasses: CircularProgressClasses = generateUtilityClasses( 'indeterminate', 'colorPrimary', 'colorSecondary', - 'colorError', - 'colorInfo', - 'colorSuccess', - 'colorWarning', 'svg', 'circle', 'circleDeterminate', From ee6c3075feb48ef66bf80dc7e9b8ea30c9cacbbb Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 17:27:12 +0700 Subject: [PATCH 10/40] run proptypes and docs:api --- docs/pages/api-docs/app-bar.json | 6 +----- .../api-docs/app-bar/app-bar.json | 20 ------------------- 2 files changed, 1 insertion(+), 25 deletions(-) diff --git a/docs/pages/api-docs/app-bar.json b/docs/pages/api-docs/app-bar.json index 00cbbce2e72087..d5db76d28da810 100644 --- a/docs/pages/api-docs/app-bar.json +++ b/docs/pages/api-docs/app-bar.json @@ -5,7 +5,7 @@ "color": { "type": { "name": "union", - "description": "'default'
| 'inherit'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'succes'
| 'warning'
| 'transparent'
| string" + "description": "'default'
| 'inherit'
| 'primary'
| 'secondary'
| 'transparent'
| string" }, "default": "'primary'" }, @@ -31,10 +31,6 @@ "colorDefault", "colorPrimary", "colorSecondary", - "colorError", - "colorInfo", - "colorSuccess", - "colorWarning", "colorInherit", "colorTransparent" ], diff --git a/docs/translations/api-docs/app-bar/app-bar.json b/docs/translations/api-docs/app-bar/app-bar.json index f25c93cdbbd468..5431f19c54e579 100644 --- a/docs/translations/api-docs/app-bar/app-bar.json +++ b/docs/translations/api-docs/app-bar/app-bar.json @@ -50,26 +50,6 @@ "nodeName": "the root element", "conditions": "color=\"secondary\"" }, - "colorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"error\"" - }, - "colorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"info\"" - }, - "colorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"success\"" - }, - "colorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"warning\"" - }, "colorInherit": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", From f00aba1bf41ad1ef5351255da4d9df55e88e1feb Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 17:45:27 +0700 Subject: [PATCH 11/40] finish Badge color palette --- docs/src/pages/components/badges/ColorBadge.js | 18 ++++++++++++++++++ .../src/pages/components/badges/ColorBadge.tsx | 18 ++++++++++++++++++ .../src/pages/components/badges/SimpleBadge.js | 12 +++--------- .../pages/components/badges/SimpleBadge.tsx | 12 +++--------- docs/src/pages/components/badges/badges.md | 6 ++++++ packages/material-ui/src/Badge/Badge.d.ts | 8 +++++++- packages/material-ui/src/Badge/Badge.js | 11 +++++++++-- .../typescript/color-palette-prop.spec.tsx | 4 ++-- 8 files changed, 66 insertions(+), 23 deletions(-) create mode 100644 docs/src/pages/components/badges/ColorBadge.js create mode 100644 docs/src/pages/components/badges/ColorBadge.tsx diff --git a/docs/src/pages/components/badges/ColorBadge.js b/docs/src/pages/components/badges/ColorBadge.js new file mode 100644 index 00000000000000..f2f105db2fb514 --- /dev/null +++ b/docs/src/pages/components/badges/ColorBadge.js @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Badge from '@material-ui/core/Badge'; +import Stack from '@material-ui/core/Stack'; +import MailIcon from '@material-ui/icons/Mail'; + +export default function ColorBadge() { + return ( + + {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map( + (color) => ( + + + + ), + )} + + ); +} diff --git a/docs/src/pages/components/badges/ColorBadge.tsx b/docs/src/pages/components/badges/ColorBadge.tsx new file mode 100644 index 00000000000000..2663ec08844ec8 --- /dev/null +++ b/docs/src/pages/components/badges/ColorBadge.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Badge from '@material-ui/core/Badge'; +import Stack from '@material-ui/core/Stack'; +import MailIcon from '@material-ui/icons/Mail'; + +export default function ColorBadge() { + return ( + + {( + ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const + ).map((color) => ( + + + + ))} + + ); +} diff --git a/docs/src/pages/components/badges/SimpleBadge.js b/docs/src/pages/components/badges/SimpleBadge.js index 29695efc06fe1f..6956cc470c2bcd 100644 --- a/docs/src/pages/components/badges/SimpleBadge.js +++ b/docs/src/pages/components/badges/SimpleBadge.js @@ -1,17 +1,11 @@ import * as React from 'react'; -import Stack from '@material-ui/core/Stack'; import Badge from '@material-ui/core/Badge'; import MailIcon from '@material-ui/icons/Mail'; export default function SimpleBadge() { return ( - - - - - - - - + + + ); } diff --git a/docs/src/pages/components/badges/SimpleBadge.tsx b/docs/src/pages/components/badges/SimpleBadge.tsx index 29695efc06fe1f..6956cc470c2bcd 100644 --- a/docs/src/pages/components/badges/SimpleBadge.tsx +++ b/docs/src/pages/components/badges/SimpleBadge.tsx @@ -1,17 +1,11 @@ import * as React from 'react'; -import Stack from '@material-ui/core/Stack'; import Badge from '@material-ui/core/Badge'; import MailIcon from '@material-ui/icons/Mail'; export default function SimpleBadge() { return ( - - - - - - - - + + + ); } diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md index e7f5a3ebcab63d..6ef309f3ebe5d4 100644 --- a/docs/src/pages/components/badges/badges.md +++ b/docs/src/pages/components/badges/badges.md @@ -16,6 +16,12 @@ Examples of badges containing text, using primary and secondary colors. The badg {{"demo": "pages/components/badges/SimpleBadge.js"}} +## Color Badge + +Use `color` prop to apply theme color palette to component. + +{{"demo": "pages/components/badges/ColorBadge.js"}} + ## Customized badges Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/how-to-customize/). diff --git a/packages/material-ui/src/Badge/Badge.d.ts b/packages/material-ui/src/Badge/Badge.d.ts index d0af2ec9286dc9..c0a6f21719c534 100644 --- a/packages/material-ui/src/Badge/Badge.d.ts +++ b/packages/material-ui/src/Badge/Badge.d.ts @@ -27,13 +27,19 @@ export type BadgeTypeMap< colorSecondary?: string; /** Styles applied to the badge `span` element if `color="error"`. */ colorError?: string; + /** Styles applied to the badge `span` element if `color="info"`. */ + colorInfo?: string; + /** Styles applied to the badge `span` element if `color="success"`. */ + colorSuccess?: string; + /** Styles applied to the badge `span` element if `color="warning"`. */ + colorWarning?: string; }; /** * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ color?: OverridableStringUnion< - 'primary' | 'secondary' | 'default' | 'error', + 'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning', BadgePropsColorOverrides >; /** diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js index 6cb04dd76a0bd4..8353b7f78e681c 100644 --- a/packages/material-ui/src/Badge/Badge.js +++ b/packages/material-ui/src/Badge/Badge.js @@ -13,7 +13,14 @@ import capitalize from '../utils/capitalize'; export const badgeClasses = { ...badgeUnstyledClasses, - ...generateUtilityClasses('MuiBadge', ['colorError', 'colorPrimary', 'colorSecondary']), + ...generateUtilityClasses('MuiBadge', [ + 'colorError', + 'colorPrimary', + 'colorSecondary', + 'colorInfo', + 'colorSuccess', + 'colorWarning', + ]), }; const RADIUS_STANDARD = 10; @@ -285,7 +292,7 @@ Badge.propTypes /* remove-proptypes */ = { * @default 'default' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['default', 'error', 'primary', 'secondary']), + PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index 5f4e462904339e..bb3414224fa01a 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { AppBar, Button, Checkbox, Chip } from '@material-ui/core'; +import { Button, Badge, Checkbox, Chip } from '@material-ui/core'; function TestBaseColorPaletteProp() { const baseColorPalette = ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const; @@ -7,8 +7,8 @@ function TestBaseColorPaletteProp() {

{baseColorPalette.map((color) => (
-
From ecf4bf614564e1bb990f6053ca147243ed743b14 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 18:06:38 +0700 Subject: [PATCH 12/40] finish TimelineDot color palette --- .../components/timeline/ColorsTimeline.js | 36 +++++++-- .../components/timeline/ColorsTimeline.tsx | 36 +++++++-- .../src/TimelineDot/TimelineDot.d.ts | 2 +- .../src/TimelineDot/TimelineDot.js | 77 ++++++++----------- .../src/TimelineDot/timelineDotClasses.ts | 24 ++++++ .../typescript/color-palette-prop.spec.tsx | 2 + 6 files changed, 120 insertions(+), 57 deletions(-) diff --git a/docs/src/pages/components/timeline/ColorsTimeline.js b/docs/src/pages/components/timeline/ColorsTimeline.js index d0a3df04426834..b154bce5f008d6 100644 --- a/docs/src/pages/components/timeline/ColorsTimeline.js +++ b/docs/src/pages/components/timeline/ColorsTimeline.js @@ -8,33 +8,57 @@ import TimelineDot from '@material-ui/lab/TimelineDot'; export default function ColorsTimeline() { return ( - + - Eat + Grey - Code + Primary - Sleep + Secondary - + + + + Error + + + + + + + Info + + + + + + + Success + + + + - Repeat + Warning ); diff --git a/docs/src/pages/components/timeline/ColorsTimeline.tsx b/docs/src/pages/components/timeline/ColorsTimeline.tsx index d0a3df04426834..b154bce5f008d6 100644 --- a/docs/src/pages/components/timeline/ColorsTimeline.tsx +++ b/docs/src/pages/components/timeline/ColorsTimeline.tsx @@ -8,33 +8,57 @@ import TimelineDot from '@material-ui/lab/TimelineDot'; export default function ColorsTimeline() { return ( - + - Eat + Grey - Code + Primary - Sleep + Secondary - + + + + Error + + + + + + + Info + + + + + + + Success + + + + - Repeat + Warning ); diff --git a/packages/material-ui-lab/src/TimelineDot/TimelineDot.d.ts b/packages/material-ui-lab/src/TimelineDot/TimelineDot.d.ts index 73a397a571bf17..eb1f7a280b1975 100644 --- a/packages/material-ui-lab/src/TimelineDot/TimelineDot.d.ts +++ b/packages/material-ui-lab/src/TimelineDot/TimelineDot.d.ts @@ -20,7 +20,7 @@ export interface TimelineDotProps extends StandardProps +
))} From 667f32a45657fcafe79bb917c341e2e5cbc71ed3 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 18:21:59 +0700 Subject: [PATCH 13/40] finish ButtonGroup color palette --- .../button-group/ColorsButtonGroup.js | 33 +++++++++++++++++ .../button-group/ColorsButtonGroup.tsx | 33 +++++++++++++++++ ...roupSizesColors.js => SizesButtonGroup.js} | 6 ++-- ...upSizesColors.tsx => SizesButtonGroup.tsx} | 6 ++-- .../components/button-group/button-group.md | 12 +++++-- .../src/ButtonGroup/ButtonGroup.d.ts | 2 +- .../src/ButtonGroup/ButtonGroup.js | 2 +- .../src/ButtonGroup/buttonGroupClasses.ts | 36 +++++++++++++++++++ .../typescript/color-palette-prop.spec.tsx | 5 +-- 9 files changed, 120 insertions(+), 15 deletions(-) create mode 100644 docs/src/pages/components/button-group/ColorsButtonGroup.js create mode 100644 docs/src/pages/components/button-group/ColorsButtonGroup.tsx rename docs/src/pages/components/button-group/{GroupSizesColors.js => SizesButtonGroup.js} (81%) rename docs/src/pages/components/button-group/{GroupSizesColors.tsx => SizesButtonGroup.tsx} (81%) diff --git a/docs/src/pages/components/button-group/ColorsButtonGroup.js b/docs/src/pages/components/button-group/ColorsButtonGroup.js new file mode 100644 index 00000000000000..2aa42fb45bb12c --- /dev/null +++ b/docs/src/pages/components/button-group/ColorsButtonGroup.js @@ -0,0 +1,33 @@ +import * as React from 'react'; +import Button from '@material-ui/core/Button'; +import Box from '@material-ui/core/Box'; +import ButtonGroup from '@material-ui/core/ButtonGroup'; + +const buttons = [ + , + , + , +]; + +export default function ColorsButtonGroup() { + return ( + *': { + m: 1, + }, + }} + > + {( + ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const + ).map((color) => ( + + {buttons} + + ))} + + ); +} diff --git a/docs/src/pages/components/button-group/ColorsButtonGroup.tsx b/docs/src/pages/components/button-group/ColorsButtonGroup.tsx new file mode 100644 index 00000000000000..2aa42fb45bb12c --- /dev/null +++ b/docs/src/pages/components/button-group/ColorsButtonGroup.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import Button from '@material-ui/core/Button'; +import Box from '@material-ui/core/Box'; +import ButtonGroup from '@material-ui/core/ButtonGroup'; + +const buttons = [ + , + , + , +]; + +export default function ColorsButtonGroup() { + return ( + *': { + m: 1, + }, + }} + > + {( + ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const + ).map((color) => ( + + {buttons} + + ))} + + ); +} diff --git a/docs/src/pages/components/button-group/GroupSizesColors.js b/docs/src/pages/components/button-group/SizesButtonGroup.js similarity index 81% rename from docs/src/pages/components/button-group/GroupSizesColors.js rename to docs/src/pages/components/button-group/SizesButtonGroup.js index a0cea7c9fed351..0a256ee9751e98 100644 --- a/docs/src/pages/components/button-group/GroupSizesColors.js +++ b/docs/src/pages/components/button-group/SizesButtonGroup.js @@ -9,7 +9,7 @@ const buttons = [ , ]; -export default function GroupSizesColors() { +export default function SizesButtonGroup() { return ( {buttons} - - {buttons} - + {buttons} {buttons} diff --git a/docs/src/pages/components/button-group/GroupSizesColors.tsx b/docs/src/pages/components/button-group/SizesButtonGroup.tsx similarity index 81% rename from docs/src/pages/components/button-group/GroupSizesColors.tsx rename to docs/src/pages/components/button-group/SizesButtonGroup.tsx index a0cea7c9fed351..0a256ee9751e98 100644 --- a/docs/src/pages/components/button-group/GroupSizesColors.tsx +++ b/docs/src/pages/components/button-group/SizesButtonGroup.tsx @@ -9,7 +9,7 @@ const buttons = [ , ]; -export default function GroupSizesColors() { +export default function SizesButtonGroup() { return ( {buttons} - - {buttons} - + {buttons} {buttons} diff --git a/docs/src/pages/components/button-group/button-group.md b/docs/src/pages/components/button-group/button-group.md index d75e0f9b936581..6b73c1621842e6 100644 --- a/docs/src/pages/components/button-group/button-group.md +++ b/docs/src/pages/components/button-group/button-group.md @@ -23,11 +23,17 @@ All the standard button variants are supported. {{"demo": "pages/components/button-group/VariantButtonGroup.js"}} -## Sizes and colors +## Sizes -The `size` and `color` props can be used to control the appearance of the button group. +The `size` prop can be used to control the appearance of the button group. -{{"demo": "pages/components/button-group/GroupSizesColors.js"}} +{{"demo": "pages/components/button-group/SizesButtonGroup.js"}} + +## Colors + +Use `color` prop to apply theme color palette to component. + +{{"demo": "pages/components/button-group/ColorsButtonGroup.js"}} ## Vertical group diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts index d51d2204f3e2cf..aa71f4063d963f 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts @@ -23,7 +23,7 @@ export interface ButtonGroupTypeMap

* @default 'primary' */ color?: OverridableStringUnion< - 'inherit' | 'primary' | 'secondary', + 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ButtonGroupPropsColorOverrides >; /** diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js index 0f6f565ca3243a..e074b50f5198db 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.js +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.js @@ -256,7 +256,7 @@ ButtonGroup.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['inherit', 'primary', 'secondary']), + PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/ButtonGroup/buttonGroupClasses.ts b/packages/material-ui/src/ButtonGroup/buttonGroupClasses.ts index c5151ad2f87979..251e42f4db6459 100644 --- a/packages/material-ui/src/ButtonGroup/buttonGroupClasses.ts +++ b/packages/material-ui/src/ButtonGroup/buttonGroupClasses.ts @@ -33,6 +33,14 @@ export interface ButtonGroupClasses { groupedTextPrimary: string; /** Styles applied to the children if `variant="text"` and `color="secondary"`. */ groupedTextSecondary: string; + /** Styles applied to the children if `variant="text"` and `color="error"`. */ + groupedTextError: string; + /** Styles applied to the children if `variant="text"` and `color="info"`. */ + groupedTextInfo: string; + /** Styles applied to the children if `variant="text"` and `color="success"`. */ + groupedTextSuccess: string; + /** Styles applied to the children if `variant="text"` and `color="warning"`. */ + groupedTextWarning: string; /** Styles applied to the children if `variant="outlined"`. */ groupedOutlined: string; /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */ @@ -43,6 +51,14 @@ export interface ButtonGroupClasses { groupedOutlinedPrimary: string; /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. */ groupedOutlinedSecondary: string; + /** Styles applied to the children if `variant="outlined"` and `color="error"`. */ + groupedOutlinedError: string; + /** Styles applied to the children if `variant="outlined"` and `color="info"`. */ + groupedOutlinedInfo: string; + /** Styles applied to the children if `variant="outlined"` and `color="success"`. */ + groupedOutlinedSuccess: string; + /** Styles applied to the children if `variant="outlined"` and `color="warning"`. */ + groupedOutlinedWarning: string; /** Styles applied to the children if `variant="contained"`. */ groupedContained: string; /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */ @@ -53,6 +69,14 @@ export interface ButtonGroupClasses { groupedContainedPrimary: string; /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */ groupedContainedSecondary: string; + /** Styles applied to the children if `variant="contained"` and `color="error"`. */ + groupedContainedError: string; + /** Styles applied to the children if `variant="contained"` and `color="info"`. */ + groupedContainedInfo: string; + /** Styles applied to the children if `variant="contained"` and `color="success"`. */ + groupedContainedSuccess: string; + /** Styles applied to the children if `variant="contained"` and `color="warning"`. */ + groupedContainedWarning: string; } export type ButtonGroupClassKey = keyof ButtonGroupClasses; @@ -78,16 +102,28 @@ const buttonGroupClasses: ButtonGroupClasses = generateUtilityClasses('MuiButton 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', + 'groupedTextError', + 'groupedTextInfo', + 'groupedTextSuccess', + 'groupedTextWarning', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', + 'groupedOutlinedError', + 'groupedOutlinedInfo', + 'groupedOutlinedSuccess', + 'groupedOutlinedWarning', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', + 'groupedContainedError', + 'groupedContainedInfo', + 'groupedContainedSuccess', + 'groupedContainedWarning', ]); export default buttonGroupClasses; diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index 0792716c3749e3..998481dca91bc2 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Button, Badge, Checkbox, Chip } from '@material-ui/core'; +import { Badge, Button, ButtonGroup, Checkbox, Chip } from '@material-ui/core'; import { TimelineDot } from '@material-ui/lab'; function TestBaseColorPaletteProp() { @@ -8,8 +8,9 @@ function TestBaseColorPaletteProp() {

{baseColorPalette.map((color) => (
-
))}
From 1f0afe08f88446a9890f59bb168857640f6041a3 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 19:22:11 +0700 Subject: [PATCH 15/40] finish IconButton color palette --- .../components/buttons/IconButtonColors.js | 18 ++++++++ .../components/buttons/IconButtonColors.tsx | 18 ++++++++ docs/src/pages/components/buttons/buttons.md | 6 +++ .../src/IconButton/IconButton.d.ts | 2 +- .../material-ui/src/IconButton/IconButton.js | 45 ++++++++++--------- .../src/IconButton/iconButtonClasses.ts | 12 +++++ .../typescript/color-palette-prop.spec.tsx | 3 +- 7 files changed, 80 insertions(+), 24 deletions(-) create mode 100644 docs/src/pages/components/buttons/IconButtonColors.js create mode 100644 docs/src/pages/components/buttons/IconButtonColors.tsx diff --git a/docs/src/pages/components/buttons/IconButtonColors.js b/docs/src/pages/components/buttons/IconButtonColors.js new file mode 100644 index 00000000000000..1426168cfcebdd --- /dev/null +++ b/docs/src/pages/components/buttons/IconButtonColors.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Box from '@material-ui/core/Box'; +import IconButton from '@material-ui/core/IconButton'; +import Fingerprint from '@material-ui/icons/Fingerprint'; + +export default function IconButtonSizes() { + return ( + + {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map( + (color) => ( + + + + ), + )} + + ); +} diff --git a/docs/src/pages/components/buttons/IconButtonColors.tsx b/docs/src/pages/components/buttons/IconButtonColors.tsx new file mode 100644 index 00000000000000..4b15b6f82b548d --- /dev/null +++ b/docs/src/pages/components/buttons/IconButtonColors.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import Box from '@material-ui/core/Box'; +import IconButton from '@material-ui/core/IconButton'; +import Fingerprint from '@material-ui/icons/Fingerprint'; + +export default function IconButtonSizes() { + return ( + + {( + ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const + ).map((color) => ( + + + + ))} + + ); +} diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index 989922c6649865..5d2e0853ee538d 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -109,6 +109,12 @@ For larger or smaller icon buttons, use the `size` prop. {{"demo": "pages/components/buttons/IconButtonSizes.js"}} +### Colors + +Use `color` prop to apply theme color palette to component. + +{{"demo": "pages/components/buttons/IconButtonColors.js"}} + ## Customized buttons Here are some examples of customizing the component. You can learn more about this in the diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts index 81c37b57812a1b..0bb4bea271d5ed 100644 --- a/packages/material-ui/src/IconButton/IconButton.d.ts +++ b/packages/material-ui/src/IconButton/IconButton.d.ts @@ -28,7 +28,7 @@ export type IconButtonTypeMap< * @default 'default' */ color?: OverridableStringUnion< - 'inherit' | 'default' | 'primary' | 'secondary', + 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', IconButtonPropsColorOverrides >; /** diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index a128d375f30801..60dc2115242f59 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -74,28 +74,20 @@ const IconButtonRoot = styled(ButtonBase, { ...(styleProps.color === 'inherit' && { color: 'inherit', }), - /* Styles applied to the root element if `color="primary"`. */ - ...(styleProps.color === 'primary' && { - color: theme.palette.primary.main, - '&:hover': { - backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', + ...(styleProps.color !== 'inherit' && + styleProps.color !== 'default' && { + color: theme.palette[styleProps.color].main, + '&:hover': { + backgroundColor: alpha( + theme.palette[styleProps.color].main, + theme.palette.action.hoverOpacity, + ), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, - }, - }), - /* Styles applied to the root element if `color="secondary"`. */ - ...(styleProps.color === 'secondary' && { - color: theme.palette.secondary.main, - '&:hover': { - backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }, - }), + }), /* Styles applied to the root element if `size="small"`. */ ...(styleProps.size === 'small' && { padding: 5, @@ -208,7 +200,16 @@ IconButton.propTypes /* remove-proptypes */ = { * @default 'default' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['inherit', 'default', 'primary', 'secondary']), + PropTypes.oneOf([ + 'inherit', + 'default', + 'primary', + 'secondary', + 'error', + 'info', + 'success', + 'warning', + ]), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/IconButton/iconButtonClasses.ts b/packages/material-ui/src/IconButton/iconButtonClasses.ts index 6e3541821f5958..ea169fefb7e369 100644 --- a/packages/material-ui/src/IconButton/iconButtonClasses.ts +++ b/packages/material-ui/src/IconButton/iconButtonClasses.ts @@ -13,6 +13,14 @@ export interface IconButtonClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; + /** Styles applied to the root element if `color="error"`. */ + colorError: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; /** Pseudo-class applied to the root element if `disabled={true}`. */ disabled: string; /** Styles applied to the root element if `size="small"`. */ @@ -37,6 +45,10 @@ const iconButtonClasses: IconButtonClasses = generateUtilityClasses('MuiIconButt 'colorInherit', 'colorPrimary', 'colorSecondary', + 'colorError', + 'colorInfo', + 'colorSuccess', + 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index f9d65eb9ddfe72..86304a099aee5c 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Badge, Button, ButtonGroup, Checkbox, Chip, SvgIcon } from '@material-ui/core'; +import { Badge, Button, ButtonGroup, Checkbox, Chip, IconButton, SvgIcon } from '@material-ui/core'; import { TimelineDot } from '@material-ui/lab'; function TestBaseColorPaletteProp() { @@ -13,6 +13,7 @@ function TestBaseColorPaletteProp() { + From 7d027baeb356b32456f93217820a3627966b96cc Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 17 Jun 2021 20:04:57 +0700 Subject: [PATCH 16/40] finish LinearProgress color palette --- .../pages/components/progress/LinearColor.js | 7 +++- .../pages/components/progress/LinearColor.tsx | 7 +++- .../src/LinearProgress/LinearProgress.d.ts | 2 +- .../LinearProgress/linearProgressClasses.ts | 36 +++++++++++++++++++ .../typescript/color-palette-prop.spec.tsx | 12 ++++++- 5 files changed, 60 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/progress/LinearColor.js b/docs/src/pages/components/progress/LinearColor.js index a1a228a3c0aa44..04f3ad46ba35ef 100644 --- a/docs/src/pages/components/progress/LinearColor.js +++ b/docs/src/pages/components/progress/LinearColor.js @@ -4,8 +4,13 @@ import LinearProgress from '@material-ui/core/LinearProgress'; export default function LinearColor() { return ( - + + + + + + ); diff --git a/docs/src/pages/components/progress/LinearColor.tsx b/docs/src/pages/components/progress/LinearColor.tsx index a1a228a3c0aa44..04f3ad46ba35ef 100644 --- a/docs/src/pages/components/progress/LinearColor.tsx +++ b/docs/src/pages/components/progress/LinearColor.tsx @@ -4,8 +4,13 @@ import LinearProgress from '@material-ui/core/LinearProgress'; export default function LinearColor() { return ( - + + + + + + ); diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts index cdfc8460d14874..a6c4cf5c8a9a74 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts +++ b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts @@ -17,7 +17,7 @@ export interface LinearProgressProps * @default 'primary' */ color?: OverridableStringUnion< - 'primary' | 'secondary' | 'inherit', + 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit', LinearProgressPropsColorOverrides >; /** diff --git a/packages/material-ui/src/LinearProgress/linearProgressClasses.ts b/packages/material-ui/src/LinearProgress/linearProgressClasses.ts index 03f0ef4194fa56..b81d1057b8ebd1 100644 --- a/packages/material-ui/src/LinearProgress/linearProgressClasses.ts +++ b/packages/material-ui/src/LinearProgress/linearProgressClasses.ts @@ -7,6 +7,14 @@ export interface LinearProgressClasses { colorPrimary: string; /** Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`. */ colorSecondary: string; + /** Styles applied to the root and bar2 elements if `color="error"`; bar2 if `variant="buffer"`. */ + colorError: string; + /** Styles applied to the root and bar2 elements if `color="info"`; bar2 if `variant="buffer"`. */ + colorInfo: string; + /** Styles applied to the root and bar2 elements if `color="success"`; bar2 if `variant="buffer"`. */ + colorSuccess: string; + /** Styles applied to the root and bar2 elements if `color="warning"`; bar2 if `variant="buffer"`. */ + colorWarning: string; /** Styles applied to the root element if `variant="determinate"`. */ determinate: string; /** Styles applied to the root element if `variant="indeterminate"`. */ @@ -21,12 +29,28 @@ export interface LinearProgressClasses { dashedColorPrimary: string; /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */ dashedColorSecondary: string; + /** Styles applied to the additional bar element if `variant="buffer"` and `color="error"`. */ + dashedColorError: string; + /** Styles applied to the additional bar element if `variant="buffer"` and `color="info"`. */ + dashedColorInfo: string; + /** Styles applied to the additional bar element if `variant="buffer"` and `color="success"`. */ + dashedColorSuccess: string; + /** Styles applied to the additional bar element if `variant="buffer"` and `color="warning"`. */ + dashedColorWarning: string; /** Styles applied to the layered bar1 and bar2 elements. */ bar: string; /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */ barColorPrimary: string; /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */ barColorSecondary: string; + /** Styles applied to the bar elements if `color="error"`; bar2 if `variant` not "buffer". */ + barColorError: string; + /** Styles applied to the bar elements if `color="info"`; bar2 if `variant` not "buffer". */ + barColorInfo: string; + /** Styles applied to the bar elements if `color="success"`; bar2 if `variant` not "buffer". */ + barColorSuccess: string; + /** Styles applied to the bar elements if `color="warning"`; bar2 if `variant` not "buffer". */ + barColorWarning: string; /** Styles applied to the bar1 element if `variant="indeterminate or query"`. */ bar1Indeterminate: string; /** Styles applied to the bar1 element if `variant="determinate"`. */ @@ -49,6 +73,10 @@ const linearProgressClasses: LinearProgressClasses = generateUtilityClasses('Mui 'root', 'colorPrimary', 'colorSecondary', + 'colorError', + 'colorInfo', + 'colorSuccess', + 'colorWarning', 'determinate', 'indeterminate', 'buffer', @@ -56,9 +84,17 @@ const linearProgressClasses: LinearProgressClasses = generateUtilityClasses('Mui 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', + 'dashedColorError', + 'dashedColorInfo', + 'dashedColorSuccess', + 'dashedColorWarning', 'bar', 'barColorPrimary', 'barColorSecondary', + 'barColorError', + 'barColorInfo', + 'barColorSuccess', + 'barColorWarning', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index 86304a099aee5c..df78998d8de540 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -1,5 +1,14 @@ import * as React from 'react'; -import { Badge, Button, ButtonGroup, Checkbox, Chip, IconButton, SvgIcon } from '@material-ui/core'; +import { + Badge, + Button, + ButtonGroup, + Checkbox, + Chip, + IconButton, + LinearProgress, + SvgIcon, +} from '@material-ui/core'; import { TimelineDot } from '@material-ui/lab'; function TestBaseColorPaletteProp() { @@ -14,6 +23,7 @@ function TestBaseColorPaletteProp() { + From f603eddd1725e0b89afa0fe6c6f7c76cf079ae68 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 13:24:01 +0700 Subject: [PATCH 17/40] finish CircularProgress color palette --- .../components/button-group/ColorsButtonGroup.js | 14 +++++++------- .../src/pages/components/progress/CircularColor.js | 7 ++++++- .../pages/components/progress/CircularColor.tsx | 7 ++++++- .../src/CircularProgress/CircularProgress.d.ts | 2 +- .../src/CircularProgress/CircularProgress.js | 2 +- .../CircularProgress/circularProgressClasses.ts | 12 ++++++++++++ .../test/typescript/color-palette-prop.spec.tsx | 2 ++ 7 files changed, 35 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/components/button-group/ColorsButtonGroup.js b/docs/src/pages/components/button-group/ColorsButtonGroup.js index 2aa42fb45bb12c..c3ed4e436f93cd 100644 --- a/docs/src/pages/components/button-group/ColorsButtonGroup.js +++ b/docs/src/pages/components/button-group/ColorsButtonGroup.js @@ -21,13 +21,13 @@ export default function ColorsButtonGroup() { }, }} > - {( - ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const - ).map((color) => ( - - {buttons} - - ))} + {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map( + (color) => ( + + {buttons} + + ), + )} ); } diff --git a/docs/src/pages/components/progress/CircularColor.js b/docs/src/pages/components/progress/CircularColor.js index 3f33b7d4a1efbc..bdf3c95f562a07 100644 --- a/docs/src/pages/components/progress/CircularColor.js +++ b/docs/src/pages/components/progress/CircularColor.js @@ -4,8 +4,13 @@ import CircularProgress from '@material-ui/core/CircularProgress'; export default function CircularColor() { return ( - + + + + + + ); diff --git a/docs/src/pages/components/progress/CircularColor.tsx b/docs/src/pages/components/progress/CircularColor.tsx index 3f33b7d4a1efbc..bdf3c95f562a07 100644 --- a/docs/src/pages/components/progress/CircularColor.tsx +++ b/docs/src/pages/components/progress/CircularColor.tsx @@ -4,8 +4,13 @@ import CircularProgress from '@material-ui/core/CircularProgress'; export default function CircularColor() { return ( - + + + + + + ); diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts index 5309b097166601..c96cd354671b4f 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts +++ b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts @@ -17,7 +17,7 @@ export interface CircularProgressProps * @default 'primary' */ color?: OverridableStringUnion< - 'primary' | 'secondary' | 'inherit', + 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit', CircularProgressPropsColorOverrides >; /** diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js index 5809f125e32285..919e2e40aec549 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.js +++ b/packages/material-ui/src/CircularProgress/CircularProgress.js @@ -222,7 +222,7 @@ CircularProgress.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['inherit', 'primary', 'secondary']), + PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/CircularProgress/circularProgressClasses.ts b/packages/material-ui/src/CircularProgress/circularProgressClasses.ts index dd5bd9a89d33c2..0c994aec41888c 100644 --- a/packages/material-ui/src/CircularProgress/circularProgressClasses.ts +++ b/packages/material-ui/src/CircularProgress/circularProgressClasses.ts @@ -11,6 +11,14 @@ export interface CircularProgressClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; + /** Styles applied to the root element if `color="error"`. */ + colorError: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; /** Styles applied to the svg element. */ svg: string; /** Styles applied to the `circle` svg path. */ @@ -37,6 +45,10 @@ const circularProgressClasses: CircularProgressClasses = generateUtilityClasses( 'indeterminate', 'colorPrimary', 'colorSecondary', + 'colorError', + 'colorInfo', + 'colorSuccess', + 'colorWarning', 'svg', 'circle', 'circleDeterminate', diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index df78998d8de540..6dc22fd5bf3cac 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -5,6 +5,7 @@ import { ButtonGroup, Checkbox, Chip, + CircularProgress, IconButton, LinearProgress, SvgIcon, @@ -22,6 +23,7 @@ function TestBaseColorPaletteProp() { + From 4368b8a77e4fa9a6555a58fe1a24ecf284455d56 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 13:40:50 +0700 Subject: [PATCH 18/40] fix FormControl color palette --- packages/material-ui/src/FormControl/FormControl.d.ts | 5 ++++- packages/material-ui/src/FormControl/FormControl.js | 2 +- packages/material-ui/src/FormLabel/FormLabel.d.ts | 2 +- .../material-ui/test/typescript/color-palette-prop.spec.tsx | 2 ++ 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/FormControl/FormControl.d.ts b/packages/material-ui/src/FormControl/FormControl.d.ts index f84bf2c43d4da9..1f089645ff5aa9 100644 --- a/packages/material-ui/src/FormControl/FormControl.d.ts +++ b/packages/material-ui/src/FormControl/FormControl.d.ts @@ -22,7 +22,10 @@ export interface FormControlTypeMap

* The color of the component. It supports those theme colors that make sense for this component. * @default 'primary' */ - color?: OverridableStringUnion<'primary' | 'secondary', FormControlPropsColorOverrides>; + color?: OverridableStringUnion< + 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', + FormControlPropsColorOverrides + >; /** * If `true`, the label, input and helper text should be displayed in a disabled state. * @default false diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index 6a921d24795415..700a86b63aea52 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -249,7 +249,7 @@ FormControl.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['primary', 'secondary']), + PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/FormLabel/FormLabel.d.ts b/packages/material-ui/src/FormLabel/FormLabel.d.ts index 3b5495ef0bea20..bf35b8482c92fe 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.d.ts +++ b/packages/material-ui/src/FormLabel/FormLabel.d.ts @@ -18,7 +18,7 @@ export interface FormLabelTypeMap

/** * The color of the component. It supports those theme colors that make sense for this component. */ - color?: 'primary' | 'secondary'; + color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'; /** * If `true`, the label should be displayed in a disabled state. */ diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index 6dc22fd5bf3cac..626e8a2cb3dee0 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -6,6 +6,7 @@ import { Checkbox, Chip, CircularProgress, + FormControl, IconButton, LinearProgress, SvgIcon, @@ -24,6 +25,7 @@ function TestBaseColorPaletteProp() { + From 6dd4341a61f4bc7156218fdb8346604069b07c1d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 13:47:11 +0700 Subject: [PATCH 19/40] fix InputBase color palette --- packages/material-ui/src/InputBase/InputBase.d.ts | 5 ++++- packages/material-ui/src/InputBase/InputBase.js | 2 +- .../test/typescript/color-palette-prop.spec.tsx | 10 ++++++++++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/InputBase/InputBase.d.ts b/packages/material-ui/src/InputBase/InputBase.d.ts index 93ba4ef3d2fc73..ac5fcfc20c18b6 100644 --- a/packages/material-ui/src/InputBase/InputBase.d.ts +++ b/packages/material-ui/src/InputBase/InputBase.d.ts @@ -38,7 +38,10 @@ export interface InputBaseProps * The color of the component. It supports those theme colors that make sense for this component. * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component. */ - color?: OverridableStringUnion<'primary' | 'secondary', InputBasePropsColorOverrides>; + color?: OverridableStringUnion< + 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', + InputBasePropsColorOverrides + >; /** * The components used for each slot inside the InputBase. * Either a string to use a HTML element or a component. diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index 7ea570e61c8f99..32255bad186b32 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -579,7 +579,7 @@ InputBase.propTypes /* remove-proptypes */ = { * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component. */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['primary', 'secondary']), + PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index 626e8a2cb3dee0..8917cb69d06d97 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -7,7 +7,12 @@ import { Chip, CircularProgress, FormControl, + FormLabel, + FilledInput, + OutlinedInput, IconButton, + Input, + InputLabel, LinearProgress, SvgIcon, } from '@material-ui/core'; @@ -26,7 +31,12 @@ function TestBaseColorPaletteProp() { + + + + + From ad5a12bb27700fccd33f69323716f3c89a921769 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 13:57:51 +0700 Subject: [PATCH 20/40] fix Radio color palette --- .../components/radio-buttons/ColorRadioButtons.js | 12 ++++++++---- .../components/radio-buttons/ColorRadioButtons.tsx | 8 ++++++-- packages/material-ui/src/Radio/Radio.d.ts | 5 ++++- packages/material-ui/src/Radio/Radio.js | 2 +- .../test/typescript/color-palette-prop.spec.tsx | 2 ++ 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js index 2f753c96e916eb..481f0bd9ee8ac3 100644 --- a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js +++ b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js @@ -5,11 +5,11 @@ import Radio from '@material-ui/core/Radio'; export default function ColorRadioButtons() { const [selectedValue, setSelectedValue] = React.useState('a'); - const handleChange = (event) => { + const handleChange = (event: React.ChangeEvent) => { setSelectedValue(event.target.value); }; - const controlProps = (item) => ({ + const controlProps = (item: string) => ({ checked: selectedValue === item, onChange: handleChange, value: item, @@ -21,9 +21,13 @@ export default function ColorRadioButtons() {

- + + + + + - + + + + + ; + color?: OverridableStringUnion< + 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default', + RadioPropsColorOverrides + >; /** * If `true`, the component is disabled. */ diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index eb6010460f844b..3e2833863fe1d7 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -138,7 +138,7 @@ Radio.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['default', 'primary', 'secondary']), + PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index 8917cb69d06d97..9564459def50ed 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -14,6 +14,7 @@ import { Input, InputLabel, LinearProgress, + Radio, SvgIcon, } from '@material-ui/core'; import { TimelineDot } from '@material-ui/lab'; @@ -39,6 +40,7 @@ function TestBaseColorPaletteProp() { +
))} From 6505767c431dbb7772eb32428637074e21c99f23 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 13:59:58 +0700 Subject: [PATCH 21/40] update Checkbox color demo --- docs/src/pages/components/checkboxes/ColorCheckboxes.js | 4 ++++ docs/src/pages/components/checkboxes/ColorCheckboxes.tsx | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.js b/docs/src/pages/components/checkboxes/ColorCheckboxes.js index 72f979d239ee4b..fcfef0dc892690 100644 --- a/docs/src/pages/components/checkboxes/ColorCheckboxes.js +++ b/docs/src/pages/components/checkboxes/ColorCheckboxes.js @@ -9,6 +9,10 @@ export default function ColorCheckboxes() {
+ + + + + + + + Date: Fri, 18 Jun 2021 14:03:25 +0700 Subject: [PATCH 22/40] fix Switch color palette --- docs/src/pages/components/switches/ColorSwitches.js | 4 ++++ docs/src/pages/components/switches/ColorSwitches.tsx | 4 ++++ packages/material-ui/src/Switch/Switch.d.ts | 5 ++++- packages/material-ui/src/Switch/Switch.js | 2 +- .../material-ui/test/typescript/color-palette-prop.spec.tsx | 2 ++ 5 files changed, 15 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/switches/ColorSwitches.js b/docs/src/pages/components/switches/ColorSwitches.js index acc47bf12b4934..c454277b92b181 100644 --- a/docs/src/pages/components/switches/ColorSwitches.js +++ b/docs/src/pages/components/switches/ColorSwitches.js @@ -22,6 +22,10 @@ export default function ColorSwitches() {
+ + + +
diff --git a/docs/src/pages/components/switches/ColorSwitches.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx index acc47bf12b4934..c454277b92b181 100644 --- a/docs/src/pages/components/switches/ColorSwitches.tsx +++ b/docs/src/pages/components/switches/ColorSwitches.tsx @@ -22,6 +22,10 @@ export default function ColorSwitches() {
+ + + +
diff --git a/packages/material-ui/src/Switch/Switch.d.ts b/packages/material-ui/src/Switch/Switch.d.ts index fadaf12f6fffa0..768675a4513f23 100644 --- a/packages/material-ui/src/Switch/Switch.d.ts +++ b/packages/material-ui/src/Switch/Switch.d.ts @@ -23,7 +23,10 @@ export interface SwitchProps * The color of the component. It supports those theme colors that make sense for this component. * @default 'primary' */ - color?: OverridableStringUnion<'primary' | 'secondary' | 'default', SwitchPropsColorOverrides>; + color?: OverridableStringUnion< + 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default', + SwitchPropsColorOverrides + >; /** * If `true`, the component is disabled. */ diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index 9fb0619f8bb3fd..f3691cd99b170f 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -253,7 +253,7 @@ Switch.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['default', 'primary', 'secondary']), + PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string, ]), /** diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index 9564459def50ed..31c6aeeeadab01 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -16,6 +16,7 @@ import { LinearProgress, Radio, SvgIcon, + Switch, } from '@material-ui/core'; import { TimelineDot } from '@material-ui/lab'; @@ -42,6 +43,7 @@ function TestBaseColorPaletteProp() { +
))} From 028106b56a0d9c8b150e873a8ac155d30e077c18 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 14:11:09 +0700 Subject: [PATCH 23/40] revert classes --- .../src/TimelineDot/timelineDotClasses.ts | 24 ---- packages/material-ui/src/Badge/Badge.js | 9 +- .../material-ui/src/Button/buttonClasses.ts | 36 ------ .../src/ButtonGroup/buttonGroupClasses.ts | 36 ------ packages/material-ui/src/Chip/chipClasses.ts | 114 ------------------ .../circularProgressClasses.ts | 12 -- .../src/IconButton/iconButtonClasses.ts | 12 -- .../LinearProgress/linearProgressClasses.ts | 36 ------ .../material-ui/src/SvgIcon/svgIconClasses.ts | 9 -- 9 files changed, 1 insertion(+), 287 deletions(-) diff --git a/packages/material-ui-lab/src/TimelineDot/timelineDotClasses.ts b/packages/material-ui-lab/src/TimelineDot/timelineDotClasses.ts index 41e2623567c9f5..5e0069fd3a8170 100644 --- a/packages/material-ui-lab/src/TimelineDot/timelineDotClasses.ts +++ b/packages/material-ui-lab/src/TimelineDot/timelineDotClasses.ts @@ -19,22 +19,6 @@ export interface TimelineDotClasses { filledSecondary: string; /** Styles applied to the root element if `color="secondary"` and `variant="outlined"`. */ outlinedSecondary: string; - /** Styles applied to the root element if `color="error"` and `variant="filled"`. */ - filledError: string; - /** Styles applied to the root element if `color="error"` and `variant="outlined"`. */ - outlinedError: string; - /** Styles applied to the root element if `color="info"` and `variant="filled"`. */ - filledInfo: string; - /** Styles applied to the root element if `color="info"` and `variant="outlined"`. */ - outlinedInfo: string; - /** Styles applied to the root element if `color="success"` and `variant="filled"`. */ - filledSuccess: string; - /** Styles applied to the root element if `color="success"` and `variant="outlined"`. */ - outlinedSuccess: string; - /** Styles applied to the root element if `color="warning"` and `variant="filled"`. */ - filledWarning: string; - /** Styles applied to the root element if `color="warning"` and `variant="outlined"`. */ - outlinedWarning: string; } export type TimelineDotClassKey = keyof TimelineDotClasses; @@ -53,14 +37,6 @@ const timelineDotClasses: TimelineDotClasses = generateUtilityClasses('MuiTimeli 'outlinedPrimary', 'filledSecondary', 'outlinedSecondary', - 'filledError', - 'outlinedError', - 'filledInfo', - 'outlinedInfo', - 'filledSuccess', - 'outlinedSuccess', - 'filledWarning', - 'outlinedWarning', ]); export default timelineDotClasses; diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js index 8353b7f78e681c..416121ea62770e 100644 --- a/packages/material-ui/src/Badge/Badge.js +++ b/packages/material-ui/src/Badge/Badge.js @@ -13,14 +13,7 @@ import capitalize from '../utils/capitalize'; export const badgeClasses = { ...badgeUnstyledClasses, - ...generateUtilityClasses('MuiBadge', [ - 'colorError', - 'colorPrimary', - 'colorSecondary', - 'colorInfo', - 'colorSuccess', - 'colorWarning', - ]), + ...generateUtilityClasses('MuiBadge', ['colorError', 'colorPrimary']), }; const RADIUS_STANDARD = 10; diff --git a/packages/material-ui/src/Button/buttonClasses.ts b/packages/material-ui/src/Button/buttonClasses.ts index 4c25be37a2cd10..d401714687af1e 100644 --- a/packages/material-ui/src/Button/buttonClasses.ts +++ b/packages/material-ui/src/Button/buttonClasses.ts @@ -11,14 +11,6 @@ export interface ButtonClasses { textPrimary: string; /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */ textSecondary: string; - /** Styles applied to the root element if `variant="text"` and `color="error"`. */ - textError: string; - /** Styles applied to the root element if `variant="text"` and `color="info"`. */ - textInfo: string; - /** Styles applied to the root element if `variant="text"` and `color="success"`. */ - textSuccess: string; - /** Styles applied to the root element if `variant="text"` and `color="warning"`. */ - textWarning: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; /** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. */ @@ -27,14 +19,6 @@ export interface ButtonClasses { outlinedPrimary: string; /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ outlinedSecondary: string; - /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */ - outlinedError: string; - /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */ - outlinedInfo: string; - /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */ - outlinedSuccess: string; - /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ - outlinedWarning: string; /** Styles applied to the root element if `variant="contained"`. */ contained: string; /** Styles applied to the root element if `variant="contained"` and `color="inherit"`. */ @@ -43,14 +27,6 @@ export interface ButtonClasses { containedPrimary: string; /** Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ containedSecondary: string; - /** Styles applied to the root element if `variant="contained"` and `color="error"`. */ - containedError: string; - /** Styles applied to the root element if `variant="contained"` and `color="info"`. */ - containedInfo: string; - /** Styles applied to the root element if `variant="contained"` and `color="success"`. */ - containedSuccess: string; - /** Styles applied to the root element if `variant="contained"` and `color="warning"`. */ - containedWarning: string; /** Styles applied to the root element if `disableElevation={true}`. */ disableElevation: string; /** Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */ @@ -109,26 +85,14 @@ const buttonClasses: ButtonClasses = generateUtilityClasses('MuiButton', [ 'textInherit', 'textPrimary', 'textSecondary', - 'textError', - 'textInfo', - 'textSuccess', - 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', - 'outlinedError', - 'outlinedInfo', - 'outlinedSuccess', - 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', - 'containedError', - 'containedInfo', - 'containedSuccess', - 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', diff --git a/packages/material-ui/src/ButtonGroup/buttonGroupClasses.ts b/packages/material-ui/src/ButtonGroup/buttonGroupClasses.ts index 251e42f4db6459..c5151ad2f87979 100644 --- a/packages/material-ui/src/ButtonGroup/buttonGroupClasses.ts +++ b/packages/material-ui/src/ButtonGroup/buttonGroupClasses.ts @@ -33,14 +33,6 @@ export interface ButtonGroupClasses { groupedTextPrimary: string; /** Styles applied to the children if `variant="text"` and `color="secondary"`. */ groupedTextSecondary: string; - /** Styles applied to the children if `variant="text"` and `color="error"`. */ - groupedTextError: string; - /** Styles applied to the children if `variant="text"` and `color="info"`. */ - groupedTextInfo: string; - /** Styles applied to the children if `variant="text"` and `color="success"`. */ - groupedTextSuccess: string; - /** Styles applied to the children if `variant="text"` and `color="warning"`. */ - groupedTextWarning: string; /** Styles applied to the children if `variant="outlined"`. */ groupedOutlined: string; /** Styles applied to the children if `variant="outlined"` and `orientation="horizontal"`. */ @@ -51,14 +43,6 @@ export interface ButtonGroupClasses { groupedOutlinedPrimary: string; /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. */ groupedOutlinedSecondary: string; - /** Styles applied to the children if `variant="outlined"` and `color="error"`. */ - groupedOutlinedError: string; - /** Styles applied to the children if `variant="outlined"` and `color="info"`. */ - groupedOutlinedInfo: string; - /** Styles applied to the children if `variant="outlined"` and `color="success"`. */ - groupedOutlinedSuccess: string; - /** Styles applied to the children if `variant="outlined"` and `color="warning"`. */ - groupedOutlinedWarning: string; /** Styles applied to the children if `variant="contained"`. */ groupedContained: string; /** Styles applied to the children if `variant="contained"` and `orientation="horizontal"`. */ @@ -69,14 +53,6 @@ export interface ButtonGroupClasses { groupedContainedPrimary: string; /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */ groupedContainedSecondary: string; - /** Styles applied to the children if `variant="contained"` and `color="error"`. */ - groupedContainedError: string; - /** Styles applied to the children if `variant="contained"` and `color="info"`. */ - groupedContainedInfo: string; - /** Styles applied to the children if `variant="contained"` and `color="success"`. */ - groupedContainedSuccess: string; - /** Styles applied to the children if `variant="contained"` and `color="warning"`. */ - groupedContainedWarning: string; } export type ButtonGroupClassKey = keyof ButtonGroupClasses; @@ -102,28 +78,16 @@ const buttonGroupClasses: ButtonGroupClasses = generateUtilityClasses('MuiButton 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', - 'groupedTextError', - 'groupedTextInfo', - 'groupedTextSuccess', - 'groupedTextWarning', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', - 'groupedOutlinedError', - 'groupedOutlinedInfo', - 'groupedOutlinedSuccess', - 'groupedOutlinedWarning', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', - 'groupedContainedError', - 'groupedContainedInfo', - 'groupedContainedSuccess', - 'groupedContainedWarning', ]); export default buttonGroupClasses; diff --git a/packages/material-ui/src/Chip/chipClasses.ts b/packages/material-ui/src/Chip/chipClasses.ts index faf7e5da5452b9..76cbfe53a2af85 100644 --- a/packages/material-ui/src/Chip/chipClasses.ts +++ b/packages/material-ui/src/Chip/chipClasses.ts @@ -11,14 +11,6 @@ export interface ChipClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; - /** Styles applied to the root element if `color="error"`. */ - colorError: string; - /** Styles applied to the root element if `color="info"`. */ - colorInfo: string; - /** Styles applied to the root element if `color="success"`. */ - colorSuccess: string; - /** Styles applied to the root element if `color="warning"`. */ - colorWarning: string; /** Pseudo-class applied to the root element if `disabled={true}`. */ disabled: string; /** Styles applied to the root element if `onClick` is defined or `clickable={true}`. */ @@ -27,56 +19,20 @@ export interface ChipClasses { clickableColorPrimary: string; /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */ clickableColorSecondary: string; - /** Styles applied to the root element if `onClick` and `color="error"` is defined or `clickable={true}`. */ - clickableColorError: string; - /** Styles applied to the root element if `onClick` and `color="info"` is defined or `clickable={true}`. */ - clickableColorInfo: string; - /** Styles applied to the root element if `onClick` and `color="success"` is defined or `clickable={true}`. */ - clickableColorSuccess: string; - /** Styles applied to the root element if `onClick` and `color="warning"` is defined or `clickable={true}`. */ - clickableColorWarning: string; /** Styles applied to the root element if `onDelete` is defined. */ deletable: string; /** Styles applied to the root element if `onDelete` and `color="primary"` is defined. */ deletableColorPrimary: string; /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */ deletableColorSecondary: string; - /** Styles applied to the root element if `onDelete` and `color="error"` is defined. */ - deletableColorError: string; - /** Styles applied to the root element if `onDelete` and `color="info"` is defined. */ - deletableColorInfo: string; - /** Styles applied to the root element if `onDelete` and `color="success"` is defined. */ - deletableColorSuccess: string; - /** Styles applied to the root element if `onDelete` and `color="warning"` is defined. */ - deletableColorWarning: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; /** Styles applied to the root element if `variant="filled"`. */ filled: string; - /** Styles applied to the root element if `variant="filled"` and `color="primary"`. */ - filledPrimary: string; - /** Styles applied to the root element if `variant="filled"` and `color="secondary"`. */ - filledSecondary: string; - /** Styles applied to the root element if `variant="filled"` and `color="error"`. */ - filledError: string; - /** Styles applied to the root element if `variant="filled"` and `color="info"`. */ - filledInfo: string; - /** Styles applied to the root element if `variant="filled"` and `color="success"`. */ - filledSuccess: string; - /** Styles applied to the root element if `variant="filled"` and `color="warning"`. */ - filledWarning: string; /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ outlinedPrimary: string; /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ outlinedSecondary: string; - /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */ - outlinedError: string; - /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */ - outlinedInfo: string; - /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */ - outlinedSuccess: string; - /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ - outlinedWarning: string; /** Styles applied to the avatar element. */ avatar: string; /** Styles applied to the avatar element if `size="small"`. */ @@ -87,14 +43,6 @@ export interface ChipClasses { avatarColorPrimary: string; /** Styles applied to the avatar element if `color="secondary"`. */ avatarColorSecondary: string; - /** Styles applied to the avatar element if `color="error"`. */ - avatarColorError: string; - /** Styles applied to the avatar element if `color="info"`. */ - avatarColorInfo: string; - /** Styles applied to the avatar element if `color="success"`. */ - avatarColorSuccess: string; - /** Styles applied to the avatar element if `color="warning"`. */ - avatarColorWarning: string; /** Styles applied to the icon element. */ icon: string; /** Styles applied to the icon element if `size="small"`. */ @@ -105,14 +53,6 @@ export interface ChipClasses { iconColorPrimary: string; /** Styles applied to the icon element if `color="secondary"`. */ iconColorSecondary: string; - /** Styles applied to the icon element if `color="error"`. */ - iconColorError: string; - /** Styles applied to the icon element if `color="info"`. */ - iconColorInfo: string; - /** Styles applied to the icon element if `color="success"`. */ - iconColorSuccess: string; - /** Styles applied to the icon element if `color="warning"`. */ - iconColorWarning: string; /** Styles applied to the label `span` element. */ label: string; /** Styles applied to the label `span` element if `size="small"`. */ @@ -129,26 +69,10 @@ export interface ChipClasses { deleteIconColorPrimary: string; /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ deleteIconColorSecondary: string; - /** Styles applied to the deleteIcon element if `color="error"` and `variant="filled"`. */ - deleteIconColorError: string; - /** Styles applied to the deleteIcon element if `color="info"` and `variant="filled"`. */ - deleteIconColorInfo: string; - /** Styles applied to the deleteIcon element if `color="success"` and `variant="filled"`. */ - deleteIconColorSuccess: string; - /** Styles applied to the deleteIcon element if `color="warning"` and `variant="filled"`. */ - deleteIconColorWarning: string; /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */ deleteIconOutlinedColorPrimary: string; /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */ deleteIconOutlinedColorSecondary: string; - /** Styles applied to the deleteIcon element if `color="error"` and `variant="outlined"`. */ - deleteIconOutlinedColorError: string; - /** Styles applied to the deleteIcon element if `color="info"` and `variant="outlined"`. */ - deleteIconOutlinedColorInfo: string; - /** Styles applied to the deleteIcon element if `color="success"` and `variant="outlined"`. */ - deleteIconOutlinedColorSuccess: string; - /** Styles applied to the deleteIcon element if `color="warning"` and `variant="outlined"`. */ - deleteIconOutlinedColorWarning: string; /** Pseudo-class applied to the root element if keyboard focused. */ focusVisible: string; } @@ -165,57 +89,27 @@ const chipClasses: ChipClasses = generateUtilityClasses('MuiChip', [ 'sizeMedium', 'colorPrimary', 'colorSecondary', - 'colorError', - 'colorInfo', - 'colorSuccess', - 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', - 'clickableColorError', - 'clickableColorInfo', - 'clickableColorSuccess', - 'clickableColorWarning', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', - 'deletableColorError', - 'deletableColorInfo', - 'deletableColorSuccess', - 'deletableColorWarning', 'outlined', 'filled', - 'filledPrimary', - 'filledSecondary', - 'filledError', - 'filledInfo', - 'filledSuccess', - 'filledWarning', 'outlinedPrimary', 'outlinedSecondary', - 'outlinedError', - 'outlinedInfo', - 'outlinedSuccess', - 'outlinedWarning', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', - 'avatarColorError', - 'avatarColorInfo', - 'avatarColorSuccess', - 'avatarColorWarning', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', - 'iconColorError', - 'iconColorInfo', - 'iconColorSuccess', - 'iconColorWarning', 'label', 'labelSmall', 'labelMedium', @@ -224,16 +118,8 @@ const chipClasses: ChipClasses = generateUtilityClasses('MuiChip', [ 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', - 'deleteIconColorError', - 'deleteIconColorInfo', - 'deleteIconColorSuccess', - 'deleteIconColorWarning', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', - 'deleteIconOutlinedColorError', - 'deleteIconOutlinedColorInfo', - 'deleteIconOutlinedColorSuccess', - 'deleteIconOutlinedColorWarning', 'focusVisible', ]); diff --git a/packages/material-ui/src/CircularProgress/circularProgressClasses.ts b/packages/material-ui/src/CircularProgress/circularProgressClasses.ts index 0c994aec41888c..dd5bd9a89d33c2 100644 --- a/packages/material-ui/src/CircularProgress/circularProgressClasses.ts +++ b/packages/material-ui/src/CircularProgress/circularProgressClasses.ts @@ -11,14 +11,6 @@ export interface CircularProgressClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; - /** Styles applied to the root element if `color="error"`. */ - colorError: string; - /** Styles applied to the root element if `color="info"`. */ - colorInfo: string; - /** Styles applied to the root element if `color="success"`. */ - colorSuccess: string; - /** Styles applied to the root element if `color="warning"`. */ - colorWarning: string; /** Styles applied to the svg element. */ svg: string; /** Styles applied to the `circle` svg path. */ @@ -45,10 +37,6 @@ const circularProgressClasses: CircularProgressClasses = generateUtilityClasses( 'indeterminate', 'colorPrimary', 'colorSecondary', - 'colorError', - 'colorInfo', - 'colorSuccess', - 'colorWarning', 'svg', 'circle', 'circleDeterminate', diff --git a/packages/material-ui/src/IconButton/iconButtonClasses.ts b/packages/material-ui/src/IconButton/iconButtonClasses.ts index ea169fefb7e369..6e3541821f5958 100644 --- a/packages/material-ui/src/IconButton/iconButtonClasses.ts +++ b/packages/material-ui/src/IconButton/iconButtonClasses.ts @@ -13,14 +13,6 @@ export interface IconButtonClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; - /** Styles applied to the root element if `color="error"`. */ - colorError: string; - /** Styles applied to the root element if `color="info"`. */ - colorInfo: string; - /** Styles applied to the root element if `color="success"`. */ - colorSuccess: string; - /** Styles applied to the root element if `color="warning"`. */ - colorWarning: string; /** Pseudo-class applied to the root element if `disabled={true}`. */ disabled: string; /** Styles applied to the root element if `size="small"`. */ @@ -45,10 +37,6 @@ const iconButtonClasses: IconButtonClasses = generateUtilityClasses('MuiIconButt 'colorInherit', 'colorPrimary', 'colorSecondary', - 'colorError', - 'colorInfo', - 'colorSuccess', - 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', diff --git a/packages/material-ui/src/LinearProgress/linearProgressClasses.ts b/packages/material-ui/src/LinearProgress/linearProgressClasses.ts index b81d1057b8ebd1..03f0ef4194fa56 100644 --- a/packages/material-ui/src/LinearProgress/linearProgressClasses.ts +++ b/packages/material-ui/src/LinearProgress/linearProgressClasses.ts @@ -7,14 +7,6 @@ export interface LinearProgressClasses { colorPrimary: string; /** Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`. */ colorSecondary: string; - /** Styles applied to the root and bar2 elements if `color="error"`; bar2 if `variant="buffer"`. */ - colorError: string; - /** Styles applied to the root and bar2 elements if `color="info"`; bar2 if `variant="buffer"`. */ - colorInfo: string; - /** Styles applied to the root and bar2 elements if `color="success"`; bar2 if `variant="buffer"`. */ - colorSuccess: string; - /** Styles applied to the root and bar2 elements if `color="warning"`; bar2 if `variant="buffer"`. */ - colorWarning: string; /** Styles applied to the root element if `variant="determinate"`. */ determinate: string; /** Styles applied to the root element if `variant="indeterminate"`. */ @@ -29,28 +21,12 @@ export interface LinearProgressClasses { dashedColorPrimary: string; /** Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */ dashedColorSecondary: string; - /** Styles applied to the additional bar element if `variant="buffer"` and `color="error"`. */ - dashedColorError: string; - /** Styles applied to the additional bar element if `variant="buffer"` and `color="info"`. */ - dashedColorInfo: string; - /** Styles applied to the additional bar element if `variant="buffer"` and `color="success"`. */ - dashedColorSuccess: string; - /** Styles applied to the additional bar element if `variant="buffer"` and `color="warning"`. */ - dashedColorWarning: string; /** Styles applied to the layered bar1 and bar2 elements. */ bar: string; /** Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */ barColorPrimary: string; /** Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */ barColorSecondary: string; - /** Styles applied to the bar elements if `color="error"`; bar2 if `variant` not "buffer". */ - barColorError: string; - /** Styles applied to the bar elements if `color="info"`; bar2 if `variant` not "buffer". */ - barColorInfo: string; - /** Styles applied to the bar elements if `color="success"`; bar2 if `variant` not "buffer". */ - barColorSuccess: string; - /** Styles applied to the bar elements if `color="warning"`; bar2 if `variant` not "buffer". */ - barColorWarning: string; /** Styles applied to the bar1 element if `variant="indeterminate or query"`. */ bar1Indeterminate: string; /** Styles applied to the bar1 element if `variant="determinate"`. */ @@ -73,10 +49,6 @@ const linearProgressClasses: LinearProgressClasses = generateUtilityClasses('Mui 'root', 'colorPrimary', 'colorSecondary', - 'colorError', - 'colorInfo', - 'colorSuccess', - 'colorWarning', 'determinate', 'indeterminate', 'buffer', @@ -84,17 +56,9 @@ const linearProgressClasses: LinearProgressClasses = generateUtilityClasses('Mui 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', - 'dashedColorError', - 'dashedColorInfo', - 'dashedColorSuccess', - 'dashedColorWarning', 'bar', 'barColorPrimary', 'barColorSecondary', - 'barColorError', - 'barColorInfo', - 'barColorSuccess', - 'barColorWarning', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', diff --git a/packages/material-ui/src/SvgIcon/svgIconClasses.ts b/packages/material-ui/src/SvgIcon/svgIconClasses.ts index 653a4cfefa3eba..59957f52a3273f 100644 --- a/packages/material-ui/src/SvgIcon/svgIconClasses.ts +++ b/packages/material-ui/src/SvgIcon/svgIconClasses.ts @@ -11,12 +11,6 @@ export interface SvgIconClasses { colorAction: string; /** Styles applied to the root element if `color="error"`. */ colorError: string; - /** Styles applied to the root element if `color="info"`. */ - colorInfo: string; - /** Styles applied to the root element if `color="success"`. */ - colorSuccess: string; - /** Styles applied to the root element if `color="error"`. */ - colorWarning: string; /** Styles applied to the root element if `color="disabled"`. */ colorDisabled: string; /** Styles applied to the root element if `fontSize="inherit"`. */ @@ -39,9 +33,6 @@ const svgIconClasses: SvgIconClasses = generateUtilityClasses('MuiSvgIcon', [ 'colorSecondary', 'colorAction', 'colorError', - 'colorInfo', - 'colorSuccess', - 'colorWarning', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', From da2ed6a042cfd494ee453ce6d31222fe0c18538d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 14:15:28 +0700 Subject: [PATCH 24/40] fix Icon color palette --- packages/material-ui/src/Icon/Icon.d.ts | 10 +++++++++- packages/material-ui/src/Icon/Icon.js | 15 ++++++++++++++- packages/material-ui/src/SvgIcon/SvgIcon.d.ts | 4 ++-- packages/material-ui/src/SvgIcon/SvgIcon.js | 12 +++++++++++- 4 files changed, 36 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Icon/Icon.d.ts b/packages/material-ui/src/Icon/Icon.d.ts index 0ad29966ec7a47..acbeb1279d1688 100644 --- a/packages/material-ui/src/Icon/Icon.d.ts +++ b/packages/material-ui/src/Icon/Icon.d.ts @@ -31,7 +31,15 @@ export interface IconTypeMap

{ * @default 'inherit' */ color?: OverridableStringUnion< - Exclude | 'action' | 'disabled' | 'error', + | 'inherit' + | 'action' + | 'disabled' + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning', IconPropsColorOverrides >; /** diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js index d6d6487d9562a7..5f2c3545038bb9 100644 --- a/packages/material-ui/src/Icon/Icon.js +++ b/packages/material-ui/src/Icon/Icon.js @@ -54,6 +54,9 @@ const IconRoot = styled('span', { color: { primary: theme.palette.primary.main, secondary: theme.palette.secondary.main, + info: theme.palette.info.main, + success: theme.palette.success.main, + warning: theme.palette.warning.main, action: theme.palette.action.active, error: theme.palette.error.main, disabled: theme.palette.action.disabled, @@ -129,7 +132,17 @@ Icon.propTypes /* remove-proptypes */ = { * @default 'inherit' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']), + PropTypes.oneOf([ + 'inherit', + 'action', + 'disabled', + 'primary', + 'secondary', + 'error', + 'info', + 'success', + 'warning', + ]), PropTypes.string, ]), /** diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts index 930e43559222a7..d6b706a6e12eb9 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts +++ b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts @@ -26,10 +26,10 @@ export interface SvgIconTypeMap

{ */ color?: OverridableStringUnion< | 'inherit' - | 'primary' - | 'secondary' | 'action' | 'disabled' + | 'primary' + | 'secondary' | 'error' | 'info' | 'success' diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 42d8683df403fa..5802c8caf0d33a 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -130,7 +130,17 @@ SvgIcon.propTypes /* remove-proptypes */ = { * @default 'inherit' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']), + PropTypes.oneOf([ + 'inherit', + 'action', + 'disabled', + 'primary', + 'secondary', + 'error', + 'info', + 'success', + 'warning', + ]), PropTypes.string, ]), /** From be18f66d9d3dcfb6e15e337c15a4a37d94f8f560 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 14:19:57 +0700 Subject: [PATCH 25/40] run docs:api and docs:formatted --- docs/pages/api-docs/badge.json | 7 +- docs/pages/api-docs/button-group.json | 2 +- docs/pages/api-docs/button.json | 12 -- docs/pages/api-docs/chip.json | 38 ---- docs/pages/api-docs/circular-progress.json | 2 +- docs/pages/api-docs/form-control.json | 2 +- docs/pages/api-docs/form-label.json | 7 +- docs/pages/api-docs/icon-button.json | 2 +- docs/pages/api-docs/icon.json | 2 +- docs/pages/api-docs/input-base.json | 2 +- docs/pages/api-docs/input-label.json | 7 +- docs/pages/api-docs/loading-button.json | 12 -- docs/pages/api-docs/radio.json | 2 +- docs/pages/api-docs/svg-icon.json | 2 +- docs/pages/api-docs/switch.json | 2 +- docs/pages/api-docs/timeline-dot.json | 2 +- .../src/pages/components/badges/ColorBadge.js | 2 +- .../radio-buttons/ColorRadioButtons.js | 4 +- docs/translations/api-docs/badge/badge.json | 15 ++ docs/translations/api-docs/button/button.json | 60 ------ docs/translations/api-docs/chip/chip.json | 190 ------------------ .../loading-button/loading-button.json | 60 ------ .../src/TimelineDot/TimelineDot.js | 4 +- .../material-ui/src/FormLabel/FormLabel.js | 2 +- .../material-ui/src/InputLabel/InputLabel.js | 2 +- 25 files changed, 49 insertions(+), 393 deletions(-) diff --git a/docs/pages/api-docs/badge.json b/docs/pages/api-docs/badge.json index 700a75dd7833bb..99d6c002c17c14 100644 --- a/docs/pages/api-docs/badge.json +++ b/docs/pages/api-docs/badge.json @@ -13,7 +13,7 @@ "color": { "type": { "name": "union", - "description": "'default'
| 'error'
| 'primary'
| 'secondary'
| string" + "description": "'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'default'" }, @@ -57,7 +57,10 @@ "invisible", "colorPrimary", "colorSecondary", - "colorError" + "colorError", + "colorInfo", + "colorSuccess", + "colorWarning" ], "globalClasses": {}, "name": "MuiBadge" diff --git a/docs/pages/api-docs/button-group.json b/docs/pages/api-docs/button-group.json index 1074e4eeb73458..8e196c70f141d8 100644 --- a/docs/pages/api-docs/button-group.json +++ b/docs/pages/api-docs/button-group.json @@ -5,7 +5,7 @@ "color": { "type": { "name": "union", - "description": "'inherit'
| 'primary'
| 'secondary'
| string" + "description": "'inherit'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'primary'" }, diff --git a/docs/pages/api-docs/button.json b/docs/pages/api-docs/button.json index 2f823def288d96..afc9915d9adfc1 100644 --- a/docs/pages/api-docs/button.json +++ b/docs/pages/api-docs/button.json @@ -42,26 +42,14 @@ "textInherit", "textPrimary", "textSecondary", - "textError", - "textInfo", - "textSuccess", - "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", - "outlinedError", - "outlinedInfo", - "outlinedSuccess", - "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", - "containedError", - "containedInfo", - "containedSuccess", - "containedWarning", "disableElevation", "focusVisible", "disabled", diff --git a/docs/pages/api-docs/chip.json b/docs/pages/api-docs/chip.json index c5f3ebed74d014..7a0367b8ad152e 100644 --- a/docs/pages/api-docs/chip.json +++ b/docs/pages/api-docs/chip.json @@ -41,57 +41,27 @@ "sizeMedium", "colorPrimary", "colorSecondary", - "colorError", - "colorInfo", - "colorSuccess", - "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", - "clickableColorError", - "clickableColorInfo", - "clickableColorSuccess", - "clickableColorWarning", "deletable", "deletableColorPrimary", "deletableColorSecondary", - "deletableColorError", - "deletableColorInfo", - "deletableColorSuccess", - "deletableColorWarning", "outlined", "filled", - "filledPrimary", - "filledSecondary", - "filledError", - "filledInfo", - "filledSuccess", - "filledWarning", "outlinedPrimary", "outlinedSecondary", - "outlinedError", - "outlinedInfo", - "outlinedSuccess", - "outlinedWarning", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", - "avatarColorError", - "avatarColorInfo", - "avatarColorSuccess", - "avatarColorWarning", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", - "iconColorError", - "iconColorInfo", - "iconColorSuccess", - "iconColorWarning", "label", "labelSmall", "labelMedium", @@ -100,16 +70,8 @@ "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", - "deleteIconColorError", - "deleteIconColorInfo", - "deleteIconColorSuccess", - "deleteIconColorWarning", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", - "deleteIconOutlinedColorError", - "deleteIconOutlinedColorInfo", - "deleteIconOutlinedColorSuccess", - "deleteIconOutlinedColorWarning", "focusVisible" ], "globalClasses": { "disabled": "Mui-disabled", "focusVisible": "Mui-focusVisible" }, diff --git a/docs/pages/api-docs/circular-progress.json b/docs/pages/api-docs/circular-progress.json index 07ce1993ed6d8b..3854e8c07fe9ea 100644 --- a/docs/pages/api-docs/circular-progress.json +++ b/docs/pages/api-docs/circular-progress.json @@ -4,7 +4,7 @@ "color": { "type": { "name": "union", - "description": "'inherit'
| 'primary'
| 'secondary'
| string" + "description": "'inherit'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'primary'" }, diff --git a/docs/pages/api-docs/form-control.json b/docs/pages/api-docs/form-control.json index 59053ffe875580..ecf3b5d8ea9728 100644 --- a/docs/pages/api-docs/form-control.json +++ b/docs/pages/api-docs/form-control.json @@ -5,7 +5,7 @@ "color": { "type": { "name": "union", - "description": "'primary'
| 'secondary'
| string" + "description": "'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'primary'" }, diff --git a/docs/pages/api-docs/form-label.json b/docs/pages/api-docs/form-label.json index 9ae4df8f9c2649..bf9bf3f7d4f319 100644 --- a/docs/pages/api-docs/form-label.json +++ b/docs/pages/api-docs/form-label.json @@ -2,7 +2,12 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "color": { "type": { "name": "enum", "description": "'primary'
| 'secondary'" } }, + "color": { + "type": { + "name": "enum", + "description": "'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'" + } + }, "component": { "type": { "name": "elementType" } }, "disabled": { "type": { "name": "bool" } }, "error": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/icon-button.json b/docs/pages/api-docs/icon-button.json index 867c25e9aa9b51..7ecc095c33162e 100644 --- a/docs/pages/api-docs/icon-button.json +++ b/docs/pages/api-docs/icon-button.json @@ -5,7 +5,7 @@ "color": { "type": { "name": "union", - "description": "'inherit'
| 'default'
| 'primary'
| 'secondary'
| string" + "description": "'inherit'
| 'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'default'" }, diff --git a/docs/pages/api-docs/icon.json b/docs/pages/api-docs/icon.json index f9093b9e6c1b15..2ad1d645cc7c20 100644 --- a/docs/pages/api-docs/icon.json +++ b/docs/pages/api-docs/icon.json @@ -6,7 +6,7 @@ "color": { "type": { "name": "union", - "description": "'action'
| 'disabled'
| 'error'
| 'inherit'
| 'primary'
| 'secondary'
| string" + "description": "'inherit'
| 'action'
| 'disabled'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'inherit'" }, diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json index ed46d19bdadd70..5c6a862d203ddd 100644 --- a/docs/pages/api-docs/input-base.json +++ b/docs/pages/api-docs/input-base.json @@ -6,7 +6,7 @@ "color": { "type": { "name": "union", - "description": "'primary'
| 'secondary'
| string" + "description": "'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" } }, "components": { diff --git a/docs/pages/api-docs/input-label.json b/docs/pages/api-docs/input-label.json index 9691e15bf92d41..14abacf402c5f7 100644 --- a/docs/pages/api-docs/input-label.json +++ b/docs/pages/api-docs/input-label.json @@ -2,7 +2,12 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "color": { "type": { "name": "enum", "description": "'primary'
| 'secondary'" } }, + "color": { + "type": { + "name": "enum", + "description": "'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'" + } + }, "disableAnimation": { "type": { "name": "bool" } }, "disabled": { "type": { "name": "bool" } }, "error": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/loading-button.json b/docs/pages/api-docs/loading-button.json index abbd480a2d6b83..4b101b6eee9e3b 100644 --- a/docs/pages/api-docs/loading-button.json +++ b/docs/pages/api-docs/loading-button.json @@ -25,26 +25,14 @@ "textInherit", "textPrimary", "textSecondary", - "textError", - "textInfo", - "textSuccess", - "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", - "outlinedError", - "outlinedInfo", - "outlinedSuccess", - "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", - "containedError", - "containedInfo", - "containedSuccess", - "containedWarning", "disableElevation", "focusVisible", "disabled", diff --git a/docs/pages/api-docs/radio.json b/docs/pages/api-docs/radio.json index 7f8c0679c03410..862defcd787744 100644 --- a/docs/pages/api-docs/radio.json +++ b/docs/pages/api-docs/radio.json @@ -6,7 +6,7 @@ "color": { "type": { "name": "union", - "description": "'default'
| 'primary'
| 'secondary'
| string" + "description": "'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'primary'" }, diff --git a/docs/pages/api-docs/svg-icon.json b/docs/pages/api-docs/svg-icon.json index 7b17989059ed5d..f7576cdead80a8 100644 --- a/docs/pages/api-docs/svg-icon.json +++ b/docs/pages/api-docs/svg-icon.json @@ -5,7 +5,7 @@ "color": { "type": { "name": "union", - "description": "'action'
| 'disabled'
| 'error'
| 'inherit'
| 'primary'
| 'secondary'
| string" + "description": "'inherit'
| 'action'
| 'disabled'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'inherit'" }, diff --git a/docs/pages/api-docs/switch.json b/docs/pages/api-docs/switch.json index 5aa06ebbc06972..ff39b7b32b6139 100644 --- a/docs/pages/api-docs/switch.json +++ b/docs/pages/api-docs/switch.json @@ -6,7 +6,7 @@ "color": { "type": { "name": "union", - "description": "'default'
| 'primary'
| 'secondary'
| string" + "description": "'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'primary'" }, diff --git a/docs/pages/api-docs/timeline-dot.json b/docs/pages/api-docs/timeline-dot.json index becba6d1f1cd6d..2165fe72f2be50 100644 --- a/docs/pages/api-docs/timeline-dot.json +++ b/docs/pages/api-docs/timeline-dot.json @@ -5,7 +5,7 @@ "color": { "type": { "name": "enum", - "description": "'grey'
| 'inherit'
| 'primary'
| 'secondary'" + "description": "'error'
| 'grey'
| 'info'
| 'inherit'
| 'primary'
| 'secondary'
| 'success'
| 'warning'" }, "default": "'grey'" }, diff --git a/docs/src/pages/components/badges/ColorBadge.js b/docs/src/pages/components/badges/ColorBadge.js index f2f105db2fb514..dbba9b5a79da8e 100644 --- a/docs/src/pages/components/badges/ColorBadge.js +++ b/docs/src/pages/components/badges/ColorBadge.js @@ -8,7 +8,7 @@ export default function ColorBadge() { {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map( (color) => ( - + ), diff --git a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js index 481f0bd9ee8ac3..7b0a1164dd849c 100644 --- a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js +++ b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js @@ -5,11 +5,11 @@ import Radio from '@material-ui/core/Radio'; export default function ColorRadioButtons() { const [selectedValue, setSelectedValue] = React.useState('a'); - const handleChange = (event: React.ChangeEvent) => { + const handleChange = (event) => { setSelectedValue(event.target.value); }; - const controlProps = (item: string) => ({ + const controlProps = (item) => ({ checked: selectedValue === item, onChange: handleChange, value: item, diff --git a/docs/translations/api-docs/badge/badge.json b/docs/translations/api-docs/badge/badge.json index 6d62e755cba5c0..0f1b3cb1b7bc83 100644 --- a/docs/translations/api-docs/badge/badge.json +++ b/docs/translations/api-docs/badge/badge.json @@ -91,6 +91,21 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the badge `span` element", "conditions": "color=\"error\"" + }, + "colorInfo": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the badge `span` element", + "conditions": "color=\"info\"" + }, + "colorSuccess": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the badge `span` element", + "conditions": "color=\"success\"" + }, + "colorWarning": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the badge `span` element", + "conditions": "color=\"warning\"" } } } diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index e7e5b55328dcf3..7ae822919df2d0 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -39,26 +39,6 @@ "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"secondary\"" }, - "textError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"error\"" - }, - "textInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"info\"" - }, - "textSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"success\"" - }, - "textWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"warning\"" - }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -79,26 +59,6 @@ "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"secondary\"" }, - "outlinedError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"" - }, - "outlinedInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"" - }, - "outlinedSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"" - }, - "outlinedWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"" - }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -119,26 +79,6 @@ "nodeName": "the root element", "conditions": "variant=\"contained\" and color=\"secondary\"" }, - "containedError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"error\"" - }, - "containedInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"info\"" - }, - "containedSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"success\"" - }, - "containedWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"warning\"" - }, "disableElevation": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json index 943dee73e83821..f074a962067bfe 100644 --- a/docs/translations/api-docs/chip/chip.json +++ b/docs/translations/api-docs/chip/chip.json @@ -38,26 +38,6 @@ "nodeName": "the root element", "conditions": "color=\"secondary\"" }, - "colorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"error\"" - }, - "colorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"info\"" - }, - "colorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"success\"" - }, - "colorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "color=\"warning\"" - }, "disabled": { "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -78,26 +58,6 @@ "nodeName": "the root element", "conditions": "onClick and color=\"secondary\" is defined or clickable={true}" }, - "clickableColorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "onClick and color=\"error\" is defined or clickable={true}" - }, - "clickableColorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "onClick and color=\"info\" is defined or clickable={true}" - }, - "clickableColorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "onClick and color=\"success\" is defined or clickable={true}" - }, - "clickableColorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "onClick and color=\"warning\" is defined or clickable={true}" - }, "deletable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -113,26 +73,6 @@ "nodeName": "the root element", "conditions": "onDelete and color=\"secondary\" is defined" }, - "deletableColorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "onDelete and color=\"error\" is defined" - }, - "deletableColorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "onDelete and color=\"info\" is defined" - }, - "deletableColorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "onDelete and color=\"success\" is defined" - }, - "deletableColorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "onDelete and color=\"warning\" is defined" - }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -143,36 +83,6 @@ "nodeName": "the root element", "conditions": "variant=\"filled\"" }, - "filledPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"primary\"" - }, - "filledSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"secondary\"" - }, - "filledError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"error\"" - }, - "filledInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"info\"" - }, - "filledSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"success\"" - }, - "filledWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"warning\"" - }, "outlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -183,26 +93,6 @@ "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"secondary\"" }, - "outlinedError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"" - }, - "outlinedInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"" - }, - "outlinedSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"" - }, - "outlinedWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"" - }, "avatar": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the avatar element" @@ -227,26 +117,6 @@ "nodeName": "the avatar element", "conditions": "color=\"secondary\"" }, - "avatarColorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the avatar element", - "conditions": "color=\"error\"" - }, - "avatarColorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the avatar element", - "conditions": "color=\"info\"" - }, - "avatarColorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the avatar element", - "conditions": "color=\"success\"" - }, - "avatarColorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the avatar element", - "conditions": "color=\"warning\"" - }, "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon element" }, "iconSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -268,26 +138,6 @@ "nodeName": "the icon element", "conditions": "color=\"secondary\"" }, - "iconColorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "color=\"error\"" - }, - "iconColorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "color=\"info\"" - }, - "iconColorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "color=\"success\"" - }, - "iconColorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "color=\"warning\"" - }, "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label `span` element" @@ -326,26 +176,6 @@ "nodeName": "the deleteIcon element", "conditions": "color=\"secondary\" and variant=\"filled\"" }, - "deleteIconColorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the deleteIcon element", - "conditions": "color=\"error\" and variant=\"filled\"" - }, - "deleteIconColorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the deleteIcon element", - "conditions": "color=\"info\" and variant=\"filled\"" - }, - "deleteIconColorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the deleteIcon element", - "conditions": "color=\"success\" and variant=\"filled\"" - }, - "deleteIconColorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the deleteIcon element", - "conditions": "color=\"warning\" and variant=\"filled\"" - }, "deleteIconOutlinedColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", @@ -356,26 +186,6 @@ "nodeName": "the deleteIcon element", "conditions": "color=\"secondary\" and variant=\"outlined\"" }, - "deleteIconOutlinedColorError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the deleteIcon element", - "conditions": "color=\"error\" and variant=\"outlined\"" - }, - "deleteIconOutlinedColorInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the deleteIcon element", - "conditions": "color=\"info\" and variant=\"outlined\"" - }, - "deleteIconOutlinedColorSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the deleteIcon element", - "conditions": "color=\"success\" and variant=\"outlined\"" - }, - "deleteIconOutlinedColorWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the deleteIcon element", - "conditions": "color=\"warning\" and variant=\"outlined\"" - }, "focusVisible": { "description": "Pseudo-class applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/docs/translations/api-docs/loading-button/loading-button.json b/docs/translations/api-docs/loading-button/loading-button.json index d68b152e58b0b7..e3dd419bfdd376 100644 --- a/docs/translations/api-docs/loading-button/loading-button.json +++ b/docs/translations/api-docs/loading-button/loading-button.json @@ -31,26 +31,6 @@ "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"secondary\"" }, - "textError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"error\"" - }, - "textInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"info\"" - }, - "textSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"success\"" - }, - "textWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"warning\"" - }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -71,26 +51,6 @@ "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"secondary\"" }, - "outlinedError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"" - }, - "outlinedInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"" - }, - "outlinedSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"" - }, - "outlinedWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"" - }, "contained": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -111,26 +71,6 @@ "nodeName": "the root element", "conditions": "variant=\"contained\" and color=\"secondary\"" }, - "containedError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"error\"" - }, - "containedInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"info\"" - }, - "containedSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"success\"" - }, - "containedWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"warning\"" - }, "disableElevation": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/material-ui-lab/src/TimelineDot/TimelineDot.js b/packages/material-ui-lab/src/TimelineDot/TimelineDot.js index 4912b5da4d4390..93498704adb139 100644 --- a/packages/material-ui-lab/src/TimelineDot/TimelineDot.js +++ b/packages/material-ui-lab/src/TimelineDot/TimelineDot.js @@ -109,12 +109,12 @@ TimelineDot.propTypes /* remove-proptypes */ = { * @default 'grey' */ color: PropTypes.oneOf([ + 'error', 'grey', + 'info', 'inherit', 'primary', 'secondary', - 'error', - 'info', 'success', 'warning', ]), diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js index b3dcbffcd50de9..a421495654e071 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.js +++ b/packages/material-ui/src/FormLabel/FormLabel.js @@ -136,7 +136,7 @@ FormLabel.propTypes /* remove-proptypes */ = { /** * The color of the component. It supports those theme colors that make sense for this component. */ - color: PropTypes.oneOf(['primary', 'secondary']), + color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), /** * The component used for the root node. * Either a string to use a HTML element or a component. diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js index 64bb6e4c4b8553..88ebaa3b98a961 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.js +++ b/packages/material-ui/src/InputLabel/InputLabel.js @@ -164,7 +164,7 @@ InputLabel.propTypes /* remove-proptypes */ = { /** * The color of the component. It supports those theme colors that make sense for this component. */ - color: PropTypes.oneOf(['primary', 'secondary']), + color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), /** * If `true`, the transition animation is disabled. * @default false From c8e263b6abcde72de5f2961ddec29962a3b4468c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 14:38:15 +0700 Subject: [PATCH 26/40] cleanup --- .../src/LoadingButton/LoadingButton.d.ts | 2 -- packages/material-ui/src/Badge/Badge.js | 2 +- packages/material-ui/src/Checkbox/checkboxClasses.ts | 12 ------------ packages/material-ui/src/Icon/Icon.d.ts | 1 - 4 files changed, 1 insertion(+), 16 deletions(-) diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index afbf58831f673a..573bd4476f5f22 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -70,6 +70,4 @@ export type LoadingButtonProps< P = {}, > = OverrideProps, D>; -export type LoadingButtonClassKey = keyof NonNullable; - export default LoadingButton; diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js index 416121ea62770e..eab9c5759b6339 100644 --- a/packages/material-ui/src/Badge/Badge.js +++ b/packages/material-ui/src/Badge/Badge.js @@ -13,7 +13,7 @@ import capitalize from '../utils/capitalize'; export const badgeClasses = { ...badgeUnstyledClasses, - ...generateUtilityClasses('MuiBadge', ['colorError', 'colorPrimary']), + ...generateUtilityClasses('MuiBadge', ['colorError', 'colorPrimary', 'colorSecondary']), }; const RADIUS_STANDARD = 10; diff --git a/packages/material-ui/src/Checkbox/checkboxClasses.ts b/packages/material-ui/src/Checkbox/checkboxClasses.ts index 0b48edd3553a9a..ef20cd8fbc5444 100644 --- a/packages/material-ui/src/Checkbox/checkboxClasses.ts +++ b/packages/material-ui/src/Checkbox/checkboxClasses.ts @@ -13,14 +13,6 @@ export interface CheckboxClasses { colorPrimary: string; /** Styles applied to the root element if `color="secondary"`. */ colorSecondary: string; - /** Styles applied to the root element if `color="error"`. */ - colorError: string; - /** Styles applied to the root element if `color="info"`. */ - colorInfo: string; - /** Styles applied to the root element if `color="success"`. */ - colorSuccess: string; - /** Styles applied to the root element if `color="warning"`. */ - colorWarning: string; } export type CheckboxClassKey = keyof CheckboxClasses; @@ -36,10 +28,6 @@ const checkboxClasses: CheckboxClasses = generateUtilityClasses('MuiCheckbox', [ 'indeterminate', 'colorPrimary', 'colorSecondary', - 'colorError', - 'colorInfo', - 'colorSuccess', - 'colorWarning', ]); export default checkboxClasses; diff --git a/packages/material-ui/src/Icon/Icon.d.ts b/packages/material-ui/src/Icon/Icon.d.ts index acbeb1279d1688..8246a1d2cecada 100644 --- a/packages/material-ui/src/Icon/Icon.d.ts +++ b/packages/material-ui/src/Icon/Icon.d.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; import { OverridableStringUnion } from '@material-ui/types'; -import { PropTypes } from '..'; import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { IconClasses } from './iconClasses'; From 3c382a53f84cbf62c400a4a18adbfea27e23cda3 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 14:40:46 +0700 Subject: [PATCH 27/40] Revert "finish ButtonGroup color palette" This reverts commit 667f32a45657fcafe79bb917c341e2e5cbc71ed3. --- .../button-group/ColorsButtonGroup.tsx | 33 ------------------- ...izesButtonGroup.js => GroupSizesColors.js} | 6 ++-- ...esButtonGroup.tsx => GroupSizesColors.tsx} | 6 ++-- .../components/button-group/button-group.md | 12 ++----- .../src/ButtonGroup/ButtonGroup.d.ts | 2 +- .../src/ButtonGroup/ButtonGroup.js | 2 +- .../typescript/color-palette-prop.spec.tsx | 3 +- 7 files changed, 14 insertions(+), 50 deletions(-) delete mode 100644 docs/src/pages/components/button-group/ColorsButtonGroup.tsx rename docs/src/pages/components/button-group/{SizesButtonGroup.js => GroupSizesColors.js} (81%) rename docs/src/pages/components/button-group/{SizesButtonGroup.tsx => GroupSizesColors.tsx} (81%) diff --git a/docs/src/pages/components/button-group/ColorsButtonGroup.tsx b/docs/src/pages/components/button-group/ColorsButtonGroup.tsx deleted file mode 100644 index 2aa42fb45bb12c..00000000000000 --- a/docs/src/pages/components/button-group/ColorsButtonGroup.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import Box from '@material-ui/core/Box'; -import ButtonGroup from '@material-ui/core/ButtonGroup'; - -const buttons = [ - , - , - , -]; - -export default function ColorsButtonGroup() { - return ( - *': { - m: 1, - }, - }} - > - {( - ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const - ).map((color) => ( - - {buttons} - - ))} - - ); -} diff --git a/docs/src/pages/components/button-group/SizesButtonGroup.js b/docs/src/pages/components/button-group/GroupSizesColors.js similarity index 81% rename from docs/src/pages/components/button-group/SizesButtonGroup.js rename to docs/src/pages/components/button-group/GroupSizesColors.js index 0a256ee9751e98..a0cea7c9fed351 100644 --- a/docs/src/pages/components/button-group/SizesButtonGroup.js +++ b/docs/src/pages/components/button-group/GroupSizesColors.js @@ -9,7 +9,7 @@ const buttons = [ , ]; -export default function SizesButtonGroup() { +export default function GroupSizesColors() { return ( {buttons} - {buttons} + + {buttons} + {buttons} diff --git a/docs/src/pages/components/button-group/SizesButtonGroup.tsx b/docs/src/pages/components/button-group/GroupSizesColors.tsx similarity index 81% rename from docs/src/pages/components/button-group/SizesButtonGroup.tsx rename to docs/src/pages/components/button-group/GroupSizesColors.tsx index 0a256ee9751e98..a0cea7c9fed351 100644 --- a/docs/src/pages/components/button-group/SizesButtonGroup.tsx +++ b/docs/src/pages/components/button-group/GroupSizesColors.tsx @@ -9,7 +9,7 @@ const buttons = [ , ]; -export default function SizesButtonGroup() { +export default function GroupSizesColors() { return ( {buttons} - {buttons} + + {buttons} + {buttons} diff --git a/docs/src/pages/components/button-group/button-group.md b/docs/src/pages/components/button-group/button-group.md index 6b73c1621842e6..d75e0f9b936581 100644 --- a/docs/src/pages/components/button-group/button-group.md +++ b/docs/src/pages/components/button-group/button-group.md @@ -23,17 +23,11 @@ All the standard button variants are supported. {{"demo": "pages/components/button-group/VariantButtonGroup.js"}} -## Sizes +## Sizes and colors -The `size` prop can be used to control the appearance of the button group. +The `size` and `color` props can be used to control the appearance of the button group. -{{"demo": "pages/components/button-group/SizesButtonGroup.js"}} - -## Colors - -Use `color` prop to apply theme color palette to component. - -{{"demo": "pages/components/button-group/ColorsButtonGroup.js"}} +{{"demo": "pages/components/button-group/GroupSizesColors.js"}} ## Vertical group diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts index aa71f4063d963f..d51d2204f3e2cf 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts @@ -23,7 +23,7 @@ export interface ButtonGroupTypeMap

* @default 'primary' */ color?: OverridableStringUnion< - 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', + 'inherit' | 'primary' | 'secondary', ButtonGroupPropsColorOverrides >; /** diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js index e074b50f5198db..0f6f565ca3243a 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.js +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.js @@ -256,7 +256,7 @@ ButtonGroup.propTypes /* remove-proptypes */ = { * @default 'primary' */ color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), + PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string, ]), /** diff --git a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx index 31c6aeeeadab01..5bb4b2381a0e44 100644 --- a/packages/material-ui/test/typescript/color-palette-prop.spec.tsx +++ b/packages/material-ui/test/typescript/color-palette-prop.spec.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Badge, Button, - ButtonGroup, Checkbox, Chip, CircularProgress, @@ -28,7 +27,7 @@ function TestBaseColorPaletteProp() {

, - , - , -]; - -export default function ColorsButtonGroup() { - return ( - *': { - m: 1, - }, - }} - > - {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map( - (color) => ( - - {buttons} - - ), - )} - - ); -} From ada5beac1b02126e430b3679913d37283f7f7e6f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 15:16:33 +0700 Subject: [PATCH 31/40] update Chip color demo --- .../pages/components/chips/ChipsPlayground.js | 12 +++++++++++ docs/src/pages/components/chips/ColorChips.js | 20 ++++++++++++++++--- .../src/pages/components/chips/ColorChips.tsx | 20 ++++++++++++++++--- 3 files changed, 46 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js index a31ebec4f42b92..76b65162ee3b65 100644 --- a/docs/src/pages/components/chips/ChipsPlayground.js +++ b/docs/src/pages/components/chips/ChipsPlayground.js @@ -157,6 +157,18 @@ function ChipsPlayground() { control={} label="secondary" /> + } label="error" /> + } label="info" /> + } + label="success" + /> + } + label="warning" + /> diff --git a/docs/src/pages/components/chips/ColorChips.js b/docs/src/pages/components/chips/ColorChips.js index 3c29435c348c52..6cf6dd585788fc 100644 --- a/docs/src/pages/components/chips/ColorChips.js +++ b/docs/src/pages/components/chips/ColorChips.js @@ -4,9 +4,23 @@ import Stack from '@material-ui/core/Stack'; export default function ColorChips() { return ( - - - + + + + + + + + + + + + + + + + + ); } diff --git a/docs/src/pages/components/chips/ColorChips.tsx b/docs/src/pages/components/chips/ColorChips.tsx index 3c29435c348c52..6cf6dd585788fc 100644 --- a/docs/src/pages/components/chips/ColorChips.tsx +++ b/docs/src/pages/components/chips/ColorChips.tsx @@ -4,9 +4,23 @@ import Stack from '@material-ui/core/Stack'; export default function ColorChips() { return ( - - - + + + + + + + + + + + + + + + + + ); } From d704fcab85e4506a1e9034383d3312beb5a03580 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 15:26:51 +0700 Subject: [PATCH 32/40] run docs:api --- docs/pages/api-docs/text-field.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api-docs/text-field.json b/docs/pages/api-docs/text-field.json index 30f6b18e552e4c..f0c1ce3fd5fe1d 100644 --- a/docs/pages/api-docs/text-field.json +++ b/docs/pages/api-docs/text-field.json @@ -6,7 +6,7 @@ "color": { "type": { "name": "union", - "description": "'primary'
| 'secondary'
| string" + "description": "'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string" }, "default": "'primary'" }, From fec817d6d5ae98a7bb21b38996bd0f79b30f43a0 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 16:35:36 +0700 Subject: [PATCH 33/40] update Button color demo --- .../pages/components/buttons/ColorButtons.js | 76 ++++++++++++++++-- .../pages/components/buttons/ColorButtons.tsx | 77 +++++++++++++++++-- 2 files changed, 143 insertions(+), 10 deletions(-) diff --git a/docs/src/pages/components/buttons/ColorButtons.js b/docs/src/pages/components/buttons/ColorButtons.js index a5457fd0956e17..b8d29eefb1d6ca 100644 --- a/docs/src/pages/components/buttons/ColorButtons.js +++ b/docs/src/pages/components/buttons/ColorButtons.js @@ -1,17 +1,83 @@ import * as React from 'react'; +import PropTypes from 'prop-types'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; + +const ColorSelector = ({ color, setColor }) => { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + return ( + + + setAnchorEl(event.currentTarget)} + id="color-button" + aria-controls="color-menu" + aria-haspopup="true" + aria-expanded={open ? 'true' : undefined} + sx={{ lineHeight: 1 }} + color="inherit" + > + 🎨 + + + setAnchorEl(null)} + MenuListProps={{ + 'aria-labelledby': 'color-button', + }} + > + {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map( + (item) => ( + { + setColor(item); + setAnchorEl(null); + }} + > + {item} + + ), + )} + + + ); +}; + +ColorSelector.propTypes = { + color: PropTypes.oneOf([ + 'error', + 'info', + 'primary', + 'secondary', + 'success', + 'warning', + ]).isRequired, + setColor: PropTypes.func.isRequired, +}; export default function ColorButtons() { + const [color, setColor] = React.useState('secondary'); return ( :not(style)': { m: 1 } }}> - - + - + ); } diff --git a/docs/src/pages/components/buttons/ColorButtons.tsx b/docs/src/pages/components/buttons/ColorButtons.tsx index a5457fd0956e17..65959fbd392794 100644 --- a/docs/src/pages/components/buttons/ColorButtons.tsx +++ b/docs/src/pages/components/buttons/ColorButtons.tsx @@ -1,17 +1,84 @@ import * as React from 'react'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; + +type ColorPalette = + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning'; + +const ColorSelector = ({ + color, + setColor, +}: { + color: ColorPalette; + setColor: React.Dispatch>; +}) => { + const [anchorEl, setAnchorEl] = React.useState(null); + const open = Boolean(anchorEl); + return ( + + + setAnchorEl(event.currentTarget)} + id="color-button" + aria-controls="color-menu" + aria-haspopup="true" + aria-expanded={open ? 'true' : undefined} + sx={{ lineHeight: 1 }} + color="inherit" + > + 🎨 + + + setAnchorEl(null)} + MenuListProps={{ + 'aria-labelledby': 'color-button', + }} + > + {( + ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const + ).map((item) => ( + { + setColor(item); + setAnchorEl(null); + }} + > + {item} + + ))} + + + ); +}; export default function ColorButtons() { + const [color, setColor] = React.useState('secondary'); return ( :not(style)': { m: 1 } }}> - - + - + ); } From 8b2b4e8f9cee8185ebba9a83aa282b03eb21b7ad Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 18 Jun 2021 16:48:21 +0700 Subject: [PATCH 34/40] fix color chip demo --- docs/src/pages/components/chips/ColorChips.js | 2 +- docs/src/pages/components/chips/ColorChips.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/chips/ColorChips.js b/docs/src/pages/components/chips/ColorChips.js index 6cf6dd585788fc..3126f1e09cbaac 100644 --- a/docs/src/pages/components/chips/ColorChips.js +++ b/docs/src/pages/components/chips/ColorChips.js @@ -7,7 +7,7 @@ export default function ColorChips() { - + diff --git a/docs/src/pages/components/chips/ColorChips.tsx b/docs/src/pages/components/chips/ColorChips.tsx index 6cf6dd585788fc..3126f1e09cbaac 100644 --- a/docs/src/pages/components/chips/ColorChips.tsx +++ b/docs/src/pages/components/chips/ColorChips.tsx @@ -7,7 +7,7 @@ export default function ColorChips() { - + From 5953c18b947ec3f09bcd599ef03b3254da15ed1c Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Mon, 21 Jun 2021 08:55:27 +0700 Subject: [PATCH 35/40] Update docs/src/pages/components/badges/badges.md Co-authored-by: Olivier Tassinari --- docs/src/pages/components/badges/badges.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md index 6ef309f3ebe5d4..714db8caa5844c 100644 --- a/docs/src/pages/components/badges/badges.md +++ b/docs/src/pages/components/badges/badges.md @@ -16,7 +16,7 @@ Examples of badges containing text, using primary and secondary colors. The badg {{"demo": "pages/components/badges/SimpleBadge.js"}} -## Color Badge +## Color Use `color` prop to apply theme color palette to component. From f6657898a44be4646dabec7d9e0775435fc5c3b7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Jun 2021 09:41:21 +0700 Subject: [PATCH 36/40] add only 'success' color to demos --- .../src/pages/components/badges/ColorBadge.js | 13 ++-- .../pages/components/badges/ColorBadge.tsx | 13 ++-- docs/src/pages/components/badges/badges.md | 2 +- .../pages/components/buttons/ColorButtons.js | 76 ++---------------- .../pages/components/buttons/ColorButtons.tsx | 77 ++----------------- .../components/buttons/IconButtonColors.js | 13 ++-- .../components/buttons/IconButtonColors.tsx | 13 ++-- .../components/checkboxes/ColorCheckboxes.js | 3 - .../components/checkboxes/ColorCheckboxes.tsx | 3 - docs/src/pages/components/chips/ColorChips.js | 8 -- .../src/pages/components/chips/ColorChips.tsx | 8 -- docs/src/pages/components/chips/chips.md | 2 +- .../pages/components/icons/SvgIconsColor.js | 3 - .../pages/components/icons/SvgIconsColor.tsx | 3 - .../components/progress/CircularColor.js | 4 - .../components/progress/CircularColor.tsx | 4 - .../pages/components/progress/LinearColor.js | 4 - .../pages/components/progress/LinearColor.tsx | 4 - .../radio-buttons/ColorRadioButtons.js | 9 +-- .../radio-buttons/ColorRadioButtons.tsx | 9 +-- .../components/switches/ColorSwitches.js | 3 - .../components/switches/ColorSwitches.tsx | 3 - .../components/text-fields/ColorTextFields.js | 6 +- .../text-fields/ColorTextFields.tsx | 6 +- .../components/timeline/ColorsTimeline.js | 32 +------- .../components/timeline/ColorsTimeline.tsx | 32 +------- .../src/pages/components/timeline/timeline.md | 2 +- 27 files changed, 51 insertions(+), 304 deletions(-) diff --git a/docs/src/pages/components/badges/ColorBadge.js b/docs/src/pages/components/badges/ColorBadge.js index dbba9b5a79da8e..c73901c4f46639 100644 --- a/docs/src/pages/components/badges/ColorBadge.js +++ b/docs/src/pages/components/badges/ColorBadge.js @@ -6,13 +6,12 @@ import MailIcon from '@material-ui/icons/Mail'; export default function ColorBadge() { return ( - {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map( - (color) => ( - - - - ), - )} + + + + + + ); } diff --git a/docs/src/pages/components/badges/ColorBadge.tsx b/docs/src/pages/components/badges/ColorBadge.tsx index 2663ec08844ec8..c73901c4f46639 100644 --- a/docs/src/pages/components/badges/ColorBadge.tsx +++ b/docs/src/pages/components/badges/ColorBadge.tsx @@ -6,13 +6,12 @@ import MailIcon from '@material-ui/icons/Mail'; export default function ColorBadge() { return ( - {( - ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const - ).map((color) => ( - - - - ))} + + + + + + ); } diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md index 714db8caa5844c..ddd2f21f457210 100644 --- a/docs/src/pages/components/badges/badges.md +++ b/docs/src/pages/components/badges/badges.md @@ -18,7 +18,7 @@ Examples of badges containing text, using primary and secondary colors. The badg ## Color -Use `color` prop to apply theme color palette to component. +Use `color` prop to apply theme palette to component. {{"demo": "pages/components/badges/ColorBadge.js"}} diff --git a/docs/src/pages/components/buttons/ColorButtons.js b/docs/src/pages/components/buttons/ColorButtons.js index b8d29eefb1d6ca..5a5a6a50b83b69 100644 --- a/docs/src/pages/components/buttons/ColorButtons.js +++ b/docs/src/pages/components/buttons/ColorButtons.js @@ -1,83 +1,17 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; - -const ColorSelector = ({ color, setColor }) => { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - return ( - - - setAnchorEl(event.currentTarget)} - id="color-button" - aria-controls="color-menu" - aria-haspopup="true" - aria-expanded={open ? 'true' : undefined} - sx={{ lineHeight: 1 }} - color="inherit" - > - 🎨 - - - setAnchorEl(null)} - MenuListProps={{ - 'aria-labelledby': 'color-button', - }} - > - {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map( - (item) => ( - { - setColor(item); - setAnchorEl(null); - }} - > - {item} - - ), - )} - - - ); -}; - -ColorSelector.propTypes = { - color: PropTypes.oneOf([ - 'error', - 'info', - 'primary', - 'secondary', - 'success', - 'warning', - ]).isRequired, - setColor: PropTypes.func.isRequired, -}; export default function ColorButtons() { - const [color, setColor] = React.useState('secondary'); return ( :not(style)': { m: 1 } }}> - - + - - ); } diff --git a/docs/src/pages/components/buttons/ColorButtons.tsx b/docs/src/pages/components/buttons/ColorButtons.tsx index 65959fbd392794..5a5a6a50b83b69 100644 --- a/docs/src/pages/components/buttons/ColorButtons.tsx +++ b/docs/src/pages/components/buttons/ColorButtons.tsx @@ -1,84 +1,17 @@ import * as React from 'react'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; - -type ColorPalette = - | 'primary' - | 'secondary' - | 'error' - | 'info' - | 'success' - | 'warning'; - -const ColorSelector = ({ - color, - setColor, -}: { - color: ColorPalette; - setColor: React.Dispatch>; -}) => { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - return ( - - - setAnchorEl(event.currentTarget)} - id="color-button" - aria-controls="color-menu" - aria-haspopup="true" - aria-expanded={open ? 'true' : undefined} - sx={{ lineHeight: 1 }} - color="inherit" - > - 🎨 - - - setAnchorEl(null)} - MenuListProps={{ - 'aria-labelledby': 'color-button', - }} - > - {( - ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const - ).map((item) => ( - { - setColor(item); - setAnchorEl(null); - }} - > - {item} - - ))} - - - ); -}; export default function ColorButtons() { - const [color, setColor] = React.useState('secondary'); return ( :not(style)': { m: 1 } }}> - - + - - ); } diff --git a/docs/src/pages/components/buttons/IconButtonColors.js b/docs/src/pages/components/buttons/IconButtonColors.js index 1426168cfcebdd..94f31d1881f7fb 100644 --- a/docs/src/pages/components/buttons/IconButtonColors.js +++ b/docs/src/pages/components/buttons/IconButtonColors.js @@ -6,13 +6,12 @@ import Fingerprint from '@material-ui/icons/Fingerprint'; export default function IconButtonSizes() { return ( - {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map( - (color) => ( - - - - ), - )} + + + + + + ); } diff --git a/docs/src/pages/components/buttons/IconButtonColors.tsx b/docs/src/pages/components/buttons/IconButtonColors.tsx index 4b15b6f82b548d..94f31d1881f7fb 100644 --- a/docs/src/pages/components/buttons/IconButtonColors.tsx +++ b/docs/src/pages/components/buttons/IconButtonColors.tsx @@ -6,13 +6,12 @@ import Fingerprint from '@material-ui/icons/Fingerprint'; export default function IconButtonSizes() { return ( - {( - ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const - ).map((color) => ( - - - - ))} + + + + + + ); } diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.js b/docs/src/pages/components/checkboxes/ColorCheckboxes.js index fcfef0dc892690..594ce6cebfe257 100644 --- a/docs/src/pages/components/checkboxes/ColorCheckboxes.js +++ b/docs/src/pages/components/checkboxes/ColorCheckboxes.js @@ -9,10 +9,7 @@ export default function ColorCheckboxes() {
- - - - - - - - - - - - - - ); diff --git a/docs/src/pages/components/chips/ColorChips.tsx b/docs/src/pages/components/chips/ColorChips.tsx index 3126f1e09cbaac..f337a5bf371618 100644 --- a/docs/src/pages/components/chips/ColorChips.tsx +++ b/docs/src/pages/components/chips/ColorChips.tsx @@ -7,19 +7,11 @@ export default function ColorChips() { - - - - - - - - ); diff --git a/docs/src/pages/components/chips/chips.md b/docs/src/pages/components/chips/chips.md index 750011f6c317b9..f83be512105813 100644 --- a/docs/src/pages/components/chips/chips.md +++ b/docs/src/pages/components/chips/chips.md @@ -66,7 +66,7 @@ Use the `avatar` prop to added a avatar or use the `icon` prop to added a icon. ## Color chip -You can use the `color` prop to define a primary or secondary color. +You can use the `color` prop to define a color from theme palette. {{"demo": "pages/components/chips/ColorChips.js"}} diff --git a/docs/src/pages/components/icons/SvgIconsColor.js b/docs/src/pages/components/icons/SvgIconsColor.js index 43ab6d56e538a4..440d9e92c68863 100644 --- a/docs/src/pages/components/icons/SvgIconsColor.js +++ b/docs/src/pages/components/icons/SvgIconsColor.js @@ -23,10 +23,7 @@ export default function SvgIconsColor() { - - - diff --git a/docs/src/pages/components/icons/SvgIconsColor.tsx b/docs/src/pages/components/icons/SvgIconsColor.tsx index 7721315a5b4a90..1cdfa9436084a8 100644 --- a/docs/src/pages/components/icons/SvgIconsColor.tsx +++ b/docs/src/pages/components/icons/SvgIconsColor.tsx @@ -23,10 +23,7 @@ export default function SvgIconsColor() { - - - diff --git a/docs/src/pages/components/progress/CircularColor.js b/docs/src/pages/components/progress/CircularColor.js index bdf3c95f562a07..855deb343c0fb4 100644 --- a/docs/src/pages/components/progress/CircularColor.js +++ b/docs/src/pages/components/progress/CircularColor.js @@ -5,12 +5,8 @@ import CircularProgress from '@material-ui/core/CircularProgress'; export default function CircularColor() { return ( - - - - ); diff --git a/docs/src/pages/components/progress/CircularColor.tsx b/docs/src/pages/components/progress/CircularColor.tsx index bdf3c95f562a07..855deb343c0fb4 100644 --- a/docs/src/pages/components/progress/CircularColor.tsx +++ b/docs/src/pages/components/progress/CircularColor.tsx @@ -5,12 +5,8 @@ import CircularProgress from '@material-ui/core/CircularProgress'; export default function CircularColor() { return ( - - - - ); diff --git a/docs/src/pages/components/progress/LinearColor.js b/docs/src/pages/components/progress/LinearColor.js index 04f3ad46ba35ef..cdae0b6b390e79 100644 --- a/docs/src/pages/components/progress/LinearColor.js +++ b/docs/src/pages/components/progress/LinearColor.js @@ -5,12 +5,8 @@ import LinearProgress from '@material-ui/core/LinearProgress'; export default function LinearColor() { return ( - - - - ); diff --git a/docs/src/pages/components/progress/LinearColor.tsx b/docs/src/pages/components/progress/LinearColor.tsx index 04f3ad46ba35ef..cdae0b6b390e79 100644 --- a/docs/src/pages/components/progress/LinearColor.tsx +++ b/docs/src/pages/components/progress/LinearColor.tsx @@ -5,12 +5,8 @@ import LinearProgress from '@material-ui/core/LinearProgress'; export default function LinearColor() { return ( - - - - ); diff --git a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js index 7b0a1164dd849c..ddd5dc03463651 100644 --- a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js +++ b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js @@ -21,13 +21,10 @@ export default function ColorRadioButtons() {
- - - - - + + - - - - - + + - - -
diff --git a/docs/src/pages/components/switches/ColorSwitches.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx index c454277b92b181..ce9b3c62fd50c7 100644 --- a/docs/src/pages/components/switches/ColorSwitches.tsx +++ b/docs/src/pages/components/switches/ColorSwitches.tsx @@ -22,10 +22,7 @@ export default function ColorSwitches() {
- - -
diff --git a/docs/src/pages/components/text-fields/ColorTextFields.js b/docs/src/pages/components/text-fields/ColorTextFields.js index 4c9e693299fb77..2eb558c3740787 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.js +++ b/docs/src/pages/components/text-fields/ColorTextFields.js @@ -20,16 +20,16 @@ export default function ColorTextFields() { /> diff --git a/docs/src/pages/components/text-fields/ColorTextFields.tsx b/docs/src/pages/components/text-fields/ColorTextFields.tsx index 4c9e693299fb77..2eb558c3740787 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.tsx +++ b/docs/src/pages/components/text-fields/ColorTextFields.tsx @@ -20,16 +20,16 @@ export default function ColorTextFields() { /> diff --git a/docs/src/pages/components/timeline/ColorsTimeline.js b/docs/src/pages/components/timeline/ColorsTimeline.js index b154bce5f008d6..9bfd93236900b8 100644 --- a/docs/src/pages/components/timeline/ColorsTimeline.js +++ b/docs/src/pages/components/timeline/ColorsTimeline.js @@ -8,10 +8,7 @@ import TimelineDot from '@material-ui/lab/TimelineDot'; export default function ColorsTimeline() { return ( - + @@ -19,13 +16,6 @@ export default function ColorsTimeline() { Grey - - - - - - Primary - @@ -33,20 +23,6 @@ export default function ColorsTimeline() { Secondary - - - - - - Error - - - - - - - Info - @@ -54,12 +30,6 @@ export default function ColorsTimeline() { Success - - - - - Warning - ); } diff --git a/docs/src/pages/components/timeline/ColorsTimeline.tsx b/docs/src/pages/components/timeline/ColorsTimeline.tsx index b154bce5f008d6..9bfd93236900b8 100644 --- a/docs/src/pages/components/timeline/ColorsTimeline.tsx +++ b/docs/src/pages/components/timeline/ColorsTimeline.tsx @@ -8,10 +8,7 @@ import TimelineDot from '@material-ui/lab/TimelineDot'; export default function ColorsTimeline() { return ( - + @@ -19,13 +16,6 @@ export default function ColorsTimeline() { Grey - - - - - - Primary - @@ -33,20 +23,6 @@ export default function ColorsTimeline() { Secondary - - - - - - Error - - - - - - - Info - @@ -54,12 +30,6 @@ export default function ColorsTimeline() { Success - - - - - Warning - ); } diff --git a/docs/src/pages/components/timeline/timeline.md b/docs/src/pages/components/timeline/timeline.md index 8d04110834b2f7..53342117c139b4 100644 --- a/docs/src/pages/components/timeline/timeline.md +++ b/docs/src/pages/components/timeline/timeline.md @@ -33,7 +33,7 @@ The timeline can display the events on alternating sides. ## Color -The `TimelineDot` can appear in different colors. +The `TimelineDot` can appear in different colors from theme palette. {{"demo": "pages/components/timeline/ColorsTimeline.js"}} From acbd3767788bea132e71e08b72048e3550b657c3 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Jun 2021 10:00:14 +0700 Subject: [PATCH 37/40] fix demos --- .../src/pages/components/checkboxes/ColorCheckboxes.js | 6 +++--- .../pages/components/checkboxes/ColorCheckboxes.tsx | 6 +++--- .../components/radio-buttons/ColorRadioButtons.js | 6 +++--- .../components/radio-buttons/ColorRadioButtons.tsx | 6 +++--- docs/src/pages/components/switches/ColorSwitches.js | 10 +++++----- docs/src/pages/components/switches/ColorSwitches.tsx | 10 +++++----- docs/src/pages/components/timeline/ColorsTimeline.js | 1 - docs/src/pages/components/timeline/ColorsTimeline.tsx | 1 - 8 files changed, 22 insertions(+), 24 deletions(-) diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.js b/docs/src/pages/components/checkboxes/ColorCheckboxes.js index 594ce6cebfe257..3d7ad2d66923f1 100644 --- a/docs/src/pages/components/checkboxes/ColorCheckboxes.js +++ b/docs/src/pages/components/checkboxes/ColorCheckboxes.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { green } from '@material-ui/core/colors'; +import { pink } from '@material-ui/core/colors'; import Checkbox from '@material-ui/core/Checkbox'; const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; @@ -15,9 +15,9 @@ export default function ColorCheckboxes() { {...label} defaultChecked sx={{ - color: green[800], + color: pink[800], '&.Mui-checked': { - color: green[600], + color: pink[600], }, }} /> diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx b/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx index 594ce6cebfe257..3d7ad2d66923f1 100644 --- a/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx +++ b/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { green } from '@material-ui/core/colors'; +import { pink } from '@material-ui/core/colors'; import Checkbox from '@material-ui/core/Checkbox'; const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; @@ -15,9 +15,9 @@ export default function ColorCheckboxes() { {...label} defaultChecked sx={{ - color: green[800], + color: pink[800], '&.Mui-checked': { - color: green[600], + color: pink[600], }, }} /> diff --git a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js index ddd5dc03463651..b0e9caff297142 100644 --- a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js +++ b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { green } from '@material-ui/core/colors'; +import { pink } from '@material-ui/core/colors'; import Radio from '@material-ui/core/Radio'; export default function ColorRadioButtons() { @@ -26,9 +26,9 @@ export default function ColorRadioButtons() { diff --git a/docs/src/pages/components/radio-buttons/ColorRadioButtons.tsx b/docs/src/pages/components/radio-buttons/ColorRadioButtons.tsx index f0dd7180ecb8e6..692a13ba57328a 100644 --- a/docs/src/pages/components/radio-buttons/ColorRadioButtons.tsx +++ b/docs/src/pages/components/radio-buttons/ColorRadioButtons.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { green } from '@material-ui/core/colors'; +import { pink } from '@material-ui/core/colors'; import Radio from '@material-ui/core/Radio'; export default function ColorRadioButtons() { @@ -26,9 +26,9 @@ export default function ColorRadioButtons() { diff --git a/docs/src/pages/components/switches/ColorSwitches.js b/docs/src/pages/components/switches/ColorSwitches.js index ce9b3c62fd50c7..c4201937913d72 100644 --- a/docs/src/pages/components/switches/ColorSwitches.js +++ b/docs/src/pages/components/switches/ColorSwitches.js @@ -1,17 +1,17 @@ import * as React from 'react'; import { alpha, styled } from '@material-ui/core/styles'; -import { green } from '@material-ui/core/colors'; +import { pink } from '@material-ui/core/colors'; import Switch from '@material-ui/core/Switch'; const GreenSwitch = styled(Switch)(({ theme }) => ({ '& .MuiSwitch-switchBase.Mui-checked': { - color: green[600], + color: pink[600], '&:hover': { - backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity), + backgroundColor: alpha(pink[600], theme.palette.action.hoverOpacity), }, }, '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { - backgroundColor: green[600], + backgroundColor: pink[600], }, })); @@ -22,7 +22,7 @@ export default function ColorSwitches() {
- +
diff --git a/docs/src/pages/components/switches/ColorSwitches.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx index ce9b3c62fd50c7..c4201937913d72 100644 --- a/docs/src/pages/components/switches/ColorSwitches.tsx +++ b/docs/src/pages/components/switches/ColorSwitches.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; import { alpha, styled } from '@material-ui/core/styles'; -import { green } from '@material-ui/core/colors'; +import { pink } from '@material-ui/core/colors'; import Switch from '@material-ui/core/Switch'; const GreenSwitch = styled(Switch)(({ theme }) => ({ '& .MuiSwitch-switchBase.Mui-checked': { - color: green[600], + color: pink[600], '&:hover': { - backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity), + backgroundColor: alpha(pink[600], theme.palette.action.hoverOpacity), }, }, '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { - backgroundColor: green[600], + backgroundColor: pink[600], }, })); @@ -22,7 +22,7 @@ export default function ColorSwitches() {
- +
diff --git a/docs/src/pages/components/timeline/ColorsTimeline.js b/docs/src/pages/components/timeline/ColorsTimeline.js index 9bfd93236900b8..4374fd59106b30 100644 --- a/docs/src/pages/components/timeline/ColorsTimeline.js +++ b/docs/src/pages/components/timeline/ColorsTimeline.js @@ -26,7 +26,6 @@ export default function ColorsTimeline() { - Success diff --git a/docs/src/pages/components/timeline/ColorsTimeline.tsx b/docs/src/pages/components/timeline/ColorsTimeline.tsx index 9bfd93236900b8..4374fd59106b30 100644 --- a/docs/src/pages/components/timeline/ColorsTimeline.tsx +++ b/docs/src/pages/components/timeline/ColorsTimeline.tsx @@ -26,7 +26,6 @@ export default function ColorsTimeline() { - Success From fe1e639af13c5cf0e6782a0bfa2a8d39dcc97607 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 21 Jun 2021 17:08:43 +0700 Subject: [PATCH 38/40] reduce lines for inline preview --- .../components/text-fields/ColorTextFields.js | 16 ++-------------- .../components/text-fields/ColorTextFields.tsx | 16 ++-------------- 2 files changed, 4 insertions(+), 28 deletions(-) diff --git a/docs/src/pages/components/text-fields/ColorTextFields.js b/docs/src/pages/components/text-fields/ColorTextFields.js index 2eb558c3740787..085bb9f0c86c3f 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.js +++ b/docs/src/pages/components/text-fields/ColorTextFields.js @@ -12,21 +12,9 @@ export default function ColorTextFields() { noValidate autoComplete="off" > + + - - + + - - Date: Mon, 21 Jun 2021 17:10:33 +0700 Subject: [PATCH 39/40] reduce lines for inline preview --- docs/src/pages/components/timeline/ColorsTimeline.js | 7 ------- docs/src/pages/components/timeline/ColorsTimeline.tsx | 7 ------- 2 files changed, 14 deletions(-) diff --git a/docs/src/pages/components/timeline/ColorsTimeline.js b/docs/src/pages/components/timeline/ColorsTimeline.js index 4374fd59106b30..5728427050c66f 100644 --- a/docs/src/pages/components/timeline/ColorsTimeline.js +++ b/docs/src/pages/components/timeline/ColorsTimeline.js @@ -9,13 +9,6 @@ import TimelineDot from '@material-ui/lab/TimelineDot'; export default function ColorsTimeline() { return ( - - - - - - Grey - diff --git a/docs/src/pages/components/timeline/ColorsTimeline.tsx b/docs/src/pages/components/timeline/ColorsTimeline.tsx index 4374fd59106b30..5728427050c66f 100644 --- a/docs/src/pages/components/timeline/ColorsTimeline.tsx +++ b/docs/src/pages/components/timeline/ColorsTimeline.tsx @@ -9,13 +9,6 @@ import TimelineDot from '@material-ui/lab/TimelineDot'; export default function ColorsTimeline() { return ( - - - - - - Grey - From 697bfec381089f74ca22963ab6d1fffd9f274799 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 22 Jun 2021 10:50:12 +0700 Subject: [PATCH 40/40] fix naming typo --- docs/src/pages/components/buttons/IconButtonColors.js | 2 +- docs/src/pages/components/buttons/IconButtonColors.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/buttons/IconButtonColors.js b/docs/src/pages/components/buttons/IconButtonColors.js index 94f31d1881f7fb..2fd45873a1f1e0 100644 --- a/docs/src/pages/components/buttons/IconButtonColors.js +++ b/docs/src/pages/components/buttons/IconButtonColors.js @@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box'; import IconButton from '@material-ui/core/IconButton'; import Fingerprint from '@material-ui/icons/Fingerprint'; -export default function IconButtonSizes() { +export default function IconButtonColors() { return ( diff --git a/docs/src/pages/components/buttons/IconButtonColors.tsx b/docs/src/pages/components/buttons/IconButtonColors.tsx index 94f31d1881f7fb..2fd45873a1f1e0 100644 --- a/docs/src/pages/components/buttons/IconButtonColors.tsx +++ b/docs/src/pages/components/buttons/IconButtonColors.tsx @@ -3,7 +3,7 @@ import Box from '@material-ui/core/Box'; import IconButton from '@material-ui/core/IconButton'; import Fingerprint from '@material-ui/icons/Fingerprint'; -export default function IconButtonSizes() { +export default function IconButtonColors() { return (