Skip to content

Release v4.9.0

Choose a tag to compare

@github-actions github-actions released this 21 Sep 08:15
d4c7dd6

Summary

Four collection controls join @cratis/components/Common, so an application no longer hand-rolls the ones it always needs. Each takes its roles and keyboard behavior from React Aria and leaves the appearance to you through stable parts.

Added

  • ToggleGroup under @cratis/components/Common: a single-selection group of exclusive choices — a segmented control. It carries radiogroup/radio semantics rather than tablist/tab, because the choice is a value and not a panel. Arrow keys move focus and Space or Enter commits, so arrowing past an option never triggers the work behind it. Options take a label, an optional decorative icon and a disabled state; aria-labelledby, aria-describedby and invalid associate the group with a form field's label and error. Parts: root, option, icon, label (#287)
  • Tabs under @cratis/components/Common: a tab set where arrow keys and Home/End move the selection, the list holds a single tab stop, and every tab is wired to its panel through aria-controls. Tabs take a label, optional content and a disabled state. Parts: root, list, tab, panel (#287)
  • TagGroup under @cratis/components/Common: a group of removable values with an optional text entry. Enter and each configured separator commit the typed value, Backspace on an empty entry removes the last value, and pasting a separated list adds every value in it. Tags themselves are reachable with the arrow keys and removable with Backspace or Delete. Duplicates are refused unless allowDuplicates is set, editable={false} leaves a read-only set of removable tags, and removeLabel supplies a localized name for each remove action. Parts: root, list, tag, remove, input (#287)
  • Breadcrumbs under @cratis/components/Common: an ordered trail inside a navigation landmark whose last segment is the current page — it carries aria-current="page", has no destination and is out of the tab order. Segments take an href or an onNavigate for a router that owns navigation, and the separator is a slot. Parts: root, item, link, separator (#287)
  • Documentation for all four, including a table for choosing between ToggleGroup and Tabs, and their parts in the pass-through cheat sheet (#287)

Changed

  • The published stylesheet grows by one shared sheet for all four controls, measured at 208 014 raw and 32 571 gzip bytes against ceilings of 205 KiB and 32 KiB. Raw has room; gzip now has 197 bytes of headroom, so the next stylesheet to join the aggregate has to come with a reduction. Flagged for your judgement.

Notes

This branch also removes fileParallelism: false from Source's vitest configuration, which serialized the spec run to prevent a mock leak that isolate: true already prevents — 126s to 21s locally, and the whole-repository yarn ci from about 450s to 216s, verified across nine consecutive runs (#289). It changes nothing a consumer compiles against or observes, so it is not in the release note above.

CommandForm's ChipsField still uses its own implementation. Moving it onto TagGroup would rename its public part item to tag and add list, which breaks any consumer styling [data-cratis-part="item"] — that belongs in a major release rather than here. TagGroup is available to applications immediately, and the reasoning is recorded on #287.