[Field/TextField/SelectField] Center flex align prepend/append slot containers

Author: techniq

.changeset/sixty-mirrors-reply.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[Field/TextField/SelectField] Center flex align prepend/append slot containers

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

@@ -109,7 +109,7 @@
         {#if hasPrepend}
           <div
             class={cls(
-              'prepend whitespace-nowrap flex items-center',
+              'prepend flex items-center whitespace-nowrap',
               settingsClasses.prepend,
               classes.prepend
             )}
@@ -163,7 +163,13 @@
         </div>
 
         {#if hasAppend}
-          <div class={cls('append whitespace-nowrap', settingsClasses.append, classes.append)}>
+          <div
+            class={cls(
+              'append flex items-center whitespace-nowrap',
+              settingsClasses.append,
+              classes.append
+            )}
+          >
             {#if clearable && hasValue}
               <Button
                 icon={mdiClose}

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

@@ -27,15 +27,15 @@
   actions={(node) => [selectOnFocus(node)]}
   {...$$restProps}
 >
-  <div slot="prepend" class="flex">
+  <div slot="prepend">
     <Button
       icon={mdiMinus}
       on:click={() => (value -= 1)}
       size="sm"
       disabled={min != null && value <= min}
     />
   </div>
-  <div slot="append" class="flex">
+  <div slot="append">
     <Button
       icon={mdiPlus}
       on:click={() => (value += 1)}

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

@@ -435,7 +435,7 @@
     aria-autocomplete={!inlineOptions ? 'list' : undefined}
     {...$$restProps}
   >
-    <span slot="prepend">
+    <span slot="prepend" class="flex items-center">
       {#if stepper}
         <Button
           icon={mdiChevronLeft}

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

@@ -250,7 +250,7 @@
         {#if hasPrepend}
           <div
             class={cls(
-              'prepend whitespace-nowrap',
+              'prepend flex items-center whitespace-nowrap',
               rounded && 'pl-3',
               settingsClasses.prepend,
               classes.prepend
@@ -379,7 +379,13 @@
         </div>
 
         {#if hasAppend}
-          <div class={cls('append whitespace-nowrap', settingsClasses.append, classes.append)}>
+          <div
+            class={cls(
+              'append flex items-center whitespace-nowrap',
+              settingsClasses.append,
+              classes.append
+            )}
+          >
             {#if clearable && hasInputValue}
               <Button
                 icon={mdiClose}

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

@@ -132,8 +132,8 @@
 
 <Preview>
   <Field label="Value">
-    <ScrollingValue bind:value {axis} class="w-full" />
-    <div slot="append" class="flex">
+    <ScrollingValue bind:value axis="y" class="w-full" />
+    <div slot="append">
       <Button icon={mdiMinus} on:click={() => (value -= 1)} size="sm" />
       <Button icon={mdiPlus} on:click={() => (value += 1)} size="sm" />
     </div>
@@ -145,11 +145,11 @@
 
 <Preview>
   <Field class="w-36">
-    <div slot="prepend" class="flex">
+    <div slot="prepend">
       <Button icon={mdiMinus} on:click={() => (value -= 1)} size="sm" />
     </div>
     <ScrollingValue bind:value {axis} classes={{ root: 'w-full', value: 'w-full text-center' }} />
-    <div slot="append" class="flex">
+    <div slot="append">
       <Button icon={mdiPlus} on:click={() => (value += 1)} size="sm" />
     </div>
   </Field>

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

@@ -72,6 +72,18 @@
   <Button on:click={() => (value = 4)}>Pick 4</Button>
 </Preview>
 
+<h2>Error</h2>
+
+<Preview>
+  <SelectField {options} error />
+</Preview>
+
+<h2>Error message</h2>
+
+<Preview>
+  <SelectField {options} error="This is a required field" />
+</Preview>
+
 <h2>clearable=false</h2>
 
 <Preview>

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

@@ -387,11 +387,11 @@
 
 <Preview>
   <TextField label="Date Range">
-    <div slot="prepend" class="flex items-center">
+    <div slot="prepend">
       <Button icon={mdiChevronLeft} class="text-surface-content/50 p-2" />
       <Icon path={mdiCalendar} class="text-surface-content/50 mr-2" />
     </div>
-    <div slot="append" class="flex items-center">
+    <div slot="append">
       <Icon path={mdiRefresh} class="text-surface-content/50 mr-2" />
       <Button icon={mdiChevronRight} class="text-surface-content/50 p-2" />
     </div>