fix: #1463 by adding tag label to Button and RadioButton

themesberg · Oct 30, 2024 · 64f5e0f · 64f5e0f
1 parent d767c04
commit 64f5e0f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/src/lib/buttons/Button.svelte b/src/lib/buttons/Button.svelte
@@ -11,7 +11,7 @@
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     color?: ButtonColor;
     shadow?: boolean;
-    tag?: 'a' | 'button';
+    tag?: 'a' | 'button'| 'label'; 
     checked?: boolean;
   }
 
@@ -142,6 +142,10 @@
   <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </a>
+{:else if tag === 'label'}
+  <label {...$$restProps} class={buttonClass}>
+    <slot />
+  </label>
 {:else if tag === 'button' }
   <button {type} {...$$restProps} {disabled} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />

diff --git a/src/lib/forms/Radio.svelte b/src/lib/forms/Radio.svelte
@@ -51,7 +51,7 @@
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input type="radio" bind:group={group} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
+  <input type="radio" {...$$restProps} bind:group={group} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 

diff --git a/src/lib/forms/RadioButton.svelte b/src/lib/forms/RadioButton.svelte
@@ -28,7 +28,7 @@
   $: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
 </script>
 
-<Button checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
   <input
     type="radio"
     bind:group

diff --git a/src/routes/docs/forms/radio.md b/src/routes/docs/forms/radio.md
@@ -302,15 +302,15 @@ This component accepts all props from the [Button](/docs/components/buttons) for
 </script>
 
 <div>
-  <RadioButton value={"notes"} bind:group={radioGroup}><ListMusicSolid class="w-7 h-7" /></RadioButton>
-  <RadioButton value={"numbers"} bind:group={radioGroup}><OrderedListOutline class="w-7 h-7"/></RadioButton>
-  <RadioButton value={"bullets"} bind:group={radioGroup}><ListOutline class="w-7 h-7"/></RadioButton>
+  <RadioButton value="notes" bind:group={radioGroup}><ListMusicSolid class="w-7 h-7" /></RadioButton>
+  <RadioButton value="numbers" bind:group={radioGroup}><OrderedListOutline class="w-7 h-7"/></RadioButton>
+  <RadioButton value="bullets" bind:group={radioGroup}><ListOutline class="w-7 h-7"/></RadioButton>
 </div>
 
 <ButtonGroup>
-  <RadioButton value={"notes"} bind:group={radioGroup}><ListMusicSolid class="w-7 h-7"/></RadioButton>
-  <RadioButton value={"numbers"} bind:group={radioGroup}><OrderedListOutline class="w-7 h-7"/></RadioButton>
-  <RadioButton value={"bullets"} bind:group={radioGroup}><ListOutline class="w-7 h-7"/></RadioButton>
+  <RadioButton value="notes" bind:group={radioGroup}><ListMusicSolid class="w-7 h-7"/></RadioButton>
+  <RadioButton value="numbers" bind:group={radioGroup}><OrderedListOutline class="w-7 h-7"/></RadioButton>
+  <RadioButton value="bullets" bind:group={radioGroup}><ListOutline class="w-7 h-7"/></RadioButton>
 </ButtonGroup>
 
 <p>List style: {radioGroup}</p>