fix(radio, checkbox): fix styles and readonly property (#269)

* fix(radio, checkbox): fix styles and readonly property * chore: update tests snapshots --------- Co-authored-by: Thrasos Kafasis <[email protected]>
epignosis · Dec 18, 2023 · 1fafaaf · 1fafaaf
1 parent 3ebca08
commit 1fafaaf
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/src/components/FormElements/CheckboxGroup/Checkbox.tsx b/src/components/FormElements/CheckboxGroup/Checkbox.tsx
@@ -44,7 +44,7 @@ const Checkbox: ForwardRefRenderFunction<HTMLDivElement, CheckboxProps> = (props
       {...containerAttrs}
     >
       {isPartiallySelected && <span data-testid="is-partially-selected" className="dash" />}
-      <input id={id} type="checkbox" {...rest} />
+      <input id={id} type="checkbox" readOnly={readOnly} {...rest} />
       <label htmlFor={id}>
         <span className="shadow-element" tabIndex={-1} aria-hidden="true" />
         {label}

diff --git a/src/components/FormElements/RadioGroup/Radio.tsx b/src/components/FormElements/RadioGroup/Radio.tsx
@@ -33,7 +33,7 @@ const Radio: FC<RadioProps> = ({
     css={(theme): SerializedStyles => radioButtonContainer(theme, { size, inline, readOnly })}
     {...containerAttrs}
   >
-    <input id={id} type="radio" {...rest} />
+    <input id={id} type="radio" readOnly={readOnly} {...rest} />
     <label htmlFor={id}>{label}</label>
   </div>
 );

diff --git a/src/components/FormElements/RadioGroup/__tests__/__snapshots__/Radio.test.tsx.snap b/src/components/FormElements/RadioGroup/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Radio /> matches snapshot 1`] = `
 <div>
   <div
-    class="container-class css-1aanwoa-radioButtonContainer-radioButtonContainer"
+    class="container-class css-18xb1wd-radioButtonContainer-radioButtonContainer"
     id="container-id"
   >
     <input
@@ -24,7 +24,7 @@ exports[`<Radio /> matches snapshot 1`] = `
 exports[`<Radio /> matches snapshot with \`inline = true\` 1`] = `
 <div>
   <div
-    class="css-18vhlt8-radioButtonContainer-radioButtonContainer"
+    class="css-cm09c4-radioButtonContainer-radioButtonContainer"
   >
     <input
       id="testId"

diff --git a/src/components/FormElements/RadioGroup/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/components/FormElements/RadioGroup/__tests__/__snapshots__/RadioGroup.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<RadioGroup /> matches snapshot 1`] = `
     id="testRadioGroup"
   >
     <div
-      class="css-18vhlt8-radioButtonContainer-radioButtonContainer"
+      class="css-cm09c4-radioButtonContainer-radioButtonContainer"
     >
       <input
         id="Test groupname-testOptionValue"
@@ -32,7 +32,7 @@ exports[`<RadioGroup /> matches snapshot with \`inline = true\` 1`] = `
     id="my-id"
   >
     <div
-      class="css-18vhlt8-radioButtonContainer-radioButtonContainer"
+      class="css-cm09c4-radioButtonContainer-radioButtonContainer"
     >
       <input
         id="Test groupname-testOptionValue"

diff --git a/src/components/FormElements/RadioGroup/styles.ts b/src/components/FormElements/RadioGroup/styles.ts
@@ -19,8 +19,11 @@ export const radioButtonContainer = (
   };
 
   return css`
+    display: ${inline ? "inline-flex" : "flex"};
     padding-inline: 0 ${inline ? "1.5rem" : "0"};
     padding-block: 0.75rem;
+    position: relative;
+    align-items: center;
 
     input[type="radio"] {
       opacity: 0;
@@ -54,10 +57,10 @@ export const radioButtonContainer = (
       }
 
       + label {
-        font-size: ${fontSizes[size]};
         position: relative;
-        display: inline-block;
+        display: flex;
         padding-inline-start: 1.5rem;
+        font-size: ${fontSizes[size]};
         cursor: ${readOnly ? "normal" : "pointer"};
 
         &::before {