|Kit
Changelog

0.5.0

Breadcrumb, Tabs, Avatar and NavLink debut, with a uniform testId across the kit

Changes

v0.4.0…v0.5.0 on GitHub

7added

4changed

2fixed

AvatarNewViewBreadcrumbNewViewNavLinkNewViewTabsNewViewChoice Card Group2 changesViewSegment Group2 changesViewActionIcon1 changeView
  • added7
  • Breadcrumb

    New Breadcrumb component

    #62
  • Tabs

    New Tabs component, with a sliding pill indicator

    #60
  • Avatar

    New Avatar and AvatarGroup, with a color and initials derived from name

    #61
  • NavLink

    New NavLink and Navigation, rendered through any router via LinkComponentProvider

    #68
  • Kit

    A testId prop that renders data-testid on every component

    #66
  • DataTable

    paginationMode="rows" keeps the row range always visible and announces it on page change

    #56
  • Badge

    xs and xl sizes, with sm–lg aligned to the Figma spec

    #59
  • changed4
  • RadioGroupChoice Card GroupTreeSelect

    value and onChange narrow to the literal values of as const data, like Select

    #71
  • Choice Card Group

    Multiple-choice cards move focus with the arrow keys, and the group uses the kit's translucent surface

    #65
  • Segment Group

    The light and default trays use Input's translucent surface

    #63
  • ActionIcon

    Match Button's typography and light variant border

    #58
  • fixed2
  • SelectTagsInputNumber Input

    Wire the field's description and error to the control with aria-describedby and aria-errormessage

    #57
  • Slider

    Marks and thumb no longer jump outward after the first interaction

    #64

0.5.1

A Field's label names the real control inside it

0.4.0

Divider and AmbientBackground debut, floating surfaces take a brand tint, and Text and Title get heading sizes

On this page

ChangesAdded · 7Breadcrumb · New Breadcrumb componentTabs · New Tabs component, with a sliding pill indicatorAvatar · New Avatar and AvatarGroup, with a color and initials derived from nameNavLink · New NavLink and Navigation, rendered through any router via LinkComponentProviderA testId prop that renders data-testid on every componentDataTable · paginationMode="rows" keeps the row range always visible and announces it on page changeBadge · xs and xl sizes, with sm–lg aligned to the Figma specChanged · 4RadioGroup, Choice Card Group, TreeSelect, TreeMultiSelect · value and onChange narrow to the literal values of as const data, like SelectChoice Card Group · Multiple-choice cards move focus with the arrow keys, and the group uses the kit's translucent surfaceSegment Group · The light and default trays use Input's translucent surfaceActionIcon · Match Button's typography and light variant borderFixed · 2Select, TagsInput, Number Input, Password Input, Switch, Segment Group, Input, Textarea · Wire the field's description and error to the control with aria-describedby and aria-errormessageSlider · Marks and thumb no longer jump outward after the first interaction