The backgroundColor property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.
+
+ The backgroundColor property supports the following values, in addition to
+ the semantic and global colors shown below. These colors are specifically chosen to be
+ used as backgrounds, so prefer them over global colors where possible.
+
@@ -74,7 +78,11 @@ export function Colors() {
Text colors
-
The color property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.
+
+ The color property supports the following values, in addition to the
+ semantic and global colors shown below. These colors are specifically chosen to be used
+ as text colors, so prefer them over global colors where possible.
+
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
+
+ The following values are available across all color properties. Prefer to use semantic
+ colors over global colors when they represent a specific meaning.
+
@@ -178,5 +195,5 @@ export function IconColors() {
- )
+ );
}
diff --git a/.storybook-s2/docs/Icons.jsx b/.storybook-s2/docs/Icons.jsx
index e275afba22c..8d6ec48b061 100644
--- a/.storybook-s2/docs/Icons.jsx
+++ b/.storybook-s2/docs/Icons.jsx
@@ -1,5 +1,5 @@
import icons from '../../packages/@react-spectrum/s2/s2wf-icons/*.svg';
-import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
+import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
import {ActionButton, Text} from '@react-spectrum/s2';
import {H2, H3, P, Code, Pre, Link} from './typography';
import {highlight} from './highlight' with {type: 'macro'};
@@ -11,10 +11,11 @@ export function Icons() {
return (
-
- Workflow icons
-
-
Spectrum 2 offers a subset of the icons currently available in React Spectrum v3. These icons can be imported from @react-spectrum/s2/icons.
+
Workflow icons
+
+ Spectrum 2 offers a subset of the icons currently available in React Spectrum v3. These
+ icons can be imported from @react-spectrum/s2/icons.
+
{highlight("import Add from '@react-spectrum/s2/icons/Add';")}
See below for a full list of available icons. Click to copy import statement.
@@ -25,7 +26,11 @@ export function Icons() {
return (
navigator.clipboard.writeText(`import ${importName} from '@react-spectrum/s2/icons/${name}';`)}>
+ onPress={() =>
+ navigator.clipboard.writeText(
+ `import ${importName} from '@react-spectrum/s2/icons/${name}';`
+ )
+ }>
{name}
@@ -33,54 +38,116 @@ export function Icons() {
})}
Styling
-
The iconStyle macro can be used to set the size and color of a workflow icon. Icons support five t-shirt sizes, and a subset of the Spectrum colors. Other style properties available across components are also supported on icons.
-
{highlight(`import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+ The iconStyle macro can be used to set the size and color of a workflow icon.
+ Icons support five t-shirt sizes, and a subset of the Spectrum colors.{' '}
+
+ Other style properties
+ {' '}
+ available across components are also supported on icons.
+
+
+ {highlight(`import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
import CheckmarkCircle from '@react-spectrum/s2/icons/CheckmarkCircle';
-`)}
+`)}
+
Icon colors
Icon sizes
-
+
XS (14px)
-
+
S (16px)
-
+
M (20px)
-
+
L (22px)
-
+
XL (26px)
Custom icons
-
To use custom icons, you first need to convert your SVGs into compatible icon components. This depends on your bundler.
+
+ To use custom icons, you first need to convert your SVGs into compatible icon components.
+ This depends on your bundler.
+
Parcel
-
If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon plugin can be used to convert SVGs to icon components. First install it into your project as a dev dependency:
+
+ If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon{' '}
+ plugin can be used to convert SVGs to icon components. First install it into your project
+ as a dev dependency:
+
This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.
+
+ The @react-spectrum/s2-icon-builder CLI tool can be used to pre-process a
+ folder of SVG icons into TSX files.
+
+ This outputs a folder of TSX files with names corresponding to the input SVG files. You
+ may rename them as you wish. To use them in your application, import them like normal
+ components.
+
{highlight(`import Icon from './path/to/destination/Icon';`)}
diff --git a/.storybook-s2/docs/Illustrations.jsx b/.storybook-s2/docs/Illustrations.jsx
index 63f6e663441..87189ec8464 100644
--- a/.storybook-s2/docs/Illustrations.jsx
+++ b/.storybook-s2/docs/Illustrations.jsx
@@ -1,41 +1,86 @@
import linearIllustrations from '@react-spectrum/s2/spectrum-illustrations/linear/*.tsx';
import gradientIllustrations from '@react-spectrum/s2/spectrum-illustrations/gradient/*/*.tsx';
import Paste from '@react-spectrum/s2/icons/Paste';
-import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
+import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
import {ActionButton, Radio, RadioGroup} from '@react-spectrum/s2';
import {H2, H3, P, Code, Pre, Link} from './typography';
import {highlight} from './highlight' with {type: 'macro'};
-import { useState } from 'react';
+import {useState} from 'react';
export function Illustrations() {
let [gradientStyle, setStyle] = useState('generic1');
return (
-
- Illustrations
-
-
Spectrum 2 offers a collection of illustrations in two styles: gradient and linear. These illustrations can be imported from @react-spectrum/s2/illustrations. See below for a full list of available illustrations. Click the clipboard icon to copy the import statement.
+
Illustrations
+
+ Spectrum 2 offers a collection of illustrations in two styles: gradient and linear. These
+ illustrations can be imported from @react-spectrum/s2/illustrations. See
+ below for a full list of available illustrations. Click the clipboard icon to copy the
+ import statement.
+
Gradient illustrations
-
Gradient illustrations are available in two styles: Generic 1 and Generic 2. These should be consistently applied within products. They can be imported using the corresponding sub-path, for example:
-
{highlight("import Cloud from '@react-spectrum/s2/illustrations/gradient/generic1/Cloud';")}
-
+
+ Gradient illustrations are available in two styles: Generic 1 and Generic 2. These should
+ be consistently applied within products. They can be imported using the corresponding
+ sub-path, for example:
+
+
+ {highlight(
+ "import Cloud from '@react-spectrum/s2/illustrations/gradient/generic1/Cloud';"
+ )}
+
+ Generic 1Generic 2
-
+
{Object.keys(gradientIllustrations[gradientStyle]).map(icon => {
let Illustration = gradientIllustrations[gradientStyle][icon].default;
return (
-
+
-
+ {icon} navigator.clipboard.writeText(`import ${icon} from '@react-spectrum/s2/illustrations/gradient/${gradientStyle}/${icon}';`)}>
+ onPress={() =>
+ navigator.clipboard.writeText(
+ `import ${icon} from '@react-spectrum/s2/illustrations/gradient/${gradientStyle}/${icon}';`
+ )
+ }>
@@ -46,19 +91,48 @@ export function Illustrations() {
Linear illustrations
Linear illustrations can be imported as shown below:
{highlight("import Cloud from '@react-spectrum/s2/illustrations/linear/Cloud';")}
-
+
{Object.keys(linearIllustrations).map(icon => {
let Illustration = linearIllustrations[icon].default;
return (
-
+
-
+ {icon} navigator.clipboard.writeText(`import ${icon} from '@react-spectrum/s2/illustrations/linear/${icon}';`)}>
+ onPress={() =>
+ navigator.clipboard.writeText(
+ `import ${icon} from '@react-spectrum/s2/illustrations/linear/${icon}';`
+ )
+ }>
@@ -67,23 +141,49 @@ export function Illustrations() {
})}
Custom illustrations
-
To use custom illustrations, you first need to convert your SVGs into compatible illustration components. This depends on your bundler.
+
+ To use custom illustrations, you first need to convert your SVGs into compatible
+ illustration components. This depends on your bundler.
+
Parcel
-
If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon plugin can be used to convert SVGs to illustration components. First install it into your project as a dev dependency:
+
+ If you are using Parcel, the @react-spectrum/parcel-transformer-s2-icon{' '}
+ plugin can be used to convert SVGs to illustration components. First install it into your
+ project as a dev dependency:
+
This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.
+
+ The @react-spectrum/s2-icon-builder CLI tool can be used to pre-process a
+ folder of SVG illustrations into TSX files.
+
+ This outputs a folder of TSX files with names corresponding to the input SVG files. You
+ may rename them as you wish. To use them in your application, import them like normal
+ components.
+
{highlight(`import Illustration from './path/to/destination/Illustration';`)}
diff --git a/.storybook-s2/docs/Intro.jsx b/.storybook-s2/docs/Intro.jsx
index 933882036af..d6853e4cf25 100644
--- a/.storybook-s2/docs/Intro.jsx
+++ b/.storybook-s2/docs/Intro.jsx
@@ -1,5 +1,24 @@
-import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
-import {Button, ButtonGroup, Checkbox, Content, Dialog, DialogTrigger, Footer, Header, Heading, Image, InlineAlert, Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger, Switch, Text} from '@react-spectrum/s2';
+import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
+import {
+ Button,
+ ButtonGroup,
+ Checkbox,
+ Content,
+ Dialog,
+ DialogTrigger,
+ Footer,
+ Header,
+ Heading,
+ Image,
+ InlineAlert,
+ Menu,
+ MenuItem,
+ MenuSection,
+ MenuTrigger,
+ SubmenuTrigger,
+ Switch,
+ Text
+} from '@react-spectrum/s2';
import NewIcon from '@react-spectrum/s2/icons/New';
import ImgIcon from '@react-spectrum/s2/icons/Image';
import CopyIcon from '@react-spectrum/s2/icons/Copy';
@@ -30,15 +49,53 @@ export function Docs() {
-
Introducing Spectrum 2 – a new update to Adobe's design system, now in pre-release! Designed to support our growing suite of products, Spectrum 2 aims to work seamlessly across experiences by balancing personality and function.
-
The React Spectrum team has been hard at work to bring the Spectrum 2 design to our components. Spectrum 2 in React Spectrum is built on React Aria Components and a new styling foundation powered by Spectrum Tokens. This gives you access to Spectrum design fundamentals such as colors, spacing, sizing, and typography in your own applications and custom components. Spectrum 2 also brings new features such as t-shirt sizing, improved form layout, dynamic new press interactions, and more.
-
Check out the new Button design, with fresh new colors and icons, a fun new press scaling interaction, and support for t-shirt sizes.
+
+
+ Introducing{' '}
+
+ Spectrum 2
+
+ {' '}
+ – a new update to Adobe's design system, now in pre-release! Designed to support our
+ growing suite of products, Spectrum 2 aims to work seamlessly across experiences by
+ balancing personality and function.
+
+
+ The React Spectrum team has been hard at work to bring the Spectrum 2 design to our
+ components. Spectrum 2 in React Spectrum is built on{' '}
+
+ React Aria Components
+ {' '}
+ and a new styling foundation powered by{' '}
+
+ Spectrum Tokens
+
+ . This gives you access to Spectrum design fundamentals such as colors, spacing, sizing,
+ and typography in your own applications and custom components. Spectrum 2 also brings new
+ features such as t-shirt sizing, improved form layout, dynamic new press interactions, and
+ more.
+
+
+ Check out the new Button design, with fresh new colors and icons, a fun new press scaling
+ interaction, and support for t-shirt sizes.
+
-
-
-
+
+
+
-
Spectrum 2 switches have a more accessible design, with a solid border and new animations.
+
+ Spectrum 2 switches have a more accessible design, with a solid border and new animations.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ Duis aute irure dolor in
+
-
+
-
-
+
+
)}
-
Menus received a major design update, with new styles for sections, links, selection, focus rings, and submenus.
+
+ Menus received a major design update, with new styles for sections, links, selection,
+ focus rings, and submenus.
+
-
+
- )
+ );
}
function Example({children}) {
diff --git a/.storybook-s2/docs/MDXLayout.jsx b/.storybook-s2/docs/MDXLayout.jsx
index cf1bf504eef..fce42793916 100644
--- a/.storybook-s2/docs/MDXLayout.jsx
+++ b/.storybook-s2/docs/MDXLayout.jsx
@@ -1,4 +1,4 @@
-import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
+import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
import {highlight} from './highlight' with {type: 'macro'};
import {H2, H3, H3, P, Pre, Code, Strong, H4, Link} from './typography';
import {MDXProvider} from '@mdx-js/react';
@@ -13,17 +13,17 @@ const mdxComponents = {
code: Code,
strong: Strong,
ul: ({children}) =>
{children}
,
- li: ({children}) =>
{children}
,
+ li: ({children}) => (
+
{children}
+ ),
a: Link
-}
+};
export function MDXLayout({children}) {
return (
-
- {children}
-
+ {children}
);
diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx
index 76c44aa0fd7..6bb6f4f5ba5 100644
--- a/.storybook-s2/docs/Migrating.jsx
+++ b/.storybook-s2/docs/Migrating.jsx
@@ -1,58 +1,124 @@
-import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
+import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
import {P, Code, Pre, H3, H2, Link} from './typography';
export function Migrating() {
return (
-
- Migrating to Spectrum 2
-
-
An automated upgrade assistant is available by running the following command in the project you want to upgrade:
+
Migrating to Spectrum 2
+
+ An automated upgrade assistant is available by running the following command in the
+ project you want to upgrade:
+
npx @react-spectrum/codemods s1-to-s2
-
To only upgrade specific components, provide a --components argument with a comma-separated list of components to upgrade:
+
+ To only upgrade specific components, provide a --components argument with a
+ comma-separated list of components to upgrade:
+
--path - Path to apply the upgrade changes to. Defaults to the current directory (.)
-
--dry - Runs the upgrade assistant without making changes to components
-
--ignore-pattern - Ignore files that match the provided glob expression. Defaults to '**/node_modules/**'
+
+ --path - Path to apply the upgrade changes to. Defaults to the current
+ directory (.)
+
+
+ --dry - Runs the upgrade assistant without making changes to components
+
+
+ --ignore-pattern - Ignore files that match the provided glob expression.
+ Defaults to '**/node_modules/**'
+
-
For cases that the upgrade assistant doesn't handle automatically or where you'd rather upgrade some components manually, use the guide below.
+
+ For cases that the upgrade assistant doesn't handle automatically or where you'd rather
+ upgrade some components manually, use the guide below.
+
-
Note that [PENDING] indicates that future changes will occur before the final release, and the current solution should be considered temporary.
+
+ Note that [PENDING] indicates that future changes will occur before the final release, and
+ the current solution should be considered temporary.
+
Components
All components
-
Update imports to use the @react-spectrum/s2 package instead of @adobe/react-spectrum or individual packages like @react-spectrum/button
-
Update style props to use the style macro instead. See the 'Style props' section below
+
+ Update imports to use the @react-spectrum/s2 package instead of{' '}
+ @adobe/react-spectrum or individual packages like{' '}
+ @react-spectrum/button
+
+
+ Update{' '}
+
+ style props
+ {' '}
+ to use the style macro instead. See
+ the 'Style props' section below
+
Accordion
-
Update Item to be Disclosure. Disclosure should now consist of two children: DisclosureTitle and DisclosurePanel. Note that you can now add interactive elements inside the header and adjacent to the title by using the DisclosureHeader component with the DisclosureTitle and interactive elements inside.
-
Update Item's title prop to be a child of DisclosureTitle
-
Update children of Item to be children of DisclosurePanel
-
Update key to be id (and keep key if rendered inside array.map)
-
Remove disabledKeys and add isDisabled to individual Disclosure components
-
Add allowsMultipleExpanded to allow multiple Disclosure components to be expanded at once (previously default behavior)
+
+ Update Item to be Disclosure. Disclosure should
+ now consist of two children: DisclosureTitle and{' '}
+ DisclosurePanel. Note that you can now add interactive elements inside the
+ header and adjacent to the title by using the DisclosureHeader component
+ with the DisclosureTitle and interactive elements inside.
+
+
+ Update Item's title prop to be a child of DisclosureTitle
+
+
+ Update children of Item to be children of DisclosurePanel
+
+
+ Update key to be id (and keep key if rendered
+ inside array.map)
+
+
+ Remove disabledKeys and add isDisabled to individual{' '}
+ Disclosure components
+
+
+ Add allowsMultipleExpanded to allow multiple Disclosure{' '}
+ components to be expanded at once (previously default behavior)
+
ActionBar
-
Remove ActionBarContainer and move ActionBar to renderActionBar prop of TableView or CardView
-
Update Item to ActionButton
-
Update root level onAction to be called via onPress on each ActionButton
-
Apply isDisabled directly on each ActionButton or ToggleButton instead of root level disabledKeys
-
Update key to be id (and keep key if rendered inside array.map)
-
Convert dynamic collections render function to items.map
-
[PENDING] Comment out buttonLabelBehavior (it has not been implemented yet)
+
+ Remove ActionBarContainer and move ActionBar to{' '}
+ renderActionBar prop of TableView or CardView
+
+
+ Update Item to ActionButton
+
+
+ Update root level onAction to be called via onPress on each{' '}
+ ActionButton
+
+
+ Apply isDisabled directly on each ActionButton or{' '}
+ ToggleButton instead of root level disabledKeys
+
+
+ Update key to be id (and keep key if rendered
+ inside array.map)
+
+
+ Convert dynamic collections render function to items.map
+
+
+ [PENDING] Comment out buttonLabelBehavior (it has not been implemented yet)
+
ActionButton
@@ -60,22 +126,53 @@ export function Migrating() {
ActionMenu
-
[PENDING] Comment out closeOnSelect (it has not been implemented yet)
-
[PENDING] Comment out trigger (it has not been implemented yet)
-
Update Item to be a MenuItem
+
+ [PENDING] Comment out closeOnSelect (it has not been implemented yet)
+
+
+ [PENDING] Comment out trigger (it has not been implemented yet)
+
+
+ Update Item to be a MenuItem
+
ActionGroup
-
Use ActionButtonGroup if you are migrating from an ActionGroup that didn't allow for selection. ActionButtonGroup takes ActionButtons as children.
-
Use ToggleButtonGroup if you are migrating from an ActionGroup that used single or multiple selection. ToggleButtonGroup takes ToggleButtons as children.
-
[PENDING] Comment out overflowMode (it has not been implemented yet)
-
[PENDING] Comment out buttonLabelBehavior (it has not been implemented yet)
-
[PENDING] Comment out summaryIcon (it has not been implemented yet)
-
Update root level onAction to called via onPress on each ActionButton
-
Apply isDisabled directly on each ActionButton or ToggleButton instead of root level disabledKeys
-
Update key to be id (and keep key if rendered inside array.map)
-
Convert dynamic collections render function to items.map
+
+ Use ActionButtonGroup if you are migrating from an ActionGroup{' '}
+ that didn't allow for selection. ActionButtonGroup takes{' '}
+ ActionButtons as children.{' '}
+
+
+ Use ToggleButtonGroup if you are migrating from an ActionGroup{' '}
+ that used single or multiple selection. ToggleButtonGroup takes{' '}
+ ToggleButtons as children.{' '}
+
+
+ [PENDING] Comment out overflowMode (it has not been implemented yet)
+
+
+ [PENDING] Comment out buttonLabelBehavior (it has not been implemented yet)
+
+
+ [PENDING] Comment out summaryIcon (it has not been implemented yet)
+
+
+ Update root level onAction to called via onPress on each{' '}
+ ActionButton
+
+
+ Apply isDisabled directly on each ActionButton or{' '}
+ ToggleButton instead of root level disabledKeys
+
+
+ Update key to be id (and keep key if rendered
+ inside array.map)
+
+
+ Convert dynamic collections render function to items.map
+
AlertDialog
@@ -83,32 +180,63 @@ export function Migrating() {
Avatar
-
[PENDING] Comment out isDisabled (it has not been implemented yet)
-
Update size to be a pixel value if it currently matches 'avatar-size-*'
+
+ [PENDING] Comment out isDisabled (it has not been implemented yet)
+
+
+ Update size to be a pixel value if it currently matches{' '}
+ 'avatar-size-*'
+
Badge
-
Change variant="info" to variant="informative"
+
+ Change variant="info" to variant="informative"
+
Breadcrumbs
-
[PENDING] Comment out showRoot (it has not been implemented yet)
-
[PENDING] Comment out isMultiline (it has not been implemented yet)
-
[PENDING] Comment out autoFocusCurrent (it has not been implemented yet)
-
Remove size="S" (Small is no longer a supported size in Spectrum 2)
-
Update Item to be a Breadcrumb
+
+ [PENDING] Comment out showRoot (it has not been implemented yet)
+
+
+ [PENDING] Comment out isMultiline (it has not been implemented yet)
+
+
+ [PENDING] Comment out autoFocusCurrent (it has not been implemented yet)
+
+
+ Remove size="S" (Small is no longer a supported size in Spectrum 2)
+
+
+ Update Item to be a Breadcrumb
+
Button
-
Change variant="cta" to variant="accent"
-
Change variant="overBackground" to variant="primary" staticColor="white"
-
Change style to fillStyle
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
If href is present, the Button should be converted to a LinkButton
-
Remove elementType (it is no longer supported in Spectrum 2)
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ If href is present, the Button should be converted to a{' '}
+ LinkButton
+
+
+ Remove elementType (it is no longer supported in Spectrum 2)
+
ButtonGroup
@@ -122,24 +250,37 @@ export function Migrating() {
CheckboxGroup
-
Remove showErrorIcon (it has been removed due to accessibility issues)
+
+ Remove showErrorIcon (it has been removed due to accessibility issues)
+
ColorArea
-
Remove size and instead provide a size via the style macro (i.e. {`styles={style({size: 20})}`})
+
+ Remove size and instead provide a size via the style macro (i.e.{' '}
+ {`styles={style({size: 20})}`})
+
ColorField
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
ColorSlider
-
Remove showValueLabel (it has been removed due to accessibility issues)
+
+ Remove showValueLabel (it has been removed due to accessibility issues)
+
ColorSwatch
@@ -147,179 +288,372 @@ export function Migrating() {
ColorWheel
-
Remove size and instead provide a size via the style macro (i.e. {`styles={style({size: 20})}`})
+
+ Remove size and instead provide a size via the style macro (i.e.{' '}
+ {`styles={style({size: 20})}`})
+
ComboBox
-
Change menuWidth value from a DimensionValue to a pixel value
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
-
Update Item to be a ComboBoxItem
+
+ Change menuWidth value from a DimensionValue to a pixel value
+
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+
+ Update Item to be a ComboBoxItem
+
DateField
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
DatePicker
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
DateRangePicker
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
Dialog
-
Update children to move render props from being the second child of DialogTrigger to being a child of Dialog
-
Remove onDismiss and use onOpenChange on the DialogTrigger, or onDismiss on the DialogContainer instead
-
Dialog is now meant specifically for rendering modal dialogs only and follows the same preset layout as before
-
If you are trying to create a dialog with a custom layout use CustomDialog
-
If you are trying to create a fullscreen dialog use FullscreenDialog
-
If you are trying to create a popover dialog use Popover
-
Supports isKeyboardDismissDisabled in place of DialogTrigger
-
Supports isDismissible in place of DialogTrigger. Note the fixed spelling from previous isDismissible prop.
-
Supports role: "dialog" | "alertdialog"
+
+ Update children to move render props from being the second child of{' '}
+ DialogTrigger to being a child of Dialog
+
+
+ Remove onDismiss and use onOpenChange on the{' '}
+ DialogTrigger, or onDismiss on the{' '}
+ DialogContainer instead
+
+
+ Dialog is now meant specifically for rendering modal dialogs only and
+ follows the same preset layout as before
+
+
+ If you are trying to create a dialog with a custom layout use CustomDialog
+
+
+ If you are trying to create a fullscreen dialog use FullscreenDialog
+
+
+ If you are trying to create a popover dialog use Popover
+
+
+ Supports isKeyboardDismissDisabled in place of DialogTrigger
+
+
+ Supports isDismissible in place of DialogTrigger. Note the
+ fixed spelling from previous isDismissible prop.
+
+
+ Supports role: "dialog" | "alertdialog"
+
DialogContainer
-
Remove type, this is dependent on the dialog level child that you use (e.g. Dialog, FullscreenDialog, Popover)
-
Remove isDismissable, prop now exists on the dialog level component as isDismissible
-
Remove isKeyboardDismissDisabled, prop now exists on the dialog level component
+
+ Remove type, this is dependent on the dialog level child that you use (e.g.{' '}
+ Dialog, FullscreenDialog, Popover)
+
+
+ Remove isDismissable, prop now exists on the dialog level component as{' '}
+ isDismissible
+
+
+ Remove isKeyboardDismissDisabled, prop now exists on the dialog level
+ component
+
DialogTrigger
-
[PENDING] Comment out type="tray" (Tray has not been implemented yet)
-
[PENDING] Comment out mobileType (Tray and other types have not been implemented yet for Popover)
-
Remove targetRef (it is no longer supported in Spectrum 2)
-
Update children to remove render props usage, and note that the close function was moved from DialogTrigger to Dialog
-
Remove containerPadding, prop now exists on the Popover component
-
Remove crossOffset, prop now exists on the Popover component
-
Remove hideArrow, prop now exists on the Popover component
-
Remove isDismissable, prop now exists on the dialog level component as isDismissible
-
Remove isKeyboardDismissDisabled, prop now exists on the dialog level component
-
Remove offset, prop now exists on the Popover component
-
Remove placement, prop now exists on the Popover component
-
Remove shouldFlip, prop now exists on the Popover component
-
Remove type, this is dependent on the dialog level child that you use (e.g. Dialog, FullscreenDialog, Popover)
+
+ [PENDING] Comment out type="tray" (Tray has not been
+ implemented yet)
+
+
+ [PENDING] Comment out mobileType (Tray and other types have
+ not been implemented yet for Popover)
+
+
+ Remove targetRef (it is no longer supported in Spectrum 2)
+
+
+ Update children to remove render props usage, and note that the{' '}
+ close function was moved from DialogTrigger to{' '}
+ Dialog
+
+
+ Remove containerPadding, prop now exists on the Popover{' '}
+ component
+
+
+ Remove crossOffset, prop now exists on the Popover component
+
+
+ Remove hideArrow, prop now exists on the Popover component
+
+
+ Remove isDismissable, prop now exists on the dialog level component as{' '}
+ isDismissible
+
+
+ Remove isKeyboardDismissDisabled, prop now exists on the dialog level
+ component
+
+
+ Remove offset, prop now exists on the Popover component
+
+
+ Remove placement, prop now exists on the Popover component
+
+
+ Remove shouldFlip, prop now exists on the Popover component
+
+
+ Remove type, this is dependent on the dialog level child that you use (e.g.{' '}
+ Dialog, FullscreenDialog, Popover)
+
Divider
-
Remove Divider component if within a Dialog (Updated design for Dialog in Spectrum 2)
+
+ Remove Divider component if within a Dialog (Updated design for Dialog in Spectrum 2)
+
Flex
-
Update Flex to be a div and apply flex styles using the style macro (i.e. {``})
+
+ Update Flex to be a div and apply flex styles using the style
+ macro (i.e. {``})
+
Form
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Remove isReadOnly (it is no longer supported in Spectrum 2)
-
Remove validationState (it is no longer supported in Spectrum 2)
-
Remove validationBehavior (it is no longer supported in Spectrum 2)
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Remove isReadOnly (it is no longer supported in Spectrum 2)
+
+
+ Remove validationState (it is no longer supported in Spectrum 2)
+
+
+ Remove validationBehavior (it is no longer supported in Spectrum 2)
+
Grid
-
Update Grid to be a div and apply grid styles using the style macro (i.e. {``})
+
+ Update Grid to be a div and apply grid styles using the style
+ macro (i.e. {``})
+
IllustratedMessage
-
Update illustrations to be from @react-spectrum/s2/illustrations. See Illustrations
+
+ Update illustrations to be from @react-spectrum/s2/illustrations. See{' '}
+ Illustrations
+
InlineAlert
-
Change variant="info" to variant="informative"
+
+ Change variant="info" to variant="informative"
+
Item
-
If within Menu: Update Item to be a MenuItem
-
If within ActionMenu: Update Item to be a MenuItem
-
If within TagGroup: Update Item to be a Tag
-
If within Breadcrumbs: Update Item to be a Breadcrumb
-
If within Picker: Update Item to be a PickerItem
-
If within ComboBox: Update Item to be a ComboBoxItem
-
If within ListBox: Update Item to be a ListBoxItem
-
If within ListView: Update Item to be a ListViewItem
-
If within TabList: Update Item to be a Tab
-
If within TabPanels: Update Item to be a TabPanel and remove surrounding TabPanels
-
Update key to be id (and keep key if rendered inside array.map)
+
+ If within Menu: Update Item to be a MenuItem
+
+
+ If within ActionMenu: Update Item to be a{' '}
+ MenuItem
+
+
+ If within TagGroup: Update Item to be a Tag
+
+
+ If within Breadcrumbs: Update Item to be a{' '}
+ Breadcrumb
+
+
+ If within Picker: Update Item to be a PickerItem
+
+
+ If within ComboBox: Update Item to be a{' '}
+ ComboBoxItem
+
+
+ If within ListBox: Update Item to be a{' '}
+ ListBoxItem
+
+
+ If within ListView: Update Item to be a{' '}
+ ListViewItem
+
+
+ If within TabList: Update Item to be a Tab
+
+
+ If within TabPanels: Update Item to be a TabPanel{' '}
+ and remove surrounding TabPanels
+
+
+ Update key to be id (and keep key if rendered
+ inside array.map)
+
Link
-
Change variant="overBackground" to staticColor="white"
-
If a was used inside Link (legacy API), remove the a and apply props (i.e href) directly to Link
+
+ Change variant="overBackground" to staticColor="white"
+
+
+ If a was used inside Link (legacy API), remove the{' '}
+ a and apply props (i.e href) directly to Link
+
ListBox
-
Update Item to be a ListBoxItem
+
+ Update Item to be a ListBoxItem
+
ListView
-
[PENDING] Comment out density (it has not been implemented yet)
-
[PENDING] Comment out dragAndDropHooks (it has not been implemented yet)
+
+ [PENDING] Comment out density (it has not been implemented yet)
+
+
+ [PENDING] Comment out dragAndDropHooks (it has not been implemented yet)
+
Menu
-
Update Item to be a MenuItem
+
+ Update Item to be a MenuItem
+
MenuTrigger
-
[PENDING] Comment out closeOnSelect (it has not been implemented yet)
+
+ [PENDING] Comment out closeOnSelect (it has not been implemented yet)
+
NumberField
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
Picker
-
Change menuWidth value from a DimensionValue to a pixel value
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
-
Update Item to be a PickerItem
-
Change isLoading to loadingState and provide the appropriate loading state.
-
defaultSelectedKey and selectedKey have been deprecated in favor of defaultValue and value respectively. See the props table for the new accepted types.
+
+ Change menuWidth value from a DimensionValue to a pixel value
+
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+
+ Update Item to be a PickerItem
+
+
+ Change isLoading to loadingState and provide the appropriate
+ loading state.
+
+
+ defaultSelectedKey and selectedKey have been deprecated in
+ favor of defaultValue and value respectively. See the{' '}
+ props table for the new accepted types.
+
ProgressBar
-
Change variant="overBackground" to staticColor="white"
-
[PENDING] Comment out labelPosition (it has not been implemented yet)
-
[PENDING] Comment out showValueLabel (it has not been implemented yet)
+
+ Change variant="overBackground" to staticColor="white"
+
+
+ [PENDING] Comment out labelPosition (it has not been implemented yet)
+
+
+ [PENDING] Comment out showValueLabel (it has not been implemented yet)
+
ProgressCircle
-
Change variant="overBackground" to staticColor="white"
+
+ Change variant="overBackground" to staticColor="white"
+
Radio
@@ -327,9 +661,15 @@ export function Migrating() {
RadioGroup
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
-
Remove showErrorIcon (it has been removed due to accessibility issues)
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+
+ Remove showErrorIcon (it has been removed due to accessibility issues)
+
RangeCalendar
@@ -337,38 +677,72 @@ export function Migrating() {
RangeSlider
-
Remove showValueLabel (it has been removed due to accessibility issues)
-
[PENDING] Comment out getValueLabel (it has not been implemented yet)
-
[PENDING] Comment out orientation (it has not been implemented yet)
+
+ Remove showValueLabel (it has been removed due to accessibility issues)
+
+
+ [PENDING] Comment out getValueLabel (it has not been implemented yet)
+
+
+ [PENDING] Comment out orientation (it has not been implemented yet)
+
SearchField
-
[PENDING] Comment out icon (it has not been implemented yet)
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+ [PENDING] Comment out icon (it has not been implemented yet)
+
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
Section
-
If within Menu: Update Section to be a MenuSection
-
If within Picker: Update Section to be a PickerSection
+
+ If within Menu: Update Section to be a{' '}
+ MenuSection
+
+
+ If within Picker: Update Section to be a{' '}
+ PickerSection
+
Slider
-
Remove isFilled (Slider is always filled in Spectrum 2)
-
Remove trackGradient (Not supported in S2 design)
-
Remove showValueLabel (it has been removed due to accessibility issues)
-
[PENDING] Comment out getValueLabel (it has not been implemented yet)
-
[PENDING] Comment out orientation (it has not been implemented yet)
+
+ Remove isFilled (Slider is always filled in Spectrum 2)
+
+
+ Remove trackGradient (Not supported in S2 design)
+
+
+ Remove showValueLabel (it has been removed due to accessibility issues)
+
+
+ [PENDING] Comment out getValueLabel (it has not been implemented yet)
+
+
+ [PENDING] Comment out orientation (it has not been implemented yet)
+
StatusLight
-
Remove isDisabled (it is no longer supported in Spectrum 2)
-
Change variant="info" to variant="informative"
+
+ Remove isDisabled (it is no longer supported in Spectrum 2)
+
+
+ Change variant="info" to variant="informative"
+
SubmenuTrigger
@@ -379,54 +753,118 @@ export function Migrating() {
TableView
-
For Column and Row: Update key to be id (and keep key if rendered inside array.map)
-
For dynamic tables, pass a columns prop into Row
-
For Row: Update dynamic render function to pass in column instead of columnKey
-
Move loadingState and onLoadMore from TableBody to TableView
-
[PENDING] Comment out UNSTABLE_allowsExpandableRows (it has not been implemented yet)
-
[PENDING] Comment out UNSTABLE_onExpandedChange (it has not been implemented yet)
-
[PENDING] Comment out UNSTABLE_expandedKeys (it has not been implemented yet)
-
[PENDING] Comment out UNSTABLE_defaultExpandedKeys (it has not been implemented yet)
+
+ For Column and Row: Update key to be{' '}
+ id (and keep key if rendered inside array.map)
+
+
+ For dynamic tables, pass a columns prop into Row
+
+
+ For Row: Update dynamic render function to pass in column{' '}
+ instead of columnKey
+
+
+ Move loadingState and onLoadMore from TableBody{' '}
+ to TableView
+
+
+ [PENDING] Comment out UNSTABLE_allowsExpandableRows (it has not been
+ implemented yet)
+
+
+ [PENDING] Comment out UNSTABLE_onExpandedChange (it has not been
+ implemented yet)
+
+
+ [PENDING] Comment out UNSTABLE_expandedKeys (it has not been implemented
+ yet)
+
+
+ [PENDING] Comment out UNSTABLE_defaultExpandedKeys (it has not been
+ implemented yet)
+
Tabs
-
Inside TabList: Update Item to be Tab
-
Update items on Tabs to be on TabList
-
Inside TabPanels: Update Item to be a TabPanel and remove the surrounding TabPanels
-
Remove isEmphasized (it is no longer supported in Spectrum 2)
-
Remove isQuiet (it is no longer supported in Spectrum 2)
+
+ Inside TabList: Update Item to be Tab
+
+
+ Update items on Tabs to be on TabList
+
+
+ Inside TabPanels: Update Item to be a TabPanel{' '}
+ and remove the surrounding TabPanels
+
+
+ Remove isEmphasized (it is no longer supported in Spectrum 2)
+
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
TagGroup
-
Rename actionLabel to groupActionLabel
-
Rename onAction to onGroupAction
-
Change validationState="invalid" to isInvalid
-
Update Item to be Tag
+
+ Rename actionLabel to groupActionLabel
+
+
+ Rename onAction to onGroupAction
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Update Item to be Tag
+
TextArea
-
[PENDING] Comment out icon (it has not been implemented yet)
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+ [PENDING] Comment out icon (it has not been implemented yet)
+
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
TextField
-
[PENDING] Comment out icon (it has not been implemented yet)
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+ [PENDING] Comment out icon (it has not been implemented yet)
+
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
TimeField
-
Remove isQuiet (it is no longer supported in Spectrum 2)
-
Change validationState="invalid" to isInvalid
-
Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
+ Remove isQuiet (it is no longer supported in Spectrum 2)
+
+
+ Change validationState="invalid" to isInvalid
+
+
+ Remove validationState="valid" (it is no longer supported in Spectrum 2)
+
ToggleButton
@@ -434,33 +872,66 @@ export function Migrating() {
Tooltip
-
Remove variant (it is no longer supported in Spectrum 2)
-
Remove placement and add to the parent TooltipTrigger instead
-
Remove showIcon (it is no longer supported in Spectrum 2)
-
Remove isOpen and add to the parent TooltipTrigger instead
+
+ Remove variant (it is no longer supported in Spectrum 2)
+
+
+ Remove placement and add to the parent TooltipTrigger instead
+
+
+ Remove showIcon (it is no longer supported in Spectrum 2)
+
+
+ Remove isOpen and add to the parent TooltipTrigger instead
+
TooltipTrigger
-
Update placement prop to be have one value (i.e. Update placement="bottom left" to be placement="bottom")
+
+ Update placement prop to be have one value (i.e. Update{' '}
+ placement="bottom left" to be placement="bottom")
+
TreeView
-
If migrating from TreeView version 3.0.0-beta.3 or before, please do the following. Otherwise, no updates needed.
+
+ If migrating from TreeView version 3.0.0-beta.3 or before, please do the following.
+ Otherwise, no updates needed.
+
-
Update content within TreeViewItem to be wrapped in TreeViewContentItem
+
+ {' '}
+ Update content within TreeViewItem to be wrapped in{' '}
+ TreeViewContentItem
+
View
-
Update View to be a div and apply styles using the style macro
+
+ Update View to be a div and apply styles using the style macro
+
Well
- Update Well to be a div and apply styles using the style macro:
-
+ Update Well to be a div and apply styles using the style
+ macro:
+
{`
{` display: 'block',`}
{` textAlign: 'start',`}
@@ -478,25 +949,79 @@ export function Migrating() {
Style props
-
React Spectrum v3 supported a limited set of style props for layout and positioning using Spectrum-defined values. Usage of these should be updated to instead use the style macro.
+
+ React Spectrum v3 supported a limited set of{' '}
+
+ style props
+ {' '}
+ for layout and positioning using Spectrum-defined values. Usage of these should be updated
+ to instead use the style macro.
+
Example:
-
-
{`- import {ActionButton} from '@adobe/react-spectrum';`}
-
{`+ import {ActionButton} from '@react-spectrum/s2';`}
-
{`+ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};`}
+
+
{`- import {ActionButton} from '@adobe/react-spectrum';`}
+
{`+ import {ActionButton} from '@react-spectrum/s2';`}
+
{`+ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};`}
@@ -588,334 +1205,661 @@ export function Migrating() {
-
'size-0'
-
0
+
+ 'size-0'
+
+
+ 0
+
-
'size-10'
-
1
+
+ 'size-10'
+
+
+ 1
+
-
'size-25'
-
2
+
+ 'size-25'
+
+
+ 2
+
-
'size-40'
-
3
+
+ 'size-40'
+
+
+ 3
+
-
'size-50'
-
4
+
+ 'size-50'
+
+
+ 4
+
-
'size-65'
-
5
+
+ 'size-65'
+
+
+ 5
+
-
'size-75'
-
6
+
+ 'size-75'
+
+
+ 6
+
-
'size-85'
-
7
+
+ 'size-85'
+
+
+ 7
+
-
'size-100'
-
8
+
+ 'size-100'
+
+
+ 8
+
-
'size-115'
-
9
+
+ 'size-115'
+
+
+ 9
+
-
'size-125'
-
10
+
+ 'size-125'
+
+
+ 10
+
-
'size-130'
-
11
+
+ 'size-130'
+
+
+ 11
+
-
'size-150'
-
12
+
+ 'size-150'
+
+
+ 12
+
-
'size-160'
-
13
+
+ 'size-160'
+
+
+ 13
+
-
'size-175'
-
14
+
+ 'size-175'
+
+
+ 14
+
-
'size-200'
-
16
+
+ 'size-200'
+
+
+ 16
+
-
'size-225'
-
18
+
+ 'size-225'
+
+
+ 18
+
-
'size-250'
-
20
+
+ 'size-250'
+
+
+ 20
+
-
'size-275'
-
22
+
+ 'size-275'
+
+
+ 22
+
-
'size-300'
-
24
+
+ 'size-300'
+
+
+ 24
+
-
'size-325'
-
26
+
+ 'size-325'
+
+
+ 26
+
-
'size-350'
-
28
+
+ 'size-350'
+
+
+ 28
+
-
'size-400'
-
32
+
+ 'size-400'
+
+
+ 32
+
-
'size-450'
-
36
+
+ 'size-450'
+
+
+ 36
+
-
'size-500'
-
40
+
+ 'size-500'
+
+
+ 40
+
-
'size-550'
-
44
+
+ 'size-550'
+
+
+ 44
+
-
'size-600'
-
48
+
+ 'size-600'
+
+
+ 48
+
-
'size-675'
-
54
+
+ 'size-675'
+
+
+ 54
+
-
'size-700'
-
56
+
+ 'size-700'
+
+
+ 56
+
-
'size-800'
-
64
+
+ 'size-800'
+
+
+ 64
+
-
'size-900'
-
72
+
+ 'size-900'
+
+
+ 72
+
-
'size-1000'
-
80
+
+ 'size-1000'
+
+
+ 80
+
-
'size-1200'
-
96
+
+ 'size-1200'
+
+
+ 96
+
-
'size-1250'
-
100
+
+ 'size-1250'
+
+
+ 100
+
-
'size-1600'
-
128
+
+ 'size-1600'
+
+
+ 128
+
-
'size-1700'
-
136
+
+ 'size-1700'
+
+
+ 136
+
-
'size-2000'
-
160
+
+ 'size-2000'
+
+
+ 160
+
-
'size-2400'
-
192
+
+ 'size-2400'
+
+
+ 192
+
-
'size-3000'
-
240
+
+ 'size-3000'
+
+
+ 240
+
-
'size-3400'
-
272
+
+ 'size-3400'
+
+
+ 272
+
-
'size-3600'
-
288
+
+ 'size-3600'
+
+
+ 288
+
-
'size-4600'
-
368
+
+ 'size-4600'
+
+
+ 368
+
-
'size-5000'
-
400
+
+ 'size-5000'
+
+
+ 400
+
-
'size-6000'
-
480
+
+ 'size-6000'
+
+
+ 480
+
-
'static-size-0'
-
0
+
+ 'static-size-0'
+
+
+ 0
+
-
'static-size-10'
-
1
+
+ 'static-size-10'
+
+
+ 1
+
-
'static-size-25'
-
2
+
+ 'static-size-25'
+
+
+ 2
+
-
'static-size-40'
-
3
+
+ 'static-size-40'
+
+
+ 3
+
-
'static-size-50'
-
4
+
+ 'static-size-50'
+
+
+ 4
+
-
'static-size-65'
-
5
+
+ 'static-size-65'
+
+
+ 5
+
-
'static-size-100'
-
8
+
+ 'static-size-100'
+
+
+ 8
+
-
'static-size-115'
-
9
+
+ 'static-size-115'
+
+
+ 9
+
-
'static-size-125'
-
10
+
+ 'static-size-125'
+
+
+ 10
+
-
'static-size-130'
-
11
+
+ 'static-size-130'
+
+
+ 11
+
-
'static-size-150'
-
12
+
+ 'static-size-150'
+
+
+ 12
+
-
'static-size-160'
-
13
+
+ 'static-size-160'
+
+
+ 13
+
-
'static-size-175'
-
14
+
+ 'static-size-175'
+
+
+ 14
+
-
'static-size-200'
-
16
+
+ 'static-size-200'
+
+
+ 16
+
-
'static-size-225'
-
18
+
+ 'static-size-225'
+
+
+ 18
+
-
'static-size-250'
-
20
+
+ 'static-size-250'
+
+
+ 20
+
-
'static-size-300'
-
24
+
+ 'static-size-300'
+
+
+ 24
+
-
'static-size-400'
-
32
+
+ 'static-size-400'
+
+
+ 32
+
-
'static-size-450'
-
36
+
+ 'static-size-450'
+
+
+ 36
+
-
'static-size-500'
-
40
+
+ 'static-size-500'
+
+
+ 40
+
-
'static-size-550'
-
44
+
+ 'static-size-550'
+
+
+ 44
+
-
'static-size-600'
-
48
+
+ 'static-size-600'
+
+
+ 48
+
-
'static-size-700'
-
56
+
+ 'static-size-700'
+
+
+ 56
+
-
'static-size-800'
-
64
+
+ 'static-size-800'
+
+
+ 64
+
-
'static-size-900'
-
72
+
+ 'static-size-900'
+
+
+ 72
+
-
'static-size-1000'
-
80
+
+ 'static-size-1000'
+
+
+ 80
+
-
'static-size-1200'
-
96
+
+ 'static-size-1200'
+
+
+ 96
+
-
'static-size-1700'
-
136
+
+ 'static-size-1700'
+
+
+ 136
+
-
'static-size-2400'
-
192
+
+ 'static-size-2400'
+
+
+ 192
+
-
'static-size-2600'
-
208
+
+ 'static-size-2600'
+
+
+ 208
+
-
'static-size-3400'
-
272
+
+ 'static-size-3400'
+
+
+ 272
+
-
'static-size-3600'
-
288
+
+ 'static-size-3600'
+
+
+ 288
+
-
'static-size-4600'
-
368
+
+ 'static-size-4600'
+
+
+ 368
+
-
'static-size-5000'
-
400
+
+ 'static-size-5000'
+
+
+ 400
+
-
'static-size-6000'
-
480
+
+ 'static-size-6000'
+
+
+ 480
+
-
'single-line-height'
-
32
+
+ 'single-line-height'
+
+
+ 32
+
-
'single-line-width'
-
192
+
+ 'single-line-width'
+
+
+ 192
+
Break points
-
Break points previously used in style props can be used in the style macro with updated keys. Use the following mappings:
+
+ Break points previously used in style props can be used in the style macro with updated
+ keys. Use the following mappings:
+
@@ -925,27 +1869,61 @@ export function Migrating() {
-
base
-
default
+
+ base
+
+
+ default
+
-
S
-
sm
+
+ S
+
+
+ sm
+
-
M
-
md
+
+ M
+
+
+ md
+
-
L
-
lg
+
+ L
+
+
+ lg
+
Example:
-
-
{`- `}
-
{`+ `}
+
+
{`- `}
+
{`+ `}
diff --git a/.storybook-s2/docs/Release Notes.mdx b/.storybook-s2/docs/Release Notes.mdx
index d263a535d20..08b58379a3f 100644
--- a/.storybook-s2/docs/Release Notes.mdx
+++ b/.storybook-s2/docs/Release Notes.mdx
@@ -7,34 +7,37 @@ export default MDXLayout;
## v0.12.0
### Updates
-* [ActionButton](?path=/docs/actionbutton--docs): Add pending state
-* [ColorSlider](?path=/docs/colorslider--docs): Fix `ColorLoupe` position in RTL locales
-* [ComboBox](?path=/docs/combobox--docs): Support avatars and onAction
-* [CustomDialog](?path=/docs/customdialog--docs): Support custom widths
-* [Dialog](?path=/docs/dialog--docs): Add XL size
-* [Disclosure](?path=/docs/disclosure--docs): Add animation to disclosure
-* [InlineAlert](?path=/docs/inlinealert--docs): Support heading-less Inline Alerts
-* [Picker](?path=/docs/picker--docs): Support multiple selection and avatars
-* [Tags](?path=/docs/taggroup--docs): Fix Tag collapse calculation for removeable tags
-* [Tooltip](?path=/docs/tooltip--docs): Prevent text overflow by default
-* Allow placeholders in supported S2 components (e.g. ColorArea, ComboBox, NumberField, SearchField, TextArea, TextField)
-* Apply `page.css` styles to the Shadow DOM
+
+- [ActionButton](?path=/docs/actionbutton--docs): Add pending state
+- [ColorSlider](?path=/docs/colorslider--docs): Fix `ColorLoupe` position in RTL locales
+- [ComboBox](?path=/docs/combobox--docs): Support avatars and onAction
+- [CustomDialog](?path=/docs/customdialog--docs): Support custom widths
+- [Dialog](?path=/docs/dialog--docs): Add XL size
+- [Disclosure](?path=/docs/disclosure--docs): Add animation to disclosure
+- [InlineAlert](?path=/docs/inlinealert--docs): Support heading-less Inline Alerts
+- [Picker](?path=/docs/picker--docs): Support multiple selection and avatars
+- [Tags](?path=/docs/taggroup--docs): Fix Tag collapse calculation for removeable tags
+- [Tooltip](?path=/docs/tooltip--docs): Prevent text overflow by default
+- Allow placeholders in supported S2 components (e.g. ColorArea, ComboBox, NumberField, SearchField, TextArea, TextField)
+- Apply `page.css` styles to the Shadow DOM
### Popover Styling Updates
-The Popover component has been updated to better support custom styling. To
+The 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.
## v0.11.0
### New Components
-* [SelectBoxGroup](?path=/docs/selectboxgroup-alpha--docs)
+
+- [SelectBoxGroup](?path=/docs/selectboxgroup-alpha--docs)
### Updates
-* [ComboBox](?path=/docs/combobox--docs): Fix empty state rendering when no items match the current query
-* [Picker](?path=/docs/picker--docs): Fix erroneous dropdown outline when opening the Picker via click
-* [Tabs](?path=/docs/tabs--docs): Support collapse behavior on Tabs when customizing the layout
+
+- [ComboBox](?path=/docs/combobox--docs): Fix empty state rendering when no items match the current query
+- [Picker](?path=/docs/picker--docs): Fix erroneous dropdown outline when opening the Picker via click
+- [Tabs](?path=/docs/tabs--docs): Support collapse behavior on Tabs when customizing the layout
## v0.10.0
@@ -46,40 +49,41 @@ If you previously used `page.css` without a `Provider`, you'll need to add a `Pr
### New Components
-* [Calendar](?path=/docs/calendar--docs)
-* [RangeCalendar](?path=/docs/rangecalendar--docs)
-* [DateField](?path=/docs/datefield--docs)
-* [DatePicker](?path=/docs/datepicker--docs)
-* [DateRangePicker](?path=/docs/daterangepicker--docs)
-* [TimeField](?path=/docs/timefield--docs)
+- [Calendar](?path=/docs/calendar--docs)
+- [RangeCalendar](?path=/docs/rangecalendar--docs)
+- [DateField](?path=/docs/datefield--docs)
+- [DatePicker](?path=/docs/datepicker--docs)
+- [DateRangePicker](?path=/docs/daterangepicker--docs)
+- [TimeField](?path=/docs/timefield--docs)
### Updates
-* [CardView](?path=/docs/cardview--docs): Fix ActionBar from not scrolling
-* [ActionButton](?path=/docs/actionbutton--docs): Fix avatar-only ActionButtons to have square dimensions
-* [Tabs](?path=/docs/tabs--docs): Improve selection indicator animation, fix collasped tabs
-* [ProgressCircle](?path=/docs/progresscircle--docs): Add track outline in High Contrast Mode
-* [Switch](?path=/docs/switch--docs): Fix the toggle in RTL locales
-* [TreeView](?path=/docs/treeview--docs): Support async loading
+- [CardView](?path=/docs/cardview--docs): Fix ActionBar from not scrolling
+- [ActionButton](?path=/docs/actionbutton--docs): Fix avatar-only ActionButtons to have square dimensions
+- [Tabs](?path=/docs/tabs--docs): Improve selection indicator animation, fix collasped tabs
+- [ProgressCircle](?path=/docs/progresscircle--docs): Add track outline in High Contrast Mode
+- [Switch](?path=/docs/switch--docs): Fix the toggle in RTL locales
+- [TreeView](?path=/docs/treeview--docs): Support async loading
## v0.9.1
### Updates
-* [Button](?path=/docs/button--docs): Fix focus visible styles from being applied on standard focus
-* [ContextualHelp](?path=/docs/contextualhelp--docs): Update width to match Spectrum designs
-* [Tabs](?path=/docs/tabs--docs): Update selection indicator when tab text changes
-* [TagGroup](?path=/docs/taggroup--docs): Fix focus visible styles from being applied on standard focus
+
+- [Button](?path=/docs/button--docs): Fix focus visible styles from being applied on standard focus
+- [ContextualHelp](?path=/docs/contextualhelp--docs): Update width to match Spectrum designs
+- [Tabs](?path=/docs/tabs--docs): Update selection indicator when tab text changes
+- [TagGroup](?path=/docs/taggroup--docs): Fix focus visible styles from being applied on standard focus
## v0.9.0
### Updates
-* [Combobox](?path=/docs/combobox--docs): Support for virtualization and async loading
-* [Dialog](?path=/docs/dialog--docs): Update sizes
-* [Picker](?path=/docs/picker--docs): Support for virtualization and async loading
-* [Popover](?path=/docs/popover--docs): Add `triggerRef` prop
-* [TableView](?path=/docs/tableview--docs): Support custom menus in columns
-* Apply `position: relative` to Radio and Checkbox to prevent layout jumps
+- [Combobox](?path=/docs/combobox--docs): Support for virtualization and async loading
+- [Dialog](?path=/docs/dialog--docs): Update sizes
+- [Picker](?path=/docs/picker--docs): Support for virtualization and async loading
+- [Popover](?path=/docs/popover--docs): Add `triggerRef` prop
+- [TableView](?path=/docs/tableview--docs): Support custom menus in columns
+- Apply `position: relative` to Radio and Checkbox to prevent layout jumps
### UNSAFE_className Typescript Error
@@ -87,62 +91,62 @@ Style macros passed to `UNSAFE_className` will now result in a TypeScript error.
We strongly discourage using `UNSAFE_className` because it results in inconsistent UIs and hard to maintain code. Instead, use [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) with the [S2 style macro](https://react-spectrum.adobe.com/s2/index.html?path=/docs/style-macro--docs) to create custom components. [Safe style properties](https://react-spectrum.adobe.com/s2/index.html?path=/docs/intro--docs#styling) 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](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths) (e.g. vw)
-* Added support for arbitrary [aspect ratio values](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
-* Added support for `calc` and other [math functions](https://www.w3.org/TR/css-values-4/#math)
-* Added support for [css-wide keywords](https://www.w3.org/TR/css-values-4/#common-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`)
+- 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](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths) (e.g. vw)
+- Added support for arbitrary [aspect ratio values](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)
+- Added support for `calc` and other [math functions](https://www.w3.org/TR/css-values-4/#math)
+- Added support for [css-wide keywords](https://www.w3.org/TR/css-values-4/#common-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
-* [NotificationBadge](?path=/docs/actionbutton--docs#notification-badges)
-* [Toast](?path=/docs/toast--docs) (alpha)
+- [NotificationBadge](?path=/docs/actionbutton--docs#notification-badges)
+- [Toast](?path=/docs/toast--docs) (alpha)
### Updates
-* Pass DOM Props to ButtonGroup
-* Prevent Dividers from growing or shrinking in a flex container by default
-* Export Autocomplete
-* Export SortDescriptor type
+- 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](https://github.com/adobe/react-spectrum/pull/8006) for details.
## v0.7.0
### New Components
-* [TreeView](?path=/docs/treeview--docs)
+- [TreeView](?path=/docs/treeview--docs)
### Updates
-* [Badge](?path=/docs/badge--docs): Add `overflowMode` prop, fix icon alignment, update typo from `variant="charteuse"` to `variant="chartreuse"`
-* [CardView](?path=/docs/cardview--docs): Fix styling when using `renderActionBar`
-* Image: Add `fetchPriority` prop
-* [Menu](?path=/docs/menu--docs): Fix menu item's focus rings from exceeding popover boundaries
-* [Tabs](?path=/docs/tabs--docs): 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.
+- [Badge](?path=/docs/badge--docs): Add `overflowMode` prop, fix icon alignment, update typo from `variant="charteuse"` to `variant="chartreuse"`
+- [CardView](?path=/docs/cardview--docs): Fix styling when using `renderActionBar`
+- Image: Add `fetchPriority` prop
+- [Menu](?path=/docs/menu--docs): Fix menu item's focus rings from exceeding popover boundaries
+- [Tabs](?path=/docs/tabs--docs): 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
+- Update S2 icon migration map
+- Handle margin/padding shorthands in style props codemod
### Important CSS update
@@ -156,36 +160,36 @@ To fix these Safari issues, we have removed `all: revert-layer` in this release.
### New Components
-* [ActionBar](?path=/docs/actionbar--docs)
+- [ActionBar](?path=/docs/actionbar--docs)
### Updates
-* [Button](?path=/docs/button--docs): Add `genai` and `premium` gradient variants
-* [Menu](?path=/docs/menu--docs): Add `hideLinkOutIcon` prop, update alignment of items in different sections, and show checkmark on selected items that are links.
-* Added `staticColor="auto"` option to [ActionButton](?path=/docs/actionbutton--docs), [ToggleButton](?path=/docs/togglebutton--docs), [Divider](?path=/docs/divider--docs), [Meter](?path=/docs/meter--docs), [ProgressBar](?path=/docs/progressbar--docs), and [Link](?path=/docs/link--docs)
-* [ContextualHelp](?path=/docs/contextualhelp--docs): Fix alignment with field labels
-* [InlineAlert](?path=/docs/inlinealert--docs): Remove maximum width
-* [CheckboxGroup](?path=/docs/checkboxgroup--docs): Fix `isRequired` within a Form
+- [Button](?path=/docs/button--docs): Add `genai` and `premium` gradient variants
+- [Menu](?path=/docs/menu--docs): Add `hideLinkOutIcon` prop, update alignment of items in different sections, and show checkmark on selected items that are links.
+- Added `staticColor="auto"` option to [ActionButton](?path=/docs/actionbutton--docs), [ToggleButton](?path=/docs/togglebutton--docs), [Divider](?path=/docs/divider--docs), [Meter](?path=/docs/meter--docs), [ProgressBar](?path=/docs/progressbar--docs), and [Link](?path=/docs/link--docs)
+- [ContextualHelp](?path=/docs/contextualhelp--docs): Fix alignment with field labels
+- [InlineAlert](?path=/docs/inlinealert--docs): Remove maximum width
+- [CheckboxGroup](?path=/docs/checkboxgroup--docs): Fix `isRequired` within a Form
### Codemods
-* Added TableView 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](?path=/docs/dialog--docs) – 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](?path=/docs/fullscreendialog--docs) – 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](?path=/docs/customdialog--docs) – 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](?path=/docs/popover--docs) 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.
+- [Dialog](?path=/docs/dialog--docs) – 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](?path=/docs/fullscreendialog--docs) – 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](?path=/docs/customdialog--docs) – 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](?path=/docs/popover--docs) 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
+- `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](?path=/docs/style-macro--docs#colors) and [typography](?path=/docs/style-macro--docs#typography) have been added to help clarify
@@ -195,60 +199,60 @@ added to help you generate a properly optimized output when using the bundler of
### New components
-* [ActionButtonGroup](?path=/docs/actionbuttongroup--docs)
-* [CloseButton](?path=/docs/customdialog--docs)
-* [CustomDialog](?path=/docs/customdialog--docs)
-* [FullscreenDialog](?path=/docs/fullscreendialog--docs)
-* [Popover](?path=/docs/popover--docs)
-* [ToggleButtonGroup](?path=/docs/togglebuttongroup--docs)
+- [ActionButtonGroup](?path=/docs/actionbuttongroup--docs)
+- [CloseButton](?path=/docs/customdialog--docs)
+- [CustomDialog](?path=/docs/customdialog--docs)
+- [FullscreenDialog](?path=/docs/fullscreendialog--docs)
+- [Popover](?path=/docs/popover--docs)
+- [ToggleButtonGroup](?path=/docs/togglebuttongroup--docs)
### Updates
-* [Accordion](?path=/docs/accordion--docs): Add support for adjacent sibling elements in header
-* [ActionButton](?path=/docs/actionbutton--docs): Add support for Avatars in ActionButtons
-* [Dialog](?path=/docs/dialog--docs): See above for a summary of the changes to Dialog and Dialog adjacent components.
-* [Disclosure](?path=/docs/disclosure--docs): Add support for adjacent sibling elements in header
-* [DropZone](?path=/docs/dropzone--docs): Add t-shirt sizing
-* [Menu](?path=/docs/menu--docs): Add support for separate user defined selection modes per MenuSection
-* [Meter](?path=/docs/meter--docs): Add label positioning support
-* Update Spectrum Tokens to v53
-* Allow arbitrary pixel sizes for style macro sizing properties (e.g. width, height)
+- [Accordion](?path=/docs/accordion--docs): Add support for adjacent sibling elements in header
+- [ActionButton](?path=/docs/actionbutton--docs): Add support for Avatars in ActionButtons
+- [Dialog](?path=/docs/dialog--docs): See above for a summary of the changes to Dialog and Dialog adjacent components.
+- [Disclosure](?path=/docs/disclosure--docs): Add support for adjacent sibling elements in header
+- [DropZone](?path=/docs/dropzone--docs): Add t-shirt sizing
+- [Menu](?path=/docs/menu--docs): Add support for separate user defined selection modes per MenuSection
+- [Meter](?path=/docs/meter--docs): 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
+- 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
-* [Accordion](?path=/docs/accordion--docs)
-* [Disclosure](?path=/docs/disclosure--docs)
-* [Card](?path=/docs/card--docs)
-* [CardView](?path=/docs/cardview--docs)
-* [SegmentedControl](?path=/docs/segmentedcontrol--docs)
-* [TableView](?path=/docs/tableview--docs)
+- [Accordion](?path=/docs/accordion--docs)
+- [Disclosure](?path=/docs/disclosure--docs)
+- [Card](?path=/docs/card--docs)
+- [CardView](?path=/docs/cardview--docs)
+- [SegmentedControl](?path=/docs/segmentedcontrol--docs)
+- [TableView](?path=/docs/tableview--docs)
### Updates
-* [ProgressBar](?path=/docs/progressbar--docs): Support side label, update edges to be rounded, and support custom widths
-* [ProgressCircle]((?path=/docs/progresscircle--docs)): Update edges to be rounded
-* [Badge](?path=/docs/badge--docs): Add subtle and outline fill variants
-* [Breadcrumbs](?path=/docs/breadcrumbs--docs): Add collapse behavior
-* [Button](?path=/docs/button--docs): Add support for pending state
-* Update Spectrum Tokens to v46
+- [ProgressBar](?path=/docs/progressbar--docs): Support side label, update edges to be rounded, and support custom widths
+- [ProgressCircle](<(?path=/docs/progresscircle--docs)>): Update edges to be rounded
+- [Badge](?path=/docs/badge--docs): Add subtle and outline fill variants
+- [Breadcrumbs](?path=/docs/breadcrumbs--docs): Add collapse behavior
+- [Button](?path=/docs/button--docs): 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
+- 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
@@ -256,49 +260,49 @@ added to help you generate a properly optimized output when using the bundler of
### New components
-* [NumberField](?path=/docs/numberfield--docs)
-* [AlertDialog](?path=/docs/alertdialog--docs)
-* [Linear and gradient illustrations](?path=/docs/illustrations--docs)
-* [AvatarGroup](?path=/docs/avatargroup--docs)
-* [Tabs](?path=/docs/tabs--docs)
+- [NumberField](?path=/docs/numberfield--docs)
+- [AlertDialog](?path=/docs/alertdialog--docs)
+- [Linear and gradient illustrations](?path=/docs/illustrations--docs)
+- [AvatarGroup](?path=/docs/avatargroup--docs)
+- [Tabs](?path=/docs/tabs--docs)
### Updates
-* Add collapse and action support to TagGroup
-* Add support for new Adobe Clean variable font
-* Updated [workflow icons](?path=/docs/workflow-icons--docs) – **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
+- Add collapse and action support to TagGroup
+- Add support for new Adobe Clean variable font
+- Updated [workflow icons](?path=/docs/workflow-icons--docs) – **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
-* [Breadcrumbs](?path=/docs/breadcrumbs--docs)
-* [Contextual Help](?path=/docs/contextualhelp--docs)
-* [ColorArea](?path=/docs/colorarea--docs)
-* [ColorField](?path=/docs/colorfield--docs)
-* [ColorSlider](?path=/docs/colorslider--docs)
-* [ColorSwatch](?path=/docs/colorswatch--docs)
-* [ColorSwatchPicker](?path=/docs/colorswatchpicker--docs)
-* [ColorWheel](?path=/docs/colorwheel--docs)
-* [RangeSlider](?path=/docs/rangeslider--docs)
-* [Slider](?path=/docs/slider--docs)
+- [Breadcrumbs](?path=/docs/breadcrumbs--docs)
+- [Contextual Help](?path=/docs/contextualhelp--docs)
+- [ColorArea](?path=/docs/colorarea--docs)
+- [ColorField](?path=/docs/colorfield--docs)
+- [ColorSlider](?path=/docs/colorslider--docs)
+- [ColorSwatch](?path=/docs/colorswatch--docs)
+- [ColorSwatchPicker](?path=/docs/colorswatchpicker--docs)
+- [ColorWheel](?path=/docs/colorwheel--docs)
+- [RangeSlider](?path=/docs/rangeslider--docs)
+- [Slider](?path=/docs/slider--docs)
### Updates
-* [ESBuild starter](https://github.com/adobe/react-spectrum/tree/main/examples/s2-esbuild-starter-app) 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
+- [ESBuild starter](https://github.com/adobe/react-spectrum/tree/main/examples/s2-esbuild-starter-app) 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](https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/api-diff.md) for a full list of changes since RSP v3.
@@ -306,16 +310,16 @@ See the updated [API changelog](https://github.com/adobe/react-spectrum/blob/mai
### New components
-* [Badge](?path=/docs/badge--docs)
-* [ComboBox](?path=/docs/combobox--docs)
-* [Meter](?path=/docs/meter--docs)
-* [Picker](?path=/docs/picker--docs)
+- [Badge](?path=/docs/badge--docs)
+- [ComboBox](?path=/docs/combobox--docs)
+- [Meter](?path=/docs/meter--docs)
+- [Picker](?path=/docs/picker--docs)
### Updates
-* [TagGroup](?path=/docs/taggroup--docs) 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](?path=/docs/intro--docs#unsafe-style-overrides) 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.
+- [TagGroup](?path=/docs/taggroup--docs) 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](?path=/docs/intro--docs#unsafe-style-overrides) 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](https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/api-diff.md) for a full list of changes since RSP v3.
diff --git a/.storybook-s2/docs/Release030Intro.jsx b/.storybook-s2/docs/Release030Intro.jsx
index b65b6837727..64b9f98985c 100644
--- a/.storybook-s2/docs/Release030Intro.jsx
+++ b/.storybook-s2/docs/Release030Intro.jsx
@@ -5,14 +5,20 @@ export function Release030Intro() {
return (
<>
- Spectrum 2 now lives in npm, please update your dependencies to @react-spectrum/s2@^0.3.0 if you were using a previous version.
- You'll need to update your imports to the new package name:
+ Spectrum 2 now lives in npm, please update your dependencies to{' '}
+ @react-spectrum/s2@^0.3.0 if you were using a previous version. You'll need to
+ update your imports to the new package name:
{highlight(`import {...} from '@react-spectrum/s2';`)}
and in your package.json:
{highlight(`"@react-spectrum/s2": "^0.3.0"`)}
-
To help teams kickstart their migrations from v3 to Spectrum 2, we've also added a migration wizard. Please read the migration documentation for more information.
+
+ To help teams kickstart their migrations from v3 to Spectrum 2, we've also added a migration
+ wizard. Please read the{' '}
+ migration documentation for more
+ information.
+
- )
+ );
}
diff --git a/.storybook-s2/docs/StyleMacro.jsx b/.storybook-s2/docs/StyleMacro.jsx
index d862b3e5607..600d2f7472b 100644
--- a/.storybook-s2/docs/StyleMacro.jsx
+++ b/.storybook-s2/docs/StyleMacro.jsx
@@ -1,5 +1,13 @@
-import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
-import {Content, Disclosure, DisclosureTitle, DisclosurePanel, Heading, InlineAlert, Link} from '@react-spectrum/s2';
+import {style} from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
+import {
+ Content,
+ Disclosure,
+ DisclosureTitle,
+ DisclosurePanel,
+ Heading,
+ InlineAlert,
+ Link
+} from '@react-spectrum/s2';
import {highlight} from './highlight' with {type: 'macro'};
import {H2, H3, H3, P, Pre, Code, Strong} from './typography';
import {Colors} from './Colors';
@@ -12,63 +20,156 @@ export function StyleMacro() {
paddingX: 48,
marginBottom: 48
})}>
-
- Style Macro
-
+
Style Macro
-
The React Spectrum style macro generates atomic CSS at build time, which can be applied to any DOM element or Spectrum component. Style properties use Spectrum tokens such as colors, spacing, sizing, and typography, helping you work more quickly with TypeScript autocomplete, reduce the design choices you need to make, and improve consistency between Adobe applications.
-
{highlight(`import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+ The React Spectrum style{' '}
+
+ macro
+ {' '}
+ generates atomic CSS at build time, which can be applied to any DOM element or Spectrum
+ component. Style properties use Spectrum tokens such as colors, spacing, sizing, and
+ typography, helping you work more quickly with TypeScript autocomplete, reduce the design
+ choices you need to make, and improve consistency between Adobe applications.
+
+
+ {highlight(`import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
{/* ... */}
-
`)}
-
Atomic CSS scales as your application grows because it outputs a separate rule for each CSS property you write, ensuring there is no duplication across your whole app. The above example generates two CSS rules:
These rules are reused across your app wherever the same values are used, which keeps your bundle size small even as you add features. In addition, you only pay for the values you use – there’s no unnecessary CSS custom properties for colors and other tokens that aren’t used.
-
The style macro colocates your styles with your component code, rather than in separate CSS files. Colocation enables you to:
+
`)}
+
+
+ Atomic CSS scales as your application grows because it outputs a separate
+ rule for each CSS property you write, ensuring there is no duplication across your whole
+ app. The above example generates two CSS rules:
+
+ These rules are reused across your app wherever the same values are used, which keeps your
+ bundle size small even as you add features. In addition, you only pay for the values you
+ use – there’s no unnecessary CSS custom properties for colors and other tokens that aren’t
+ used.
+
+
+ The style macro colocates your styles with your component
+ code, rather than in separate CSS files. Colocation enables you to:
+
-
Develop more efficiently – No need to switch between multiple files when working on a component, or spend time writing CSS selectors.
-
Refactor with confidence – Changing the styles in a component is guaranteed to never unintentionally affect any other parts of your application. When you delete a component, the corresponding styles are also removed, reducing technical debt.
+
+ Develop more efficiently – No need to switch between multiple files
+ when working on a component, or spend time writing CSS selectors.
+
+
+ Refactor with confidence – Changing the styles in a component is
+ guaranteed to never unintentionally affect any other parts of your application. When you
+ delete a component, the corresponding styles are also removed, reducing technical debt.
+
Values
-
The style macro supports a constrained set of values for each CSS property, which conform to the Spectrum design system. For example, the backgroundColor property supports Spectrum colors, and does not allow arbitrary hex or rgb values by default. This helps make it easier to build consistent UIs that are maintainable over time.
+
+ The style macro supports a constrained set of values for each CSS property,
+ which conform to the Spectrum design system. For example, the backgroundColor{' '}
+ property supports Spectrum colors, and does not allow arbitrary hex or rgb values by
+ default. This helps make it easier to build consistent UIs that are maintainable over
+ time.
+
Colors
-
The Spectrum 2 color palette is available across all color properties. See the following sections for color values available for each property.
+
+ The Spectrum 2 color palette is available across all color properties. See the following
+ sections for color values available for each property.
+
Spacing
-
Spacing properties such as margin and padding support a limited set of values. The API is represented in pixels, however, only values conforming to a 4px grid are allowed. This helps ensure that spacing and sizing are visually consistent. Spacing values are automatically converted to rems, which scale according to the user’s font size preference.
+
+ Spacing properties such as margin and padding support a limited
+ set of values. The API is represented in pixels, however, only values conforming to a 4px
+ grid are allowed. This helps ensure that spacing and sizing are visually consistent.
+ Spacing values are automatically converted to rems, which scale according to the user’s
+ font size preference.
+
In addition to numeric values, the following spacing options are available:
-
text-to-control – The default horizontal spacing between text and a UI control, for example between a label and input. This value automatically adjusts based on the font size.
-
text-to-visual – The default horizontal spacing between text and a visual element, such as an icon. This value automatically adjusts based on the font size.
-
edge-to-text – The default horizontal spacing between the edge of a UI control and text within it. This value is calculated relative to the height of the control.
-
pill – The default horizontal spacing between the edge of a pill-shaped UI control (e.g. a fully rounded button) and text within it. This value is calculated relative to the height of the control.
+
+ text-to-control – The default horizontal spacing between text and a UI
+ control, for example between a label and input. This value automatically adjusts based
+ on the font size.
+
+
+ text-to-visual – The default horizontal spacing between text and a visual
+ element, such as an icon. This value automatically adjusts based on the font size.
+
+
+ edge-to-text – The default horizontal spacing between the edge of a UI
+ control and text within it. This value is calculated relative to the height of the
+ control.
+
+
+ pill – The default horizontal spacing between the edge of a pill-shaped UI
+ control (e.g. a fully rounded button) and text within it. This value is calculated
+ relative to the height of the control.
+
Sizing
-
Sizing properties such as width and height accept arbitrary pixel values. Internally, sizes are converted to rems, which scale according to the user’s font size preference. Additionally, size values are multiplied by 1.25x on touch screen devices to help increase the size of hit targets.
+
+ Sizing properties such as width and height accept arbitrary
+ pixel values. Internally, sizes are converted to rems, which scale according to the user’s
+ font size preference. Additionally, size values are multiplied by 1.25x on touch screen
+ devices to help increase the size of hit targets.
+
Typography
-
Spectrum 2 does not include specific components for typography. Instead, you can use the style macro to apply Spectrum typography to any HTML element or component.
-
The font shorthand applies default values for the fontFamily, fontSize, fontWeight, lineHeight, and color properties, following Spectrum design pairings. These individual properties can also be set to override the default set by the shorthand.
-
{highlight(`
+
+ Spectrum 2 does not include specific components for typography. Instead, you can use the
+ style macro to apply Spectrum typography to any HTML element or component.
+
+
+ The font shorthand applies default values for the fontFamily,{' '}
+ fontSize, fontWeight, lineHeight, and{' '}
+ color properties, following Spectrum design pairings. These individual
+ properties can also be set to override the default set by the shorthand.
+
+
+ {highlight(`
Heading
Body
List item
-`)}
+`)}
+
There are several different type scales.
-
UI – use within interactive UI components.
-
Body – use for the content of pages that are primarily text.
-
Heading – use for headings in content pages.
-
Title – use for titles within UI components such as cards or panels.
-
Detail – use for less important metadata.
-
Code – use for source code.
+
+ UI – use within interactive UI components.
+
+
+ Body – use for the content of pages that are primarily text.
+
+
+ Heading – use for headings in content pages.
+
+
+ Title – use for titles within UI components such as cards or panels.
+
+
+ Detail – use for less important metadata.
+
+
+ Code – use for source code.
+
-
Each type scale has a default size, and several t-shirt size modifiers for additional sizes.
+
+ Each type scale has a default size, and several t-shirt size modifiers for additional
+ sizes.
+
Important Note
- Only use {''} and {''} inside other Spectrum components with predefined styles, such as {' and {'. They do not include any styles by default, and should not be used standalone. Use HTML elements with the style macro directly instead.
+
+ Only use{' '}
+
+ {''}
+ {' '}
+ and{' '}
+
+ {''}
+ {' '}
+ inside other Spectrum components with predefined styles, such as{' '}
+
+ {'{' '}
+ and{' '}
+
+ {'
+ . They do not include any styles by default, and should not be used standalone. Use HTML
+ elements with the style macro directly instead.
+
Conditional styles
-
The style macro also supports conditional styles, such as media queries, UI states such as hover and press, and component variants. Conditional values are defined as an object where each key is a condition. This keeps all values for each property together in one place so it is easy to see where overrides are coming from.
-
This example sets the padding of a div to 8px by default, and 32px at the large media query breakpoint (1024px) defined by Spectrum.
-
{highlight(`
+ The style macro also supports conditional styles, such as media queries, UI
+ states such as hover and press, and component variants. Conditional values are defined as
+ an object where each key is a condition. This keeps all values for each property together
+ in one place so it is easy to see where overrides are coming from.
+
+
+ This example sets the padding of a div to 8px by default, and 32px at the large media
+ query breakpoint (1024px) defined by Spectrum.
+
+
+ {highlight(``)}
-
Conditions are mutually exclusive, following object property order. The style macro uses CSS cascade layers to ensure that there are no specificity issues to worry about. The last matching condition always wins.
+ })} />`)}
+
+
+ Conditions are mutually exclusive, following object property order. The style{' '}
+ macro uses{' '}
+
+ CSS cascade layers
+ {' '}
+ to ensure that there are no specificity issues to worry about. The last matching condition
+ always wins.
+
Runtime conditions
-
The style macro also supports conditions that are resolved in JavaScript at runtime, such as variant props and UI states. When a runtime condition is detected, the style macro returns a function that can be called at runtime to determine which styles to apply.
-
Runtime conditions can be named however you like, and values are defined as an object. This example changes the background color depending on a variant prop:
-
{highlight(`let styles = style({
+
+ The style macro also supports conditions that are resolved in JavaScript at
+ runtime, such as variant props and UI states. When a runtime condition is detected, the{' '}
+ style macro returns a function that can be called at runtime to determine
+ which styles to apply.
+
+
+ Runtime conditions can be named however you like, and values are defined as an object.
+ This example changes the background color depending on a variant prop:
+
Runtime conditions also work well with the render props in React Aria Components. If you define your styles inline, you’ll even get autocomplete for all of the available conditions.
-
{highlight(`import {Checkbox} from 'react-aria-components';
+`)}
+
+
+ Runtime conditions also work well with the{' '}
+
+ render props
+ {' '}
+ in React Aria Components. If you define your styles inline, you’ll even get autocomplete
+ for all of the available conditions.
+
+
+ {highlight(`import {Checkbox} from 'react-aria-components';
`)}
+ })} />`)}
+
Nesting conditions
-
Conditions can be nested to apply styles when multiple conditions are true. Keep in mind that conditions at the same level are mutually exclusive, with the last matching condition winning. Since only one value can apply at a time, there are no specificity issues to worry about.
-
{highlight(`let styles = style({
+
+ Conditions can be nested to apply styles when multiple conditions are true. Keep in mind
+ that conditions at the same level are mutually exclusive, with the last matching condition
+ winning. Since only one value can apply at a time, there are no specificity issues to
+ worry about.
+
The above example has three runtime conditions (isSelected, isEmphasized, and isDisabled), and uses the forcedColors condition to apply styles for Windows High Contrast Mode (WHCM). The order of precedence follows the order the conditions are defined in the object, with the isSelected + isDisabled + forcedColors state having the highest priority.
+`)}
+
+
+ The above example has three runtime conditions (isSelected,{' '}
+ isEmphasized, and isDisabled), and uses the{' '}
+ forcedColors condition to apply styles for{' '}
+
+ Windows High Contrast Mode
+ {' '}
+ (WHCM). The order of precedence follows the order the conditions are defined in the
+ object, with the isSelected + isDisabled +{' '}
+ forcedColors state having the highest priority.
+
Reusing styles
-
Styles can be reused by extracting common properties into objects, and spreading them into style calls. These must either be constants (declared with const) in the same file, or imported from another file as a macro ({"with {type: 'macro'}"}). Properties can be overridden just like normal JS objects – the last value always wins.
-
{highlight(`const horizontalStack = {
+
+ Styles can be reused by extracting common properties into objects, and spreading them into{' '}
+ style calls. These must either be constants (declared with const
+ ) in the same file, or imported from another file as a macro (
+ {"with {type: 'macro'}"}). Properties can be overridden just like normal JS
+ objects – the last value always wins.
+
You can also create custom utilities by defining your own macros. These are normal functions so you can do whatever computations you like to generate styles.
-
{highlight(`// style-utils.ts
+});`)}
+
+
+ You can also create custom utilities by defining your own macros. These are normal
+ functions so you can do whatever computations you like to generate styles.
+
+
+ {highlight(`// style-utils.ts
export function horizontalStack(gap: number) {
return {
display: 'flex',
alignItems: 'center',
columnGap: gap
} as const;
-}`)}
+}`)}
+
Then, import your macro and use it in a component.
-
{highlight(`// component.tsx
+
+ {highlight(`// component.tsx
import {horizontalStack} from './style-utils' with {type: 'macro'};
const styles = style({
...horizontalStack(4),
backgroundColor: 'base'
-});`)}
+});`)}
+
Built-in Utilities
-
The focusRing utility generates styles for the standard Spectrum focus ring, allowing you to reuse it in custom components.
-
{highlight(`import {style, focusRing} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+ The focusRing utility generates styles for the standard Spectrum focus ring,
+ allowing you to reuse it in custom components.
+
+
+ {highlight(`import {style, focusRing} from '@react-spectrum/s2/style' with {type: 'macro'};
import {Button} from 'react-aria-components';
const buttonStyle = style({
@@ -241,20 +480,56 @@ const buttonStyle = style({
export function CustomButton(props) {
return ;
}
-`)}
+`)}
+
CSS optimization
-
The style macro relies on CSS bundling and minification to generate optimized output. When configuring your build tool, follow these best practices:
+
+ The style macro relies on CSS bundling and minification to generate optimized output. When
+ configuring your build tool, follow these best practices:
+
- This resource is meant to help you get started with creating custom
- components using{" "}
+ This resource is meant to help you get started with creating custom components using{' '}
React Aria Components
- {" "}
- and Tailwind CSS, with
- a theme that features{" "}
- Spectrum styles and
- values. The goal for this is to enable you to deliver accessible
- custom Spectrum components more quickly.
+ {' '}
+ and Tailwind CSS, with a theme that
+ features Spectrum styles and values. The
+ goal for this is to enable you to deliver accessible custom Spectrum components more
+ quickly.
✅ When to use this
- When you need to implement a component that follows Spectrum
- guidelines, but doesn't exist in React Spectrum.
+ When you need to implement a component that follows Spectrum guidelines, but doesn't
+ exist in React Spectrum.
❌ When not to use this
- When you want to avoid patterns specifically outlined by Spectrum,
- or when a React Spectrum component already exists for your use case.
+ When you want to avoid patterns specifically outlined by Spectrum, or when a React
+ Spectrum component already exists for your use case.
⚠️ Risks
- Since you're taking ownership of the components you build, you still
- need to ensure they follow Spectrum guidelines and accessibility
- guidelines.
+ Since you're taking ownership of the components you build, you still need to ensure they
+ follow Spectrum guidelines and accessibility guidelines.
-
- Setup
-
+
Setup
📦 Install dependencies
- We need to install{" "}
+ We need to install{' '}
React Spectrum
- ,{" "}
+ ,{' '}
React Aria Components
- , and the{" "}
+ , and the{' '}
RAC Tailwind plugin
@@ -82,27 +75,23 @@ export function App() {
tailwindcss-react-aria-components
- Note that the reason React Spectrum is needed, is because the
- Provider will provide CSS variables that our theme will
- reference.
+ Note that the reason React Spectrum is needed, is because the Provider will provide
+ CSS variables that our theme will reference.
⚡ Install Tailwind
- Follow the instructions in the{" "}
-
- Tailwind Docs
- {" "}
- based on your build setup.{" "}
+ Follow the instructions in the{' '}
+ Tailwind Docs based on
+ your build setup.{' '}
🛠️ Configure Tailwind
- In your tailwind.config.js, include the preset from this
- template:
+ In your tailwind.config.js, include the preset from this template:
- Then, add a React Spectrum{" "}
+ Then, add a React Spectrum{' '}
Provider
- {" "}
- to your app if one doesn't already exist. This will ensure that
- your page has access to the proper CSS variables. If you include
- these variables using some other method, that will work too.
+ {' '}
+ to your app if one doesn't already exist. This will ensure that your page has access
+ to the proper CSS variables. If you include these variables using some other method,
+ that will work too.
-
- Usage
-
+
Usage
🎨 Add styles
-
- You can now use Tailwind classes to style your components.
-
+
You can now use Tailwind classes to style your components.
Here are some examples:
- Using ring{" "}
- will give you a focus ring with good default Spectrum styles for
- it's color, width, and offset.
+ Using ring will give you a focus
+ ring with good default Spectrum styles for it's color, width, and offset.
- Using{" "}
- bg-blue-600{" "}
- will give you a background that matches
- --spectrum-global-color-blue-600.
+ Using bg-blue-600 will give you a
+ background that matches --spectrum-global-color-blue-600.
- Using w-25{" "}
- will give you a width of
- var(--spectrum-global-dimension-size-25).
+ Using w-25 will give you a width
+ of var(--spectrum-global-dimension-size-25).
- Using{" "}
-
- ease-in duration-100
- {" "}
- will give you a transition that matches Spectrum's motion
- values.
+ Using ease-in duration-100 will
+ give you a transition that matches Spectrum's motion values.
- Using{" "}
- sm:text-left{" "}
- will give you left text alignment for small width devices based
- on Spectrum's break points.
+ Using sm:text-left will give you
+ left text alignment for small width devices based on Spectrum's break points.
- Using{" "}
- dark:bg-black{" "}
- will give you a black background if the user is in dark mode
- based on the React Spectrum provider.
+ Using dark:bg-black will give you
+ a black background if the user is in dark mode based on the React Spectrum provider.
-
- 🪄 Styling based on state
-
- To see how to add Tailwind styles based on state, see the{" "}
+
🪄 Styling based on state
+ To see how to add Tailwind styles based on state, see the{' '}
RAC Styling docs
@@ -195,11 +166,7 @@ module.exports = {