[Radio] Make color primary default (#26180)

mui · May 11, 2021 · ceebedc · ceebedc
1 parent b5f12b0
commit ceebedc
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,7 +15,7 @@ describe('<Radio />', () => {
     render,
     mount,
     muiName: 'MuiRadio',
-    testVariantProps: { color: 'primary' },
+    testVariantProps: { color: 'secondary' },
     refInstanceof: window.HTMLSpanElement,
     skip: ['componentProp', 'componentsProp'],
   }));