Repository navigation
feat: themed select, date and time pickers, colour swatches and calm skeletons (0.4.0) - #13
Merged
Merged
Conversation
…skeletons (0.4.0)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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) andaria-activedescendant. A hidden input keeps it working inside ordinary forms, includingform.reset(). Withsearchable, 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 searchableSelect. 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,DatePickerandTimePickertakesize="small"for toolbars and settings, andquietfor 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.placeholderDelayMsmoved here, andplaceholderMinimumMsis new.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
scrollbar-coloris now Firefox-only, because in Chromium it replaces the WebKit styles with arrowed native bars.font: inheritand line height..field-labelpacks to the top, so a field next to one with a hint no longer stretches to a different height..panel-rowsresets list margins and markers, and the new.panel-rowgives every framed row the same padding.Toggleuses a.toggle-rowclass. Inside.panel-rowsthe toggles join into one framed group instead of separate cards touching each other.Shell
justify-between, so the page itself still does not getflex-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.0on the merge commit to publish the tarball.Tests:
test/controls.spec.tsx(Select, DatePicker, TimePicker, ColorSwatches, SuggestField, useSettled) andtest/workspace.spec.tsx. Also rantest/fields.spec.tsx,test/shell.spec.tsx,test/popovers.spec.tsxandtest/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.