[docs] Revise Joy UI "Radio" page (#35893)

Signed-off-by: Devin Lane <devin.c.lane@gmail.com> Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>
mui · Mar 30, 2023 · 0687565 · 0687565
1 parent ae9b0e3
commit 0687565
Show file tree

Hide file tree

Showing 17 changed files with 274 additions and 73 deletions.
diff --git a/docs/data/joy/components/radio-button/RadioButtonsGroup.js b/docs/data/joy/components/radio-button/RadioButtonsGroup.js
@@ -16,12 +16,12 @@ export default function RadioButtonsGroup() {
           slotProps={{ input: { 'aria-describedby': 'female-helper-text' } }}
         />
         <FormHelperText id="female-helper-text">
-          A helper text for this radio.
+          Helper text for this radio.
         </FormHelperText>
         <Radio value="male" label="Male" />
         <Radio value="other" label="Other" />
       </RadioGroup>
-      <FormHelperText>This is a helper text.</FormHelperText>
+      <FormHelperText>This is helper text.</FormHelperText>
     </FormControl>
   );
 }
diff --git a/docs/data/joy/components/radio-button/RadioButtonsGroup.tsx b/docs/data/joy/components/radio-button/RadioButtonsGroup.tsx
@@ -16,12 +16,12 @@ export default function RadioButtonsGroup() {
           slotProps={{ input: { 'aria-describedby': 'female-helper-text' } }}
         />
         <FormHelperText id="female-helper-text">
-          A helper text for this radio.
+          Helper text for this radio.
         </FormHelperText>
         <Radio value="male" label="Male" />
         <Radio value="other" label="Other" />
       </RadioGroup>
-      <FormHelperText>This is a helper text.</FormHelperText>
+      <FormHelperText>This is helper text.</FormHelperText>
     </FormControl>
   );
 }
diff --git a/docs/data/joy/components/radio-button/RadioButtonsGroup.tsx.preview b/docs/data/joy/components/radio-button/RadioButtonsGroup.tsx.preview
@@ -7,10 +7,10 @@
       slotProps={{ input: { 'aria-describedby': 'female-helper-text' } }}
     />
     <FormHelperText id="female-helper-text">
-      A helper text for this radio.
+      Helper text for this radio.
     </FormHelperText>
     <Radio value="male" label="Male" />
     <Radio value="other" label="Other" />
   </RadioGroup>
-  <FormHelperText>This is a helper text.</FormHelperText>
+  <FormHelperText>This is helper text.</FormHelperText>
 </FormControl>
