Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

[Checkbox] Make color="primary" default #26002

Merged
merged 11 commits into from
Apr 30, 2021
Merged

[Checkbox] Make color="primary" default #26002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f8abc37
Make color primary the default
vicasas Apr 27, 2021
feb77a3
yarn prettier
vicasas Apr 27, 2021
0c7ef3a
yarn docs:typescript:formatted
vicasas Apr 27, 2021
27efbc4
Fix proptypes
vicasas Apr 27, 2021
dba3ee5
yarn workspace framer build
vicasas Apr 27, 2021
0eb1786
Merge branch 'next' into feature/change-color-checkbox
vicasas Apr 27, 2021
2565a2e
Fix framer
vicasas Apr 27, 2021
614a6e2
Change to primary
vicasas Apr 27, 2021
f0ca06c
Update migration guide
vicasas Apr 27, 2021
c8a8165
Fix argos
vicasas Apr 27, 2021
9b4c4c8
yarn docs:typescript:formatted
vicasas Apr 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/api-docs/checkbox.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"name": "union",
"description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
},
"default": "'secondary'"
"default": "'primary'"
},
"defaultChecked": { "type": { "name": "bool" } },
"disabled": { "type": { "name": "bool" } },
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/checkboxes/ColorCheckboxes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function ColorCheckboxes() {
return (
<div>
<Checkbox {...label} defaultChecked />
<Checkbox {...label} defaultChecked color="primary" />
<Checkbox {...label} defaultChecked color="secondary" />
<Checkbox {...label} defaultChecked color="default" />
<Checkbox
{...label}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/checkboxes/ColorCheckboxes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function ColorCheckboxes() {
return (
<div>
<Checkbox {...label} defaultChecked />
<Checkbox {...label} defaultChecked color="primary" />
<Checkbox {...label} defaultChecked color="secondary" />
<Checkbox {...label} defaultChecked color="default" />
<Checkbox
{...label}
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/customization/theming/ThemeNesting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import { green, orange } from '@material-ui/core/colors';

const outerTheme = createMuiTheme({
palette: {
secondary: {
primary: {
main: orange[500],
},
},
});

const innerTheme = createMuiTheme({
palette: {
secondary: {
primary: {
main: green[500],
},
},
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/customization/theming/ThemeNesting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import { green, orange } from '@material-ui/core/colors';

const outerTheme = createMuiTheme({
palette: {
secondary: {
primary: {
main: orange[500],
},
},
});

const innerTheme = createMuiTheme({
palette: {
secondary: {
primary: {
main: green[500],
},
},
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/customization/theming/ThemeNestingExtend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const outerTheme = createMuiTheme({
export default function ThemeNestingExtend() {
return (
<ThemeProvider theme={outerTheme}>
<Checkbox defaultChecked />
<Checkbox defaultChecked color="secondary" />
<ThemeProvider
theme={(theme) =>
createMuiTheme({
Expand All @@ -28,7 +28,7 @@ export default function ThemeNestingExtend() {
})
}
>
<Checkbox defaultChecked color="primary" />
<Checkbox defaultChecked />
<Checkbox defaultChecked color="secondary" />
</ThemeProvider>
</ThemeProvider>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/customization/theming/ThemeNestingExtend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const outerTheme = createMuiTheme({
export default function ThemeNestingExtend() {
return (
<ThemeProvider theme={outerTheme}>
<Checkbox defaultChecked />
<Checkbox defaultChecked color="secondary" />
<ThemeProvider
theme={(theme: Theme) =>
createMuiTheme({
Expand All @@ -28,7 +28,7 @@ export default function ThemeNestingExtend() {
})
}
>
<Checkbox defaultChecked color="primary" />
<Checkbox defaultChecked />
<Checkbox defaultChecked color="secondary" />
</ThemeProvider>
</ThemeProvider>
Expand Down
7 changes: 7 additions & 0 deletions docs/src/pages/guides/migration-v4/migration-v4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,6 +512,13 @@ As the core components use emotion as a styled engine, the props used by emotion
}
```

- The checkbox color prop is now "primary" by default. To continue using the "secondary" color, you must explicitly indicate `secondary`. This brings the checkbox closer to the Material Design specification.

```diff
- <Checkbox />
+ <Checkbox color="secondary />
```

### Chip

- Rename `default` variant to `filled` for consistency.
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/Checkbox/Checkbox.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export interface CheckboxProps
};
/**
* The color of the component. It supports those theme colors that make sense for this component.
* @default 'secondary'
* @default 'primary'
*/
color?: OverridableStringUnion<'primary' | 'secondary' | 'default', CheckboxPropsColorOverrides>;
/**
Expand Down
4 changes: 2 additions & 2 deletions packages/material-ui/src/Checkbox/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
const props = useThemeProps({ props: inProps, name: 'MuiCheckbox' });
const {
checkedIcon = defaultCheckedIcon,
color = 'secondary',
color = 'primary',
icon: iconProp = defaultIcon,
indeterminate = false,
indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
Expand Down Expand Up @@ -142,7 +142,7 @@ Checkbox.propTypes /* remove-proptypes */ = {
classes: PropTypes.object,
/**
* The color of the component. It supports those theme colors that make sense for this component.
* @default 'secondary'
* @default 'primary'
*/
color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
PropTypes.oneOf(['default', 'primary', 'secondary']),
Expand Down