Merge pull request #1695 from dxc-technology/gomezivann/radio-group

Rename `readonly` prop to `readOnly` in Radio Group
dxc-technology · Oct 2, 2023 · 5a1e592 · 5a1e592
2 parents 752ca0a + b58f386
commit 5a1e592
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 41 deletions.
diff --git a/lib/src/common/variables.ts b/lib/src/common/variables.ts
@@ -623,9 +623,9 @@ export const componentTokens = {
     errorRadioInputColor: CORE_TOKENS.color_red_700,
     hoverErrorRadioInputColor: CORE_TOKENS.color_red_800,
     activeErrorRadioInputColor: CORE_TOKENS.color_red_900,
-    readonlyRadioInputColor: CORE_TOKENS.color_grey_500,
-    hoverReadonlyRadioInputColor: CORE_TOKENS.color_grey_600,
-    activeReadonlyRadioInputColor: CORE_TOKENS.color_grey_700,
+    readOnlyRadioInputColor: CORE_TOKENS.color_grey_500,
+    hoverReadOnlyRadioInputColor: CORE_TOKENS.color_grey_600,
+    activeReadOnlyRadioInputColor: CORE_TOKENS.color_grey_700,
     disabledRadioInputColor: CORE_TOKENS.color_grey_500,
     disabledLabelFontColor: CORE_TOKENS.color_grey_500,
     disabledHelperTextFontColor: CORE_TOKENS.color_grey_500,

diff --git a/lib/src/radio-group/Radio.tsx b/lib/src/radio-group/Radio.tsx
@@ -13,7 +13,7 @@ const DxcRadio = ({
   error,
   disabled,
   focused,
-  readonly,
+  readOnly,
   tabIndex,
 }: RadioProps): JSX.Element => {
   const [radioLabelId] = useState(`radio-${uuidv4()}`);
@@ -41,22 +41,22 @@ const DxcRadio = ({
         <RadioContainer
           error={error}
           disabled={disabled}
-          readonly={readonly}
+          readOnly={readOnly}
           onClick={disabled ? undefined : handleOnClick}
         >
           <RadioInputContainer>
             <RadioInput
               error={error}
               disabled={disabled}
-              readonly={readonly}
+              readOnly={readOnly}
               role="radio"
               aria-checked={checked}
               aria-disabled={disabled}
               aria-labelledby={radioLabelId}
               tabIndex={disabled ? -1 : focused ? tabIndex : -1}
               ref={ref}
             >
-              {checked && <Dot disabled={disabled} readonly={readonly} error={error} />}
+              {checked && <Dot disabled={disabled} readOnly={readOnly} error={error} />}
             </RadioInput>
           </RadioInputContainer>
           <Label id={radioLabelId} disabled={disabled}>
@@ -71,7 +71,7 @@ const DxcRadio = ({
 type CommonStylingProps = {
   error: RadioProps["error"];
   disabled: RadioProps["disabled"];
-  readonly: RadioProps["readonly"];
+  readOnly: RadioProps["readOnly"];
 };
 const getRadioInputStateColor = (
   props: CommonStylingProps & { theme: AdvancedTheme["radioGroup"] },
@@ -83,20 +83,20 @@ const getRadioInputStateColor = (
         ? props.theme.disabledRadioInputColor
         : props.error
         ? props.theme.errorRadioInputColor
-        : props.readonly
-        ? props.theme.readonlyRadioInputColor
+        : props.readOnly
+        ? props.theme.readOnlyRadioInputColor
         : props.theme.radioInputColor;
     case "hover":
       return props.error
         ? props.theme.hoverErrorRadioInputColor
-        : props.readonly
-        ? props.theme.hoverReadonlyRadioInputColor
+        : props.readOnly
+        ? props.theme.hoverReadOnlyRadioInputColor
         : props.theme.hoverRadioInputColor;
     case "active":
       return props.error
         ? props.theme.activeErrorRadioInputColor
-        : props.readonly
-        ? props.theme.activeReadonlyRadioInputColor
+        : props.readOnly
+        ? props.theme.activeReadOnlyRadioInputColor
         : props.theme.activeRadioInputColor;
   }
 };
@@ -149,7 +149,7 @@ const Label = styled.span<{ disabled: RadioProps["disabled"] }>`
 const RadioContainer = styled.span<CommonStylingProps>`
   display: inline-flex;
   align-items: center;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : props.readonly ? "default" : "pointer")};
+  cursor: ${(props) => (props.disabled ? "not-allowed" : props.readOnly ? "default" : "pointer")};
 
   &:hover {
     ${RadioInput} {

diff --git a/lib/src/radio-group/RadioGroup.stories.tsx b/lib/src/radio-group/RadioGroup.stories.tsx
@@ -53,15 +53,15 @@ export const Chromatic = () => (
     <Title title="Readonly radio input sub-states" theme="light" level={3} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
-      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readonly />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readOnly />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readonly />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readOnly />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active" theme="light" level={4} />
-      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readonly />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readOnly />
     </ExampleContainer>
     <Title title="Error radio input sub-states" theme="light" level={3} />
     <ExampleContainer>
@@ -81,7 +81,7 @@ export const Chromatic = () => (
         helperText="Helper text"
         options={single_option}
         defaultValue="A"
-        readonly
+        readOnly
         error="Error message"
       />
     </ExampleContainer>
@@ -92,7 +92,7 @@ export const Chromatic = () => (
         helperText="Helper text"
         options={single_option}
         defaultValue="A"
-        readonly
+        readOnly
         error="Error message"
       />
     </ExampleContainer>
@@ -115,7 +115,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Readonly" theme="light" level={4} />
-      <DxcRadioGroup label="Label" readonly helperText="Helper text" options={options} />
+      <DxcRadioGroup label="Label" readOnly helperText="Helper text" options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Error space reserved" theme="light" level={4} />
@@ -159,25 +159,25 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Readonly enabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readOnly />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Readonly hovered" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readOnly />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Readonly active" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readOnly />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Readonly focused" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readOnly />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer>

diff --git a/lib/src/radio-group/RadioGroup.test.js b/lib/src/radio-group/RadioGroup.test.js
@@ -451,7 +451,7 @@ describe("Radio Group component tests", () => {
     expect(submitInput.value).toBe("8");
   });
 
-  test("Readonly radio group lets the user move the focus, but neither click nor keyboard press changes the value", () => {
+  test("Read-only radio group lets the user move the focus, but neither click nor keyboard press changes the value", () => {
     const onChange = jest.fn();
     const { getByRole, getAllByRole, container } = render(
       <DxcRadioGroup
@@ -460,7 +460,7 @@ describe("Radio Group component tests", () => {
         helperText="test-radio-group-helper-text"
         options={options}
         onChange={onChange}
-        readonly
+        readOnly
       />
     );
     const radioGroup = getByRole("radiogroup");
@@ -479,4 +479,21 @@ describe("Radio Group component tests", () => {
     expect(radios[4].tabIndex).toBe(0);
     expect(submitInput.value).toBe("");
   });
+
+  test("Read-only radio group sends its value on submit", () => {
+    const handlerOnSubmit = jest.fn((e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({ radiogroup: "data" });
+    });
+    const { getByText } = render(
+      <form onSubmit={handlerOnSubmit}>
+        <DxcRadioGroup name="radiogroup" label="test-radio-group-label" value="data" options={options} readOnly />
+        <button type="submit">Submit</button>
+      </form>
+    );
+    const submit = getByText("Submit");
+    userEvent.click(submit);
+  });
 });
diff --git a/lib/src/radio-group/RadioGroup.tsx b/lib/src/radio-group/RadioGroup.tsx
@@ -21,7 +21,7 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
       disabled = false,
       optional = false,
       optionalItemLabel,
-      readonly = false,
+      readOnly = false,
       stacking = "column",
       defaultValue,
       value,
@@ -62,7 +62,7 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
     const handleOnChange = useCallback(
       (newValue: string) => {
         const currentValue = value ?? innerValue;
-        if (newValue !== currentValue && !readonly) {
+        if (newValue !== currentValue && !readOnly) {
           value ?? setInnerValue(newValue);
           onChange?.(newValue);
         }
@@ -146,8 +146,8 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
             aria-labelledby={radioGroupLabelId}
             aria-invalid={error ? true : false}
             aria-errormessage={error ? errorId : undefined}
-            aria-required={!disabled && !readonly && !optional}
-            aria-readonly={readonly}
+            aria-required={!disabled && !readOnly && !optional}
+            aria-readOnly={readOnly}
             aria-orientation={stacking === "column" ? "vertical" : "horizontal"}
           >
             <ValueInput name={name} disabled={disabled} value={value ?? innerValue ?? ""} readOnly />
@@ -163,7 +163,7 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
                 error={error}
                 disabled={option.disabled || disabled}
                 focused={currentFocusIndex === index}
-                readonly={readonly}
+                readOnly={readOnly}
                 tabIndex={tabIndex}
               />
             ))}

diff --git a/lib/src/radio-group/types.ts b/lib/src/radio-group/types.ts
@@ -50,9 +50,9 @@ type RadioGroupProps = {
    */
   optionalItemLabel?: string;
   /**
-   * If true, the component will be marked as readonly.
+   * If true, the component will not be mutable, meaning the user can not edit the control.
    */
-  readonly?: boolean;
+  readOnly?: boolean;
   /**
    * Sets the orientation of the options within the radio group.
    */
@@ -108,7 +108,7 @@ export type RadioProps = {
   error?: string;
   disabled: boolean;
   focused: boolean;
-  readonly: boolean;
+  readOnly: boolean;
   tabIndex: number;
 };
 

diff --git a/website/screens/components/radio-group/code/RadioGroupCodePage.tsx b/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
@@ -110,11 +110,14 @@ const sections = [
             <td>Label of the optional radio input.</td>
           </tr>
           <tr>
-            <td>readonly: boolean</td>
+            <td>readOnly: boolean</td>
             <td>
               <Code>false</Code>
             </td>
-            <td>If true, the component will be marked as readonly.</td>
+            <td>
+              If true, the component will not be mutable, meaning the user can
+              not edit the control.
+            </td>
           </tr>
           <tr>
             <td>stacking: "row" | "column"</td>

diff --git a/website/screens/components/radio-group/specs/RadioGroupSpecsPage.tsx b/website/screens/components/radio-group/specs/RadioGroupSpecsPage.tsx
@@ -44,7 +44,7 @@ const sections = [
         <DxcParagraph>
           The following states are defined in the life cycle of the component:{" "}
           <strong>enabled</strong>, <strong>error</strong>,{" "}
-          <strong>readonly</strong> and <strong>disabled</strong>.
+          <strong>readOnly</strong> and <strong>disabled</strong>.
         </DxcParagraph>
         <Figure caption="Radio group states">
           <Image src={radioGroupStates} alt="Radio group states" />
@@ -168,7 +168,7 @@ const sections = [
               </tr>
               <tr>
                 <td>
-                  <Code>readonlyRadioInputColor</Code>
+                  <Code>readOnlyRadioInputColor</Code>
                 </td>
                 <td>Radio input:readonly</td>
                 <td>
@@ -178,7 +178,7 @@ const sections = [
               </tr>
               <tr>
                 <td>
-                  <Code>hoverReadonlyRadioInputColor</Code>
+                  <Code>hoverReadOnlyRadioInputColor</Code>
                 </td>
                 <td>Radio input:readonly:hover</td>
                 <td>
@@ -188,7 +188,7 @@ const sections = [
               </tr>
               <tr>
                 <td>
-                  <Code>activeReadonlyRadioInputColor</Code>
+                  <Code>activeReadOnlyRadioInputColor</Code>
                 </td>
                 <td>Radio input:readonly:active</td>
                 <td>