发布

RSS 订阅源

2.2.5-6129 fa1a70636c

比较
[OPIK-7278] [FE] refactor: migrate LoadableSelectBox to the new design system (v2) (#7551)

frostbyte_neo 发布于 2026-07-23 13:22:24 +00:00
- [OPIK-7278] [FE] refactor: migrate LoadableSelectBox to the new design system (v2)
Fork the searchable single/multi-select popover into a v2-owned component
(src/v2/components/LoadableSelectBox) and align it visually with the migrated
DS Select and the Project/Workspace selectors, without touching v1.

Visual changes (fork):
- Trigger chevron -> DS token (text-foreground/opacity-50, size-3.5)
- Option rows h-10/px-4 -> h-8/px-3; selected single-select row filled
  (bg-primary-100/text-primary); group headers text-light-slate
- In-popover search field -> compact dimension="sm" (matches Project/Workspace)
- Optional per-option icon (local option type; opt-in, unused by default)
Consumers:
- Repoint 12 v2 usages to the fork; normalize the create/action footer to
  (AddToDatasetDialog raw div -> ListAction, fixes a11y)
Behavior is unchanged (client-side search preserved). v1 and the shared
LoadableSelectBox are untouched. tsc/eslint/vitest green.

Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7278] [FE] fix: align dropdown search + dividers 1:1 with Project/Workspace selectors
- Render the in-popover search inline (px-0.5) instead of absolutely
  positioned, so it left-aligns with the option rows (removes the pt-11
  spacer hack).
- Switch dividers from bg-border to the lighter bg-muted with -mx-px
  (search separator, group separator, select-all separator, load-more
  border, and the actionPanel separators in the 3 create-selects) to match
  the reference selectors' divider color.
Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
- [OPIK-7278] [FE] fix: drop check icon + leading gap on selected single-select rows
Design feedback: the selected single-select option is already conveyed by
the filled blue row (bg-primary-100/text-primary), so the leading Check icon
(and the min-w-4 spacer reserved for it on unselected rows) is redundant.
Remove both so all single-select labels sit flush at the 12px row padding.
Multiselect keeps its checkbox. Verified e2e (dataset selector).

Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7278] [FE] fix: unify select list-item x-padding to 12px
Design feedback: option rows in the base Select (e.g. the Filters "Column"
picker) used 8px horizontal padding, inconsistent with the 12px rows of the
migrated dropdowns. Bump the base SelectItem padding px-2 -> px-3 so all
select list items share 12px x-padding. Single-line rows are already 32px
tall (py-1.5 + text-sm), so no height change is needed.

Note: this is the shared base Select primitive, so it affects every Select
across v1 and v2, not only v2.

Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7278] [FE] perf: memoize filteredSelectedCount (Baz review)
Addresses the Baz "extra list scan on every render" finding: filteredSelectedCount
re-filtered filteredOptions on every render (hot path when the popover is open /
typing). Wrap it in useMemo keyed on multiselect/filteredOptions/selectedValuesSet
so it recomputes only when its inputs change. Pure perf, no behavior change.

Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7278] [FE] a11y + typing cleanups from Baz review
In-scope fixes for code introduced by this v2 fork:
- a11y: after dropping the check icon, single-select selection was conveyed by
  color only. Add role="listbox"/role="option" + aria-selected on the rows
  (and aria-multiselectable for the multiselect case) so the selected option is
  exposed to screen readers / high-contrast / keyboard — no visual change.
- Widen renderTitle callbacks to LoadableSelectBoxOption so v2 consumers can
  read the new optional icon field without casting.
- Rename NoOptions' props type SelectBoxProps -> NoOptionsProps.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
- [OPIK-7278] [FE] fix: neutral create-action footer in select boxes
The "Add {entity}" create footers rendered ListAction with no variant, so they
fell back to the blue primary style. Match the Project selector's footer by
passing variant="default" (neutral text-foreground) on the create actions in
AddToDatasetDialog, FeedbackDefinitionsSelectBox, and PromptsSelectBox.

Co-Authored-By: Claude Fable 5 noreply@anthropic.com

Co-authored-by: Claude Opus 4.8 (1M context) noreply@anthropic.com
下载附件
- 源代码 (ZIP)
- 源代码 (TAR.GZ)

0 发布 8,340 Git 标签

[OPIK-7278] [FE] refactor: migrate LoadableSelectBox to the new design system (v2) (#7551)