[Radio][Joy] support componentsProps as a function (#34022)

mui · Aug 25, 2022 · df89184 · df89184
1 parent 64e5dc1
commit df89184
Show file tree

Hide file tree

Showing 9 changed files with 238 additions and 129 deletions.
diff --git a/docs/data/joy/components/radio/ExampleAlignmentButtons.js b/docs/data/joy/components/radio/ExampleAlignmentButtons.js
@@ -56,10 +56,10 @@ export default function RadioButtonsGroup() {
             variant={alignment === item ? 'solid' : 'plain'}
             componentsProps={{
               input: { 'aria-label': item },
-            }}
-            sx={{
-              [`& .${radioClasses.action}`]: { borderRadius: 0, transition: 'none' },
-              [`& .${radioClasses.label}`]: { lineHeight: 0 },
+              action: {
+                sx: { borderRadius: 0, transition: 'none' },
+              },
+              label: { sx: { lineHeight: 0 } },
             }}
           />
         </Box>

diff --git a/docs/data/joy/components/radio/ExampleProductAttributes.js b/docs/data/joy/components/radio/ExampleProductAttributes.js
@@ -48,15 +48,19 @@ export default function ExampleProductAttributes() {
                 color={color}
                 checkedIcon={<Done fontSize="xl2" />}
                 value={color}
-                componentsProps={{ input: { 'aria-label': color } }}
+                componentsProps={{
+                  input: { 'aria-label': color },
+                  radio: {
+                    sx: {
+                      display: 'contents',
+                      '--variant-borderWidth': '2px',
+                    },
+                  },
+                }}
                 sx={{
                   '--joy-focus-outlineOffset': '4px',
                   '--joy-palette-focusVisible': (theme) =>
                     theme.vars.palette[color][500],
-                  [`& .${radioClasses.radio}`]: {
-                    display: 'contents',
-                    '--variant-borderWidth': '2px',
-                  },
                   [`& .${radioClasses.action}.${radioClasses.focusVisible}`]: {
                     outlineWidth: '2px',
                   },

diff --git a/docs/data/joy/components/radio/ExampleSegmentedControls.js b/docs/data/joy/components/radio/ExampleSegmentedControls.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Typography from '@mui/joy/Typography';
+
+export default function RadioButtonsGroup() {
+  const [justify, setJustify] = React.useState('flex-start');
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+      <Typography id="segmented-controls-example" fontWeight="lg" fontSize="sm">
+        Justify:
+      </Typography>
+      <RadioGroup
+        row
+        aria-labelledby="segmented-controls-example"
+        name="justify"
+        value={justify}
+        onChange={(event) => setJustify(event.target.value)}
+        sx={{
+          minHeight: 48,
+          padding: '4px',
+          borderRadius: 'md',
+          bgcolor: 'neutral.softBg',
+          '--RadioGroup-gap': '4px',
+          '--Radio-action-radius': '8px',
+        }}
+      >
+        {['flex-start', 'center', 'flex-end'].map((item) => (
+          <Radio
+            color="neutral"
+            value={item}
+            disableIcon
+            label={item}
+            variant="plain"
+            sx={{
+              px: 2,
+              alignItems: 'center',
+            }}
+            componentsProps={{
+              action: ({ checked }) => ({
+                sx: {
+                  ...(checked && {
+                    bgcolor: 'background.surface',
+                    boxShadow: 'md',
+                    '&:hover': {
+                      bgcolor: 'background.surface',
+                    },
+                  }),
+                },
+              }),
+            }}
+          />
+        ))}
+      </RadioGroup>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/radio/IconlessRadio.js b/docs/data/joy/components/radio/IconlessRadio.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
 import FormLabel from '@mui/joy/FormLabel';
-import Radio, { radioClasses } from '@mui/joy/Radio';
+import Radio from '@mui/joy/Radio';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Sheet from '@mui/joy/Sheet';
 
@@ -33,23 +33,26 @@ export default function IconlessRadio() {
               overlay
               disableIcon
               value={value}
-              sx={(theme) => ({
-                '& label': {
-                  fontWeight: 'lg',
-                  fontSize: 'md',
-                  color: 'text.secondary',
-                },
-                [`&.${radioClasses.checked}`]: {
-                  '& label': { color: 'text.primary' },
-                  '--joy-palette-primary-outlinedBorder':
-                    theme.vars.palette.primary[500],
-                  '--joy-palette-primary-outlinedHoverBorder':
-                    theme.vars.palette.primary[500],
-                  [`& .${radioClasses.action}`]: {
-                    '--variant-borderWidth': '2px',
+              componentsProps={{
+                label: ({ checked }) => ({
+                  sx: {
+                    fontWeight: 'lg',
+                    fontSize: 'md',
+                    color: checked ? 'text.primary' : 'text.secondary',
                   },
-                },
-              })}
+                }),
+                action: ({ checked }) => ({
+                  sx: (theme) => ({
+                    ...(checked && {
+                      '--variant-borderWidth': '2px',
+                      '&&': {
+                        // && to increase the specificity to win the base :hover styles
+                        borderColor: theme.vars.palette.primary[500],
+                      },
+                    }),
+                  }),
+                }),
+              }}
             />
           </Sheet>
         ))}

diff --git a/docs/data/joy/components/radio/RadioPositionEnd.js b/docs/data/joy/components/radio/RadioPositionEnd.js
@@ -2,53 +2,48 @@ import * as React from 'react';
 import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
-import Radio, { radioClasses } from '@mui/joy/Radio';
+import Radio from '@mui/joy/Radio';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Person from '@mui/icons-material/Person';
 import People from '@mui/icons-material/People';
 import Apartment from '@mui/icons-material/Apartment';
 
 export default function RadioPositionEnd() {
   return (
-    <RadioGroup name="people" overlay defaultValue="person">
+    <RadioGroup name="people" defaultValue="Individual">
       <List
-        sx={(theme) => ({
+        sx={{
           minWidth: 240,
           '--List-gap': '0.5rem',
           '--List-item-paddingY': '1rem',
           '--List-item-radius': '8px',
           '--List-decorator-size': '32px',
-          [`& .${radioClasses.root}`]: {
-            flexGrow: 1,
-            flexDirection: 'row-reverse',
-            [`&.${radioClasses.checked}`]: {
-              [`& .${radioClasses.action}`]: {
-                inset: -1,
-                border: '2px solid',
-                borderColor: theme.vars.palette.primary[500],
-              },
-            },
-          },
-        })}
+        }}
       >
-        <ListItem variant="outlined">
-          <ListItemDecorator>
-            <Person />
-          </ListItemDecorator>
-          <Radio value="person" label="Individual" />
-        </ListItem>
-        <ListItem variant="outlined">
-          <ListItemDecorator>
-            <People />
-          </ListItemDecorator>
-          <Radio value="team" label="Team" />
-        </ListItem>
-        <ListItem variant="outlined">
-          <ListItemDecorator>
-            <Apartment />
-          </ListItemDecorator>
-          <Radio value="interprise" label="Interprise" />
-        </ListItem>
+        {['Individual', 'Team', 'Interprise'].map((item, index) => (
+          <ListItem variant="outlined" key={item}>
+            <ListItemDecorator>
+              {[<Person />, <People />, <Apartment />][index]}
+            </ListItemDecorator>
+            <Radio
+              overlay
+              value={item}
+              label={item}
+              sx={{ flexGrow: 1, flexDirection: 'row-reverse' }}
+              componentsProps={{
+                action: ({ checked }) => ({
+                  sx: (theme) => ({
+                    ...(checked && {
+                      inset: -1,
+                      border: '2px solid',
+                      borderColor: theme.vars.palette.primary[500],
+                    }),
+                  }),
+                }),
+              }}
+            />
+          </ListItem>
+        ))}
       </List>
     </RadioGroup>
   );

diff --git a/docs/data/joy/components/radio/radio.md b/docs/data/joy/components/radio/radio.md
@@ -117,9 +117,13 @@ Visit the [WAI-ARIA documentation](https://www.w3.org/WAI/ARIA/apg/patterns/radi
 
 ## Common examples
 
+### Segmented controls
+
+{{"demo": "ExampleSegmentedControls.js"}}
+
 ### Alignment buttons
 
-Simply provide an icon as a label to the `Radio` to make the radio buttons concise. You need to provide `aria-label` to the input slot for users who rely on screen readers.
+Provide an icon as a label to the `Radio` to make the radio buttons concise. You need to provide `aria-label` to the input slot for users who rely on screen readers.
 
 {{"demo": "ExampleAlignmentButtons.js"}}