|Kit
Changelog

0.17.0

The kit goes public on npm, Timeline shows progress, and Avatar.Group stacks vertically

Spotlight

Timeline#268

Show progress through the steps

Pass active, the index of the current step: it gets aria-current="step", and every step after it dims to pending. Each line blends from its dot's color into the next.

View Timeline
  1. libftComplete.
  2. ft_printfComplete.
  3. get_next_lineActive — aria-current="step".
  4. minitalkPending — a bare ring.
  5. pipexPending — colored items dim too.
  6. philosophersPending — the gradient flattens.
Avatar#267

Stack avatars vertically

Avatar.Group takes orientation="vertical", with the same notched overlap as the horizontal stack.

View Avatar
AL
GH
ZE
+4
AL
GH
ZE
+4

Changes

v0.16.0…v0.17.0 on GitHub

1 breaking change

  • Timeline:

    Remove the subtle and light item variants

See in the list

3added

2changed

5fixed

Choice Card Group2 changesViewTimeline2 changesViewAvatar1 changeView
  • breaking1
  • Timeline

    Remove the subtle and light item variants

    #268
  • added3
  • Kit

    Published on the public npm registry as @42-central/ui-react, with @42-central/vite-plugin-theme beside it

    #257
  • Timeline

    active marks the current step, and each line blends from its dot's color into the next

    #268
  • Avatar

    Avatar.Group stacks vertically with orientation="vertical"

    #267
  • changed2
  • Breadcrumb

    Crumbs truncate to fit the container, with CSS alone

    #264
  • Schedule

    The column packer floors each event's duration

    #269
  • fixed5
  • CheckboxSwitchSelect

    Keep the visually hidden input contained inside the control

    #265
  • Kit

    Paint the focus ring's offset in the page's brand ramp

    #261
  • Badge

    The light variant tints from --c-solid, as in Figma

    #262
  • Choice Card Group

    Soften the filled variant's selected card

    #271
  • Choice Card Group

    Centre the indicator on the title's first line

    #270

0.17.1

Schedule and Calendar mirror in right-to-left locales, and the drag ghost slides between days

0.16.0

ButtonSelect and ButtonMultiSelect debut, Popover gains a hover mode, and Schedule selects several chips

On this page

SpotlightChangesBreaking · 1Timeline · Remove the subtle and light item variantsAdded · 3Published on the public npm registry as @42-central/ui-react, with @42-central/vite-plugin-theme beside itTimeline · active marks the current step, and each line blends from its dot's color into the nextAvatar · Avatar.Group stacks vertically with orientation="vertical"Changed · 2Breadcrumb · Crumbs truncate to fit the container, with CSS aloneSchedule · The column packer floors each event's durationFixed · 5Checkbox, Switch, Select, Pin Input, File Upload · Keep the visually hidden input contained inside the controlPaint the focus ring's offset in the page's brand rampBadge · The light variant tints from --c-solid, as in FigmaChoice Card Group · Soften the filled variant's selected cardChoice Card Group · Centre the indicator on the title's first line