Skip to main content
Back to changelog

Carousel and Skeleton updates

vortex v0.10.0: Carousel and Skeleton updates
Back to changelog

Carousel gains gallery and rail layouts, Skeleton builds shapes from content, and components align with the Vortex designs.

New features

  • Added CarouselGallery with overlay arrows, an indicator and responsive thumbnails at the bottom or start, and CarouselRail for content rails, with align to snap items to the start, center or end.
  • Added content-driven shapes to Skeleton: it builds shapes from rendered content at runtime, with a mask variant, server-rendered HTML support and SkeletonMeasureOptions.
  • Added loadingText to Button to show the label beside the spinner.
  • Added a primary tone to Toast.
  • Added support for wrapping the title row in Modal.Dismissible; the close button centers on the title's first line.
  • Added closeButtonRef to Dismissible.
  • Added responsive gap between the control and label to Checkbox and Radio.Item.
  • Added role to Floating to set the content role to dialog or tooltip.
  • Exported the TooltipContentProps type for Tooltip.

Improvements

  • Aligned Alert, Badge, Card, Checkbox, Radio, Switch, Slider, Tooltip, CommandMenu, Shortcut and dialog descriptions with the Vortex designs.
  • Improved list and Select items with regular typography, and rendered list item end icons and slots together.
  • Animated the Checkbox checkmark.
  • Improved Alert inline layout on small screens; pass role: undefined in attributes to disable announcements.
  • Improved Toast action defaults: tertiary xs buttons inline, or primary then tertiary sm buttons when stacked. Explicit button props are preserved.
  • Hid external carousel controls when nothing scrolls, and rendered them before measurement so server-rendered HTML includes them.
  • Improved carousel performance by measuring geometry once per pass.

Bug fixes

  • Fixed Checkbox losing its indeterminate state.
  • Fixed Popover hover accessibility and focus dismissal, shared Floating content roles with trigger semantics and cleaned up Floating focus.
  • Fixed carousel state and navigation when hidden, dragged to the end or stepped mid-animation.
  • Fixed selection menus keeping focus highlights after release.
  • Fixed Modal.Dismissible handling of blank children and the ZoomImage close motion.

Breaking changes

  • Required @vortexlabs/vortex-themes@^0.2.0. Components use its new spacing and border tokens.
  • Replaced Carousel with CarouselGallery for one item at a time and CarouselRail for content rails. Rename Carousel*Props types to CarouselGallery*Props or CarouselRail*Props; thumbnails and the indicator are only available on CarouselGallery, which always shows one item per view and no longer accepts itemsPerView, itemsPerScroll, align, Viewport gap or Item width. Removed padding from CarouselGallery.Thumbnail; thumbnails render their content edge to edge.
Before → After
// Before
<Carousel ariaLabel="Photos" itemsPerView={1}>
  <Carousel.Viewport>
    <Carousel.Item value="1">…</Carousel.Item>
    <Carousel.Indicator />
  </Carousel.Viewport>
  <Carousel.Thumbnails ariaLabel="Choose a photo">…</Carousel.Thumbnails>
</Carousel>

<Carousel ariaLabel="Projects">
  <Carousel.Viewport>
    <Carousel.Item value="1" width="300px">…</Carousel.Item>
  </Carousel.Viewport>
</Carousel>

// After
<CarouselGallery ariaLabel="Photos">
  <CarouselGallery.Viewport>
    <CarouselGallery.Item value="1">…</CarouselGallery.Item>
    <CarouselGallery.Indicator />
  </CarouselGallery.Viewport>
  <CarouselGallery.Thumbnails ariaLabel="Choose a photo">…</CarouselGallery.Thumbnails>
</CarouselGallery>

<CarouselRail ariaLabel="Projects">
  <CarouselRail.Viewport>
    <CarouselRail.Item value="1" width="300px">…</CarouselRail.Item>
  </CarouselRail.Viewport>
</CarouselRail>
  • Renamed color to tone on Avatar, Badge, Link and Breadcrumbs.Item. Renamed the Avatar variants default and faded to solid and subtle, the Badge variant fill to solid, and the Link tone gray to neutral-subtle.
  • Changed the default Link tone from primary to neutral; variant now controls underline visibility. Set tone="primary" to keep the previous color.
  • Renamed the error tone to critical on Alert and Toast.
Before → After
// Before
<Avatar initials="VX" color="primary" variant="faded" />
<Badge color="success" variant="fill">Live</Badge>
<Link href="/docs" color="gray">Docs</Link>
<Alert tone="error" title="Upload failed" />

// After
<Avatar initials="VX" tone="primary" variant="subtle" />
<Badge tone="success" variant="solid">Live</Badge>
<Link href="/docs" tone="neutral-subtle">Docs</Link>
<Alert tone="critical" title="Upload failed" />
  • Made Toast notifications dismissible by default. Pass closeAriaLabel to show, or closable: false to hide the close button.
  • Required closeAriaLabel on ZoomImage, and closeAriaLabel, previousAriaLabel and nextAriaLabel on ZoomImage.Group.
Before → After
// Before
toast.show({ title: "Changes saved" });
<ZoomImage src={src} alt="Product photo" />

// After
toast.show({ title: "Changes saved", closeAriaLabel: "Dismiss notification" });
<ZoomImage src={src} alt="Product photo" closeAriaLabel="Close image" />
  • Removed the tertiary close button variant from Dismissible and Modal.Dismissible; use plain, the new default, or overlay. Dismissible now requires onClose while the close button renders.