Beta Preview

Release Notes

v0.11.0

New Components

Updates

  • ComboBox: Fix empty state rendering when no items match the current query
  • Picker: Fix erroneous dropdown outline when opening the Picker via click
  • Tabs: Support collapse behavior on Tabs when customizing the layout

v0.10.0

Font update

This release introduces a new font for Spectrum 2: Adobe Clean Spectrum VF. This is an evolution of the previous Adobe Clean, with slightly updated metrics allowing for better vertical centering. Along with this update, the S2 Provider component now automatically handles loading the fonts needed for the user's language. The new font does not affect previous versions of React Spectrum.

If you previously used page.css without a Provider, you'll need to add a Provider around your app to load the fonts. See the updated docs for details.

New Components

Updates

  • CardView: Fix ActionBar from not scrolling
  • ActionButton: Fix avatar-only ActionButtons to have square dimensions
  • Tabs: Improve selection indicator animation, fix collasped tabs
  • ProgressCircle: Add track outline in High Contrast Mode
  • Switch: Fix the toggle in RTL locales
  • TreeView: Support async loading

v0.9.1

Updates

  • Button: Fix focus visible styles from being applied on standard focus
  • ContextualHelp: Update width to match Spectrum designs
  • Tabs: Update selection indicator when tab text changes
  • TagGroup: Fix focus visible styles from being applied on standard focus

v0.9.0

Updates

  • Combobox: Support for virtualization and async loading
  • Dialog: Update sizes
  • Picker: Support for virtualization and async loading
  • Popover: Add triggerRef prop
  • TableView: Support custom menus in columns
  • Apply position: relative to Radio and Checkbox to prevent layout jumps

UNSAFE_className Typescript Error

Style macros passed to UNSAFE_className will now result in a TypeScript error. This is not allowed because UNSAFE_className is appended to the component’s own styles, not merged. For example, if you pass a style macro class that sets a property but the component also has a class setting the same property, both will be applied and result in undefined behavior depending on the order the CSS was loaded on the page.

We strongly discourage using UNSAFE_className because it results in inconsistent UIs and hard to maintain code. Instead, use React Aria Components with the S2 style macro to create custom components. Safe style properties can be passed to the styles prop of an S2 component.

Style macro updates

We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between versions. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version.

We also made some changes to the available style macro values.

  • Reduced the default spacing scale so it only goes up to 96px. Other values can be used via the space() macro
  • Switched to rems for media queries. Since component sizes scale with rems, breakpoints need to match.
  • Switch to px instead of rems for padding and absolute positioning. This avoids adding extra whitespace that causes additional text wrapping.
  • Used rems and touch scaling for icon sizes, and added t-shirt size prop
  • Added support for percentages and viewport relative units (e.g. vw)
  • Added support for arbitrary aspect ratio values
  • Added support for calc and other math functions
  • Added support for css-wide keywords like inherit
  • Colors no longer include default hover/press/focus states (e.g. backgroundColor: 'accent'). Use the baseColor macro instead.
  • The control value has been removed from fontSize, borderRadius, width, height, and other sizing properties. Use explicit values for each t-shirt size instead.
  • Fixed spelling of disc in listStyleType (was dist)

v0.8.0

New Components

Updates

  • Pass DOM Props to ButtonGroup
  • Prevent Dividers from growing or shrinking in a flex container by default
  • Export Autocomplete
  • Export SortDescriptor type

Disclosure Design updates

Spectrum has updated the S disclosure design. As a result, all other sizes (M, L, XL) now map to one size smaller than before. See PR for details.

v0.7.0

New Components

Updates

  • Badge: Add overflowMode prop, fix icon alignment, update typo from variant="charteuse" to variant="chartreuse"
  • CardView: Fix styling when using renderActionBar
  • Image: Add fetchPriority prop
  • Menu: Fix menu item's focus rings from exceeding popover boundaries
  • Tabs: Add collapse behavior
  • Remove all: revert-layer from style macro generated CSS to fix Safari issues
  • Remove references to CSS flex shorthand. Please use flexGrow, flexBasis, and flexShrink instead.

Codemods

  • Update S2 icon migration map
  • Handle margin/padding shorthands in style props codemod

Important CSS update

In this release, we have made significant changes to the way our Style Macro generates CSS in order to fix issues with Safari. The Style Macro uses CSS Cascade Layers to avoid CSS specificity and ordering issues. However, this means global CSS declared outside a @layer, such as CSS resets, will take precedence over S2's CSS. To avoid this, we previously used all: revert-layer. Unfortunately, due to numerous bugs in Safari 18, this caused rendering issues in our components.

To fix these Safari issues, we have removed all: revert-layer in this release. This means that global CSS will now take precedence over S2's styles. If you are using a CSS reset on the same page as S2 components, you will need to remove it or put it in a @layer of its own. See the docs for more information.

If you are using a version older than React Spectrum v3 on the same page, you must update to the latest version. See the Adobe internal documentation for more details.

v0.6.0

New Components

Updates

Codemods

  • Added TableView codemods

v0.5.0

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

v0.4.0

New components

Updates

  • ProgressBar: Support side label, update edges to be rounded, and support custom widths
  • ProgressCircle: Update edges to be rounded
  • Badge: Add subtle and outline fill variants
  • Breadcrumbs: Add collapse behavior
  • Button: Add support for pending state
  • Update Spectrum Tokens to v46

Codemods

  • Handle legacy Link API
  • Remove Section and Items imports if not used elsewhere in file
  • Support Badge
  • Support Well
  • Support icons
  • Fix links and install step

v0.3.0

New components

Updates

  • Add collapse and action support to TagGroup
  • Add support for new Adobe Clean variable font
  • Updated workflow icons – PLEASE NOTE: some icons changed names in this release.
  • Add CLI and Parcel plugins to build custom icons and illustrations
  • Add translations for all components
  • Add slot contexts to all S2 components
  • Fix menu z-index
  • Fix overlay trigger press scaling and menu description color
  • Fix ComboBox and NumberField custom width
  • Fix padding on fields with no visible label
  • Add ContextualHelp Storybook stories to components missing them

v0.2.0

New components

Updates

  • ESBuild starter added
  • InlineAlert iconography updated
  • ContextualHelp added to all form field components
  • Fixed custom widths for field components
  • Spectrum tokens updated
  • CSS processing updated so output size is smaller

See the updated API changelog for a full list of changes since RSP v3.

v0.1.0

New components

Updates

  • TagGroup now supports avatars, images, error message and description help text, and improved hover/focus styling
  • Updated React Aria Components to v1.2.0
  • Fixed global styles such as CSS resets from applying to Spectrum 2 elements. Note that any CSS rule referenced from an UNSAFE_className prop must now be wrapped in @layer UNSAFE_overrides. See the docs for more details.
  • The style macro will now error if it is called without importing with {type: 'macro'}. Previously it would fail to apply styles silently. This should help with debugging.

See the updated API changelog for a full list of changes since RSP v3.