Skip to content

Commit

Permalink
[material-ui][Radio] Convert to support CSS extraction (#41840)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lhilgert9
lhilgert9 authored Apr 18, 2024
1 parent 279d060 commit deefd76
Show file tree
Hide file tree
Showing 4 changed files with 226 additions and 38 deletions.
79 changes: 79 additions & 0 deletions apps/pigment-css-next-app/src/app/material-ui/react-radio-button/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
80 changes: 80 additions & 0 deletions apps/pigment-css-vite-app/src/pages/material-ui/react-radio-button.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}
79 changes: 51 additions & 28 deletions packages/mui-material/src/Radio/Radio.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -40,36 +42,57 @@ 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: { 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.entries(theme.palette)
.filter(([, palette]) => palette.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.entries(theme.palette)
.filter(([, palette]) => palette.main)
.map(([color]) => ({
props: { color },
style: {
[`&.${radioClasses.checked}`]: {
color: (theme.vars || theme).palette[color].main,
},
},
})),
{
// 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',
},
},
},
},
],
}));

function areEqualValues(a, b) {
Expand Down
26 changes: 16 additions & 10 deletions packages/mui-material/src/Radio/RadioButtonIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -15,21 +16,26 @@ 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)',
transition: theme.transitions.create('transform', {
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,
}),
},
},
],
}));

/**
Expand All @@ -52,7 +58,7 @@ function RadioButtonIcon(props) {
);
}

RadioButtonIcon.propTypes = {
RadioButtonIcon.propTypes /* remove-proptypes */ = {
/**
* If `true`, the component is checked.
*/
Expand Down

0 comments on commit deefd76

Please sign in to comment.