diff --git a/docs/data/joy/components/radio-button/RadioColors.js b/docs/data/joy/components/radio-button/RadioColors.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+
+export default function RadioColors() {
+  return (
+    <FormControl>
+      <FormLabel>Colors</FormLabel>
+      <RadioGroup defaultValue="medium" name="radio-buttons-group">
+        <Radio value="primary" label="Primary" color="primary" />
+        <Radio value="neutral" label="Neutral" color="neutral" />
+        <Radio value="danger" label="Danger" color="danger" />
+        <Radio value="info" label="Info" color="info" />
+        <Radio value="success" label="Success" color="success" />
+        <Radio value="warning" label="Warning" color="warning" />
+      </RadioGroup>
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/radio-button/RadioColors.tsx b/docs/data/joy/components/radio-button/RadioColors.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+
+export default function RadioColors() {
+  return (
+    <FormControl>
+      <FormLabel>Colors</FormLabel>
+      <RadioGroup defaultValue="medium" name="radio-buttons-group">
+        <Radio value="primary" label="Primary" color="primary" />
+        <Radio value="neutral" label="Neutral" color="neutral" />
+        <Radio value="danger" label="Danger" color="danger" />
+        <Radio value="info" label="Info" color="info" />
+        <Radio value="success" label="Success" color="success" />
+        <Radio value="warning" label="Warning" color="warning" />
+      </RadioGroup>
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/radio-button/RadioColors.tsx.preview b/docs/data/joy/components/radio-button/RadioColors.tsx.preview
@@ -0,0 +1,11 @@
+<FormControl>
+  <FormLabel>Colors</FormLabel>
+  <RadioGroup defaultValue="medium" name="radio-buttons-group">
+    <Radio value="primary" label="Primary" color="primary" />
+    <Radio value="neutral" label="Neutral" color="neutral" />
+    <Radio value="danger" label="Danger" color="danger" />
+    <Radio value="info" label="Info" color="info" />
+    <Radio value="success" label="Success" color="success" />
+    <Radio value="warning" label="Warning" color="warning" />
+  </RadioGroup>
+</FormControl>
diff --git a/docs/data/joy/components/radio-button/RadioSizes.js b/docs/data/joy/components/radio-button/RadioSizes.js
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+
+export default function RadioSizes() {
+  return (
+    <FormControl>
+      <FormLabel>Sizes</FormLabel>
+      <RadioGroup defaultValue="medium" name="radio-buttons-group">
+        <Radio value="small" label="Small" size="sm" />
+        <Radio value="medium" label="Medium" size="md" />
+        <Radio value="large" label="Large" size="lg" />
+      </RadioGroup>
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/radio-button/RadioSizes.tsx b/docs/data/joy/components/radio-button/RadioSizes.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+
+export default function RadioSizes() {
+  return (
+    <FormControl>
+      <FormLabel>Sizes</FormLabel>
+      <RadioGroup defaultValue="medium" name="radio-buttons-group">
+        <Radio value="small" label="Small" size="sm" />
+        <Radio value="medium" label="Medium" size="md" />
+        <Radio value="large" label="Large" size="lg" />
+      </RadioGroup>
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/radio-button/RadioSizes.tsx.preview b/docs/data/joy/components/radio-button/RadioSizes.tsx.preview
@@ -0,0 +1,8 @@
+<FormControl>
+  <FormLabel>Sizes</FormLabel>
+  <RadioGroup defaultValue="medium" name="radio-buttons-group">
+    <Radio value="small" label="Small" size="sm" />
+    <Radio value="medium" label="Medium" size="md" />
+    <Radio value="large" label="Large" size="lg" />
+  </RadioGroup>
+</FormControl>
diff --git a/docs/data/joy/components/radio-button/RadioVariants.js b/docs/data/joy/components/radio-button/RadioVariants.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+
+export default function RadioVariants() {
+  return (
+    <FormControl>
+      <FormLabel>Variants</FormLabel>
+      <RadioGroup defaultValue="outlined" name="radio-buttons-group">
+        <Radio value="outlined" label="Outlined" variant="outlined" />
+        <Radio value="soft" label="Soft" variant="soft" />
+        <Radio value="solid" label="Solid" variant="solid" />
+        <Radio value="plain" label="Plain" variant="plain" />
+      </RadioGroup>
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/radio-button/RadioVariants.tsx b/docs/data/joy/components/radio-button/RadioVariants.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+
+export default function RadioVariants() {
+  return (
+    <FormControl>
+      <FormLabel>Variants</FormLabel>
+      <RadioGroup defaultValue="outlined" name="radio-buttons-group">
+        <Radio value="outlined" label="Outlined" variant="outlined" />
+        <Radio value="soft" label="Soft" variant="soft" />
+        <Radio value="solid" label="Solid" variant="solid" />
+        <Radio value="plain" label="Plain" variant="plain" />
+      </RadioGroup>
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/radio-button/RadioVariants.tsx.preview b/docs/data/joy/components/radio-button/RadioVariants.tsx.preview
@@ -0,0 +1,9 @@
+<FormControl>
+  <FormLabel>Variants</FormLabel>
+  <RadioGroup defaultValue="outlined" name="radio-buttons-group">
+    <Radio value="outlined" label="Outlined" variant="outlined" />
+    <Radio value="soft" label="Soft" variant="soft" />
+    <Radio value="solid" label="Solid" variant="solid" />
+    <Radio value="plain" label="Plain" variant="plain" />
+  </RadioGroup>
+</FormControl>