From 7be6671e6ea797a38aae1a6673faf74768199d07 Mon Sep 17 00:00:00 2001 From: David Hill Date: Tue, 20 Jan 2026 21:52:50 +0000 Subject: [PATCH] refactor Select component to use settings variant for settings modal styling --- packages/app/src/components/prompt-input.tsx | 1 - .../app/src/components/settings-general.tsx | 6 + .../src/components/settings-permissions.tsx | 1 + packages/ui/src/components/select.css | 124 ++++++++++++------ packages/ui/src/components/select.tsx | 7 +- 5 files changed, 92 insertions(+), 47 deletions(-) diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index e05b6646b..072ef0bdd 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -1583,7 +1583,6 @@ export const PromptInput: Component = (props) => { onSelect={local.agent.set} class="capitalize" variant="ghost" - triggerVariant="button" /> { }} variant="secondary" size="small" + triggerVariant="settings" /> @@ -99,6 +100,7 @@ export const SettingsGeneral: Component = () => { }} variant="secondary" size="small" + triggerVariant="settings" /> @@ -111,6 +113,7 @@ export const SettingsGeneral: Component = () => { onSelect={(option) => option && settings.appearance.setFont(option.value)} variant="secondary" size="small" + triggerVariant="settings" triggerStyle={{ "font-family": monoFontFamily(settings.appearance.font()), "min-width": "180px" }} > {(option) => {option?.label}} @@ -172,6 +175,7 @@ export const SettingsGeneral: Component = () => { }} variant="secondary" size="small" + triggerVariant="settings" /> @@ -192,6 +196,7 @@ export const SettingsGeneral: Component = () => { }} variant="secondary" size="small" + triggerVariant="settings" /> @@ -212,6 +217,7 @@ export const SettingsGeneral: Component = () => { }} variant="secondary" size="small" + triggerVariant="settings" /> diff --git a/packages/app/src/components/settings-permissions.tsx b/packages/app/src/components/settings-permissions.tsx index aa83de01e..d0551d247 100644 --- a/packages/app/src/components/settings-permissions.tsx +++ b/packages/app/src/components/settings-permissions.tsx @@ -129,6 +129,7 @@ export const SettingsPermissions: Component = () => { onSelect={(option) => option && setPermission(item.id, option.value)} variant="secondary" size="small" + triggerVariant="settings" /> )} diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css index 73e2b2a6d..d9791b51e 100644 --- a/packages/ui/src/components/select.css +++ b/packages/ui/src/components/select.css @@ -1,70 +1,89 @@ [data-component="select"] { [data-slot="select-select-trigger"] { - padding: 6px 6px 6px 12px; + padding: 0 4px 0 8px; box-shadow: none; - border-radius: 6px; - min-width: 160px; - height: 32px; - justify-content: flex-end; - gap: 12px; - background-color: transparent; [data-slot="select-select-trigger-value"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: var(--font-size-base); - font-weight: var(--font-weight-regular); } [data-slot="select-select-trigger-icon"] { width: 16px; - height: 20px; + height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-weak); - background-color: var(--surface-raised-base); - border-radius: 4px; transition: transform 0.1s ease-in-out; } - &[data-slot="select-select-trigger"]:hover:not(:disabled), - &[data-slot="select-select-trigger"][data-expanded], - &[data-slot="select-select-trigger"][data-expanded]:hover:not(:disabled) { - background-color: var(--input-base); - box-shadow: var(--shadow-xs-border-base); + &[data-expanded] { + &[data-variant="secondary"] { + background-color: var(--button-secondary-hover); + } + &[data-variant="ghost"] { + background-color: var(--surface-raised-base-active); + } + &[data-variant="primary"] { + background-color: var(--icon-strong-active); + } } &:not([data-expanded]):focus { - background-color: transparent; - box-shadow: none; + &[data-variant="secondary"] { + background-color: var(--button-secondary-base); + } + &[data-variant="ghost"] { + background-color: transparent; + } + &[data-variant="primary"] { + background-color: var(--icon-strong-base); + } } } - &[data-trigger-style="button"] { + &[data-trigger-style="settings"] { [data-slot="select-select-trigger"] { - padding: 0 6px; - min-width: auto; - height: 24px; - justify-content: center; - gap: 6px; + padding: 6px 6px 6px 12px; + box-shadow: none; + border-radius: 6px; + min-width: 160px; + height: 32px; + justify-content: flex-end; + gap: 12px; + background-color: transparent; + [data-slot="select-select-trigger-value"] { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + } [data-slot="select-select-trigger-icon"] { - width: auto; - height: auto; - background-color: transparent; - border-radius: 0; - } - - &[data-slot="select-select-trigger"]:hover:not(:disabled) { - background-color: var(--surface-raised-base-hover); - box-shadow: none; + width: 16px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: var(--text-weak); + background-color: var(--surface-raised-base); + border-radius: 4px; + transition: transform 0.1s ease-in-out; } + &[data-slot="select-select-trigger"]:hover:not(:disabled), &[data-slot="select-select-trigger"][data-expanded], &[data-slot="select-select-trigger"][data-expanded]:hover:not(:disabled) { - background-color: var(--surface-raised-base-active); + background-color: var(--input-base); + box-shadow: var(--shadow-xs-border-base); + } + + &:not([data-expanded]):focus { + background-color: transparent; box-shadow: none; } } @@ -72,12 +91,12 @@ } [data-component="select-content"] { - min-width: 160px; + min-width: 104px; max-width: 23rem; overflow: hidden; - border-radius: 8px; + border-radius: var(--radius-md); background-color: var(--surface-raised-stronger-non-alpha); - padding: 0; + padding: 4px; box-shadow: var(--shadow-xs-border); z-index: 60; @@ -92,7 +111,6 @@ overflow-x: hidden; display: flex; flex-direction: column; - padding: 4px; &:focus { outline: none; @@ -112,12 +130,12 @@ border-radius: 4px; cursor: default; - /* text-14-regular */ + /* text-12-medium */ font-family: var(--font-family-sans); - font-size: var(--font-size-base); + font-size: var(--font-size-small); font-style: normal; - font-weight: var(--font-weight-regular); - line-height: var(--line-height-large); + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); /* 166.667% */ letter-spacing: var(--letter-spacing-normal); color: var(--text-strong); @@ -152,6 +170,26 @@ } } +[data-component="select-content"][data-trigger-style="settings"] { + min-width: 160px; + border-radius: 8px; + padding: 0; + + [data-slot="select-select-content-list"] { + padding: 4px; + } + + [data-slot="select-select-item"] { + /* text-14-regular */ + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + font-style: normal; + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); + letter-spacing: var(--letter-spacing-normal); + } +} + @keyframes select-open { from { opacity: 0; diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx index e334ede42..b83f5f463 100644 --- a/packages/ui/src/components/select.tsx +++ b/packages/ui/src/components/select.tsx @@ -17,7 +17,7 @@ export type SelectProps = Omit>, "value" | " classList?: ComponentProps<"div">["classList"] children?: (item: T | undefined) => JSX.Element triggerStyle?: JSX.CSSProperties - triggerVariant?: "default" | "button" + triggerVariant?: "settings" } export function Select(props: SelectProps & Omit) { @@ -84,7 +84,7 @@ export function Select(props: SelectProps & Omit) {...others} data-component="select" data-trigger-style={local.triggerVariant} - placement="bottom-end" + placement={local.triggerVariant === "settings" ? "bottom-end" : "bottom-start"} gutter={4} value={local.current} options={grouped()} @@ -148,7 +148,7 @@ export function Select(props: SelectProps & Omit) }} - + @@ -158,6 +158,7 @@ export function Select(props: SelectProps & Omit) [local.class ?? ""]: !!local.class, }} data-component="select-content" + data-trigger-style={local.triggerVariant} >