Skip to content

Commit

Permalink
[theme] Add base color palette type to components (#26697)
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp authored Jun 23, 2021
1 parent 40d704d commit 225c87b
Show file tree
Hide file tree
Showing 79 changed files with 435 additions and 242 deletions.
7 changes: 5 additions & 2 deletions docs/pages/api-docs/badge.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"color": {
"type": {
"name": "union",
"description": "'default'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'default'"
},
Expand Down Expand Up @@ -57,7 +57,10 @@
"invisible",
"colorPrimary",
"colorSecondary",
"colorError"
"colorError",
"colorInfo",
"colorSuccess",
"colorWarning"
],
"globalClasses": {},
"name": "MuiBadge"
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/checkbox.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"color": {
"type": {
"name": "union",
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'succes'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'primary'"
},
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/chip.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"color": {
"type": {
"name": "union",
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'default'"
},
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/circular-progress.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"color": {
"type": {
"name": "union",
"description": "'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'primary'"
},
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/form-control.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"color": {
"type": {
"name": "union",
"description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'primary'"
},
Expand Down
7 changes: 6 additions & 1 deletion docs/pages/api-docs/form-label.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
"props": {
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" } },
"color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
"color": {
"type": {
"name": "enum",
"description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
}
},
"component": { "type": { "name": "elementType" } },
"disabled": { "type": { "name": "bool" } },
"error": { "type": { "name": "bool" } },
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/icon-button.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"color": {
"type": {
"name": "union",
"description": "'inherit'<br>&#124;&nbsp;'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'inherit'<br>&#124;&nbsp;'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'default'"
},
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/icon.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"color": {
"type": {
"name": "union",
"description": "'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'inherit'<br>&#124;&nbsp;'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'inherit'"
},
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/input-base.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"color": {
"type": {
"name": "union",
"description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
}
},
"components": {
Expand Down
7 changes: 6 additions & 1 deletion docs/pages/api-docs/input-label.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@
"props": {
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" } },
"color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
"color": {
"type": {
"name": "enum",
"description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
}
},
"disableAnimation": { "type": { "name": "bool" } },
"disabled": { "type": { "name": "bool" } },
"error": { "type": { "name": "bool" } },
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/radio.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"color": {
"type": {
"name": "union",
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'primary'"
},
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/svg-icon.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"color": {
"type": {
"name": "union",
"description": "'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'inherit'<br>&#124;&nbsp;'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'inherit'"
},
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/switch.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"color": {
"type": {
"name": "union",
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'primary'"
},
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/text-field.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"color": {
"type": {
"name": "union",
"description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
"description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
},
"default": "'primary'"
},
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/timeline-dot.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"color": {
"type": {
"name": "enum",
"description": "'grey'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
"description": "'error'<br>&#124;&nbsp;'grey'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
},
"default": "'grey'"
},
Expand Down
17 changes: 17 additions & 0 deletions docs/src/pages/components/badges/ColorBadge.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
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 (
<Stack spacing={2} direction="row">
<Badge badgeContent={4} color="secondary">
<MailIcon color="action" />
</Badge>
<Badge badgeContent={4} color="success">
<MailIcon color="action" />
</Badge>
</Stack>
);
}
17 changes: 17 additions & 0 deletions docs/src/pages/components/badges/ColorBadge.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
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 (
<Stack spacing={2} direction="row">
<Badge badgeContent={4} color="secondary">
<MailIcon color="action" />
</Badge>
<Badge badgeContent={4} color="success">
<MailIcon color="action" />
</Badge>
</Stack>
);
}
12 changes: 3 additions & 9 deletions docs/src/pages/components/badges/SimpleBadge.js
Original file line number Diff line number Diff line change
@@ -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 (
<Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
<Badge badgeContent={4} color="secondary">
<MailIcon />
</Badge>
<Badge badgeContent={4} color="error">
<MailIcon />
</Badge>
</Stack>
<Badge badgeContent={4} color="primary">
<MailIcon color="action" />
</Badge>
);
}
12 changes: 3 additions & 9 deletions docs/src/pages/components/badges/SimpleBadge.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
<Badge badgeContent={4} color="secondary">
<MailIcon />
</Badge>
<Badge badgeContent={4} color="error">
<MailIcon />
</Badge>
</Stack>
<Badge badgeContent={4} color="primary">
<MailIcon color="action" />
</Badge>
);
}
6 changes: 6 additions & 0 deletions docs/src/pages/components/badges/badges.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@ Examples of badges containing text, using primary and secondary colors. The badg

{{"demo": "pages/components/badges/SimpleBadge.js"}}

## Color

Use `color` prop to apply theme 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/).
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/components/buttons/ColorButtons.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ export default function ColorButtons() {
return (
<Box sx={{ '& > :not(style)': { m: 1 } }}>
<Button color="secondary">Secondary</Button>
<Button variant="contained" color="secondary">
Secondary
<Button variant="contained" color="success">
Success
</Button>
<Button variant="outlined" color="secondary">
Secondary
<Button variant="outlined" color="error">
Error
</Button>
</Box>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/components/buttons/ColorButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ export default function ColorButtons() {
return (
<Box sx={{ '& > :not(style)': { m: 1 } }}>
<Button color="secondary">Secondary</Button>
<Button variant="contained" color="secondary">
Secondary
<Button variant="contained" color="success">
Success
</Button>
<Button variant="outlined" color="secondary">
Secondary
<Button variant="outlined" color="error">
Error
</Button>
</Box>
);
Expand Down
17 changes: 17 additions & 0 deletions docs/src/pages/components/buttons/IconButtonColors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
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 IconButtonColors() {
return (
<Box sx={{ '& button': { m: 1 } }}>
<IconButton aria-label="fingerprint" color="secondary">
<Fingerprint />
</IconButton>
<IconButton aria-label="fingerprint" color="success">
<Fingerprint />
</IconButton>
</Box>
);
}
17 changes: 17 additions & 0 deletions docs/src/pages/components/buttons/IconButtonColors.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
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 IconButtonColors() {
return (
<Box sx={{ '& button': { m: 1 } }}>
<IconButton aria-label="fingerprint" color="secondary">
<Fingerprint />
</IconButton>
<IconButton aria-label="fingerprint" color="success">
<Fingerprint />
</IconButton>
</Box>
);
}
6 changes: 6 additions & 0 deletions docs/src/pages/components/buttons/buttons.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 4 additions & 3 deletions docs/src/pages/components/checkboxes/ColorCheckboxes.js
Original file line number Diff line number Diff line change
@@ -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' } };
Expand All @@ -9,14 +9,15 @@ export default function ColorCheckboxes() {
<div>
<Checkbox {...label} defaultChecked />
<Checkbox {...label} defaultChecked color="secondary" />
<Checkbox {...label} defaultChecked color="success" />
<Checkbox {...label} defaultChecked color="default" />
<Checkbox
{...label}
defaultChecked
sx={{
color: green[800],
color: pink[800],
'&.Mui-checked': {
color: green[600],
color: pink[600],
},
}}
/>
Expand Down
7 changes: 4 additions & 3 deletions docs/src/pages/components/checkboxes/ColorCheckboxes.tsx
Original file line number Diff line number Diff line change
@@ -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' } };
Expand All @@ -9,14 +9,15 @@ export default function ColorCheckboxes() {
<div>
<Checkbox {...label} defaultChecked />
<Checkbox {...label} defaultChecked color="secondary" />
<Checkbox {...label} defaultChecked color="success" />
<Checkbox {...label} defaultChecked color="default" />
<Checkbox
{...label}
defaultChecked
sx={{
color: green[800],
color: pink[800],
'&.Mui-checked': {
color: green[600],
color: pink[600],
},
}}
/>
Expand Down
12 changes: 12 additions & 0 deletions docs/src/pages/components/chips/ChipsPlayground.js
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,18 @@ function ChipsPlayground() {
control={<Radio />}
label="secondary"
/>
<FormControlLabel value="error" control={<Radio />} label="error" />
<FormControlLabel value="info" control={<Radio />} label="info" />
<FormControlLabel
value="success"
control={<Radio />}
label="success"
/>
<FormControlLabel
value="warning"
control={<Radio />}
label="warning"
/>
</RadioGroup>
</FormControl>
</Grid>
Expand Down
Loading

0 comments on commit 225c87b

Please sign in to comment.