feat(radio): add optional label (#273)

* feat(radio): add optional label * test(radio button): update data test id * test(radio): show failing data-testid * test(radio): fix props * test(inputradio): update snapshot * fix(inputradio): fix default story * fix(input radio): change decision to use old no label version
chanzuckerberg · Nov 10, 2022 · 2bb0f06 · 2bb0f06
1 parent 228ad54
commit 2bb0f06
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 112 deletions.
diff --git a/src/core/InputCheckbox/index.tsx b/src/core/InputCheckbox/index.tsx
@@ -24,7 +24,7 @@ export type CheckboxProps = CheckboxContentProps & CheckboxExtraProps;
 const InputCheckbox = (props: CheckboxProps): JSX.Element => {
   const { caption, checkboxProps, disabled, label, stage } = props;
 
-  if (label === undefined && stage !== undefined) {
+  if (label === undefined || stage !== undefined) {
     let newProps: MUICheckboxProps;
     switch (stage) {
       case "checked":

diff --git a/src/core/InputRadio/__snapshots__/index.test.tsx.snap b/src/core/InputRadio/__snapshots__/index.test.tsx.snap
@@ -2,18 +2,24 @@
 
 exports[`<InputRadio /> Test story renders snapshot 1`] = `
 <div>
-  <div>
+  <div
+    aria-labelledby="demo-input-radio-group-label"
+    class="MuiFormGroup-root css-dmmspl-MuiFormGroup-root"
+    data-testid="radioButtonGroup"
+    role="radiogroup"
+  >
     <label
       class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
     >
       <span
         class="MuiRadio-root MuiRadio-colorPrimary MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root Mui-checked css-b0a55y-MuiButtonBase-root-MuiRadio-root"
-        data-testid="InputRadio"
-        stage="checked"
+        data-testid="inputRadio"
+        label="Test Label"
       >
         <input
           checked=""
           class="PrivateSwitchBase-input css-1m9pwf3"
+          name="input-radio-group"
           type="radio"
           value="demo1"
         />
@@ -37,18 +43,17 @@ exports[`<InputRadio /> Test story renders snapshot 1`] = `
         Test Label
       </span>
     </label>
-  </div>
-  <div>
     <label
       class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
     >
       <span
-        class="MuiRadio-root MuiRadio-colorDefault MuiButtonBase-root MuiRadio-root MuiRadio-colorDefault PrivateSwitchBase-root css-1vqgfov-MuiButtonBase-root-MuiRadio-root"
-        data-testid="InputRadio"
-        stage="unchecked"
+        class="MuiRadio-root MuiRadio-colorPrimary MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root css-b0a55y-MuiButtonBase-root-MuiRadio-root"
+        data-testid="inputRadio"
+        label="Test Label"
       >
         <input
           class="PrivateSwitchBase-input css-1m9pwf3"
+          name="input-radio-group"
           type="radio"
           value="demo2"
         />
@@ -72,18 +77,17 @@ exports[`<InputRadio /> Test story renders snapshot 1`] = `
         Test Label
       </span>
     </label>
-  </div>
-  <div>
     <label
       class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
     >
       <span
-        class="MuiRadio-root MuiRadio-colorDefault MuiButtonBase-root MuiRadio-root MuiRadio-colorDefault PrivateSwitchBase-root css-1vqgfov-MuiButtonBase-root-MuiRadio-root"
-        data-testid="InputRadio"
-        stage="unchecked"
+        class="MuiRadio-root MuiRadio-colorPrimary MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root css-b0a55y-MuiButtonBase-root-MuiRadio-root"
+        data-testid="inputRadio"
+        label="Test Label"
       >
         <input
           class="PrivateSwitchBase-input css-1m9pwf3"
+          name="input-radio-group"
           type="radio"
           value="demo3"
         />

diff --git a/src/core/InputRadio/index.stories.tsx b/src/core/InputRadio/index.stories.tsx
@@ -1,22 +1,18 @@
-import { FormControlLabel, RadioGroup } from "@mui/material";
+import { RadioGroup } from "@mui/material";
 import { Args, Story } from "@storybook/react";
 import React from "react";
 import InputRadio from "./index";
 
 const DefaultDemo = (props: Args): JSX.Element => {
-  const { text } = props;
+  const { label } = props;
 
   return (
     <RadioGroup
       aria-labelledby="demo-radio-buttons-group-label"
       defaultValue="demo"
       name="radio-buttons-group"
     >
-      <FormControlLabel
-        control={<InputRadio stage="checked" {...props} />}
-        label={text}
-        value="demo"
-      />
+      <InputRadio label={label} value="demo" {...props} />
     </RadioGroup>
   );
 };
@@ -37,65 +33,24 @@ Default.parameters = {
 
 Default.args = {
   disabled: false,
-  text: "Label",
+  label: "Label",
 };
 
 const LivePreviewDemo = (props: Args): JSX.Element => {
-  const { text } = props;
-
-  const [checked, setChecked] = React.useState([true, false, false]);
-
-  const handleCheck1 = () => {
-    setChecked([true, false, false]);
-  };
-  const handleCheck2 = () => {
-    setChecked([false, true, false]);
-  };
-  const handleCheck3 = () => {
-    setChecked([false, false, true]);
-  };
+  const { label } = props;
 
   return (
     <div>
-      <div>
-        <FormControlLabel
-          control={
-            <InputRadio
-              onChange={handleCheck1}
-              stage={checked[0] ? "checked" : "unchecked"}
-              data-testid="InputRadio"
-            />
-          }
-          label={text}
-          value="demo1"
-        />
-      </div>
-      <div>
-        <FormControlLabel
-          control={
-            <InputRadio
-              stage={checked[1] ? "checked" : "unchecked"}
-              onChange={handleCheck2}
-              data-testid="InputRadio"
-            />
-          }
-          label={text}
-          value="demo2"
-        />
-      </div>
-      <div>
-        <FormControlLabel
-          control={
-            <InputRadio
-              stage={checked[2] ? "checked" : "unchecked"}
-              onChange={handleCheck3}
-              data-testid="InputRadio"
-            />
-          }
-          label={text}
-          value="demo3"
-        />
-      </div>
+      <RadioGroup
+        aria-labelledby="demo-input-radio-group-label"
+        defaultValue="demo1"
+        name="input-radio-group"
+        data-testid="radioButtonGroup"
+      >
+        <InputRadio data-testid="inputRadio" label={label} value="demo1" />
+        <InputRadio data-testid="inputRadio" label={label} value="demo2" />
+        <InputRadio data-testid="inputRadio" label={label} value="demo3" />
+      </RadioGroup>
     </div>
   );
 };
@@ -110,11 +65,11 @@ LivePreview.parameters = {
 };
 
 LivePreview.args = {
-  text: "Label",
+  label: "Label",
 };
 
 export const Test = LivePreviewTemplate.bind({});
 
 Test.args = {
-  text: "Test Label",
+  label: "Test Label",
 };
diff --git a/src/core/InputRadio/index.test.tsx b/src/core/InputRadio/index.test.tsx
@@ -13,7 +13,7 @@ describe("<InputRadio />", () => {
 
   it("renders 3 radio buttons", async () => {
     render(<Test {...Test.args} />);
-    const radio = screen.getAllByTestId("InputRadio");
+    const radio = screen.getAllByTestId("inputRadio");
     expect(radio).toHaveLength(3);
   });
 });
diff --git a/src/core/InputRadio/index.tsx b/src/core/InputRadio/index.tsx
@@ -1,56 +1,92 @@
-import { RadioProps as MUIRadioProps, SvgIcon } from "@mui/material";
+import {
+  FormControlLabel,
+  RadioProps as MUIRadioProps,
+  SvgIcon,
+} from "@mui/material";
 import React from "react";
 import { ReactComponent as IconRadioChecked } from "../../common/svgs/IconRadioChecked.svg";
 import { ReactComponent as IconRadioUnChecked } from "../../common/svgs/IconRadioUnchecked.svg";
 import { StyledRadioButton } from "./style";
 
 export interface RadioProps
   extends Omit<MUIRadioProps, "color" | "defaultChecked"> {
-  stage: "checked" | "unchecked";
+  label?: string;
+  radioProps?: Partial<MUIRadioProps>;
+  stage?: "checked" | "unchecked";
+  value?: string;
 }
 
 /**
  * @see https://v4.mui.com/components/radio-buttons/
  */
 const InputRadio = (props: RadioProps): JSX.Element => {
-  const { stage } = props;
-  let newProps: MUIRadioProps;
-  switch (stage) {
-    case "checked":
-      newProps = {
-        ...props,
-        checked: true,
-        color: "primary",
-      };
-      break;
-    case "unchecked":
-      newProps = {
-        ...props,
-        checked: false,
-        color: "default",
-      };
-      break;
-    default:
-      newProps = props;
+  const { label, stage, radioProps, value } = props;
+  if (label === undefined || stage !== undefined) {
+    let newProps: MUIRadioProps;
+    switch (stage) {
+      case "checked":
+        newProps = {
+          ...props,
+          checked: true,
+          color: "primary",
+        };
+        break;
+      case "unchecked":
+        newProps = {
+          ...props,
+          checked: false,
+          color: "default",
+        };
+        break;
+      default:
+        newProps = props;
+    }
+
+    return (
+      <StyledRadioButton
+        {...newProps}
+        checkedIcon={
+          <SvgIcon
+            fillcontrast="white"
+            component={IconRadioChecked}
+            viewBox="0 0 16 16"
+          />
+        }
+        icon={
+          <SvgIcon
+            fillcontrast="white"
+            component={IconRadioUnChecked}
+            viewBox="0 0 16 16"
+          />
+        }
+      />
+    );
   }
 
   return (
-    <StyledRadioButton
-      {...newProps}
-      checkedIcon={
-        <SvgIcon
-          fillcontrast="white"
-          component={IconRadioChecked}
-          viewBox="0 0 16 16"
-        />
-      }
-      icon={
-        <SvgIcon
-          fillcontrast="white"
-          component={IconRadioUnChecked}
-          viewBox="0 0 16 16"
+    <FormControlLabel
+      control={
+        <StyledRadioButton
+          {...props}
+          checkedIcon={
+            <SvgIcon
+              fillcontrast="white"
+              component={IconRadioChecked}
+              viewBox="0 0 16 16"
+            />
+          }
+          icon={
+            <SvgIcon
+              fillcontrast="white"
+              component={IconRadioUnChecked}
+              viewBox="0 0 16 16"
+            />
+          }
+          {...radioProps}
         />
       }
+      label={label}
+      value={value}
     />
   );
 };