feat(Autocomplete): add color focus prop to autocomplete

shuriken-ui · Feb 18, 2024 · d6f2024 · d6f2024
1 parent 6b059a1
commit d6f2024
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 0 deletions.
diff --git a/src/plugins/components/autocomplete/autocomplete.component.ts b/src/plugins/components/autocomplete/autocomplete.component.ts
@@ -15,6 +15,7 @@ export const Autocomplete = ({
   contrast = 'default',
   label,
   labelFloat,
+  colorFocus,
   clearable,
   dropdown,
   multiple,
@@ -35,6 +36,7 @@ export const Autocomplete = ({
         error && !loading && 'nui-autocomplete-error',
         loading && 'nui-autocomplete-loading',
         labelFloat && 'nui-autocomplete-label-float',
+        colorFocus && 'nui-autocomplete-focus',
         icon && 'nui-has-icon',
         classes?.wrapper,
       ]

diff --git a/src/plugins/components/autocomplete/autocomplete.config.ts b/src/plugins/components/autocomplete/autocomplete.config.ts
@@ -42,6 +42,12 @@ export const defaultConfig = {
           dark: 'primary-500',
         },
       },
+      border: {
+        color: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+      },
     },
     icon: {
       color: {

diff --git a/src/plugins/components/autocomplete/autocomplete.doc.mdx b/src/plugins/components/autocomplete/autocomplete.doc.mdx
@@ -129,6 +129,18 @@ Autocompletes can have a clear button.
 
 <br />
 
+### State: color focus
+
+Autocompletes can have a different border color when focused.
+
+<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={AutocompleteStories.ColorFocusSm} />
+  <Story of={AutocompleteStories.ColorFocusMd} />
+  <Story of={AutocompleteStories.ColorFocusLg} />
+</div>
+
+<br />
+
 ### State: disabled
 
 Autocompletes can be shown in a disabled state.

diff --git a/src/plugins/components/autocomplete/autocomplete.stories.ts b/src/plugins/components/autocomplete/autocomplete.stories.ts
@@ -767,6 +767,89 @@ export const DisabledLg: Story = {
 }
 // #endregion
 
+// #region State: color focus
+export const ColorFocusSm: Story = {
+  name: 'Color focus: sm',
+  args: {
+    label: 'Search',
+    colorFocus: true,
+    size: 'sm',
+    contrast: 'default',
+    rounded: 'sm',
+    id: 'autocomplete',
+    placeholder: 'Search languages...',
+    classes: {
+      wrapper: 'min-w-[280px] max-w-[280px] min-h-[280px]',
+    },
+    items: html`
+      ${languages.map(
+        (item) => html`
+          <div class="nui-autocomplete-results-item">
+            <div class="nui-autocomplete-results-item-inner">
+              <span>${item.name}</span>
+            </div>
+          </div>
+        `,
+      )}
+    `,
+  },
+}
+
+export const ColorFocusMd: Story = {
+  name: 'Color focus: md',
+  args: {
+    label: 'Search',
+    colorFocus: true,
+    size: 'md',
+    contrast: 'default',
+    rounded: 'sm',
+    id: 'autocomplete',
+    placeholder: 'Search languages...',
+    classes: {
+      wrapper: 'min-w-[280px] max-w-[280px] min-h-[280px]',
+    },
+    items: html`
+      ${languages.map(
+        (item) => html`
+          <div class="nui-autocomplete-results-item">
+            <div class="nui-autocomplete-results-item-inner">
+              <span>${item.name}</span>
+            </div>
+          </div>
+        `,
+      )}
+    `,
+  },
+}
+
+export const ColorFocusLg: Story = {
+  name: 'Color focus: lg',
+  args: {
+    label: 'Search',
+    colorFocus: true,
+    size: 'lg',
+    contrast: 'default',
+    rounded: 'sm',
+    id: 'autocomplete',
+    placeholder: 'Search languages...',
+    classes: {
+      wrapper: 'min-w-[280px] max-w-[280px] min-h-[280px]',
+    },
+    items: html`
+      ${languages.map(
+        (item) => html`
+          <div class="nui-autocomplete-results-item">
+            <div class="nui-autocomplete-results-item-inner">
+              <span>${item.name}</span>
+            </div>
+          </div>
+        `,
+      )}
+    `,
+  },
+}
+// #endregion
+
 // #region State: loading
 export const LoadingSm: Story = {
   name: 'Loading: sm',

diff --git a/src/plugins/components/autocomplete/autocomplete.types.ts b/src/plugins/components/autocomplete/autocomplete.types.ts
@@ -6,6 +6,7 @@ export interface AutocompleteProps extends Record<string, unknown> {
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   label?: string
   labelFloat?: boolean
+  colorFocus?: boolean
   error?: string | boolean
   size?: 'sm' | 'md' | 'lg'
   contrast?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'

diff --git a/src/plugins/components/autocomplete/index.ts b/src/plugins/components/autocomplete/index.ts
@@ -436,6 +436,19 @@ export default plugin(({ addComponents, theme }) => {
               {},
           },
       },
+      //Focus:color
+      '&.nui-autocomplete-focus': {
+        '.nui-autocomplete-input': {
+          //Transition
+          [`@apply transition-colors duration-300`]: {},
+          //Focus
+          [`@apply focus:!border-${config.input.focus.border.color.light} dark:focus:!border-${config.input.focus.border.color.dark}`]:
+            {},
+          //Force focus
+          [`@apply focus:hover:!border-${config.input.focus.border.color.light} dark:focus:hover:!border-${config.input.focus.border.color.dark}`]:
+            {},
+        },
+      },
       //Autocomplete:not loading
       '&:not(.nui-autocomplete-loading)': {
         '.nui-autocomplete-input:placeholder-shown ~ .nui-label-float': {