Skip to main content
Back to changelog

Image galleries and compound groups

vortex v0.8.0: Image galleries and compound groups
Back to changelog

ZoomImage galleries, labelled Checkbox and Radio groups, compound Avatar groups, and new Tabs sizes, slots and orientation.

New features

  • Added ZoomImage.Group and ZoomImage.Item for image galleries with a shared viewer, previous and next controls, wrapping keyboard navigation, RTL support, an image counter and announced positions.
  • Added gallery refs with open(index?) and close(), item refs with open() and close(), and onIndexChange, which reports null when the viewer closes.
  • Added a gallery ripple animation, on by default and configurable with rippleZoom. It respects reduced motion.
  • Added GroupLabel and GroupDescription to Checkbox and Radio groups, with automatic label and description linkage. Groups also accept id, ariaLabel, className and fieldset attributes, including refs.
  • Added stretched to checkbox and radio items so the click target can fill a parent such as a card.
  • Exported useCheckboxGroup, useRadioGroup, and the new item, group label and group description prop types.
  • Added Avatar.Group with Avatar.Item children, responsive xs–md sizes, shared rounding and an optional limit with a +N overflow avatar to Avatar.
  • Added size="sm", disabled items, an item endSlot and a fixed list endSlot to Tabs. Underline tabs support vertical orientation and color="primary".
  • Added the --vortex-interactive-inset-focus-color and --vortex-interactive-inset-focus-offset overrides for the Interactive inset focus ring.

Improvements

  • Refreshed the ZoomImage viewer with a theme-aware backdrop, motion-token durations, a softer close and thumbnail crossfades. Thumbnails keep their borders and corner radii while zoomed.
  • Improved Tabs keyboard access: arrow keys wrap, skip disabled items and scroll the focused tab into view in LTR and RTL. Tabs stay reachable when the selected item is disabled or missing, and Tabs with name expose radio group semantics.
  • Aligned Avatar initials, title and helper text sizes with the design.

Bug fixes

  • Fixed ZoomImage overflowing the viewport on phones and after resizing, and zooming the frame instead of the picture for contain and scale-down images.
  • Fixed the gallery viewer drifting out of sync with updated or removed items. It skips disabled or broken images and closes when the active item unmounts.
  • Fixed focus after closing ZoomImage: it returns to the opener or an available thumbnail, and stays in the viewer when navigation controls disappear.
  • Fixed thumbnail IDs, refs and load handlers leaking onto the zoomed image, and the viewer using the thumbnail sizes instead of a larger image.
  • Fixed missing ZoomImage focus rings in keyboard mode and a duplicate focusable close target. Removed the CommandMenu search input outline.
  • Fixed checkboxes and radios inheriting a surrounding group's name, selection or callbacks. Group and item disabled states now apply consistently.
  • Fixed Select multi-select checkmarks rendering nested checkbox inputs.
  • Fixed Avatar not falling back to initials or an icon when its image fails, including before hydration. The accessible name is kept across fallbacks.
  • Fixed Tabs server rendering without a selected tab, IDs breaking on special characters, and aria-controls pointing at unmounted panels.
  • Fixed Tabs overflow fades, selection indicators measured while hidden, and a numeric zero in the list end slot not rendering.

Breaking changes

  • Removed standalone radios. Use Radio.Item inside Radio.Group, move name and the selection to the group, and replace RadioProps with RadioItemProps. Each item needs visible children or ariaLabel.
Before → after
<Radio name="plan" value="pro" />
<Radio.Group name="plan">
  <Radio.Item value="pro">Pro</Radio.Item>
</Radio.Group>
  • Replaced Checkbox inside Checkbox.Group with Checkbox.Item value="…". The group owns each item's name and checked state; plain Checkbox remains for standalone controls.
  • Checkbox and Radio groups now render a <fieldset>. Review layout selectors, and name each group with GroupLabel, ariaLabel or attributes["aria-labelledby"].
  • Replaced the AvatarGroup export and its members prop with Avatar.Group ariaLabel="…" containing Avatar.Item children.
Before → after
<AvatarGroup members={members} />
<Avatar.Group ariaLabel="Team">
  <Avatar.Item src={ada.photo} alt="Ada Lovelace" />
</Avatar.Group>
  • Required Avatar.Item inside Avatar.Root and Avatar.Group; a standalone Avatar there now throws. Avatar.Title, Avatar.HelperText and Avatar.Content require Avatar.Root.
  • Limited Avatar.Root to sizes xs–xl; standalone Avatar keeps 2xl. Icon avatars and initials with onlineIndicator now require alt.
  • Renamed Tabs direction="row" and direction="column" to orientation="horizontal" and orientation="vertical". Vertical orientation requires variant="underline", and the ghost variant is removed.
  • Required an explicit Tabs defaultValue when items render through custom components or load after the first render.
  • Renamed ZoomImage isDisabled to disabled and removed fallback. Missing or failed images now show the standard placeholder and can't be zoomed.
  • Changed Text to always render a <div> when as is omitted. Set as="h1"–as="h6" wherever heading semantics are needed.