.storybook-s2/docs/Release Notes.mdx
import {Release030Intro} from './Release030Intro.jsx'; import {MDXLayout} from './MDXLayout'; export default MDXLayout;
ColorLoupe position in RTL localespage.css styles to the Shadow DOMThe Popover component has been updated to better support custom styling. To
remove the preset padding, use the new padding prop and wrap your Popover content
in a custom div with your desired styling.
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.
triggerRef propposition: relative to Radio and Checkbox to prevent layout jumpsStyle 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.
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.
space() macrocalc and other math functionsinheritbackgroundColor: 'accent'). Use the baseColor macro instead.control value has been removed from fontSize, borderRadius, width, height, and other sizing properties. Use explicit values for each t-shirt size instead.disc in listStyleType (was dist)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.
overflowMode prop, fix icon alignment, update typo from variant="charteuse" to variant="chartreuse"renderActionBarfetchPriority propall: revert-layer from style macro generated CSS to fix Safari issuesflex shorthand. Please use flexGrow, flexBasis, and flexShrink instead.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.
genai and premium gradient variantshideLinkOutIcon prop, update alignment of items in different sections, and show checkmark on selected items that are links.staticColor="auto" option to ActionButton, ToggleButton, Divider, Meter, ProgressBar, and LinkisRequired within a FormIn 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:
type="modal" API.type="fullscreen" and type="fullscreenTakeover" APIs.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 CustomDialogisDismissable was renamed to isDismissible (fixed spelling), and moved to Dialog and CustomDialoghideArrow, offset, crossOffset, containerPadding, placement, and shouldFlip moved to PopoverWe'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.
See the updated API changelog for a full list of changes since RSP v3.
UNSAFE_className prop must now be wrapped in @layer UNSAFE_overrides. See the docs for more details.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.