From dfaa370326139910761cbba1c254600813b28e4d Mon Sep 17 00:00:00 2001
From: Lucas Hilgert <lhilgert@gmx.net>
Date: Wed, 10 Apr 2024 18:24:29 +0200
Subject: [PATCH 1/2] change components to use css extraction

---
 .../material-ui/react-radio-button/page.tsx   | 79 +++++++++++++++++
 .../pages/material-ui/react-radio-button.tsx  | 80 ++++++++++++++++++
 packages/mui-material/src/Radio/Radio.js      | 84 ++++++++++++-------
 .../mui-material/src/Radio/RadioButtonIcon.js | 26 +++---
 4 files changed, 231 insertions(+), 38 deletions(-)
 create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-radio-button/page.tsx
 create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-radio-button.tsx

diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-radio-button/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-radio-button/page.tsx
new file mode 100644
index 00000000000000..dda8ef7fe821b6
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-radio-button/page.tsx
@@ -0,0 +1,79 @@
+'use client';
+import * as React from 'react';
+import ColorRadioButtons from '../../../../../../docs/data/material/components/radio-buttons/ColorRadioButtons';
+import ControlledRadioButtonsGroup from '../../../../../../docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup';
+import CustomizedRadios from '../../../../../../docs/data/material/components/radio-buttons/CustomizedRadios';
+import ErrorRadios from '../../../../../../docs/data/material/components/radio-buttons/ErrorRadios';
+import FormControlLabelPlacement from '../../../../../../docs/data/material/components/radio-buttons/FormControlLabelPlacement';
+import RadioButtonsComponent from '../../../../../../docs/data/material/components/radio-buttons/RadioButtons';
+import RadioButtonsGroup from '../../../../../../docs/data/material/components/radio-buttons/RadioButtonsGroup';
+import RowRadioButtonsGroup from '../../../../../../docs/data/material/components/radio-buttons/RowRadioButtonsGroup';
+import SizeRadioButtons from '../../../../../../docs/data/material/components/radio-buttons/SizeRadioButtons';
+import UseRadioGroup from '../../../../../../docs/data/material/components/radio-buttons/UseRadioGroup';
+
+export default function RadioButtons() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Color Radio Buttons</h2>
+        <div className="demo-container">
+          <ColorRadioButtons />
+        </div>
+      </section>
+      <section>
+        <h2> Controlled Radio Buttons Group</h2>
+        <div className="demo-container">
+          <ControlledRadioButtonsGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Radios</h2>
+        <div className="demo-container">
+          <CustomizedRadios />
+        </div>
+      </section>
+      <section>
+        <h2> Error Radios</h2>
+        <div className="demo-container">
+          <ErrorRadios />
+        </div>
+      </section>
+      <section>
+        <h2> Form Control Label Placement</h2>
+        <div className="demo-container">
+          <FormControlLabelPlacement />
+        </div>
+      </section>
+      <section>
+        <h2> Radio Buttons</h2>
+        <div className="demo-container">
+          <RadioButtonsComponent />
+        </div>
+      </section>
+      <section>
+        <h2> Radio Buttons Group</h2>
+        <div className="demo-container">
+          <RadioButtonsGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Row Radio Buttons Group</h2>
+        <div className="demo-container">
+          <RowRadioButtonsGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Size Radio Buttons</h2>
+        <div className="demo-container">
+          <SizeRadioButtons />
+        </div>
+      </section>
+      <section>
+        <h2> Use Radio Group</h2>
+        <div className="demo-container">
+          <UseRadioGroup />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-radio-button.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-radio-button.tsx
new file mode 100644
index 00000000000000..138e0386c4446c
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-radio-button.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import ColorRadioButtons from '../../../../../docs/data/material/components/radio-buttons/ColorRadioButtons.tsx';
+import ControlledRadioButtonsGroup from '../../../../../docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx';
+import CustomizedRadios from '../../../../../docs/data/material/components/radio-buttons/CustomizedRadios.tsx';
+import ErrorRadios from '../../../../../docs/data/material/components/radio-buttons/ErrorRadios.tsx';
+import FormControlLabelPlacement from '../../../../../docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx';
+import RadioButtonsComponent from '../../../../../docs/data/material/components/radio-buttons/RadioButtons.tsx';
+import RadioButtonsGroup from '../../../../../docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx';
+import RowRadioButtonsGroup from '../../../../../docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx';
+import SizeRadioButtons from '../../../../../docs/data/material/components/radio-buttons/SizeRadioButtons.tsx';
+import UseRadioGroup from '../../../../../docs/data/material/components/radio-buttons/UseRadioGroup.tsx';
+
+export default function RadioButtons() {
+  return (
+    <MaterialUILayout>
+      <h1>RadioButtons</h1>
+      <section>
+        <h2> Color Radio Buttons</h2>
+        <div className="demo-container">
+          <ColorRadioButtons />
+        </div>
+      </section>
+      <section>
+        <h2> Controlled Radio Buttons Group</h2>
+        <div className="demo-container">
+          <ControlledRadioButtonsGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Radios</h2>
+        <div className="demo-container">
+          <CustomizedRadios />
+        </div>
+      </section>
+      <section>
+        <h2> Error Radios</h2>
+        <div className="demo-container">
+          <ErrorRadios />
+        </div>
+      </section>
+      <section>
+        <h2> Form Control Label Placement</h2>
+        <div className="demo-container">
+          <FormControlLabelPlacement />
+        </div>
+      </section>
+      <section>
+        <h2> Radio Buttons</h2>
+        <div className="demo-container">
+          <RadioButtonsComponent />
+        </div>
+      </section>
+      <section>
+        <h2> Radio Buttons Group</h2>
+        <div className="demo-container">
+          <RadioButtonsGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Row Radio Buttons Group</h2>
+        <div className="demo-container">
+          <RowRadioButtonsGroup />
+        </div>
+      </section>
+      <section>
+        <h2> Size Radio Buttons</h2>
+        <div className="demo-container">
+          <SizeRadioButtons />
+        </div>
+      </section>
+      <section>
+        <h2> Use Radio Group</h2>
+        <div className="demo-container">
+          <UseRadioGroup />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
index 71025ca11975d4..d1efbd66adb3c0 100644
--- a/packages/mui-material/src/Radio/Radio.js
+++ b/packages/mui-material/src/Radio/Radio.js
@@ -6,13 +6,15 @@ import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import SwitchBase from '../internal/SwitchBase';
-import useThemeProps from '../styles/useThemeProps';
 import RadioButtonIcon from './RadioButtonIcon';
 import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
 import useRadioGroup from '../RadioGroup/useRadioGroup';
 import radioClasses, { getRadioUtilityClass } from './radioClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { rootShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+
+const useThemeProps = createUseThemeProps('MuiRadio');
 
 const useUtilityClasses = (ownerState) => {
   const { classes, color, size } = ownerState;
@@ -40,36 +42,62 @@ const RadioRoot = styled(SwitchBase, {
       styles[`color${capitalize(ownerState.color)}`],
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   color: (theme.vars || theme).palette.text.secondary,
-  ...(!ownerState.disableRipple && {
-    '&:hover': {
-      backgroundColor: theme.vars
-        ? `rgba(${
-            ownerState.color === 'default'
-              ? theme.vars.palette.action.activeChannel
-              : theme.vars.palette[ownerState.color].mainChannel
-          } / ${theme.vars.palette.action.hoverOpacity})`
-        : alpha(
-            ownerState.color === 'default'
-              ? theme.palette.action.active
-              : theme.palette[ownerState.color].main,
-            theme.palette.action.hoverOpacity,
-          ),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    },
-  }),
-  ...(ownerState.color !== 'default' && {
-    [`&.${radioClasses.checked}`]: {
-      color: (theme.vars || theme).palette[ownerState.color].main,
-    },
-  }),
   [`&.${radioClasses.disabled}`]: {
     color: (theme.vars || theme).palette.action.disabled,
   },
+  variants: [
+    {
+      props: { disableRipple: false },
+      style: {
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+    {
+      props: { color: 'default', disableRipple: false },
+      style: {
+        '&:hover': {
+          backgroundColor: theme.vars
+            ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
+            : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        },
+      },
+    },
+    ...Object.keys((theme.vars || theme).palette)
+      .filter((key) =>
+        theme.vars
+          ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
+          : theme.palette[key].main,
+      )
+      .map((color) => ({
+        props: { color, disableRipple: false },
+        style: {
+          '&:hover': {
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
+              : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+          },
+        },
+      })),
+    ...Object.keys((theme.vars || theme).palette)
+      .filter((key) =>
+        theme.vars
+          ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
+          : theme.palette[key].main,
+      )
+      .map((color) => ({
+        props: { color },
+        style: {
+          [`&.${radioClasses.checked}`]: {
+            color: (theme.vars || theme).palette[color].main,
+          },
+        },
+      })),
+  ],
 }));
 
 function areEqualValues(a, b) {
diff --git a/packages/mui-material/src/Radio/RadioButtonIcon.js b/packages/mui-material/src/Radio/RadioButtonIcon.js
index d38eba60cff2ee..817981d374f4de 100644
--- a/packages/mui-material/src/Radio/RadioButtonIcon.js
+++ b/packages/mui-material/src/Radio/RadioButtonIcon.js
@@ -3,7 +3,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
 
 const RadioButtonIconRoot = styled('span', { shouldForwardProp: rootShouldForwardProp })({
   position: 'relative',
@@ -15,7 +16,7 @@ const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
   transform: 'scale(1)',
 });
 
-const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({ theme, ownerState }) => ({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({ theme }) => ({
   left: 0,
   position: 'absolute',
   transform: 'scale(0)',
@@ -23,13 +24,18 @@ const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({ theme, ownerState }
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.shortest,
   }),
-  ...(ownerState.checked && {
-    transform: 'scale(1)',
-    transition: theme.transitions.create('transform', {
-      easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.shortest,
-    }),
-  }),
+  variants: [
+    {
+      props: { checked: true },
+      style: {
+        transform: 'scale(1)',
+        transition: theme.transitions.create('transform', {
+          easing: theme.transitions.easing.easeOut,
+          duration: theme.transitions.duration.shortest,
+        }),
+      },
+    },
+  ],
 }));
 
 /**
@@ -52,7 +58,7 @@ function RadioButtonIcon(props) {
   );
 }
 
-RadioButtonIcon.propTypes = {
+RadioButtonIcon.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the component is checked.
    */

From e456a0f55adfdccaf0dee9e067a7138c6f3aefb2 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 18 Apr 2024 12:23:28 +0700
Subject: [PATCH 2/2] fix: move hover none override to last

---
 packages/mui-material/src/Radio/Radio.js | 41 +++++++++++-------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
index d1efbd66adb3c0..04e8e6d2cfacb5 100644
--- a/packages/mui-material/src/Radio/Radio.js
+++ b/packages/mui-material/src/Radio/Radio.js
@@ -48,15 +48,6 @@ const RadioRoot = styled(SwitchBase, {
     color: (theme.vars || theme).palette.action.disabled,
   },
   variants: [
-    {
-      props: { disableRipple: false },
-      style: {
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent',
-        },
-      },
-    },
     {
       props: { color: 'default', disableRipple: false },
       style: {
@@ -67,13 +58,9 @@ const RadioRoot = styled(SwitchBase, {
         },
       },
     },
-    ...Object.keys((theme.vars || theme).palette)
-      .filter((key) =>
-        theme.vars
-          ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
-          : theme.palette[key].main,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette.main)
+      .map(([color]) => ({
         props: { color, disableRipple: false },
         style: {
           '&:hover': {
@@ -83,13 +70,9 @@ const RadioRoot = styled(SwitchBase, {
           },
         },
       })),
-    ...Object.keys((theme.vars || theme).palette)
-      .filter((key) =>
-        theme.vars
-          ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
-          : theme.palette[key].main,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           [`&.${radioClasses.checked}`]: {
@@ -97,6 +80,18 @@ const RadioRoot = styled(SwitchBase, {
           },
         },
       })),
+    {
+      // Should be last to override other colors
+      props: { disableRipple: false },
+      style: {
+        // Reset on touch devices, it doesn't add specificity
+        '&:hover': {
+          '@media (hover: none)': {
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+    },
   ],
 }));