feat(Listbox): add color focus prop to listbox

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

Hide file tree

Showing 6 changed files with 182 additions and 0 deletions.
diff --git a/src/plugins/components/listbox/index.ts b/src/plugins/components/listbox/index.ts
@@ -458,6 +458,19 @@ export default plugin(({ addComponents, theme }) => {
             {},
         },
       },
+      //Focus:color
+      '&.nui-listbox-focus': {
+        '.nui-listbox-button': {
+          //Transition
+          [`@apply transition-colors duration-300`]: {},
+          //Focus
+          [`@apply focus:!border-${config.button.focus.border.color.light} dark:focus:!border-${config.button.focus.border.color.dark}`]:
+            {},
+          //Force focus
+          [`@apply focus:hover:!border-${config.button.focus.border.color.light} dark:focus:hover:!border-${config.button.focus.border.color.dark}`]:
+            {},
+        },
+      },
       //Listbox:loaded
       '&:not(.nui-listbox-loading)': {
         '.nui-listbox-button ~ .nui-label-float': {

diff --git a/src/plugins/components/listbox/listbox.component.ts b/src/plugins/components/listbox/listbox.component.ts
@@ -16,6 +16,7 @@ export const Listbox = ({
   contrast = 'default',
   label,
   labelFloat,
+  colorFocus,
   multiple,
   loading,
   error,
@@ -33,6 +34,7 @@ export const Listbox = ({
         error && !loading && 'nui-listbox-error',
         loading && 'nui-listbox-loading',
         labelFloat && 'nui-listbox-label-float',
+        colorFocus && 'nui-listbox-focus',
         icon && 'nui-has-icon',
         classes?.wrapper,
       ]

diff --git a/src/plugins/components/listbox/listbox.config.ts b/src/plugins/components/listbox/listbox.config.ts
@@ -27,6 +27,14 @@ export const defaultConfig = {
       size: 'sm',
       align: 'start',
     },
+    focus: {
+      border: {
+        color: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+      },
+    },
     iconBox: {
       margin: {
         x: '2',

diff --git a/src/plugins/components/listbox/listbox.doc.mdx b/src/plugins/components/listbox/listbox.doc.mdx
@@ -107,6 +107,18 @@ Listboxes can have a floating label instead of the regular label.
 
 ## State
 
+### State: color focus
+
+Listboxes can have a colored border when focused.
+
+<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ListboxStories.ColorFocusSm} />
+  <Story of={ListboxStories.ColorFocusMd} />
+  <Story of={ListboxStories.ColorFocusLg} />
+</div>
+
+<br />
+
 ### State: disabled
 
 Listboxes can be shown in a disabled state.

diff --git a/src/plugins/components/listbox/listbox.stories.ts b/src/plugins/components/listbox/listbox.stories.ts
@@ -1072,6 +1072,152 @@ export const DisabledLg: Story = {
 }
 // #endregion
 
+// #region State: color focus
+export const ColorFocusSm: Story = {
+  name: 'State color focus: sm',
+  args: {
+    value: languages[0].name,
+    label: 'Languages',
+    colorFocus: true,
+    size: 'sm',
+    contrast: 'default',
+    rounded: 'sm',
+    id: 'listbox',
+    placeholder: 'Select a language...',
+    classes: {
+      wrapper: 'min-w-[280px] max-w-[280px] min-h-[260px]',
+    },
+    items: html`
+      ${languages.map(
+        (item, index) => html`
+          <div class="nui-listbox-option">
+            <span class="font-sans">${item.name}</span>
+            ${index === 0
+              ? html`
+                  <div class="nui-listbox-selected-icon">
+                    <svg
+                      class="nui-listbox-selected-icon-inner"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="32"
+                      height="32"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M20 6L9 17l-5-5"
+                      />
+                    </svg>
+                  </div>
+                `
+              : ''}
+          </div>
+        `,
+      )}
+    `,
+  },
+}
+
+export const ColorFocusMd: Story = {
+  name: 'State color focus: md',
+  args: {
+    value: languages[0].name,
+    label: 'Languages',
+    colorFocus: true,
+    size: 'md',
+    contrast: 'default',
+    rounded: 'sm',
+    id: 'listbox',
+    placeholder: 'Select a language...',
+    classes: {
+      wrapper: 'min-w-[280px] max-w-[280px] min-h-[260px]',
+    },
+    items: html`
+      ${languages.map(
+        (item, index) => html`
+          <div class="nui-listbox-option">
+            <span class="font-sans">${item.name}</span>
+            ${index === 0
+              ? html`
+                  <div class="nui-listbox-selected-icon">
+                    <svg
+                      class="nui-listbox-selected-icon-inner"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="32"
+                      height="32"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M20 6L9 17l-5-5"
+                      />
+                    </svg>
+                  </div>
+                `
+              : ''}
+          </div>
+        `,
+      )}
+    `,
+  },
+}
+
+export const ColorFocusLg: Story = {
+  name: 'State color focus: lg',
+  args: {
+    value: languages[0].name,
+    label: 'Languages',
+    colorFocus: true,
+    size: 'lg',
+    contrast: 'default',
+    rounded: 'sm',
+    id: 'listbox',
+    placeholder: 'Select a language...',
+    classes: {
+      wrapper: 'min-w-[280px] max-w-[280px] min-h-[260px]',
+    },
+    items: html`
+      ${languages.map(
+        (item, index) => html`
+          <div class="nui-listbox-option">
+            <span class="font-sans">${item.name}</span>
+            ${index === 0
+              ? html`
+                  <div class="nui-listbox-selected-icon">
+                    <svg
+                      class="nui-listbox-selected-icon-inner"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="32"
+                      height="32"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M20 6L9 17l-5-5"
+                      />
+                    </svg>
+                  </div>
+                `
+              : ''}
+          </div>
+        `,
+      )}
+    `,
+  },
+}
+// #endregion
+
 // #region State: loading
 export const LoadingSm: Story = {
   name: 'State loading: sm',

diff --git a/src/plugins/components/listbox/listbox.types.ts b/src/plugins/components/listbox/listbox.types.ts
@@ -7,6 +7,7 @@ export interface ListboxProps 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'