feat: update select transition, popover, dropdown

2026-04-24 14:55:19 +00:00 · 2026-02-01 22:15:36 +01:00
parent cde97951a5
commit 86a82a0cdc
4 changed files with 143 additions and 67 deletions
--- a/packages/ui/src/components/dropdown-menu.css
+++ b/packages/ui/src/components/dropdown-menu.css
@@ -2,26 +2,29 @@
 [data-component="dropdown-menu-sub-content"] {
  min-width: 8rem;
  overflow: hidden;
+  border: none;
  border-radius: var(--radius-md);
-  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  box-shadow: var(--shadow-xs-border);
  background-clip: padding-box;
  background-color: var(--surface-raised-stronger-non-alpha);
  padding: 4px;
-  box-shadow: var(--shadow-md);
-  z-index: 50;
+  z-index: 100;
  transform-origin: var(--kb-menu-content-transform-origin);

-  &:focus,
-  &:focus-visible {
+  &:focus-within,
+  &:focus {
    outline: none;
  }

-  &[data-closed] {
-    animation: dropdown-menu-close 0.15s ease-out;
+  animation: dropdownMenuContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
  }

  &[data-expanded] {
-    animation: dropdown-menu-open 0.15s ease-out;
+    pointer-events: auto;
+    animation: dropdownMenuContentShow var(--transition-duration) var(--transition-easing) forwards;
  }
 }

@@ -38,18 +41,22 @@
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    cursor: default;
-    user-select: none;
    outline: none;

    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-large);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--text-strong);

-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
+    transition-property: background-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+    user-select: none;
+
+    &:hover {
+      background-color: var(--surface-raised-base-hover);
    }

    &[data-disabled] {
@@ -61,6 +68,8 @@
  [data-slot="dropdown-menu-sub-trigger"] {
    &[data-expanded] {
      background: var(--surface-raised-base-hover);
+      outline: none;
+      border: none;
    }
  }

@@ -102,24 +111,24 @@
  }
 }

