From ceebedc786603b6dd1bc77184b6aff2ea038a5ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Casas?=
 <57921784+vicasas@users.noreply.github.com>
Date: Tue, 11 May 2021 13:33:43 -0400
Subject: [PATCH] [Radio] Make color primary default (#26180)

---
 docs/pages/api-docs/radio.json                           | 2 +-
 .../pages/components/radio-buttons/ColorRadioButtons.js  | 2 +-
 .../pages/components/radio-buttons/ColorRadioButtons.tsx | 2 +-
 docs/src/pages/components/radio-buttons/UseRadioGroup.js | 2 +-
 .../src/pages/components/radio-buttons/UseRadioGroup.tsx | 2 +-
 docs/src/pages/guides/migration-v4/migration-v4.md       | 9 +++++++++
 packages/material-ui/src/Radio/Radio.d.ts                | 2 +-
 packages/material-ui/src/Radio/Radio.js                  | 4 ++--
 packages/material-ui/src/Radio/Radio.test.js             | 2 +-
 9 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/docs/pages/api-docs/radio.json b/docs/pages/api-docs/radio.json
index b5ba01f8d41457..31cfac2490eeb0 100644
--- a/docs/pages/api-docs/radio.json
+++ b/docs/pages/api-docs/radio.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'"
     },
     "disabled": { "type": { "name": "bool" } },
     "disableRipple": { "type": { "name": "bool" } },
diff --git a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js
index 9a477caba12733..2f753c96e916eb 100644
--- a/docs/src/pages/components/radio-buttons/ColorRadioButtons.js
+++ b/docs/src/pages/components/radio-buttons/ColorRadioButtons.js
@@ -20,7 +20,7 @@ export default function ColorRadioButtons() {
   return (
     <div>
       <Radio {...controlProps('a')} />
-      <Radio {...controlProps('b')} color="primary" />
+      <Radio {...controlProps('b')} color="secondary" />
       <Radio {...controlProps('c')} color="default" />
       <Radio
         {...controlProps('d')}
diff --git a/docs/src/pages/components/radio-buttons/ColorRadioButtons.tsx b/docs/src/pages/components/radio-buttons/ColorRadioButtons.tsx
index 7b3de7672d48d0..facc2b479e852b 100644
--- a/docs/src/pages/components/radio-buttons/ColorRadioButtons.tsx
+++ b/docs/src/pages/components/radio-buttons/ColorRadioButtons.tsx
@@ -20,7 +20,7 @@ export default function ColorRadioButtons() {
   return (
     <div>
       <Radio {...controlProps('a')} />
-      <Radio {...controlProps('b')} color="primary" />
+      <Radio {...controlProps('b')} color="secondary" />
       <Radio {...controlProps('c')} color="default" />
       <Radio
         {...controlProps('d')}
diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.js b/docs/src/pages/components/radio-buttons/UseRadioGroup.js
index eb45a4e79c08c3..50f5f9db8761d1 100644
--- a/docs/src/pages/components/radio-buttons/UseRadioGroup.js
+++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.js
@@ -8,7 +8,7 @@ import Radio from '@material-ui/core/Radio';
 const StyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)(
   ({ theme, checked }) => ({
     '.MuiFormControlLabel-label': checked && {
-      color: theme.palette.secondary.main,
+      color: theme.palette.primary.main,
     },
   }),
 );
diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx b/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx
index daf80222671bc8..49326e1e819b64 100644
--- a/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx
+++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx
@@ -14,7 +14,7 @@ const StyledFormControlLabel = styled((props: StyledFormControlLabelProps) => (
   <FormControlLabel {...props} />
 ))(({ theme, checked }) => ({
   '.MuiFormControlLabel-label': checked && {
-    color: theme.palette.secondary.main,
+    color: theme.palette.primary.main,
   },
 }));
 
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index a46c17d608eeb2..ab9d168d8af118 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -1060,6 +1060,15 @@ As the core components use emotion as a styled engine, the props used by emotion
 - Remove `onRendered` prop.
   Depending on your use case either use a [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) on the child element or an effect hook in the child component.
 
+### Radio
+
+- The radio color prop is now "primary" by default. To continue using the "secondary" color, you must explicitly indicate `secondary`. This brings the radio closer to the Material Design specification.
+
+  ```diff
+  -<Radio />
+  +<Radio color="secondary />
+  ```
+
 ### Rating
 
 - Move the component from the lab to the core. The component is now stable.
diff --git a/packages/material-ui/src/Radio/Radio.d.ts b/packages/material-ui/src/Radio/Radio.d.ts
index 6f295c7894e718..673d9f5234ee83 100644
--- a/packages/material-ui/src/Radio/Radio.d.ts
+++ b/packages/material-ui/src/Radio/Radio.d.ts
@@ -31,7 +31,7 @@ export interface RadioProps
   };
   /**
    * 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', RadioPropsColorOverrides>;
   /**
diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index 044ce398c22570..33ff88717a4e1d 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -71,7 +71,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiRadio' });
   const {
     checked: checkedProp,
-    color = 'secondary',
+    color = 'primary',
     name: nameProp,
     onChange: onChangeProp,
     size = 'medium',
@@ -137,7 +137,7 @@ Radio.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']),
diff --git a/packages/material-ui/src/Radio/Radio.test.js b/packages/material-ui/src/Radio/Radio.test.js
index 225c6a57b288d4..1e88cd137d7852 100644
--- a/packages/material-ui/src/Radio/Radio.test.js
+++ b/packages/material-ui/src/Radio/Radio.test.js
@@ -15,7 +15,7 @@ describe('<Radio />', () => {
     render,
     mount,
     muiName: 'MuiRadio',
-    testVariantProps: { color: 'primary' },
+    testVariantProps: { color: 'secondary' },
     refInstanceof: window.HTMLSpanElement,
     skip: ['componentProp', 'componentsProp'],
   }));