[Switch] Make color primary default (#26182)

mui · May 10, 2021 · c829338 · c829338
1 parent f30fa2f
commit c829338
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 10 deletions.
diff --git a/docs/pages/api-docs/switch.json b/docs/pages/api-docs/switch.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/switches/ColorSwitches.js b/docs/src/pages/components/switches/ColorSwitches.js
@@ -4,13 +4,13 @@ import { green } from '@material-ui/core/colors';
 import Switch from '@material-ui/core/Switch';
 
 const GreenSwitch = styled(Switch)(({ theme }) => ({
-  '& .MuiSwitch-input.Mui-checked': {
+  '& .MuiSwitch-switchBase.Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': {
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
     backgroundColor: green[600],
   },
 }));
@@ -21,7 +21,7 @@ export default function ColorSwitches() {
   return (
     <div>
       <Switch {...label} defaultChecked />
-      <Switch {...label} defaultChecked color="primary" />
+      <Switch {...label} defaultChecked color="secondary" />
       <Switch {...label} defaultChecked color="default" />
       <GreenSwitch {...label} defaultChecked />
     </div>

diff --git a/docs/src/pages/components/switches/ColorSwitches.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx
@@ -4,13 +4,13 @@ import { green } from '@material-ui/core/colors';
 import Switch from '@material-ui/core/Switch';
 
 const GreenSwitch = styled(Switch)(({ theme }) => ({
-  '& .MuiSwitch-input.Mui-checked': {
+  '& .MuiSwitch-switchBase.Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': {
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
     backgroundColor: green[600],
   },
 }));
@@ -21,7 +21,7 @@ export default function ColorSwitches() {
   return (
     <div>
       <Switch {...label} defaultChecked />
-      <Switch {...label} defaultChecked color="primary" />
+      <Switch {...label} defaultChecked color="secondary" />
       <Switch {...label} defaultChecked color="default" />
       <GreenSwitch {...label} defaultChecked />
     </div>

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -1278,6 +1278,13 @@ As the core components use emotion as a styled engine, the props used by emotion
   }
   ```
 
+- The switch color prop is now "primary" by default. To continue using the "secondary" color, you must explicitly indicate `secondary`. This brings the switch closer to the Material Design specification.
+
+  ```diff
+  -<Switch />
+  +<Switch color="secondary" />
+  ```
+
 ### Table
 
 - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.

diff --git a/packages/material-ui/src/Switch/Switch.d.ts b/packages/material-ui/src/Switch/Switch.d.ts
@@ -47,7 +47,7 @@ export interface SwitchProps
   };
   /**
    * 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', SwitchPropsColorOverrides>;
   /**

diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
@@ -205,7 +205,7 @@ const SwitchThumb = experimentalStyled(
 
 const Switch = React.forwardRef(function Switch(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiSwitch' });
-  const { className, color = 'secondary', edge = false, size = 'medium', sx, ...other } = props;
+  const { className, color = 'primary', edge = false, size = 'medium', sx, ...other } = props;
 
   const styleProps = {
     ...props,
@@ -259,7 +259,7 @@ Switch.propTypes /* remove-proptypes */ = {
   className: PropTypes.string,
   /**
    * 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']),