Skip to content

feat: themed select, date and time pickers, colour swatches and calm skeletons (0.4.0) - #13

Merged
AmrMsCLL merged 5 commits into
mainfrom
feat/themed-controls
Oct 11, 2026
Merged

AmrMsCLL merged 5 commits into
mainfrom
feat/themed-controls

Conversation

@AmrMsCLL

@AmrMsCLL AmrMsCLL commented Oct 11, 2026 •

Copy link
Copy Markdown
Member

Themed form controls and layout fixes for the Strata UI overhaul, released as 0.4.0.

New components

  • Select: a themed listbox. Keyboard support (arrows, Home, End, Page keys, Enter, Escape, type-ahead) and aria-activedescendant. A hidden input keeps it working inside ordinary forms, including form.reset(). With searchable, it becomes a searchable combobox for long lists such as time zones and currencies.
  • DatePicker: a calendar in a popover. Weeks start on Monday by default, with arrow-key and Page Up/Down navigation, min/max, Today and Clear. It stores an ISO date in a hidden input. formatDay() is exported for showing ISO dates.
  • TimePicker: quarter-hour times built on the searchable Select. It keeps an unusual existing time and offers "No time" when optional.
  • ColorSwatches: a labelled radio group of the tag colours, replacing colour dropdowns.
  • SuggestField: a text field that suggests matches from a list as you type, in the same themed list. It replaces native <datalist> dropdowns.
  • Select, DatePicker and TimePicker take size="small" for toolbars and settings, and quiet for table cells, where the border only shows on hover.
  • useSettled(value): hands quick data straight through. Once a placeholder would have appeared (after 200 ms), it holds the data until the placeholder has been visible for 450 ms, so skeletons never flash for a frame. placeholderDelayMs moved here, and placeholderMinimumMs is new.
  • 16 icons: chevrons, a plain check mark, file, link, users, more, download, upload, external, clock, bookmark, board and tag.

Popovers open in the browser's top layer (Popover API) and are positioned against their trigger. They are never clipped by dialogs or scrolling containers, and flip upwards when there is no room below. The shared logic is lib/useAnchoredPanel.ts.

Theme

  • Scrollbars: thin, themed WebKit scrollbars without arrow buttons. scrollbar-color is now Firefox-only, because in Chromium it replaces the WebKit styles with arrowed native bars.
  • One control size: inputs, selects and the new triggers share 2.75 rem height, padding, font: inherit and line height. .field-label packs to the top, so a field next to one with a hint no longer stretches to a different height.
  • Checkboxes and radios follow the theme.
  • .panel-rows resets list margins and markers, and the new .panel-row gives every framed row the same padding.
  • Long option hints, such as full currency names, are truncated instead of squeezing the option label.
  • Toggle uses a .toggle-row class. Inside .panel-rows the toggles join into one framed group instead of separate cards touching each other.

Shell

  • The footer now sits inside the content column. The sticky sidebar spans the whole page instead of sliding up at the bottom, and the footer lines up with the content. The column pushes the footer down with justify-between, so the page itself still does not get flex-1, as the gutter fix in fix: keep the page gutter beside the sidebar #8 requires.

Version 0.4.0 (package, lock file and the README install line). After merging, tag v0.4.0 on the merge commit to publish the tarball.

Tests: test/controls.spec.tsx (Select, DatePicker, TimePicker, ColorSwatches, SuggestField, useSettled) and test/workspace.spec.tsx. Also ran test/fields.spec.tsx, test/shell.spec.tsx, test/popovers.spec.tsx and test/feedback.spec.tsx. Checked in the preview page: fields line up at one height, the time zone search filters, and the calendar opens on the chosen month.

@github-actions github-actions Bot added size/xl Over 600 changed lines, excluding lockfiles docs labels Oct 11, 2026
@AmrMsCLL
AmrMsCLL merged commit 1b1bcfa into main Oct 11, 2026
4 checks passed
@AmrMsCLL
AmrMsCLL deleted the feat/themed-controls branch October 11, 2026 10:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs size/xl Over 600 changed lines, excluding lockfiles

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant