Beta Preview
Releases

v0.5.0

Version 0.5.0 includes major updates to Dialog and DialogTrigger APIs with four new dialog components: Dialog, FullscreenDialog, CustomDialog, and Popover. This release also improves style macro documentation and adds support for arbitrary pixel sizing.

In this release we have updated our Dialog and DialogTrigger APIs to improve layout flexibility for custom dialogs and popovers. Dialog has been split into four components:

  • Dialog – a modal dialog with a standard layout with slots for the heading, content, hero image, button group, etc. This corresponds to the previous type="modal" API.
  • FullscreenDialog – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous type="fullscreen" and type="fullscreenTakeover" APIs.
  • CustomDialog – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
  • Popover – Popovers no longer support the previous dialog-style layout, which was rarely needed in recent apps. In addition, popover now has a reduced amount of padding by default, which was a common request.

In addition, several DialogTrigger props have moved to the above children:

  • type is removed. Use one of the above components instead.
  • isKeyboardDismissDisabled moved to Dialog, FullscreenDialog, and CustomDialog
  • isDismissable was renamed to isDismissible (fixed spelling), and moved to Dialog and CustomDialog
  • hideArrow, offset, crossOffset, containerPadding, placement, and shouldFlip moved to Popover

We've also continued to iterate on developer experience based on your feedback. Documentation on style macro usage with regards to colors and typography have been added to help clarify these common use cases. Style macro properties like width and height now allow for arbitrary pixel size values, please see the docs for more information. Finally, documentation on optimizing CSS bundling have also been added to help you generate a properly optimized output when using the bundler of your choice.

New components

Updates

  • Accordion: Add support for adjacent sibling elements in header
  • ActionButton: Add support for Avatars in ActionButtons
  • Dialog: See above for a summary of the changes to Dialog and Dialog adjacent components.
  • Disclosure: Add support for adjacent sibling elements in header
  • DropZone: Add t-shirt sizing
  • Menu: Add support for separate user defined selection modes per MenuSection
  • Meter: Add label positioning support
  • Update Spectrum Tokens to v53
  • Allow arbitrary pixel sizes for style macro sizing properties (e.g. width, height)

Codemods

  • Support Dialog updates
  • Support ActionGroup -> ActionButtonGroup/ToggleButtonGroup
  • Support arbitrary pixel sizing for style macro sizing properties
  • Update S1 to S2 icon mapping