Fix SelectField's icon/styles for field/option.

Author: willnationsdev

.changeset/bright-donuts-appear.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Fix SelectField MenuOption icons no longer being passed to MenuItems. Fix SelectField `classes: { field: ... }` not being incorporated into the inner `TextField` properly. Same with `classes: { option: ... }` not being incorporated into each inner `MenuItem` option. Update SelectField docs page with colored example that differentiates icon & input color, both in the field and the menu items.

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

@@ -67,14 +67,41 @@
     root?: string;
     field?: string | ComponentProps<TextField>['classes'];
     options?: string;
-    option?: string;
+    option?: string | ComponentProps<MenuItem>['classes'];
     selected?: string;
     group?: string;
     empty?: string;
   } = {};
 
   let fieldClasses: ComponentProps<TextField>['classes'];
-  $: fieldClasses = typeof classes.field === 'string' ? { root: classes.field } : classes.field;
+  $: {
+    let v: {root?: any} = {};
+    if (typeof settingsClasses?.field === 'string') {
+      v = { root: settingsClasses.field };
+    } else {
+      v = settingsClasses?.field ?? {};
+    }
+    if (typeof classes?.field === 'string') {
+      fieldClasses = { ...v, root: cls(v.root, classes.field)};
+    } else {
+      fieldClasses = { ...v, ...classes?.field ?? {} };
+    }
+  }
+
+  let optionClasses: ComponentProps<MenuItem>['classes'];
+  $: {
+    let v: {root?: any} = {};
+    if (typeof settingsClasses?.option === 'string') {
+      v = { root: settingsClasses.option };
+    } else {
+      v = settingsClasses?.option ?? {};
+    }
+    if (typeof classes?.option === 'string') {
+      optionClasses = { ...v, root: cls(v.root, classes.option)};
+    } else {
+      optionClasses = { ...v, ...classes?.option ?? {} };
+    }
+  }
 
   // Menu props
   export let placement: Placement = 'bottom-start';
@@ -425,11 +452,13 @@
     on:keypress={onKeyPress}
     actions={fieldActions}
     classes={{
+      ...fieldClasses,
       container: inlineOptions
-        ? 'border-none shadow-none hover:shadow-none group-focus-within:shadow-none'
-        : undefined,
+        ? cls('border-none shadow-none hover:shadow-none group-focus-within:shadow-none', fieldClasses?.container)
+        : fieldClasses?.container,
+      
     }}
-    class={cls('h-full', settingsClasses.field, fieldClasses)}
+    class={cls('h-full')}
     role="combobox"
     aria-expanded={open ? 'true' : 'false'}
     aria-autocomplete={!inlineOptions ? 'list' : undefined}
@@ -534,6 +563,7 @@
           <svelte:fragment slot="option" let:option let:index>
             <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
               <MenuItem
+              	classes={optionClasses}
                 class={cls(
                   index === highlightIndex && '[:not(.group:hover)>&]:bg-surface-content/5',
                   option === selected && (classes.selected || 'font-semibold'),
@@ -549,6 +579,7 @@
                 role="option"
                 aria-selected={option === selected ? 'true' : 'false'}
                 aria-disabled={option?.disabled ? 'true' : 'false'}
+                icon={option.icon}
               >
                 {optionText(option)}
               </MenuItem>
@@ -594,6 +625,7 @@
         <svelte:fragment slot="option" let:option let:index>
           <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
             <MenuItem
+              classes={optionClasses}
               class={cls(
                 index === highlightIndex && '[:not(.group:hover)>&]:bg-surface-content/5',
                 option === selected && (classes.selected || 'font-semibold'),
@@ -609,6 +641,7 @@
               role="option"
               aria-selected={option === selected ? 'true' : 'false'}
               aria-disabled={option?.disabled ? 'true' : 'false'}
+              icon={option.icon}
             >
               {optionText(option)}
             </MenuItem>

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

@@ -70,6 +70,7 @@
     error?: string;
     prepend?: string;
     append?: string;
+    icon?: string;
   } = {};
 
   // Input props
@@ -259,7 +260,7 @@
             <slot name="prepend" />
             {#if icon}
               <span class="mr-3">
-                <Icon data={asIconData(icon)} class="text-surface-content/50" />
+                <Icon data={asIconData(icon)} class={cls("text-surface-content/50", classes.icon)} />
               </span>
             {/if}
           </div>

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

@@ -24,10 +24,7 @@
 
   export let classes: {
     root?: string;
-    option?: string;
-    selected?: string;
     group?: string;
-    empty?: string;
   } = {};
 
   const settingsClasses = getComponentClasses('SelectField');

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

@@ -15,13 +15,15 @@
   import { cls } from '$lib/utils/styles';
   import type { MenuOption } from '$lib/types';
 
-  let options: MenuOption[] = [
+  let graphicOptions: MenuOption[] = [
     { label: 'One', value: 1, icon: mdiMagnify },
     { label: 'Two', value: 2, icon: mdiPlus },
     { label: 'Three', value: 3, icon: mdiPencil },
     { label: 'Four', value: 4, icon: mdiAccount },
   ];
 
+  let options: MenuOption[] = graphicOptions.map(o => { return { ...o, icon: undefined }; });
+
   const optionsWithGroup: MenuOption[] = [
     { label: 'One', value: 1, group: 'First' },
     { label: 'Two', value: 2, group: 'First' },
@@ -185,7 +187,7 @@
 <h2>option slot with icon (field icon updates based on selected option)</h2>
 
 <Preview>
-  <SelectField {options} bind:value activeOptionIcon={true}>
+  <SelectField options={graphicOptions} bind:value activeOptionIcon={true}>
     <div slot="option" let:option let:index let:selected let:highlightIndex>
       <MenuItem
         class={cls(
@@ -194,7 +196,6 @@
           option.group ? 'px-4' : 'px-2'
         )}
         scrollIntoView={index === highlightIndex}
-        icon={{ data: option.icon, style: 'color: #0000FF;' }}
       >
         {option.label}
       </MenuItem>
@@ -371,6 +372,21 @@
   <SelectField {options} icon={mdiMagnify} />
 </Preview>
 
+<h2>Icon and options with icons (field icon updates based on selected option)</h2>
+
+<Preview>
+  <SelectField
+    options={graphicOptions}
+    bind:value
+    activeOptionIcon={true}
+    classes={{
+      field: { input: 'text-blue-600', icon: 'text-pink-300' },
+      option: { root: 'text-blue-600', icon: 'text-pink-300' },
+    }}
+    on:change={(e) => console.log('on:change', e.detail)}
+  />
+</Preview>
+
 <h2>Rounded</h2>
 
 <Preview>