add triggerStyle prop to Select and use it for font selector

This commit is contained in:
David Hill
2026-01-20 17:20:20 +00:00
parent 9ffb7141e5
commit c57491ba48
2 changed files with 4 additions and 0 deletions

View File

@@ -100,6 +100,7 @@ export const SettingsGeneral: Component = () => {
onSelect={(option) => option && settings.appearance.setFont(option.value)} onSelect={(option) => option && settings.appearance.setFont(option.value)}
variant="secondary" variant="secondary"
size="small" size="small"
triggerStyle={{ "font-family": monoFontFamily(settings.appearance.font()) }}
> >
{(option) => <span style={{ "font-family": monoFontFamily(option?.value) }}>{option?.label}</span>} {(option) => <span style={{ "font-family": monoFontFamily(option?.value) }}>{option?.label}</span>}
</Select> </Select>

View File

@@ -16,6 +16,7 @@ export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "
class?: ComponentProps<"div">["class"] class?: ComponentProps<"div">["class"]
classList?: ComponentProps<"div">["classList"] classList?: ComponentProps<"div">["classList"]
children?: (item: T | undefined) => JSX.Element children?: (item: T | undefined) => JSX.Element
triggerStyle?: JSX.CSSProperties
} }
export function Select<T>(props: SelectProps<T> & ButtonProps) { export function Select<T>(props: SelectProps<T> & ButtonProps) {
@@ -32,6 +33,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
"onHighlight", "onHighlight",
"onOpenChange", "onOpenChange",
"children", "children",
"triggerStyle",
]) ])
const state = { const state = {
@@ -127,6 +129,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
as={Button} as={Button}
size={props.size} size={props.size}
variant={props.variant} variant={props.variant}
style={local.triggerStyle}
classList={{ classList={{
...(local.classList ?? {}), ...(local.classList ?? {}),
[local.class ?? ""]: !!local.class, [local.class ?? ""]: !!local.class,