Fix invalid state on checkbox and radio fields

rumenpetrov · Apr 25, 2024 · b85eee5 · b85eee5
1 parent 197e261
commit b85eee5
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # waft-design-system
 
+## 0.1.2
+
+### Patch Changes
+
+- Fix invalid state on checkbox and radio fields
+
 ## 0.1.1
 
 ### Patch Changes

diff --git a/index.html b/index.html
@@ -108,6 +108,28 @@ <h1>Playground</h1>
 
     <form id="js-special-form">
       <input type="text" name="readonly2" readonly value="readonly2" />
+      <fieldset>
+        <legend>
+          Yes or No?<span aria-label="required">*</span>
+        </legend>
+
+        <wds-form-control-enhancer>
+          <input type="radio" required name="driver" id="r1" value="yes" />
+        </wds-form-control-enhancer>
+        <label for="r1">Yes</label>
+
+        <wds-form-control-enhancer>
+          <input type="radio" required name="driver" id="r2" value="no" />
+        </wds-form-control-enhancer>
+        <label for="r2">No</label>
+      </fieldset>
+
+      <fieldset>
+        <wds-form-control-enhancer>
+          <input type="checkbox" required />
+        </wds-form-control-enhancer>
+      </fieldset>
+
       <wds-form-control-enhancer>
         <textarea name="textarea">textarea</textarea>
       </wds-form-control-enhancer>

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "main": "dist/waft.js",
   "module": "dist/waft.js",

diff --git a/src/components/form-control-enhancer/form-control-enhancer.stories.ts b/src/components/form-control-enhancer/form-control-enhancer.stories.ts
@@ -359,6 +359,18 @@ export const Error: Story = {
       content: '<input type="datetime-local" required />',
     })}
 
+    <p>Checkbox</p>
+    ${defaultRender({
+      ...args,
+      content: '<input type="checkbox" required />',
+    })}
+
+    <p>Radio</p>
+    ${defaultRender({
+      ...args,
+      content: '<input type="radio" name="err" required /><input type="radio" name="err" required />',
+    })}
+
     <p>Textarea</p>
     ${defaultRender({
       ...args,

diff --git a/src/components/form-control-enhancer/form-control-enhancer.ts b/src/components/form-control-enhancer/form-control-enhancer.ts
@@ -71,8 +71,17 @@ export class WdsFormControlEnhancer extends LitElement implements WdsFormControl
       }
       ::slotted(input[type="radio"]),
       ::slotted(input[type="checkbox"]) {
+        appearance: none;
         width: 24px;
         height: 24px;
+        padding: 0;
+      }
+      ::slotted(input[type="radio"]) {
+        border-radius: 50%;
+      }
+      ::slotted(input[type="radio"]:checked),
+      ::slotted(input[type="checkbox"]:checked) {
+        box-shadow: inset 0 0 0 4px var(--_wds-form-control-enhancer--focus-color);
       }
       ::slotted(input[type="color"]) {
         padding: 4px;