MultiSelect / Checkbox / Radio improvements (#310)

* Add related for MultiSelect*

* [Checkbox / Radio] Add `fullWidth` prop. Add `input` to classes, and class names to all internal elements for easier devtool recognition and CSS targeting

* [MultiSelectOption] Improve default styling (align with SelectField) including `:hover`. Leverage recent Checkbox fullWidth changes for better pointer targets (full width and height). Support passing all `Checkbox` classes.

* [MultiSelect] Remove default outer padding (add to MultiSelectMenu) and add `classes.action`

Author: techniq

.changeset/dirty-geckos-give.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[Checkbox / Radio] Add `fullWidth` prop. Add `input` to classes, and class names to all internal elements for easier devtool recognition and CSS targeting

.changeset/green-rockets-rule.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[MultiSelect] Remove default outer padding (add to MultiSelectMenu) and add `classes.action`

.changeset/hot-trainers-grow.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[MultiSelectOption] Improve default styling (align with SelectField) including `:hover`. Leverage recent Checkbox fullWidth changes for better pointer targets (full width and height). Support passing all `Checkbox` classes.

packages/svelte-ux/src/lib/components/Checkbox.svelte

@@ -14,11 +14,13 @@
   export let indeterminate = false;
   export let required = false;
   export let disabled = false;
-  export let circle = false;
+  export let fullWidth = false;
   export let size: 'xs' | 'sm' | 'md' | 'lg' = 'sm';
+  export let circle = false;
 
   export let classes: {
     root?: string;
+    input?: string;
     checkbox?: string;
     label?: string;
     icon?: string;
@@ -51,7 +53,8 @@
 <div
   class={cls(
     'Checkbox',
-    'inline-flex items-center',
+    fullWidth ? 'flex' : 'inline-flex',
+    'items-center',
     settingsClasses.root,
     classes.root,
     $$props.class
@@ -65,13 +68,14 @@
     on:change={onChange}
     on:change
     {value}
-    class="peer appearance-none absolute"
+    class={cls('input', 'peer appearance-none absolute', settingsClasses.input, classes.input)}
     {required}
     {disabled}
   />
   <label
     for={id}
     class={cls(
+      'checkbox',
       'inline-grid place-items-center border-2',
       circle ? 'rounded-full' : 'rounded',
       'peer-disabled:opacity-50 transition-shadow duration-300',
@@ -90,6 +94,7 @@
     <Icon
       path={indeterminate ? mdiMinus : mdiCheck}
       class={cls(
+        'icon',
         'pointer-events-none text-primary-content transition-transform',
         checked ? 'scale-100' : 'scale-0',
         settingsClasses.icon,
@@ -108,7 +113,9 @@
     <label
       for={id}
       class={cls(
-        'peer-disabled:opacity-50 pl-1',
+        'label',
+        'flex-1',
+        'pl-1 peer-disabled:opacity-50',
         {
           xs: 'text-xs', // 12px
           sm: 'text-sm', // 14px

packages/svelte-ux/src/lib/components/MultiSelect.svelte

@@ -41,6 +41,7 @@
 
   export let classes: {
     root?: string;
+    actions?: string;
   } = {};
   const settingsClasses = getComponentClasses('MultiSelect');
 
@@ -112,7 +113,7 @@
 </script>
 
 {#if inlineSearch}
-  <div class="border-b border-surface-content/10 p-4 pb-2">
+  <div class="border-b border-surface-content/10 pb-2">
     <TextField
       {placeholder}
       iconRight={mdiMagnify}
@@ -122,7 +123,7 @@
   </div>
 {/if}
 
-<div class={cls('overflow-auto py-1 px-4', settingsClasses.root, classes.root, $$restProps.class)}>
+<div class={cls('overflow-auto', settingsClasses.root, classes.root, $$restProps.class)}>
   <slot name="beforeOptions" selection={$selection} />
 
   <!-- initially selected options -->
@@ -209,15 +210,24 @@
       </div>
     {:else}
       {#if !filteredSelectedOptions.length}
-        <div class="text-surface-content/50 text-xs py-2">There are no matching items.</div>
+        <div class="text-surface-content/50 text-xs py-2 px-4 mb-1">
+          There are no matching items.
+        </div>
       {/if}
     {/each}
   </InfiniteScroll>
 
   <slot name="afterOptions" selection={$selection} />
 </div>
 
-<div class="grid grid-cols-[auto,1fr,auto] border-t border-surface-content/10 px-4 py-2">
+<div
+  class={cls(
+    'actions',
+    'grid grid-cols-[auto,1fr,auto] border-t border-surface-content/10 pt-2',
+    settingsClasses.actions,
+    classes.actions
+  )}
+>
   <slot name="actions" selection={$selection} {searchText}>
     <div />
   </slot>

packages/svelte-ux/src/lib/components/MultiSelectField.svelte

@@ -48,7 +48,7 @@
 
   export let classes: {
     root?: string;
-    menu?: string;
+    multiSelectMenu?: ComponentProps<MultiSelectMenu<Option>>['classes'];
     field?: string;
     actions?: string;
   } = {};
@@ -207,7 +207,7 @@
     {labelProp}
     {valueProp}
     {searchText}
-    {classes}
+    classes={{ ...settingsClasses.multiSelectMenu, ...classes.multiSelectMenu }}
     matchWidth
     bind:open
     on:change={onSelectChange}

packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte

@@ -48,7 +48,7 @@
   {...$$restProps}
   classes={{
     root: cls('MultiSelectMenu', settingsClasses.root, classes.root, $$restProps.class),
-    menu: cls('flex flex-col', settingsClasses.menu, classes.menu),
+    menu: cls('flex flex-col p-2', settingsClasses.menu, classes.menu),
   }}
   bind:menuItemsEl
 >

packages/svelte-ux/src/lib/components/MultiSelectOption.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
+
   import Checkbox from './Checkbox.svelte';
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
@@ -9,7 +11,7 @@
 
   export let classes: {
     root?: string;
-    checkbox?: string;
+    checkbox?: ComponentProps<Checkbox>['classes'];
     container?: string;
   } = {};
   const settingsClasses = getComponentClasses('MultiSelectOption');
@@ -18,7 +20,7 @@
 <div
   class={cls(
     'MultiSelectOption',
-    'grid grid-cols-[1fr,auto] py-2',
+    'grid grid-cols-[1fr,auto]',
     settingsClasses.root,
     classes.root,
     $$props.class
@@ -29,7 +31,12 @@
     bind:indeterminate
     on:change
     {disabled}
-    class={cls(settingsClasses.checkbox, classes.checkbox)}
+    classes={{
+      root: 'px-2 rounded hover:bg-surface-content/5',
+      label: 'py-2',
+      ...settingsClasses.checkbox,
+      ...classes.checkbox,
+    }}
   >
     <div
       class={cls(

packages/svelte-ux/src/lib/components/Radio.svelte

@@ -13,11 +13,13 @@
   export let checked = false;
   export let required = false;
   export let disabled = false;
+  export let fullWidth = false;
   export let size: 'xs' | 'sm' | 'md' | 'lg' = 'sm';
 
   export let classes: {
     root?: string;
-    checkbox?: string;
+    input?: string;
+    radio?: string;
     label?: string;
     icon?: string;
   } = {};
@@ -29,7 +31,8 @@
 <div
   class={cls(
     'Radio',
-    'inline-flex items-center',
+    fullWidth ? 'flex' : 'inline-flex',
+    'items-center',
     settingsClasses.root,
     classes.root,
     $$props.class
@@ -42,13 +45,14 @@
     bind:group
     on:change
     {value}
-    class="peer appearance-none absolute"
+    class={cls('input', 'peer appearance-none absolute', settingsClasses.input, classes.input)}
     {required}
     {disabled}
   />
   <label
     for={id}
     class={cls(
+      'radio',
       'inline-grid place-items-center border-2 rounded-full bg-surface-100',
       'peer-disabled:opacity-50 transition-shadow duration-300',
       !disabled &&
@@ -59,13 +63,14 @@
           ? 'border-surface-content/30'
           : 'border-primary'
         : 'border-surface-content/30',
-      settingsClasses.checkbox,
-      classes.checkbox
+      settingsClasses.radio,
+      classes.radio
     )}
   >
     <Icon
       path={mdiCheckboxBlankCircle}
       class={cls(
+        'icon',
         'pointer-events-none transition-transform',
         disabled ? 'text-surface-content/30 border-surface-content/30' : 'text-primary',
         checked ? 'scale-100' : 'scale-0',
@@ -85,7 +90,9 @@
     <label
       for={id}
       class={cls(
-        'peer-disabled:opacity-50 pl-1',
+        'label',
+        'flex-1',
+        'pl-1 peer-disabled:opacity-50',
         {
           xs: 'text-xs', // 12px
           sm: 'text-sm', // 14px

packages/svelte-ux/src/routes/docs/components/Checkbox/+page.svelte

@@ -48,6 +48,15 @@
   <Checkbox checked>Label</Checkbox>
 </Preview>
 
+<h2>Full width</h2>
+
+<Preview>
+  <Checkbox fullWidth>One</Checkbox>
+  <Checkbox fullWidth>Two</Checkbox>
+  <Checkbox fullWidth>Three</Checkbox>
+  <Checkbox fullWidth>Four (disabled)</Checkbox>
+</Preview>
+
 <h2>Long labels</h2>
 
 <Preview>

packages/svelte-ux/src/routes/docs/components/MultiSelect/+page.ts

@@ -8,6 +8,11 @@ export async function load() {
       api,
       source,
       pageSource,
+      related: [
+        'components/InfiniteScroll',
+        'components/MultiSelectField',
+        'components/MultiSelectMenu',
+      ],
     },
   };
 }

packages/svelte-ux/src/routes/docs/components/MultiSelectField/+page.ts

@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      related: ['components/MultiSelect', 'components/MultiSelectMenu', 'components/TextField'],
     },
   };
 }

packages/svelte-ux/src/routes/docs/components/MultiSelectMenu/+page.ts

@@ -8,6 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
+      related: ['components/Menu', 'components/MultiSelect', 'components/MultiSelectField'],
     },
   };
 }

packages/svelte-ux/src/routes/docs/components/Radio/+page.svelte

@@ -31,6 +31,14 @@
   <Radio name="label" bind:group value={3}>Third</Radio>
 </Preview>
 
+<h2>Full width</h2>
+
+<Preview>
+  <Radio name="label" bind:group value={1} fullWidth>First</Radio>
+  <Radio name="label" bind:group value={2} fullWidth>Second</Radio>
+  <Radio name="label" bind:group value={3} fullWidth>Third</Radio>
+</Preview>
+
 <h2>Long labels</h2>
 
 <Preview>