-@keyframes dropdown-menu-open {
+@keyframes dropdownMenuContentShow {
  from {
    opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
  }
  to {
    opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
  }
 }

-@keyframes dropdown-menu-close {
+@keyframes dropdownMenuContentHide {
  from {
    opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
  }
  to {
    opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
  }
 }
--- a/packages/ui/src/components/popover.css
+++ b/packages/ui/src/components/popover.css
@@ -15,16 +15,35 @@

  transform-origin: var(--kb-popover-content-transform-origin);

-  &:focus-within {
-    outline: none;
-  }
+  animation: popoverContentHide var(--transition-duration) var(--transition-easing) forwards;

-  &[data-closed] {
-    animation: popover-close 0.15s ease-out;
+  @starting-style {
+    animation: none;
  }

  &[data-expanded] {
-    animation: popover-open 0.15s ease-out;
+    pointer-events: auto;
+    animation: popoverContentShow var(--transition-duration) var(--transition-easing) forwards;
+  }
+
+  [data-origin-top-right] {
+    transform-origin: top right;
+  }
+
+  [data-origin-top-left] {
+    transform-origin: top left;
+  }
+
+  [data-origin-bottom-right] {
+    transform-origin: bottom right;
+  }
+
+  [data-origin-bottom-left] {
+    transform-origin: bottom left;
+  }
+
+  &:focus-within {
+    outline: none;
  }

  [data-slot="popover-header"] {
@@ -75,24 +94,39 @@
  }
 }

-@keyframes popover-open {
+@keyframes popoverContentShow {
  from {
    opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
  }
  to {
    opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
  }
 }

-@keyframes popover-close {
+@keyframes popoverContentHide {
  from {
    opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
  }
  to {
    opacity: 0;
-    transform: scale(0.96);
+    transform: scaleY(0.95);
+  }
+}
+
+[data-component="model-popover-content"] {
+  transform-origin: var(--kb-popper-content-transform-origin);
+  pointer-events: none;
+  animation: popoverContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
+  }
+
+  &[data-expanded] {
+    pointer-events: auto;
+    animation: popoverContentShow var(--transition-duration) var(--transition-easing) forwards;
  }
 }
--- a/packages/ui/src/components/select.css
+++ b/packages/ui/src/components/select.css
@@ -1,7 +1,13 @@
 [data-component="select"] {
  [data-slot="select-select-trigger"] {
-    padding: 0 4px 0 8px;
+    display: flex;
+    padding: 4px 8px !important;
+    align-items: center;
+    justify-content: space-between;
    box-shadow: none;
+    transition-property: background-color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);

    [data-slot="select-select-trigger-value"] {
      overflow: hidden;
@@ -15,10 +21,10 @@
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
-      color: var(--text-weak);
-      transition: transform 0.1s ease-in-out;
+      color: var(--icon-base);
    }

+    &:hover,
    &[data-expanded] {
      &[data-variant="secondary"] {
        background-color: var(--button-secondary-hover);
@@ -30,13 +36,13 @@
        background-color: var(--icon-strong-active);
      }
    }
-
+    &:not([data-expanded]):focus,
    &:not([data-expanded]):focus-visible {
      &[data-variant="secondary"] {
        background-color: var(--button-secondary-base);
      }
      &[data-variant="ghost"] {
-        background-color: var(--surface-raised-base-hover);
+        background-color: transparent;
      }
      &[data-variant="primary"] {
        background-color: var(--icon-strong-base);
@@ -46,10 +52,10 @@

  &[data-trigger-style="settings"] {
    [data-slot="select-select-trigger"] {
-      padding: 6px 6px 6px 12px;
+      padding: 6px 6px 6px 10px;
      box-shadow: none;
      border-radius: 6px;
-      min-width: 160px;
+      field-sizing: content;
      height: 32px;
      justify-content: flex-end;
      gap: 12px;
@@ -61,6 +67,7 @@
        white-space: nowrap;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-regular);
+        padding: 4px 8px 4px 4px;
      }
      [data-slot="select-select-trigger-icon"] {
        width: 16px;
@@ -91,17 +98,26 @@
 }

 [data-component="select-content"] {
-  min-width: 104px;
+  min-width: 8rem;
  max-width: 23rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--surface-raised-stronger-non-alpha);
  padding: 4px;
  box-shadow: var(--shadow-xs-border);
-  z-index: 60;
+  z-index: 50;
+  transform-origin: var(--kb-popper-content-transform-origin);
+  pointer-events: none;
+
+  animation: selectContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
+  }

  &[data-expanded] {
-    animation: select-open 0.15s ease-out;
+    pointer-events: auto;
+    animation: selectContentShow var(--transition-duration) var(--transition-easing) forwards;
  }

  [data-slot="select-select-content-list"] {
@@ -111,43 +127,38 @@
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
-
    &:focus {
      outline: none;
    }
-
    > *:not([role="presentation"]) + *:not([role="presentation"]) {
      margin-top: 2px;
    }
  }
-
  [data-slot="select-select-item"] {
    position: relative;
    display: flex;
    align-items: center;
-    padding: 2px 8px;
+    padding: 4px 8px;
    gap: 12px;
-    border-radius: 4px;
-    cursor: default;
+    border-radius: var(--radius-sm);

    /* text-12-medium */
    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-large); /* 166.667% */
    letter-spacing: var(--letter-spacing-normal);
-
    color: var(--text-strong);

-    transition:
-      background-color 0.2s ease-in-out,
-      color 0.2s ease-in-out;
+    transition-property: background-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
    outline: none;
    user-select: none;

-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
+    &:hover {
+      background-color: var(--surface-raised-base-hover);
    }
    &[data-disabled] {
      background-color: var(--surface-raised-base);
@@ -160,6 +171,11 @@
      margin-left: auto;
      width: 16px;
      height: 16px;
+      color: var(--icon-strong-base);
+
+      svg {
+        color: var(--icon-strong-base);
+      }
    }
    &:focus {
      outline: none;
@@ -171,13 +187,9 @@
 }

 [data-component="select-content"][data-trigger-style="settings"] {
-  min-width: 160px;
+  field-sizing: content;
  border-radius: 8px;
-  padding: 0;
-
-  [data-slot="select-select-content-list"] {
-    padding: 4px;
-  }
+  padding: 0 0 0 4px;

  [data-slot="select-select-item"] {
    /* text-14-regular */
@@ -190,13 +202,24 @@
  }
 }

-@keyframes select-open {
+@keyframes selectContentShow {
  from {
    opacity: 0;
-    transform: scale(0.95);
+    transform: scaleY(0.95);
  }
  to {
    opacity: 1;
-    transform: scale(1);
+    transform: scaleY(1);
+  }
+}
+
+@keyframes selectContentHide {
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.95);
  }
 }
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -1,8 +1,10 @@
 import { Select as Kobalte } from "@kobalte/core/select"
-import { createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
+import { createMemo, createSignal, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
 import { pipe, groupBy, entries, map } from "remeda"
+import { Show } from "solid-js"
 import { Button, ButtonProps } from "./button"
 import { Icon } from "./icon"
+import { MorphChevron } from "./morph-chevron"

 export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "onSelect" | "children"> & {
  placeholder?: string
@@ -38,6 +40,8 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
    "triggerVariant",
  ])

+  const [isOpen, setIsOpen] = createSignal(false)
+
  const state = {
    key: undefined as string | undefined,
    cleanup: undefined as (() => void) | void,
@@ -85,7 +89,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
      data-component="select"
      data-trigger-style={local.triggerVariant}
      placement={local.triggerVariant === "settings" ? "bottom-end" : "bottom-start"}
-      gutter={4}
+      gutter={8}
      value={local.current}
      options={grouped()}
      optionValue={(x) => (local.value ? local.value(x) : (x as string))}
@@ -115,7 +119,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
                : (itemProps.item.rawValue as string)}
          </Kobalte.ItemLabel>
          <Kobalte.ItemIndicator data-slot="select-select-item-indicator">
-            <Icon name="check-small" size="small" />
+            <Icon name="check" size="small" />
          </Kobalte.ItemIndicator>
        </Kobalte.Item>
      )}
@@ -124,6 +128,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
        stop()
      }}
      onOpenChange={(open) => {
+        setIsOpen(open)
        local.onOpenChange?.(open)
        if (!open) stop()
      }}
@@ -149,7 +154,12 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
          }}
        </Kobalte.Value>
        <Kobalte.Icon data-slot="select-select-trigger-icon">
-          <Icon name={local.triggerVariant === "settings" ? "selector" : "chevron-down"} size="small" />
+          <Show when={local.triggerVariant === "settings"}>
+            <Icon name="selector" size="small" />
+          </Show>
+          <Show when={local.triggerVariant !== "settings"}>
+            <MorphChevron expanded={isOpen()} />
+          </Show>
        </Kobalte.Icon>
      </Kobalte.Trigger>
      <Kobalte.Portal>
@@ -166,4 +176,4 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
      </Kobalte.Portal>
    </Kobalte>
  )
-}
+}