add caret to combobox

chris-kruining · Jan 7, 2025 · 7f71f83 · 7f71f83
1 parent 1ae0e14
commit 7f71f83
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/src/components/combobox/index.module.css b/src/components/combobox/index.module.css
@@ -10,6 +10,7 @@
 }
 
 .button {
+    position: relative;
     display: grid;
     grid-template-columns: inherit;
     place-items: center start;
@@ -23,6 +24,22 @@
     font-size: 1rem;
 
     cursor: pointer;
+
+    &:hover {
+        background-color: var(--surface-700);
+    }
+
+    &:has(> .caret) {
+        padding-inline-end: calc(1em + (2 * var(--padding-m)));
+    }
+
+    & > .caret {
+        position: absolute;
+        inset-inline-end: var(--padding-m);
+        inset-block-start: 50%;
+        translate: 0 -50%;
+        inline-size: 1em;
+    }
 }
 
 .dialog {

diff --git a/src/components/combobox/index.tsx b/src/components/combobox/index.tsx
@@ -1,5 +1,6 @@
 import { createMemo, createSignal, For, JSX, Setter, createEffect, Show } from "solid-js";
 import css from './index.module.css';
+import { FaSolidAngleDown } from "solid-icons/fa";
 
 interface ComboBoxProps<T, K extends string> {
     id: string;
@@ -8,6 +9,7 @@ interface ComboBoxProps<T, K extends string> {
     setValue?: Setter<K>;
     values: Record<K, T>;
     open?: boolean;
+    showCaret?: boolean;
     children: (key: K, value: T) => JSX.Element;
     filter?: (query: string, key: K, value: T) => boolean;
 }
@@ -30,6 +32,8 @@ export function ComboBox<T, K extends string>(props: ComboBoxProps<T, K>) {
         return entries;
     });
 
+    const showCaret = createMemo(() => props.showCaret ?? true);
+
     createEffect(() => {
         props.setValue?.(() => value());
     });
@@ -41,6 +45,10 @@ export function ComboBox<T, K extends string>(props: ComboBoxProps<T, K>) {
     return <section class={`${css.box} ${props.class}`}>
         <button id={`${props.id}_button`} popoverTarget={`${props.id}_dialog`} class={css.button}>
             {props.children(value(), props.values[value()])}
+
+            <Show when={showCaret()}>
+                <FaSolidAngleDown class={css.caret} />
+            </Show>
         </button>
 
         <dialog ref={setDialog} id={`${props.id}_dialog`} anchor={`${props.id}_button`} popover class={css.dialog} onToggle={e => setOpen(e.newState === 'open')}>

diff --git a/src/features/i18n/picker.tsx b/src/features/i18n/picker.tsx
@@ -16,6 +16,7 @@ export const LocalePicker: Component<LocalePickerProps> = (props) => {
         value={locale()}
         setValue={setLocale}
         values={locales}
+        showCaret={false}
     >
         {(locale, { flag, label }) => <Dynamic component={flag} lang={locale} aria-label={label} class={css.flag} />}
     </ComboBox>