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

mui · Apr 30, 2021 · 6a3b294 · 6a3b294
1 parent 1e360fb
commit 6a3b294
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 14 deletions.
diff --git a/docs/pages/api-docs/checkbox.json b/docs/pages/api-docs/checkbox.json
@@ -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" } },

diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.js b/docs/src/pages/components/checkboxes/ColorCheckboxes.js
@@ -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}

diff --git a/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx b/docs/src/pages/components/checkboxes/ColorCheckboxes.tsx
@@ -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}

diff --git a/docs/src/pages/customization/theming/ThemeNesting.js b/docs/src/pages/customization/theming/ThemeNesting.js
@@ -5,15 +5,15 @@ import { green, orange } from '@material-ui/core/colors';
 
 const outerTheme = createTheme({
  palette: {
- secondary: {
+ primary: {
  main: orange[500],
  },
  },
 });
 
 const innerTheme = createTheme({
  palette: {
- secondary: {
+ primary: {
  main: green[500],
  },
  },

diff --git a/docs/src/pages/customization/theming/ThemeNesting.tsx b/docs/src/pages/customization/theming/ThemeNesting.tsx
@@ -5,15 +5,15 @@ import { green, orange } from '@material-ui/core/colors';
 
 const outerTheme = createTheme({
  palette: {
- secondary: {
+ primary: {
  main: orange[500],
  },
  },
 });
 
 const innerTheme = createTheme({
  palette: {
- secondary: {
+ primary: {
  main: green[500],
  },
  },

diff --git a/docs/src/pages/customization/theming/ThemeNestingExtend.js b/docs/src/pages/customization/theming/ThemeNestingExtend.js
@@ -14,7 +14,7 @@ const outerTheme = createTheme({
 export default function ThemeNestingExtend() {
  return (
  <ThemeProvider theme={outerTheme}>
- <Checkbox defaultChecked />
+ <Checkbox defaultChecked color="secondary" />
  <ThemeProvider
  theme={(theme) =>
  createTheme({
@@ -28,7 +28,7 @@ export default function ThemeNestingExtend() {
  })
  }
  >
- <Checkbox defaultChecked color="primary" />
+ <Checkbox defaultChecked />
  <Checkbox defaultChecked color="secondary" />
  </ThemeProvider>
  </ThemeProvider>

diff --git a/docs/src/pages/customization/theming/ThemeNestingExtend.tsx b/docs/src/pages/customization/theming/ThemeNestingExtend.tsx
@@ -14,7 +14,7 @@ const outerTheme = createTheme({
 export default function ThemeNestingExtend() {
  return (
  <ThemeProvider theme={outerTheme}>
- <Checkbox defaultChecked />
+ <Checkbox defaultChecked color="secondary" />
  <ThemeProvider
  theme={(theme: Theme) =>
  createTheme({
@@ -28,7 +28,7 @@ export default function ThemeNestingExtend() {
  })
  }
  >
- <Checkbox defaultChecked color="primary" />
+ <Checkbox defaultChecked />
  <Checkbox defaultChecked color="secondary" />
  </ThemeProvider>
  </ThemeProvider>

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -538,6 +538,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.

diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts
@@ -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>;
  /**

diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js
@@ -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,
@@ -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']),