fix(checkbox): avoid 'undefined' values and fallback to an empty string

fix(radio): avoid 'undefined' values and fallback to an empty string docs: pass down name attribute to the elements
statistikZH · Jul 24, 2024 · 2f9f95f · 2f9f95f
1 parent 820deca
commit 2f9f95f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
@@ -59,7 +59,7 @@ export class LeuCheckbox extends LeuElement {
         @input=${this.handleInput}
         .checked=${this.checked}
         ?disabled=${this.disabled}
-        .value=${this.value}
+        .value=${this.value ?? ""}
       />
       <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
       <leu-icon class="icon" name="check"></leu-icon>

diff --git a/src/components/checkbox/stories/checkbox.stories.js b/src/components/checkbox/stories/checkbox.stories.js
@@ -17,9 +17,14 @@ export default {
   },
 }
 
-function Template({ label = "Label", value, checked, disabled }) {
+function Template({ label = "Label", value, checked, disabled, name = "" }) {
   return html`
-    <leu-checkbox .value=${value} ?checked=${checked} ?disabled=${disabled}>
+    <leu-checkbox
+      .value=${value}
+      ?checked=${checked}
+      ?disabled=${disabled}
+      name=${name}
+    >
       ${label}
     </leu-checkbox>
   `

diff --git a/src/components/radio/Radio.js b/src/components/radio/Radio.js
@@ -54,7 +54,7 @@ export class LeuRadio extends LeuElement {
         @input=${this.handleInput}
         .checked=${this.checked}
         ?disabled=${this.disabled}
-        .value=${this.value}
+        .value=${this.value ?? ""}
       />
       <label for=${`radio-${this.name}`} class="label"><slot></slot></label>
     `

diff --git a/src/components/radio/stories/radio.stories.js b/src/components/radio/stories/radio.stories.js
@@ -22,9 +22,15 @@ function Template({
   value = "",
   checked = false,
   disabled = false,
+  name = "",
 }) {
   return html`
-    <leu-radio .value=${value} ?checked=${checked} ?disabled=${disabled}>
+    <leu-radio
+      .value=${value}
+      ?checked=${checked}
+      ?disabled=${disabled}
+      name=${name}
+    >
       ${label}
     </leu-radio>
   `