From 1ff6e349acff93ef2517876910d181eeacf8d0f9 Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Fri, 7 May 2021 11:04:08 -0400
Subject: [PATCH 1/6] Make color primary the default

---
 docs/pages/api-docs/switch.json                      | 2 +-
 docs/src/pages/components/switches/ColorSwitches.tsx | 6 +++---
 docs/src/pages/guides/migration-v4/migration-v4.md   | 7 +++++++
 packages/material-ui/src/Switch/Switch.d.ts          | 2 +-
 packages/material-ui/src/Switch/Switch.js            | 4 ++--
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/docs/pages/api-docs/switch.json b/docs/pages/api-docs/switch.json
index 2c9f0422029c13..5aa06ebbc06972 100644
--- 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.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx
index dde29fd16f8747..2b516a878fad4b 100644
--- 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-root > .Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': {
+  '&.MuiSwitch-root > .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
index 158798cdfc1ba5..3825ac61e4b154 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -1272,6 +1272,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
index 99fb72bfdb132b..63fc13540ed7d8 100644
--- 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
index 6cfa60b0f3f6d5..ac5e262a4ce9d7 100644
--- 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']),

From ce267a5bf1e22278c0a218005cfcec09254315cc Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Fri, 7 May 2021 12:30:44 -0400
Subject: [PATCH 2/6] yarn docs:typescript:formatted

---
 docs/src/pages/components/switches/ColorSwitches.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/components/switches/ColorSwitches.js b/docs/src/pages/components/switches/ColorSwitches.js
index dde29fd16f8747..2b516a878fad4b 100644
--- 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-root > .Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '& .MuiSwitch-input.Mui-checked + .MuiSwitch-track': {
+  '&.MuiSwitch-root > .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>

From bf3badd4aea1d9a6b98a2c0815b68413b6355b93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Casas?=
 <57921784+vicasas@users.noreply.github.com>
Date: Fri, 7 May 2021 17:16:07 -0400
Subject: [PATCH 3/6] Update docs/src/pages/guides/migration-v4/migration-v4.md

Co-authored-by: Marija Najdova <mnajdova@gmail.com>
---
 docs/src/pages/guides/migration-v4/migration-v4.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 3825ac61e4b154..7174a3e3636486 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -1276,7 +1276,7 @@ As the core components use emotion as a styled engine, the props used by emotion
 
   ```diff
   - <Switch />
-  + <Switch color="secondary />
+  +<Switch color="secondary" />
   ```
 
 ### Table

From bea1ac8ff8a2f757dafcf7343a3915e2a8296881 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Casas?=
 <57921784+vicasas@users.noreply.github.com>
Date: Fri, 7 May 2021 17:16:30 -0400
Subject: [PATCH 4/6] Update docs/src/pages/guides/migration-v4/migration-v4.md

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 docs/src/pages/guides/migration-v4/migration-v4.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 7174a3e3636486..d7380c602ea36c 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -1275,7 +1275,7 @@ 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 />
   +<Switch color="secondary" />
   ```
 

From 8dc2512d28863ca0669ec02a4c6e64f2262952af Mon Sep 17 00:00:00 2001
From: Victor Casas <victor.casas@outlook.cl>
Date: Fri, 7 May 2021 18:35:13 -0400
Subject: [PATCH 5/6] fix color switch

---
 docs/src/pages/components/switches/ColorSwitches.js  | 4 ++--
 docs/src/pages/components/switches/ColorSwitches.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/components/switches/ColorSwitches.js b/docs/src/pages/components/switches/ColorSwitches.js
index 2b516a878fad4b..859488f299794c 100644
--- 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-root > .Mui-checked': {
+  '& > .MuiSwitch-switchBase.Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '&.MuiSwitch-root > .Mui-checked + .MuiSwitch-track': {
+  '& > .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
     backgroundColor: green[600],
   },
 }));
diff --git a/docs/src/pages/components/switches/ColorSwitches.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx
index 2b516a878fad4b..859488f299794c 100644
--- 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-root > .Mui-checked': {
+  '& > .MuiSwitch-switchBase.Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '&.MuiSwitch-root > .Mui-checked + .MuiSwitch-track': {
+  '& > .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
     backgroundColor: green[600],
   },
 }));

From 70e1166598bd2d6cd3156c2c7df2a3b2370618ce Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 8 May 2021 15:40:21 +0200
Subject: [PATCH 6/6] match the customization demos

---
 docs/src/pages/components/switches/ColorSwitches.js  | 4 ++--
 docs/src/pages/components/switches/ColorSwitches.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/pages/components/switches/ColorSwitches.js b/docs/src/pages/components/switches/ColorSwitches.js
index 859488f299794c..db07e1a948709c 100644
--- 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-switchBase.Mui-checked': {
+  '& .MuiSwitch-switchBase.Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '& > .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
     backgroundColor: green[600],
   },
 }));
diff --git a/docs/src/pages/components/switches/ColorSwitches.tsx b/docs/src/pages/components/switches/ColorSwitches.tsx
index 859488f299794c..db07e1a948709c 100644
--- 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-switchBase.Mui-checked': {
+  '& .MuiSwitch-switchBase.Mui-checked': {
     color: green[600],
     '&:hover': {
       backgroundColor: alpha(green[600], theme.palette.action.hoverOpacity),
     },
   },
-  '& > .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
     backgroundColor: green[600],
   },
 }));