From 7525e66ff9f01a814f065bdf7992c14db21d6f85 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 27 Aug 2024 16:04:06 -0700
Subject: [PATCH 01/12] roughly got the chromatic stories for S1 and S2 working

---
 .chromatic/.parcelrc                                      | 8 +++++++-
 .chromatic/main.js                                        | 5 ++++-
 packages/@react-spectrum/s2/stories/Checkbox.stories.tsx  | 2 +-
 .../@react-spectrum/s2/stories/SearchField.stories.tsx    | 7 +++----
 packages/@react-spectrum/s2/stories/Slider.stories.tsx    | 4 ++--
 packages/@react-spectrum/s2/stories/Switch.stories.tsx    | 2 +-
 packages/@react-spectrum/s2/stories/TextField.stories.tsx | 6 +++---
 7 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/.chromatic/.parcelrc b/.chromatic/.parcelrc
index 81677b70840..86e08486da1 100644
--- a/.chromatic/.parcelrc
+++ b/.chromatic/.parcelrc
@@ -2,10 +2,16 @@
   "extends": "@parcel/config-default",
   "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
   "transformers": {
+    "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
+    "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
+    "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    // Disable PostCSS from running over style macro output
+    "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
       "@parcel/transformer-js",
       "@parcel/transformer-react-refresh-wrap"
-    ]
+    ],
+    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
   }
 }
diff --git a/.chromatic/main.js b/.chromatic/main.js
index cd268dee236..0d31731266d 100644
--- a/.chromatic/main.js
+++ b/.chromatic/main.js
@@ -4,7 +4,10 @@ module.exports = {
     name: "storybook-react-parcel",
     options: {},
   },
-  stories: ['../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: [
+    '../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)',
+    '../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
   addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
     '@storybook/addon-a11y'
diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
index 41b25e1d415..2c5c118490f 100644
--- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
@@ -30,4 +30,4 @@ export default meta;
 
 export const Example = (args: any) => (<Checkbox {...args}>Unsubscribe</Checkbox>);
 
-export const LongLabel = (args: any) => (<Checkbox {...args} styles={style({maxWidth: 128})}>Checkbox with very long label so we can see wrapping</Checkbox>);
+export const LongLabelS2 = (args: any) => (<Checkbox {...args} styles={style({maxWidth: 128})}>Checkbox with very long label so we can see wrapping</Checkbox>);
diff --git a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
index a46fbeb293d..daa59909c58 100644
--- a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
@@ -42,18 +42,17 @@ Example.args = {
   label: 'Search'
 };
 
-export const CustomWidth = (args: any) => <SearchField {...args} styles={style({width: 256})} />;
+export const CustomWidthS2 = (args: any) => <SearchField {...args} styles={style({width: 256})} />;
 
-CustomWidth.args = {
+CustomWidthS2.args = {
   label: 'Search'
 };
-CustomWidth.parameters = {
+CustomWidthS2.parameters = {
   docs: {
     disable: true
   }
 };
 
-
 export const ContextualHelpExample = (args: any) => <SearchField {...args} />;
 
 ContextualHelpExample.args = {
diff --git a/packages/@react-spectrum/s2/stories/Slider.stories.tsx b/packages/@react-spectrum/s2/stories/Slider.stories.tsx
index 544043a242f..887ee92f759 100644
--- a/packages/@react-spectrum/s2/stories/Slider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Slider.stories.tsx
@@ -42,13 +42,13 @@ Example.args = {
   defaultValue: 30
 };
 
-export const FillOffset = (args: any) => (
+export const FillOffsetS2 = (args: any) => (
   <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
     <Slider {...args} />
   </div>
 );
 
-FillOffset.args = {
+FillOffsetS2.args = {
   label: 'Exposure',
   fillOffset: 0,
   defaultValue: 1.83,
diff --git a/packages/@react-spectrum/s2/stories/Switch.stories.tsx b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
index 73455554e21..cba6c8aca77 100644
--- a/packages/@react-spectrum/s2/stories/Switch.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
@@ -30,4 +30,4 @@ export default meta;
 
 export const Example = (args: any) => <Switch {...args}>Wi-Fi</Switch>;
 
-export const LongLabel = (args: any) => (<Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>);
+export const LongLabelS2 = (args: any) => (<Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>);
diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
index 0fbe9e81352..ceb483885f3 100644
--- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
@@ -111,12 +111,12 @@ TextAreaExample.args = {
   label: 'Comment'
 };
 
-export const CustomWidth = (args: any) => <TextField {...args} styles={style({width: 384})} />;
+export const CustomWidthS2 = (args: any) => <TextField {...args} styles={style({width: 384})} />;
 
-CustomWidth.args = {
+CustomWidthS2.args = {
   label: 'Name'
 };
-CustomWidth.parameters = {
+CustomWidthS2.parameters = {
   docs: {
     disable: true
   }

From 838482bace9f964f30f99eb9ecd7480b9c781605 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 28 Aug 2024 11:22:11 -0700
Subject: [PATCH 02/12] Add variable font and update titles

---
 .chromatic/preview-head.html                               | 7 +++++++
 packages/@react-spectrum/s2/stories/Checkbox.stories.tsx   | 2 +-
 .../@react-spectrum/s2/stories/SearchField.stories.tsx     | 6 +++---
 packages/@react-spectrum/s2/stories/Slider.stories.tsx     | 4 ++--
 packages/@react-spectrum/s2/stories/Switch.stories.tsx     | 2 +-
 packages/@react-spectrum/s2/stories/TextField.stories.tsx  | 6 +++---
 6 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/.chromatic/preview-head.html b/.chromatic/preview-head.html
index b55ba3dee9b..02e30d149e6 100644
--- a/.chromatic/preview-head.html
+++ b/.chromatic/preview-head.html
@@ -134,6 +134,13 @@
 <link rel="preload" href="https://use.typekit.net/af/838a89/00000000000000007735dab9/30/m?features=ALL&v=4&chunks=511&order=0" as="font" crossorigin="anonymous" />
 <link rel="preload" href="https://use.typekit.net/af/758ab2/00000000000000007735dabe/30/m?features=ALL&v=4&chunks=511&order=0" as="font" crossorigin="anonymous" />
 
+
+<!--
+  Load S2 adobe clean VF
+-->
+<link rel="preload" href="https://use.typekit.net/af/5e77d8/00000000000000007754d3a5/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://use.typekit.net/yuq6kxz.css">
+
 <!--
   This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,
   adobe-clean-han-korean, adobe-clean-han-simplified-c, and adobe-clean-han-traditional.
diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
index 2c5c118490f..a09dd2d4f33 100644
--- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
@@ -30,4 +30,4 @@ export default meta;
 
 export const Example = (args: any) => (<Checkbox {...args}>Unsubscribe</Checkbox>);
 
-export const LongLabelS2 = (args: any) => (<Checkbox {...args} styles={style({maxWidth: 128})}>Checkbox with very long label so we can see wrapping</Checkbox>);
+export const LongLabelWrapping = (args: any) => (<Checkbox {...args} styles={style({maxWidth: 128})}>Checkbox with very long label so we can see wrapping</Checkbox>);
diff --git a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
index daa59909c58..ceb78d03cd2 100644
--- a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
@@ -42,12 +42,12 @@ Example.args = {
   label: 'Search'
 };
 
-export const CustomWidthS2 = (args: any) => <SearchField {...args} styles={style({width: 256})} />;
+export const CustomFieldWidth = (args: any) => <SearchField {...args} styles={style({width: 256})} />;
 
-CustomWidthS2.args = {
+CustomFieldWidth.args = {
   label: 'Search'
 };
-CustomWidthS2.parameters = {
+CustomFieldWidth.parameters = {
   docs: {
     disable: true
   }
diff --git a/packages/@react-spectrum/s2/stories/Slider.stories.tsx b/packages/@react-spectrum/s2/stories/Slider.stories.tsx
index 887ee92f759..5ea026a2dd1 100644
--- a/packages/@react-spectrum/s2/stories/Slider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Slider.stories.tsx
@@ -42,13 +42,13 @@ Example.args = {
   defaultValue: 30
 };
 
-export const FillOffsetS2 = (args: any) => (
+export const FillOffsetExample = (args: any) => (
   <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
     <Slider {...args} />
   </div>
 );
 
-FillOffsetS2.args = {
+FillOffsetExample.args = {
   label: 'Exposure',
   fillOffset: 0,
   defaultValue: 1.83,
diff --git a/packages/@react-spectrum/s2/stories/Switch.stories.tsx b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
index cba6c8aca77..d078fe89ced 100644
--- a/packages/@react-spectrum/s2/stories/Switch.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
@@ -30,4 +30,4 @@ export default meta;
 
 export const Example = (args: any) => <Switch {...args}>Wi-Fi</Switch>;
 
-export const LongLabelS2 = (args: any) => (<Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>);
+export const LongLabelExample = (args: any) => (<Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>);
diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
index ceb483885f3..40375f0108c 100644
--- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
@@ -111,12 +111,12 @@ TextAreaExample.args = {
   label: 'Comment'
 };
 
-export const CustomWidthS2 = (args: any) => <TextField {...args} styles={style({width: 384})} />;
+export const CustomFieldWidth = (args: any) => <TextField {...args} styles={style({width: 384})} />;
 
-CustomWidthS2.args = {
+CustomFieldWidth.args = {
   label: 'Name'
 };
-CustomWidthS2.parameters = {
+CustomFieldWidth.parameters = {
   docs: {
     disable: true
   }

From 64731a0ead36fed88c225b6ba52589af34921e74 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 28 Aug 2024 11:43:37 -0700
Subject: [PATCH 03/12] updating FC storybook too

---
 .chromatic-fc/.parcelrc         | 8 +++++++-
 .chromatic-fc/main.js           | 5 ++++-
 .chromatic-fc/preview-head.html | 6 ++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/.chromatic-fc/.parcelrc b/.chromatic-fc/.parcelrc
index 81677b70840..86e08486da1 100644
--- a/.chromatic-fc/.parcelrc
+++ b/.chromatic-fc/.parcelrc
@@ -2,10 +2,16 @@
   "extends": "@parcel/config-default",
   "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
   "transformers": {
+    "packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
+    "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
+    "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
+    // Disable PostCSS from running over style macro output
+    "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
       "@parcel/transformer-js",
       "@parcel/transformer-react-refresh-wrap"
-    ]
+    ],
+    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
   }
 }
diff --git a/.chromatic-fc/main.js b/.chromatic-fc/main.js
index 3847aa3d70c..2dad2dbbb83 100644
--- a/.chromatic-fc/main.js
+++ b/.chromatic-fc/main.js
@@ -4,7 +4,10 @@ module.exports = {
     name: "storybook-react-parcel",
     options: {},
   },
-  stories: ['../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}'],
+  stories: [
+    '../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}',
+    '../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
   addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
     '@storybook/addon-a11y'
diff --git a/.chromatic-fc/preview-head.html b/.chromatic-fc/preview-head.html
index b55ba3dee9b..9019bc78375 100644
--- a/.chromatic-fc/preview-head.html
+++ b/.chromatic-fc/preview-head.html
@@ -134,6 +134,12 @@
 <link rel="preload" href="https://use.typekit.net/af/838a89/00000000000000007735dab9/30/m?features=ALL&v=4&chunks=511&order=0" as="font" crossorigin="anonymous" />
 <link rel="preload" href="https://use.typekit.net/af/758ab2/00000000000000007735dabe/30/m?features=ALL&v=4&chunks=511&order=0" as="font" crossorigin="anonymous" />
 
+<!--
+  Load S2 adobe clean VF
+-->
+<link rel="preload" href="https://use.typekit.net/af/5e77d8/00000000000000007754d3a5/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://use.typekit.net/yuq6kxz.css">
+
 <!--
   This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,
   adobe-clean-han-korean, adobe-clean-han-simplified-c, and adobe-clean-han-traditional.

From 391f2d4b7b0f838b85fb98ea4fd96963519c51f0 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 29 Aug 2024 11:44:27 -0700
Subject: [PATCH 04/12] move s2 stories into s2 sub category for chromatic
 merge

also make s2 appear last in chromatic storybook
---
 .chromatic/preview.js                                    | 7 +++----
 .../@react-spectrum/s2/stories/ActionButton.stories.tsx  | 3 ++-
 .../@react-spectrum/s2/stories/ActionMenu.stories.tsx    | 3 ++-
 .../@react-spectrum/s2/stories/AlertDialog.stories.tsx   | 5 +++--
 packages/@react-spectrum/s2/stories/Avatar.stories.tsx   | 3 ++-
 .../@react-spectrum/s2/stories/AvatarGroup.stories.tsx   | 3 ++-
 packages/@react-spectrum/s2/stories/Badge.stories.tsx    | 3 ++-
 .../@react-spectrum/s2/stories/Breadcrumbs.stories.tsx   | 3 ++-
 packages/@react-spectrum/s2/stories/Button.stories.tsx   | 3 ++-
 .../@react-spectrum/s2/stories/ButtonGroup.stories.tsx   | 3 ++-
 packages/@react-spectrum/s2/stories/Calendar.stories.tsx | 3 ++-
 packages/@react-spectrum/s2/stories/Checkbox.stories.tsx | 5 +++--
 .../@react-spectrum/s2/stories/CheckboxGroup.stories.tsx | 3 ++-
 .../@react-spectrum/s2/stories/ColorArea.stories.tsx     | 3 ++-
 .../@react-spectrum/s2/stories/ColorField.stories.tsx    | 3 ++-
 .../@react-spectrum/s2/stories/ColorSlider.stories.tsx   | 3 ++-
 .../@react-spectrum/s2/stories/ColorSwatch.stories.tsx   | 3 ++-
 .../s2/stories/ColorSwatchPicker.stories.tsx             | 3 ++-
 .../@react-spectrum/s2/stories/ColorWheel.stories.tsx    | 3 ++-
 packages/@react-spectrum/s2/stories/ComboBox.stories.tsx | 3 ++-
 .../s2/stories/ContextualHelp.stories.tsx                | 3 ++-
 .../@react-spectrum/s2/stories/DateField.stories.tsx     | 3 ++-
 .../@react-spectrum/s2/stories/DatePicker.stories.tsx    | 3 ++-
 .../s2/stories/DateRangePicker.stories.tsx               | 3 ++-
 packages/@react-spectrum/s2/stories/Dialog.stories.tsx   | 3 ++-
 packages/@react-spectrum/s2/stories/Divider.stories.tsx  | 4 ++--
 packages/@react-spectrum/s2/stories/DropZone.stories.tsx | 3 ++-
 packages/@react-spectrum/s2/stories/Form.stories.tsx     | 3 ++-
 packages/@react-spectrum/s2/stories/GridList.stories.tsx | 3 ++-
 packages/@react-spectrum/s2/stories/Icon.stories.tsx     | 3 ++-
 .../s2/stories/IllustratedMessage.stories.tsx            | 3 ++-
 .../@react-spectrum/s2/stories/InlineAlert.stories.tsx   | 3 ++-
 packages/@react-spectrum/s2/stories/Link.stories.tsx     | 3 ++-
 .../@react-spectrum/s2/stories/LinkButton.stories.tsx    | 3 ++-
 packages/@react-spectrum/s2/stories/ListBox.stories.tsx  | 3 ++-
 packages/@react-spectrum/s2/stories/Menu.stories.tsx     | 3 ++-
 packages/@react-spectrum/s2/stories/Meter.stories.tsx    | 3 ++-
 .../@react-spectrum/s2/stories/NumberField.stories.tsx   | 3 ++-
 packages/@react-spectrum/s2/stories/Picker.stories.tsx   | 3 ++-
 .../@react-spectrum/s2/stories/ProgressBar.stories.tsx   | 3 ++-
 .../s2/stories/ProgressCircle.stories.tsx                | 3 ++-
 .../@react-spectrum/s2/stories/RadioGroup.stories.tsx    | 3 ++-
 .../@react-spectrum/s2/stories/RangeCalendar.stories.tsx | 3 ++-
 .../@react-spectrum/s2/stories/RangeSlider.stories.tsx   | 3 ++-
 .../@react-spectrum/s2/stories/SearchField.stories.tsx   | 9 +++++----
 packages/@react-spectrum/s2/stories/Slider.stories.tsx   | 7 ++++---
 .../@react-spectrum/s2/stories/StatusLight.stories.tsx   | 3 ++-
 .../@react-spectrum/s2/stories/StyleMacro.stories.tsx    | 3 +--
 packages/@react-spectrum/s2/stories/Switch.stories.tsx   | 5 +++--
 packages/@react-spectrum/s2/stories/Table.stories.tsx    | 3 ++-
 packages/@react-spectrum/s2/stories/Tabs.stories.tsx     | 3 ++-
 packages/@react-spectrum/s2/stories/TagGroup.stories.tsx | 3 ++-
 .../@react-spectrum/s2/stories/TextField.stories.tsx     | 9 +++++----
 .../@react-spectrum/s2/stories/TimeField.stories.tsx     | 3 ++-
 .../@react-spectrum/s2/stories/ToggleButton.stories.tsx  | 3 ++-
 packages/@react-spectrum/s2/stories/Toolbar.stories.tsx  | 3 ++-
 packages/@react-spectrum/s2/stories/Tooltip.stories.tsx  | 3 ++-
 57 files changed, 125 insertions(+), 73 deletions(-)

diff --git a/.chromatic/preview.js b/.chromatic/preview.js
index e7e2f507360..05937e0bcf4 100644
--- a/.chromatic/preview.js
+++ b/.chromatic/preview.js
@@ -12,10 +12,9 @@ configureActions({
 
 export const parameters = {
   options: {
-    storySort: (a, b) => {
-      return a.title === b.title
-        ? 0
-        : a.id.localeCompare(b.id, undefined, { numeric: true });
+    storySort: {
+      method: 'alphabetical',
+      order: ['*', 'S2']
     }
   },
   a11y: {},
diff --git a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
index 4371f93c54f..0ef4a3992cb 100644
--- a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
@@ -26,7 +26,8 @@ const meta: Meta<typeof ActionButton> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'])
-  }
+  },
+  title: 'S2/ActionButton'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx b/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
index 4c97fa4bb39..e60edf83962 100644
--- a/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
@@ -23,7 +23,8 @@ const meta: Meta<typeof ActionMenu> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onAction', 'onOpenChange'])
-  }
+  },
+  title: 'S2/ActionMenu'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx b/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx
index 20eb1ad54f1..b3fd6044824 100644
--- a/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof AlertDialog> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/AlertDialog'
 };
 
 export default meta;
@@ -28,7 +29,7 @@ export const Example = (args: any) => (
     <ActionButton>Save</ActionButton>
     <AlertDialog {...args} >
       You have not saved your profile information
-      for this account. Would you like to register now?   
+      for this account. Would you like to register now?
     </AlertDialog>
   </DialogTrigger>
 );
diff --git a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
index e4accdc5f31..4dcd9243ea7 100644
--- a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
@@ -27,7 +27,8 @@ const meta: Meta<typeof Avatar> = {
         {children(args)}
       </div>
     ) : children(args)
-  )
+  ),
+  title: 'S2/Avatar'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx b/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx
index 76b6095e25f..d53386df96a 100644
--- a/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/AvatarGroup.stories.tsx
@@ -20,7 +20,8 @@ const meta: Meta<typeof AvatarGroup> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/AvatarGroup'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Badge.stories.tsx b/packages/@react-spectrum/s2/stories/Badge.stories.tsx
index a80f893cda4..6a921947e7f 100644
--- a/packages/@react-spectrum/s2/stories/Badge.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Badge.stories.tsx
@@ -20,7 +20,8 @@ const meta: Meta<typeof Badge> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/Badge'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
index 63e69403b57..d311bec13e9 100644
--- a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
@@ -31,7 +31,8 @@ const meta: Meta<typeof Breadcrumbs> = {
       table: {category: 'Events'}
     }
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/Breadcrumbs'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Button.stories.tsx b/packages/@react-spectrum/s2/stories/Button.stories.tsx
index 10a0b89c37e..a276f049d7c 100644
--- a/packages/@react-spectrum/s2/stories/Button.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Button.stories.tsx
@@ -25,7 +25,8 @@ const meta: Meta<typeof Button> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'])
-  }
+  },
+  title: 'S2/Button'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx b/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx
index a7f3883c825..cc45a14317c 100644
--- a/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx
@@ -20,7 +20,8 @@ const meta: Meta<typeof ButtonGroup> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/ButtonGroup'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Calendar.stories.tsx b/packages/@react-spectrum/s2/stories/Calendar.stories.tsx
index d19c8bd479e..b19c8f6acbc 100644
--- a/packages/@react-spectrum/s2/stories/Calendar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Calendar.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof Calendar> = {
   component: Calendar,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/Calendar'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
index a09dd2d4f33..f8cf5f355f0 100644
--- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
@@ -23,11 +23,12 @@ const meta: Meta<typeof Checkbox> = {
   argTypes: {
     inputRef: {control: {disable: true}},
     onChange: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/Checkbox'
 };
 
 export default meta;
 
 export const Example = (args: any) => (<Checkbox {...args}>Unsubscribe</Checkbox>);
 
-export const LongLabelWrapping = (args: any) => (<Checkbox {...args} styles={style({maxWidth: 128})}>Checkbox with very long label so we can see wrapping</Checkbox>);
+export const LongLabel = (args: any) => (<Checkbox {...args} styles={style({maxWidth: 128})}>Checkbox with very long label so we can see wrapping</Checkbox>);
diff --git a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
index 0ac6c85364c..d9858a9bc67 100644
--- a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
@@ -30,7 +30,8 @@ const meta: Meta<typeof CheckboxGroup> = {
   tags: ['autodocs'],
   argTypes: {
     onChange: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/CheckboxGroup'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx b/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
index 52d5ba754d6..f847cac07b0 100644
--- a/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
@@ -22,7 +22,8 @@ const meta: Meta<typeof ColorArea> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onChange', 'onChangeEnd'])
-  }
+  },
+  title: 'S2/ColorArea'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
index db4f0a949cc..7e2f0a9b91b 100644
--- a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
@@ -29,7 +29,8 @@ const meta: Meta<typeof ColorField> = {
   tags: ['autodocs'],
   argTypes: {
     onChange: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/ColorField'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx b/packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx
index 4413f3e3ce0..4931af5908c 100644
--- a/packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx
@@ -23,7 +23,8 @@ const meta: Meta<typeof ColorSlider> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onChange', 'onChangeEnd'])
-  }
+  },
+  title: 'S2/ColorSlider'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx b/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx
index 0ce50af08b7..ce6131eef04 100644
--- a/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorSwatch.stories.tsx
@@ -19,7 +19,8 @@ const meta: Meta<typeof ColorSwatch> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/ColorSwatch'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx b/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx
index 1a7f5fa1061..58d61289f44 100644
--- a/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorSwatchPicker.stories.tsx
@@ -23,7 +23,8 @@ const meta: Meta<typeof ColorSwatchPicker> = {
   tags: ['autodocs'],
   argTypes: {
     onChange: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/ColorSwatchPicker'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx b/packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx
index 58be072f88f..9e9fce8b310 100644
--- a/packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx
@@ -23,7 +23,8 @@ const meta: Meta<typeof ColorWheel> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onChange', 'onChangeEnd'])
-  }
+  },
+  title: 'S2/ColorWheel'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
index 78a39ebbe96..0403823931f 100644
--- a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
@@ -26,7 +26,8 @@ const meta: Meta<typeof ComboBox<any>> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onInputChange', 'onOpenChange', 'onSelectionChange'])
-  }
+  },
+  title: 'S2/ComboBox'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ContextualHelp.stories.tsx b/packages/@react-spectrum/s2/stories/ContextualHelp.stories.tsx
index aa70612fc12..688ae4d70de 100644
--- a/packages/@react-spectrum/s2/stories/ContextualHelp.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ContextualHelp.stories.tsx
@@ -10,7 +10,8 @@ const meta: Meta<typeof ContextualHelp> = {
   tags: ['autodocs'],
   argTypes: {
     onOpenChange: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/ContextualHelp'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/DateField.stories.tsx b/packages/@react-spectrum/s2/stories/DateField.stories.tsx
index aaaa1c056e3..eaac0848597 100644
--- a/packages/@react-spectrum/s2/stories/DateField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DateField.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof DateField> = {
   component: DateField,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/DateField'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx b/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
index 93471c7e311..45fb86b31bb 100644
--- a/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof DatePicker> = {
   component: DatePicker,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/DatePicker'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
index 924062b7325..06e39b4e629 100644
--- a/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof DateRangePicker> = {
   component: DateRangePicker,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/DateRangePicker'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
index bfbe97d94bb..ec5f6a70e40 100644
--- a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
@@ -30,7 +30,8 @@ const meta: Meta<typeof Dialog> = {
       options: ['popover', 'modal', 'fullscreen', 'fullscreenTakeover']
     }
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/Dialog'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Divider.stories.tsx b/packages/@react-spectrum/s2/stories/Divider.stories.tsx
index 53890f6fbd0..5e29b53f54d 100644
--- a/packages/@react-spectrum/s2/stories/Divider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Divider.stories.tsx
@@ -22,7 +22,8 @@ const meta: Meta<typeof Divider> = {
     layout: 'centered'
   },
   decorators: [StaticColorDecorator],
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/Divider'
 };
 
 export default meta;
@@ -56,4 +57,3 @@ export const Example = {
     </section>
   )
 };
-
diff --git a/packages/@react-spectrum/s2/stories/DropZone.stories.tsx b/packages/@react-spectrum/s2/stories/DropZone.stories.tsx
index 92e126d504d..b6a002d4dff 100644
--- a/packages/@react-spectrum/s2/stories/DropZone.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DropZone.stories.tsx
@@ -28,7 +28,8 @@ const meta: Meta<typeof DropZone> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onDrop', 'onDropActivate', 'onDropEnter', 'onDropExit', 'onDropMove'])
-  }
+  },
+  title: 'S2/DropZone'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Form.stories.tsx b/packages/@react-spectrum/s2/stories/Form.stories.tsx
index 9a81f6d3b6a..fb25bff2ba2 100644
--- a/packages/@react-spectrum/s2/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Form.stories.tsx
@@ -56,7 +56,8 @@ const meta: Meta<typeof Form> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onInvalid', 'onReset', 'onSubmit'])
-  }
+  },
+  title: 'S2/Form'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/GridList.stories.tsx b/packages/@react-spectrum/s2/stories/GridList.stories.tsx
index 76bad583fb6..09995c3c18f 100644
--- a/packages/@react-spectrum/s2/stories/GridList.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/GridList.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof GridList> = {
   component: GridList,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/GridList'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Icon.stories.tsx b/packages/@react-spectrum/s2/stories/Icon.stories.tsx
index 8996d4e423a..ac0b38a960b 100644
--- a/packages/@react-spectrum/s2/stories/Icon.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Icon.stories.tsx
@@ -17,7 +17,8 @@ const meta: Meta<typeof NewIcon> = {
   component: NewIcon,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/Icon'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/IllustratedMessage.stories.tsx b/packages/@react-spectrum/s2/stories/IllustratedMessage.stories.tsx
index ef8e9899c83..987fc55f66c 100644
--- a/packages/@react-spectrum/s2/stories/IllustratedMessage.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/IllustratedMessage.stories.tsx
@@ -20,7 +20,8 @@ const meta: Meta<typeof IllustratedMessage> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/IllustratedMessage'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx b/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx
index 18d10569fcc..0d3189a7834 100644
--- a/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/InlineAlert.stories.tsx
@@ -19,7 +19,8 @@ const meta: Meta<typeof InlineAlert> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/InlineAlert'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Link.stories.tsx b/packages/@react-spectrum/s2/stories/Link.stories.tsx
index 32a53b5b944..1bf194514cf 100644
--- a/packages/@react-spectrum/s2/stories/Link.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Link.stories.tsx
@@ -28,7 +28,8 @@ const meta: Meta<typeof Link> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'])
-  }
+  },
+  title: 'S2/Link'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx b/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx
index 2c3c62c0ba9..3a8e281a790 100644
--- a/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/LinkButton.stories.tsx
@@ -25,7 +25,8 @@ const meta: Meta<typeof LinkButton> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'])
-  }
+  },
+  title: 'S2/LinkButton'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ListBox.stories.tsx b/packages/@react-spectrum/s2/stories/ListBox.stories.tsx
index fc45b3b0856..a48d5708f9e 100644
--- a/packages/@react-spectrum/s2/stories/ListBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ListBox.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof ListBox> = {
   component: ListBox,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/ListBox'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Menu.stories.tsx b/packages/@react-spectrum/s2/stories/Menu.stories.tsx
index 14409b9bf60..04f206a5ab3 100644
--- a/packages/@react-spectrum/s2/stories/Menu.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Menu.stories.tsx
@@ -33,7 +33,8 @@ const meta: Meta<typeof CombinedMenu> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onAction', 'onClose', 'onOpenChange', 'onScroll', 'onSelectionChange'])
-  }
+  },
+  title: 'S2/Menu'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Meter.stories.tsx b/packages/@react-spectrum/s2/stories/Meter.stories.tsx
index baf49e57ed3..5bf5be350ec 100644
--- a/packages/@react-spectrum/s2/stories/Meter.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Meter.stories.tsx
@@ -20,7 +20,8 @@ const meta: Meta<typeof Meter> = {
     layout: 'centered'
   },
   decorators: [StaticColorDecorator],
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/Meter'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
index 0642b5112fe..ee06f21ac7a 100644
--- a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
@@ -29,7 +29,8 @@ const meta: Meta<typeof NumberField> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/NumberField'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Picker.stories.tsx b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
index ce476ca6bde..afa7534df5f 100644
--- a/packages/@react-spectrum/s2/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
@@ -39,7 +39,8 @@ const meta: Meta<typeof Picker<any>> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onOpenChange', 'onSelectionChange'])
-  }
+  },
+  title: 'S2/Picker'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx b/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx
index b45ceaaf761..dadc71e091b 100644
--- a/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ProgressBar.stories.tsx
@@ -20,7 +20,8 @@ const meta: Meta<typeof ProgressBar> = {
     layout: 'centered'
   },
   decorators: [StaticColorDecorator],
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/ProgressBar'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ProgressCircle.stories.tsx b/packages/@react-spectrum/s2/stories/ProgressCircle.stories.tsx
index 329fa435c90..67d150d7351 100644
--- a/packages/@react-spectrum/s2/stories/ProgressCircle.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ProgressCircle.stories.tsx
@@ -20,7 +20,8 @@ const meta: Meta<typeof ProgressCircle> = {
     layout: 'centered'
   },
   decorators: [StaticColorDecorator],
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/ProgressCircle'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx
index 7b79ff950c0..572271c2b99 100644
--- a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx
@@ -31,7 +31,8 @@ const meta: Meta<typeof RadioGroup> = {
   tags: ['autodocs'],
   argTypes: {
     onChange: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/RadioGroup'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx b/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx
index b43f56407db..bd9e1c8b607 100644
--- a/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof RangeCalendar> = {
   component: RangeCalendar,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/RangeCalendar'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx b/packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx
index 97d51b1d619..54a0cf13482 100644
--- a/packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx
@@ -25,7 +25,8 @@ const meta: Meta<typeof RangeSlider> = {
   tags: ['autodocs'],
   argTypes: {
     onChangeEnd: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/RangeSlider'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
index ceb78d03cd2..f4c56de7859 100644
--- a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx
@@ -31,7 +31,8 @@ const meta: Meta<typeof SearchField> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onChange', 'onClear', 'onSubmit'])
-  }
+  },
+  title: 'S2/SearchField'
 };
 
 export default meta;
@@ -42,12 +43,12 @@ Example.args = {
   label: 'Search'
 };
 
-export const CustomFieldWidth = (args: any) => <SearchField {...args} styles={style({width: 256})} />;
+export const CustomWidth = (args: any) => <SearchField {...args} styles={style({width: 256})} />;
 
-CustomFieldWidth.args = {
+CustomWidth.args = {
   label: 'Search'
 };
-CustomFieldWidth.parameters = {
+CustomWidth.parameters = {
   docs: {
     disable: true
   }
diff --git a/packages/@react-spectrum/s2/stories/Slider.stories.tsx b/packages/@react-spectrum/s2/stories/Slider.stories.tsx
index 5ea026a2dd1..f77de7ea549 100644
--- a/packages/@react-spectrum/s2/stories/Slider.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Slider.stories.tsx
@@ -26,7 +26,8 @@ const meta: Meta<typeof Slider> = {
   tags: ['autodocs'],
   argTypes: {
     onChangeEnd: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/Slider'
 };
 
 export default meta;
@@ -42,13 +43,13 @@ Example.args = {
   defaultValue: 30
 };
 
-export const FillOffsetExample = (args: any) => (
+export const FillOffset = (args: any) => (
   <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
     <Slider {...args} />
   </div>
 );
 
-FillOffsetExample.args = {
+FillOffset.args = {
   label: 'Exposure',
   fillOffset: 0,
   defaultValue: 1.83,
diff --git a/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx b/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx
index e5745154f1e..ed831177dc4 100644
--- a/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/StatusLight.stories.tsx
@@ -19,7 +19,8 @@ const meta: Meta<typeof StatusLight> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/StatusLight'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx
index 07f6a69f9f3..f49a1365bee 100644
--- a/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx
@@ -15,7 +15,7 @@ import React from 'react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 export default {
-  title: 'S2 Style Macro',
+  title: 'S2/S2 Style Macro',
   parameters: {
     docs: {disable: true}
   }
@@ -49,4 +49,3 @@ export function Well() {
     </div>
   );
 }
-
diff --git a/packages/@react-spectrum/s2/stories/Switch.stories.tsx b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
index d078fe89ced..37d08d3c44b 100644
--- a/packages/@react-spectrum/s2/stories/Switch.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Switch.stories.tsx
@@ -23,11 +23,12 @@ const meta: Meta<typeof Switch> = {
   argTypes: {
     inputRef: {control: {disable: true}},
     onChange: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/Switch'
 };
 
 export default meta;
 
 export const Example = (args: any) => <Switch {...args}>Wi-Fi</Switch>;
 
-export const LongLabelExample = (args: any) => (<Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>);
+export const LongLabel = (args: any) => (<Switch {...args} styles={style({maxWidth: 128})}>Switch with very long label so we can see wrapping</Switch>);
diff --git a/packages/@react-spectrum/s2/stories/Table.stories.tsx b/packages/@react-spectrum/s2/stories/Table.stories.tsx
index 8839c73a0b0..37b9fbf31b3 100644
--- a/packages/@react-spectrum/s2/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Table.stories.tsx
@@ -19,7 +19,8 @@ const meta: Meta<typeof Table> = {
   component: Table,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/Table'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index 82b08c78d3f..be519d36bfc 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -22,7 +22,8 @@ const meta: Meta<typeof Tabs> = {
   parameters: {
     layout: 'centered'
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/Tabs'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx b/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx
index f8c924772dc..ef599e501b9 100644
--- a/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx
@@ -42,7 +42,8 @@ const meta: Meta<typeof TagGroup<any>> = {
     },
     onSelectionChange: {table: {category: 'Events'}}
   },
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  title: 'S2/TagGroup'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/TextField.stories.tsx b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
index 40375f0108c..bea579581e3 100644
--- a/packages/@react-spectrum/s2/stories/TextField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TextField.stories.tsx
@@ -25,7 +25,8 @@ const meta: Meta<typeof TextField> = {
   tags: ['autodocs'],
   argTypes: {
     onChange: {table: {category: 'Events'}}
-  }
+  },
+  title: 'S2/TextField'
 };
 
 export default meta;
@@ -111,12 +112,12 @@ TextAreaExample.args = {
   label: 'Comment'
 };
 
-export const CustomFieldWidth = (args: any) => <TextField {...args} styles={style({width: 384})} />;
+export const CustomWidth = (args: any) => <TextField {...args} styles={style({width: 384})} />;
 
-CustomFieldWidth.args = {
+CustomWidth.args = {
   label: 'Name'
 };
-CustomFieldWidth.parameters = {
+CustomWidth.parameters = {
   docs: {
     disable: true
   }
diff --git a/packages/@react-spectrum/s2/stories/TimeField.stories.tsx b/packages/@react-spectrum/s2/stories/TimeField.stories.tsx
index f1daeef99cb..50f60eb5d44 100644
--- a/packages/@react-spectrum/s2/stories/TimeField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TimeField.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof TimeField> = {
   component: TimeField,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/TimeField'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx b/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx
index 93596beddff..acf5dd182e9 100644
--- a/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ToggleButton.stories.tsx
@@ -24,7 +24,8 @@ const meta: Meta<typeof ToggleButton> = {
   tags: ['autodocs'],
   argTypes: {
     ...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'])
-  }
+  },
+  title: 'S2/ToggleButton'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx b/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx
index 8d2daa5fcaa..29319ba2f64 100644
--- a/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx
@@ -25,7 +25,8 @@ const meta: Meta<typeof Toolbar> = {
   component: Toolbar,
   parameters: {
     layout: 'centered'
-  }
+  },
+  title: 'S2/Toolbar'
 };
 
 export default meta;
diff --git a/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx b/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx
index 18e880bde79..ab8dbb6090c 100644
--- a/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx
@@ -27,7 +27,8 @@ const meta: Meta<typeof CombinedTooltip> = {
   argTypes: {
     onOpenChange: {table: {category: 'Events'}}
   },
-  decorators: [(Story) => <div style={{height: '100px', width: '200px', display: 'flex', alignItems: 'end', justifyContent: 'center', paddingBottom: 10}}><Story /></div>]
+  decorators: [(Story) => <div style={{height: '100px', width: '200px', display: 'flex', alignItems: 'end', justifyContent: 'center', paddingBottom: 10}}><Story /></div>],
+  title: 'S2/Tooltip'
 };
 
 export default meta;

From 1df6f3de38f0c091bbbbd854a06696e106da4e89 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 29 Aug 2024 11:47:41 -0700
Subject: [PATCH 05/12] update chromatic forced colors storybook order too

---
 .chromatic-fc/preview.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/.chromatic-fc/preview.js b/.chromatic-fc/preview.js
index 181b170228f..116d8f603b3 100644
--- a/.chromatic-fc/preview.js
+++ b/.chromatic-fc/preview.js
@@ -12,10 +12,9 @@ configureActions({
 
 export const parameters = {
   options: {
-    storySort: (a, b) => {
-      return a.title === b.title
-        ? 0
-        : a.id.localeCompare(b.id, undefined, { numeric: true });
+    storySort: {
+      method: 'alphabetical',
+      order: ['*', 'S2']
     }
   },
   a11y: {},

From 72b86e14ea07ff80ef343d6b52b4ff709f3b17bd Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 29 Aug 2024 17:29:47 -0700
Subject: [PATCH 06/12] use S2 provider for s2 chromatic

---
 .chromatic-fc/constants.js                    |   3 +
 .../custom-addons/chromatic/index.js          |  94 ++++++++++-----
 .chromatic/constants.js                       |   3 +
 .chromatic/custom-addons/chromatic/index.js   | 109 ++++++++++++------
 4 files changed, 142 insertions(+), 67 deletions(-)

diff --git a/.chromatic-fc/constants.js b/.chromatic-fc/constants.js
index 9fb082ad703..fbc438c9e6c 100644
--- a/.chromatic-fc/constants.js
+++ b/.chromatic-fc/constants.js
@@ -62,6 +62,9 @@ for (let key in themes) {
   };
 }
 
+export let S2ColorThemes = ['light', 'dark'];
+export let S2Backgrounds = ['base', 'layer-1', 'layer-2'];
+
 // Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
 export let locales = [
   {label: 'Auto', value: ''},
diff --git a/.chromatic-fc/custom-addons/chromatic/index.js b/.chromatic-fc/custom-addons/chromatic/index.js
index 1e2df395660..fc05b96dd74 100644
--- a/.chromatic-fc/custom-addons/chromatic/index.js
+++ b/.chromatic-fc/custom-addons/chromatic/index.js
@@ -1,6 +1,7 @@
-import {expressThemes, locales, scales, themes} from '../../constants';
+import {expressThemes, locales, S2ColorThemes, scales, themes} from '../../constants';
 import {makeDecorator} from '@storybook/preview-api';
 import {Provider, View} from '@adobe/react-spectrum';
+import {Provider as S2Provider} from '@react-spectrum/s2';
 import React, {useEffect} from 'react';
 import './disableAnimations.css';
 
@@ -15,8 +16,7 @@ export const withChromaticProvider = makeDecorator({
     } else {
       selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US'];
     }
-    let colorSchemes = options.express ? [] : (options.colorSchemes || ['light']);
-    let scalesToRender = options.scales || ['medium'];
+
     let height;
     let minHeight;
     if(isNaN(options.height)) {
@@ -25,40 +25,70 @@ export const withChromaticProvider = makeDecorator({
       height = options.height;
     }
 
-    let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
-    let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
-    let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
-    let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
+    if (context.title.includes('S2/')) {
+      return <RenderS2 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
+    } else {
+      return <RenderV3 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
+    }
+  }
+});
+
+function RenderS2({getStory, context, options, selectedLocales, height, minHeight}) {
+  let colorSchemes = options.colorSchemes || S2ColorThemes;
 
-    // do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
-    return (
-      <DisableAnimations disableAnimations={options.disableAnimations}>
-        <div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
-            {colorSchemes.map(colorScheme =>
-              scalesToRender.map(scale =>
-                (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
-                  <Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
-                    <View margin="size-100">
-                      <h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
-                      {getStory(context)}
-                    </View>
-                  </Provider>
-                )
-              )
-            )}
-            {options.express !== false &&
-              <Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
+  return (
+    <DisableAnimations disableAnimations={options.disableAnimations}>
+      <div style={{display: 'flex', flexDirection: 'column', height, minHeight, width: '90vw'}}>
+        {colorSchemes.map(colorScheme =>
+          (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
+            <S2Provider key={`${colorScheme}_${locale}`} colorScheme={colorScheme} background="base" locale={locale}>
+              <div style={{margin: '8px'}}>
+                <h1 style={{margin: 0, padding: 0, color: colorScheme === 'dark' ? 'white' : 'black'}}>{`${colorScheme}, base, ${locale}`}</h1>
+                {getStory(context)}
+              </div>
+            </S2Provider>
+          )
+        )}
+      </div>
+    </DisableAnimations>
+  )
+}
+
+function RenderV3({getStory, context, options, selectedLocales, height, minHeight}) {
+  let colorSchemes = options.express ? [] : (options.colorSchemes || ['light']);
+  let scalesToRender = options.scales || ['medium'];
+  let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
+  let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
+  let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
+  let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
+
+  return (
+    <DisableAnimations disableAnimations={options.disableAnimations}>
+      <div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
+        {colorSchemes.map(colorScheme =>
+          scalesToRender.map(scale =>
+            (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
+              <Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
                 <View margin="size-100">
-                  <h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
+                  <h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
                   {getStory(context)}
                 </View>
               </Provider>
-            }
-        </div>
-      </DisableAnimations>
-    )
-  }
-});
+            )
+          )
+        )}
+        {options.express !== false &&
+          <Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
+            <View margin="size-100">
+              <h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
+              {getStory(context)}
+            </View>
+          </Provider>
+        }
+      </div>
+    </DisableAnimations>
+  )
+}
 
 function DisableAnimations({children, disableAnimations}) {
   useEffect(() => {
diff --git a/.chromatic/constants.js b/.chromatic/constants.js
index 9fb082ad703..fbc438c9e6c 100644
--- a/.chromatic/constants.js
+++ b/.chromatic/constants.js
@@ -62,6 +62,9 @@ for (let key in themes) {
   };
 }
 
+export let S2ColorThemes = ['light', 'dark'];
+export let S2Backgrounds = ['base', 'layer-1', 'layer-2'];
+
 // Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
 export let locales = [
   {label: 'Auto', value: ''},
diff --git a/.chromatic/custom-addons/chromatic/index.js b/.chromatic/custom-addons/chromatic/index.js
index 1c71d85e02b..709018ab504 100644
--- a/.chromatic/custom-addons/chromatic/index.js
+++ b/.chromatic/custom-addons/chromatic/index.js
@@ -1,7 +1,10 @@
-import {expressThemes, locales, scales, themes} from '../../constants';
+import {expressThemes, locales, S2Backgrounds, S2ColorThemes, scales, themes} from '../../constants';
 import {makeDecorator} from '@storybook/preview-api';
 import {Provider, View} from '@adobe/react-spectrum';
+import {Provider as S2Provider} from '@react-spectrum/s2';
 import React, {useEffect} from 'react';
+// TODO: can't seem to use the style macro here...
+// import {style} from '../../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
 import './disableAnimations.css';
 
 export const withChromaticProvider = makeDecorator({
@@ -15,8 +18,7 @@ export const withChromaticProvider = makeDecorator({
     } else {
       selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US', 'ar-AE'];
     }
-    let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes));
-    let scalesToRender = options.scales || Object.keys(scales);
+
     let height;
     let minHeight;
     if(isNaN(options.height)) {
@@ -25,41 +27,78 @@ export const withChromaticProvider = makeDecorator({
       height = options.height;
     }
 
-    let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
-    let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
-    let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
-    let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
-
-    // do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
-    return (
-      <DisableAnimations disableAnimations={options.disableAnimations}>
-        <div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
-            {colorSchemes.map(colorScheme =>
-              scalesToRender.map(scale =>
-                (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
-                  <Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
-                    <View margin="size-100">
-                      <h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
-                      {getStory(context)}
-                    </View>
-                  </Provider>
-                )
-              )
-            )}
-            {options.express !== false &&
-              <Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
-                <View margin="size-100">
-                  <h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
-                  {getStory(context)}
-                </View>
-              </Provider>
-            }
-        </div>
-      </DisableAnimations>
-    )
+    if (context.title.includes('S2/')) {
+      return <RenderS2 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
+    } else {
+      return <RenderV3 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
+    }
   }
 });
 
+function RenderS2({getStory, context, options, selectedLocales, height, minHeight}) {
+  let colorSchemes = options.colorSchemes || S2ColorThemes;
+  // TODO: not sure if we need to snapshot against layers? Doesn't look like any of the colors of the components change with respect to the layer
+  let backgrounds = options.backgrounds || S2Backgrounds;
+
+  // TODO: there is perhaps some things that can still be shared between the two renders but figured it be easiest to just split them out for the most part
+  return (
+    <DisableAnimations disableAnimations={options.disableAnimations}>
+      <div style={{display: 'flex', flexDirection: 'column', height, minHeight, width: '90vw'}}>
+        {colorSchemes.map(colorScheme =>
+          backgrounds.map(background =>
+            (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
+              <S2Provider key={`${colorScheme}_${background}_${locale}`} background={background} colorScheme={colorScheme} locale={locale}>
+                <div style={{margin: '8px'}}>
+                  <h1 style={{margin: 0, padding: 0, color: colorScheme === 'dark' ? 'white' : 'black'}}>{`${colorScheme}, ${background}, ${locale}`}</h1>
+                  {getStory(context)}
+                </div>
+              </S2Provider>
+            )
+          )
+        )}
+      </div>
+    </DisableAnimations>
+  )
+}
+
+function RenderV3({getStory, context, options, selectedLocales, height, minHeight}) {
+  let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes));
+  let scalesToRender = options.scales || Object.keys(scales);
+
+  let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
+  let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
+  let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
+  let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
+
+  // do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
+  return (
+    <DisableAnimations disableAnimations={options.disableAnimations}>
+      <div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
+          {colorSchemes.map(colorScheme =>
+            scalesToRender.map(scale =>
+              (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
+                <Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
+                  <View margin="size-100">
+                    <h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
+                    {getStory(context)}
+                  </View>
+                </Provider>
+              )
+            )
+          )}
+          {options.express !== false &&
+            <Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
+              <View margin="size-100">
+                <h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
+                {getStory(context)}
+              </View>
+            </Provider>
+          }
+      </div>
+    </DisableAnimations>
+  )
+}
+
 function DisableAnimations({children, disableAnimations}) {
   useEffect(() => {
     if (disableAnimations) {

From 21056075dc1b1e588e8283fa4ee3c694cec41b98 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 30 Aug 2024 11:00:10 -0700
Subject: [PATCH 07/12] remove s2 storys that dont have finished components yet
 from snapshots

---
 package.json                                                 | 2 --
 packages/@react-spectrum/s2/stories/Calendar.stories.tsx     | 5 ++++-
 packages/@react-spectrum/s2/stories/DateField.stories.tsx    | 5 ++++-
 packages/@react-spectrum/s2/stories/DatePicker.stories.tsx   | 5 ++++-
 .../@react-spectrum/s2/stories/DateRangePicker.stories.tsx   | 5 ++++-
 packages/@react-spectrum/s2/stories/GridList.stories.tsx     | 5 ++++-
 packages/@react-spectrum/s2/stories/ListBox.stories.tsx      | 5 ++++-
 .../@react-spectrum/s2/stories/RangeCalendar.stories.tsx     | 5 ++++-
 packages/@react-spectrum/s2/stories/Table.stories.tsx        | 5 ++++-
 packages/@react-spectrum/s2/stories/TimeField.stories.tsx    | 5 ++++-
 packages/@react-spectrum/s2/stories/Toolbar.stories.tsx      | 5 ++++-
 11 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 40c6af242ba..d4542743a14 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "start:s2": "NODE_ENV=storybook storybook dev -p 6006 --ci -c '.storybook-s2'",
     "build:storybook-s2": "NODE_ENV=storybook storybook build -c .storybook-s2 -o dist/$(git rev-parse HEAD)/storybook-s2",
     "build:s2-docs": "NODE_ENV=storybook storybook build -c .storybook-s2 --docs",
-    "build:chromatic-s2": "CHROMATIC=1 NODE_ENV=storybook storybook build -c .storybook-s2 --test",
     "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
     "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
     "test": "cross-env STRICT_MODE=1 yarn jest",
@@ -44,7 +43,6 @@
     "plop": "plop --plopfile scripts/plopfile.js",
     "chromatic": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name 'build:chromatic'",
     "chromatic:forced-colors": "NODE_ENV=production CHROMATIC=1 chromatic --project-token $CHROMATIC_FC_PROJECT_TOKEN --build-script-name 'build:chromatic-fc'",
-    "chromatic:s2": "NODE_ENV=production CHROMATIC=1 chromatic --buildScriptName='build:chromatic-s2' --project-token=$RAINBOW_CHROMATIC_PROJECT_TOKEN",
     "merge:css": "babel-node --presets @babel/env ./scripts/merge-spectrum-css.js",
     "release": "lerna publish from-package --yes",
     "publish:nightly": "lerna publish -y --canary --preid nightly --dist-tag=nightly --exact --force-publish='*' --no-push --no-verify-access",
diff --git a/packages/@react-spectrum/s2/stories/Calendar.stories.tsx b/packages/@react-spectrum/s2/stories/Calendar.stories.tsx
index b19c8f6acbc..c8a33845e9d 100644
--- a/packages/@react-spectrum/s2/stories/Calendar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Calendar.stories.tsx
@@ -17,7 +17,10 @@ import type {Meta} from '@storybook/react';
 const meta: Meta<typeof Calendar> = {
   component: Calendar,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/Calendar'
 };
diff --git a/packages/@react-spectrum/s2/stories/DateField.stories.tsx b/packages/@react-spectrum/s2/stories/DateField.stories.tsx
index eaac0848597..9abecadb491 100644
--- a/packages/@react-spectrum/s2/stories/DateField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DateField.stories.tsx
@@ -17,7 +17,10 @@ import type {Meta} from '@storybook/react';
 const meta: Meta<typeof DateField> = {
   component: DateField,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/DateField'
 };
diff --git a/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx b/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
index 45fb86b31bb..edc52e84d4a 100644
--- a/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
@@ -17,7 +17,10 @@ import type {Meta} from '@storybook/react';
 const meta: Meta<typeof DatePicker> = {
   component: DatePicker,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/DatePicker'
 };
diff --git a/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
index 06e39b4e629..91e0c47a2fd 100644
--- a/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
@@ -17,7 +17,10 @@ import type {Meta} from '@storybook/react';
 const meta: Meta<typeof DateRangePicker> = {
   component: DateRangePicker,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/DateRangePicker'
 };
diff --git a/packages/@react-spectrum/s2/stories/GridList.stories.tsx b/packages/@react-spectrum/s2/stories/GridList.stories.tsx
index 09995c3c18f..9187eeef0aa 100644
--- a/packages/@react-spectrum/s2/stories/GridList.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/GridList.stories.tsx
@@ -17,7 +17,10 @@ import type {Meta} from '@storybook/react';
 const meta: Meta<typeof GridList> = {
   component: GridList,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/GridList'
 };
diff --git a/packages/@react-spectrum/s2/stories/ListBox.stories.tsx b/packages/@react-spectrum/s2/stories/ListBox.stories.tsx
index a48d5708f9e..9d9d778aa43 100644
--- a/packages/@react-spectrum/s2/stories/ListBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ListBox.stories.tsx
@@ -17,7 +17,10 @@ import type {Meta} from '@storybook/react';
 const meta: Meta<typeof ListBox> = {
   component: ListBox,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/ListBox'
 };
diff --git a/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx b/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx
index bd9e1c8b607..2052e53cb77 100644
--- a/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx
@@ -17,7 +17,10 @@ import {RangeCalendar} from '../src/RangeCalendar';
 const meta: Meta<typeof RangeCalendar> = {
   component: RangeCalendar,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/RangeCalendar'
 };
diff --git a/packages/@react-spectrum/s2/stories/Table.stories.tsx b/packages/@react-spectrum/s2/stories/Table.stories.tsx
index 37b9fbf31b3..d091fca8b5f 100644
--- a/packages/@react-spectrum/s2/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Table.stories.tsx
@@ -18,7 +18,10 @@ import type {Meta} from '@storybook/react';
 const meta: Meta<typeof Table> = {
   component: Table,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/Table'
 };
diff --git a/packages/@react-spectrum/s2/stories/TimeField.stories.tsx b/packages/@react-spectrum/s2/stories/TimeField.stories.tsx
index 50f60eb5d44..5ac752edbb6 100644
--- a/packages/@react-spectrum/s2/stories/TimeField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TimeField.stories.tsx
@@ -17,7 +17,10 @@ import {TimeField} from '../src/TimeField';
 const meta: Meta<typeof TimeField> = {
   component: TimeField,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/TimeField'
 };
diff --git a/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx b/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx
index 29319ba2f64..5b8aa714f59 100644
--- a/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx
@@ -24,7 +24,10 @@ import {Toolbar} from '../src/Toolbar';
 const meta: Meta<typeof Toolbar> = {
   component: Toolbar,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   title: 'S2/Toolbar'
 };

From 28ffdaefc697456204909d21d2826a1a67995bdc Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 6 Sep 2024 11:38:54 -0700
Subject: [PATCH 08/12] test delay

---
 packages/@react-spectrum/s2/stories/Checkbox.stories.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
index f8cf5f355f0..13b62d7db09 100644
--- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
@@ -17,7 +17,8 @@ import {style} from '../style/spectrum-theme' with {type: 'macro'};
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {delay: 1000}
   },
   tags: ['autodocs'],
   argTypes: {

From 058e425a2638f3168464a1dc045630da4082c7bc Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 6 Sep 2024 11:48:12 -0700
Subject: [PATCH 09/12] longer delay

---
 packages/@react-spectrum/s2/stories/Checkbox.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
index 13b62d7db09..1ab343acc5a 100644
--- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
@@ -18,7 +18,7 @@ const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   parameters: {
     layout: 'centered',
-    chromatic: {delay: 1000}
+    chromatic: {delay: 10000}
   },
   tags: ['autodocs'],
   argTypes: {

From 1cee66fcbdda7a189655c71f36a62b7787f6e6ce Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 9 Sep 2024 11:45:43 -0700
Subject: [PATCH 10/12] remove non implemented stories, opt into layers, fix
 breadcrumb story crash

---
 .chromatic/constants.js                       |  1 -
 .chromatic/custom-addons/chromatic/index.js   |  3 +-
 .../s2/stories/Avatar.stories.tsx             |  3 +-
 .../s2/stories/Breadcrumbs.stories.tsx        |  4 +-
 .../s2/stories/Calendar.stories.tsx           | 32 ---------
 .../s2/stories/DateField.stories.tsx          | 34 ----------
 .../s2/stories/DatePicker.stories.tsx         | 34 ----------
 .../s2/stories/DateRangePicker.stories.tsx    | 34 ----------
 .../s2/stories/GridList.stories.tsx           | 42 ------------
 .../s2/stories/ListBox.stories.tsx            | 42 ------------
 .../s2/stories/RangeCalendar.stories.tsx      | 32 ---------
 .../s2/stories/StyleMacro.stories.tsx         |  2 +-
 .../s2/stories/Table.stories.tsx              | 62 -----------------
 .../s2/stories/TimeField.stories.tsx          | 34 ----------
 .../s2/stories/Toolbar.stories.tsx            | 66 -------------------
 15 files changed, 7 insertions(+), 418 deletions(-)
 delete mode 100644 packages/@react-spectrum/s2/stories/Calendar.stories.tsx
 delete mode 100644 packages/@react-spectrum/s2/stories/DateField.stories.tsx
 delete mode 100644 packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
 delete mode 100644 packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
 delete mode 100644 packages/@react-spectrum/s2/stories/GridList.stories.tsx
 delete mode 100644 packages/@react-spectrum/s2/stories/ListBox.stories.tsx
 delete mode 100644 packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx
 delete mode 100644 packages/@react-spectrum/s2/stories/Table.stories.tsx
 delete mode 100644 packages/@react-spectrum/s2/stories/TimeField.stories.tsx
 delete mode 100644 packages/@react-spectrum/s2/stories/Toolbar.stories.tsx

diff --git a/.chromatic/constants.js b/.chromatic/constants.js
index fbc438c9e6c..9b0b4f830f4 100644
--- a/.chromatic/constants.js
+++ b/.chromatic/constants.js
@@ -63,7 +63,6 @@ for (let key in themes) {
 }
 
 export let S2ColorThemes = ['light', 'dark'];
-export let S2Backgrounds = ['base', 'layer-1', 'layer-2'];
 
 // Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
 export let locales = [
diff --git a/.chromatic/custom-addons/chromatic/index.js b/.chromatic/custom-addons/chromatic/index.js
index 709018ab504..72387522721 100644
--- a/.chromatic/custom-addons/chromatic/index.js
+++ b/.chromatic/custom-addons/chromatic/index.js
@@ -37,8 +37,7 @@ export const withChromaticProvider = makeDecorator({
 
 function RenderS2({getStory, context, options, selectedLocales, height, minHeight}) {
   let colorSchemes = options.colorSchemes || S2ColorThemes;
-  // TODO: not sure if we need to snapshot against layers? Doesn't look like any of the colors of the components change with respect to the layer
-  let backgrounds = options.backgrounds || S2Backgrounds;
+  let backgrounds = options.backgrounds || ['base'];
 
   // TODO: there is perhaps some things that can still be shared between the two renders but figured it be easiest to just split them out for the most part
   return (
diff --git a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
index 4dcd9243ea7..ae53d8f711f 100644
--- a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
@@ -18,7 +18,8 @@ const meta: Meta<typeof Avatar> = {
   component: Avatar,
   argTypes: {},
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromaticProvider: {backgrounds: ['base', 'layer-1', 'layer-2']}
   },
   tags: ['autodocs'],
   decorators: (children, {args}) => (
diff --git a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
index 4fcbb543b61..1cf9c762d1b 100644
--- a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
@@ -17,7 +17,9 @@ import type {Meta} from '@storybook/react';
 const meta: Meta<typeof Breadcrumbs> = {
   component: Breadcrumbs,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    // TODO: remove this once we get intl strings for breadcrumbs and thus the story won't crash in ar-AE
+    chromaticProvider: {locales: ['en-US']}
   },
   argTypes: {
     size: {
diff --git a/packages/@react-spectrum/s2/stories/Calendar.stories.tsx b/packages/@react-spectrum/s2/stories/Calendar.stories.tsx
deleted file mode 100644
index c8a33845e9d..00000000000
--- a/packages/@react-spectrum/s2/stories/Calendar.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {Calendar} from '../src/Calendar';
-
-import type {Meta} from '@storybook/react';
-
-const meta: Meta<typeof Calendar> = {
-  component: Calendar,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/Calendar'
-};
-
-export default meta;
-
-export const Example = (args: any) => (
-  <Calendar aria-label="Event date" {...args} />
-);
diff --git a/packages/@react-spectrum/s2/stories/DateField.stories.tsx b/packages/@react-spectrum/s2/stories/DateField.stories.tsx
deleted file mode 100644
index 9abecadb491..00000000000
--- a/packages/@react-spectrum/s2/stories/DateField.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {DateField} from '../src/DateField';
-
-import type {Meta} from '@storybook/react';
-
-const meta: Meta<typeof DateField> = {
-  component: DateField,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/DateField'
-};
-
-export default meta;
-
-export const Example = (args: any) => <DateField {...args} />;
-
-Example.args = {
-  label: 'Event date'
-};
diff --git a/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx b/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
deleted file mode 100644
index edc52e84d4a..00000000000
--- a/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {DatePicker} from '../src/DatePicker';
-
-import type {Meta} from '@storybook/react';
-
-const meta: Meta<typeof DatePicker> = {
-  component: DatePicker,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/DatePicker'
-};
-
-export default meta;
-
-export const Example = (args: any) => <DatePicker {...args} />;
-
-Example.args = {
-  label: 'Event date'
-};
diff --git a/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
deleted file mode 100644
index 91e0c47a2fd..00000000000
--- a/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {DateRangePicker} from '../src/DateRangePicker';
-
-import type {Meta} from '@storybook/react';
-
-const meta: Meta<typeof DateRangePicker> = {
-  component: DateRangePicker,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/DateRangePicker'
-};
-
-export default meta;
-
-export const Example = (args: any) => <DateRangePicker {...args} />;
-
-Example.args = {
-  label: 'Event date'
-};
diff --git a/packages/@react-spectrum/s2/stories/GridList.stories.tsx b/packages/@react-spectrum/s2/stories/GridList.stories.tsx
deleted file mode 100644
index 9187eeef0aa..00000000000
--- a/packages/@react-spectrum/s2/stories/GridList.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {GridList, GridListItem} from '../src/GridList';
-
-import type {Meta} from '@storybook/react';
-
-const meta: Meta<typeof GridList> = {
-  component: GridList,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/GridList'
-};
-
-export default meta;
-
-export const Example = (args: any) => (
-  <GridList aria-label="Ice cream flavors" {...args}>
-    <GridListItem>Chocolate</GridListItem>
-    <GridListItem>Mint</GridListItem>
-    <GridListItem>Strawberry</GridListItem>
-    <GridListItem>Vanilla</GridListItem>
-  </GridList>
-);
-
-Example.args = {
-  onAction: null,
-  selectionMode: 'multiple'
-};
diff --git a/packages/@react-spectrum/s2/stories/ListBox.stories.tsx b/packages/@react-spectrum/s2/stories/ListBox.stories.tsx
deleted file mode 100644
index 9d9d778aa43..00000000000
--- a/packages/@react-spectrum/s2/stories/ListBox.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {ListBox, ListBoxItem} from '../src/ListBox';
-
-import type {Meta} from '@storybook/react';
-
-const meta: Meta<typeof ListBox> = {
-  component: ListBox,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/ListBox'
-};
-
-export default meta;
-
-export const Example = (args: any) => (
-  <ListBox aria-label="Ice cream flavor" {...args}>
-    <ListBoxItem>Chocolate</ListBoxItem>
-    <ListBoxItem>Mint</ListBoxItem>
-    <ListBoxItem>Strawberry</ListBoxItem>
-    <ListBoxItem>Vanilla</ListBoxItem>
-  </ListBox>
-);
-
-Example.args = {
-  onAction: null,
-  selectionMode: 'single'
-};
diff --git a/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx b/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx
deleted file mode 100644
index 2052e53cb77..00000000000
--- a/packages/@react-spectrum/s2/stories/RangeCalendar.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import type {Meta} from '@storybook/react';
-
-import {RangeCalendar} from '../src/RangeCalendar';
-
-const meta: Meta<typeof RangeCalendar> = {
-  component: RangeCalendar,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/RangeCalendar'
-};
-
-export default meta;
-
-export const Example = (args: any) => (
-  <RangeCalendar aria-label="Trip dates" {...args} />
-);
diff --git a/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx
index f49a1365bee..68661a54062 100644
--- a/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/StyleMacro.stories.tsx
@@ -15,7 +15,7 @@ import React from 'react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 export default {
-  title: 'S2/S2 Style Macro',
+  title: 'S2/Style Macro',
   parameters: {
     docs: {disable: true}
   }
diff --git a/packages/@react-spectrum/s2/stories/Table.stories.tsx b/packages/@react-spectrum/s2/stories/Table.stories.tsx
deleted file mode 100644
index d091fca8b5f..00000000000
--- a/packages/@react-spectrum/s2/stories/Table.stories.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {Cell, TableBody} from 'react-aria-components';
-import {Column, Row, Table, TableHeader} from '../src/Table';
-
-import type {Meta} from '@storybook/react';
-
-const meta: Meta<typeof Table> = {
-  component: Table,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/Table'
-};
-
-export default meta;
-
-export const Example = (args: any) => (
-  <Table aria-label="Files" {...args}>
-    <TableHeader>
-      <Column isRowHeader>Name</Column>
-      <Column>Type</Column>
-      <Column>Date Modified</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>Games</Cell>
-        <Cell>File folder</Cell>
-        <Cell>6/7/2020</Cell>
-      </Row>
-      <Row>
-        <Cell>Program Files</Cell>
-        <Cell>File folder</Cell>
-        <Cell>4/7/2021</Cell>
-      </Row>
-      <Row>
-        <Cell>bootmgr</Cell>
-        <Cell>System file</Cell>
-        <Cell>11/20/2010</Cell>
-      </Row>
-    </TableBody>
-  </Table>
-);
-
-Example.args = {
-  onRowAction: null,
-  onCellAction: null,
-  selectionMode: 'multiple'
-};
diff --git a/packages/@react-spectrum/s2/stories/TimeField.stories.tsx b/packages/@react-spectrum/s2/stories/TimeField.stories.tsx
deleted file mode 100644
index 5ac752edbb6..00000000000
--- a/packages/@react-spectrum/s2/stories/TimeField.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import type {Meta} from '@storybook/react';
-
-import {TimeField} from '../src/TimeField';
-
-const meta: Meta<typeof TimeField> = {
-  component: TimeField,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/TimeField'
-};
-
-export default meta;
-
-export const Example = (args: any) => <TimeField {...args} />;
-
-Example.args = {
-  label: 'Event time'
-};
diff --git a/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx b/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx
deleted file mode 100644
index 5b8aa714f59..00000000000
--- a/packages/@react-spectrum/s2/stories/Toolbar.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {
-  Button,
-  Checkbox,
-  Group,
-  Separator,
-  ToggleButton
-} from 'react-aria-components';
-import type {Meta} from '@storybook/react';
-
-import {Toolbar} from '../src/Toolbar';
-
-const meta: Meta<typeof Toolbar> = {
-  component: Toolbar,
-  parameters: {
-    layout: 'centered',
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  title: 'S2/Toolbar'
-};
-
-export default meta;
-
-export const Example = (args: any) => (
-  <Toolbar aria-label="Text formatting" {...args}>
-    <Group aria-label="Style">
-      <ToggleButton aria-label="Bold">
-        <b>B</b>
-      </ToggleButton>
-      <ToggleButton aria-label="Italic">
-        <i>I</i>
-      </ToggleButton>
-      <ToggleButton aria-label="Underline">
-        <u>U</u>
-      </ToggleButton>
-    </Group>
-    <Separator orientation="vertical" />
-    <Group aria-label="Clipboard">
-      <Button>Copy</Button>
-      <Button>Paste</Button>
-      <Button>Cut</Button>
-    </Group>
-    <Separator orientation="vertical" />
-    <Checkbox>
-      <div className="checkbox">
-        <svg viewBox="0 0 18 18" aria-hidden="true">
-          <polyline points="1 9 7 14 15 4" />
-        </svg>
-      </div>
-      Night Mode
-    </Checkbox>
-  </Toolbar>
-);

From 99b388e2430105a5c010a714684405ad915ac16b Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 17 Sep 2024 13:09:22 -0700
Subject: [PATCH 11/12] remove test delay

was only needed to try and fix font rendering oddness
---
 packages/@react-spectrum/s2/stories/Checkbox.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
index 1ab343acc5a..f8cf5f355f0 100644
--- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
@@ -17,8 +17,7 @@ import {style} from '../style/spectrum-theme' with {type: 'macro'};
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   parameters: {
-    layout: 'centered',
-    chromatic: {delay: 10000}
+    layout: 'centered'
   },
   tags: ['autodocs'],
   argTypes: {

From 06be29b87e31dd9dd053d4a2d51ed3340253641d Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 23 Sep 2024 15:50:42 -0700
Subject: [PATCH 12/12] Improve S2 chromatic story coverage (#6999)

* add play functions to s2 chromatic overlay stories

* move overlay chromatic stories into separate stories

this is because we can only have one overay open at a time and so the open overlay doesnt cover the other elements in the main chromatic stories

* add RTL and dark theme stories for overlay chromatics stories

* add more power set stories and fix lint

* fix chromatic error

* fix lint and add button + checkbox powersets

* add colorarea,field and reusue shortName

* Add colorslider, add contextual help, and use original stories in chromatic ones if needed

* split up powersets that were too big

* ugh lint

* adding data-testids and other review comments
---
 .chromatic/custom-addons/chromatic/index.js   |   4 +-
 .chromatic/main.js                            |   3 +-
 .chromatic/preview.js                         |   2 +-
 .../s2/chromatic/ActionButton.stories.tsx     |  85 +++++++
 .../s2/chromatic/ActionMenu.stories.tsx       |  45 ++++
 .../s2/chromatic/ActionMenuRTL.stories.tsx    |  26 +++
 .../s2/chromatic/AlertDialog.stories.tsx      |  36 +++
 .../s2/chromatic/AlertDialogRTL.stories.tsx   |  26 +++
 .../s2/chromatic/Avatar.stories.tsx           |  37 +++
 .../s2/chromatic/Badge.stories.tsx            |  73 ++++++
 .../s2/chromatic/Breadcrumbs.stories.tsx      |  84 +++++++
 .../s2/chromatic/BreadcrumbsRTL.stories.tsx   |  26 +++
 .../s2/chromatic/Button.stories.tsx           |  86 +++++++
 .../s2/chromatic/ButtonGroup.stories.tsx      |  86 +++++++
 .../s2/chromatic/Checkbox.stories.tsx         |  78 +++++++
 .../s2/chromatic/CheckboxGroup.stories.tsx    | 211 ++++++++++++++++++
 .../s2/chromatic/ColorArea.stories.tsx        |  40 ++++
 .../s2/chromatic/ColorField.stories.tsx       | 127 +++++++++++
 .../s2/chromatic/ColorSlider.stories.tsx      | 111 +++++++++
 .../s2/chromatic/Combobox.stories.tsx         |  69 ++++++
 .../s2/chromatic/ComboboxRTL.stories.tsx      |  26 +++
 .../s2/chromatic/ContextualHelp.stories.tsx   |  36 +++
 .../chromatic/ContextualHelpRTL.stories.tsx   |  26 +++
 .../s2/chromatic/Dialog.stories.tsx           |  49 ++++
 .../s2/chromatic/DialogRTL.stories.tsx        |  26 +++
 .../s2/chromatic/Menu.stories.tsx             |  60 +++++
 .../s2/chromatic/MenuRTL.stories.tsx          |  26 +++
 .../s2/chromatic/Picker.stories.tsx           |  69 ++++++
 .../s2/chromatic/PickerRTL.stories.tsx        |  25 +++
 .../s2/chromatic/Tooltip.stories.tsx          |  41 ++++
 .../s2/chromatic/TooltipRTL.stories.tsx       |  25 +++
 .../@react-spectrum/s2/chromatic/utils.tsx    |  86 +++++++
 .../@react-spectrum/s2/src/ColorSlider.tsx    |   6 +-
 .../s2/stories/ActionButton.stories.tsx       |   4 +
 .../s2/stories/ActionMenu.stories.tsx         |   5 +
 .../s2/stories/AlertDialog.stories.tsx        |  37 +--
 .../s2/stories/Avatar.stories.tsx             |   7 +-
 .../s2/stories/Badge.stories.tsx              |   4 +
 .../s2/stories/Breadcrumbs.stories.tsx        |   4 +
 .../s2/stories/Button.stories.tsx             |   4 +
 .../s2/stories/ButtonGroup.stories.tsx        |   4 +
 .../s2/stories/Checkbox.stories.tsx           |   4 +
 .../s2/stories/CheckboxGroup.stories.tsx      |   4 +
 .../s2/stories/ColorArea.stories.tsx          |   4 +
 .../s2/stories/ColorField.stories.tsx         |   4 +
 .../s2/stories/ComboBox.stories.tsx           |  62 ++---
 .../s2/stories/ContextualHelp.stories.tsx     |   5 +-
 .../s2/stories/Dialog.stories.tsx             |   3 +
 .../s2/stories/Menu.stories.tsx               |   6 +-
 .../s2/stories/Picker.stories.tsx             |   2 -
 .../s2/stories/Tooltip.stories.tsx            |  25 +--
 51 files changed, 1863 insertions(+), 81 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ActionMenuRTL.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/AlertDialogRTL.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Badge.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/BreadcrumbsRTL.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Button.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ColorArea.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ComboboxRTL.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/ContextualHelpRTL.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/DialogRTL.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Menu.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/MenuRTL.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Picker.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/PickerRTL.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/Tooltip.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/TooltipRTL.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/utils.tsx

diff --git a/.chromatic/custom-addons/chromatic/index.js b/.chromatic/custom-addons/chromatic/index.js
index 72387522721..55730fd6869 100644
--- a/.chromatic/custom-addons/chromatic/index.js
+++ b/.chromatic/custom-addons/chromatic/index.js
@@ -27,7 +27,7 @@ export const withChromaticProvider = makeDecorator({
       height = options.height;
     }
 
-    if (context.title.includes('S2/')) {
+    if (context.title.includes('S2')) {
       return <RenderS2 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
     } else {
       return <RenderV3 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
@@ -45,7 +45,7 @@ function RenderS2({getStory, context, options, selectedLocales, height, minHeigh
       <div style={{display: 'flex', flexDirection: 'column', height, minHeight, width: '90vw'}}>
         {colorSchemes.map(colorScheme =>
           backgrounds.map(background =>
-            (colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
+            (colorScheme === 'light' || context.title.includes('RTL') ? selectedLocales : ['en-US']).map(locale =>
               <S2Provider key={`${colorScheme}_${background}_${locale}`} background={background} colorScheme={colorScheme} locale={locale}>
                 <div style={{margin: '8px'}}>
                   <h1 style={{margin: 0, padding: 0, color: colorScheme === 'dark' ? 'white' : 'black'}}>{`${colorScheme}, ${background}, ${locale}`}</h1>
diff --git a/.chromatic/main.js b/.chromatic/main.js
index 0d31731266d..6f6e862382a 100644
--- a/.chromatic/main.js
+++ b/.chromatic/main.js
@@ -6,7 +6,8 @@ module.exports = {
   },
   stories: [
     '../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)',
-    '../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)'
+    '../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
   addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
diff --git a/.chromatic/preview.js b/.chromatic/preview.js
index 05937e0bcf4..606d065f9ac 100644
--- a/.chromatic/preview.js
+++ b/.chromatic/preview.js
@@ -14,7 +14,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['*', 'S2']
+      order: ['*', 'S2', 'S2 Chromatic']
     }
   },
   a11y: {},
diff --git a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
new file mode 100644
index 00000000000..cf600fb0c7e
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionButton, Text} from '../src';
+import {Fonts, UnsafeClassName} from '../stories/ActionButton.stories';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import type {Meta} from '@storybook/react';
+import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import {shortName} from './utils';
+import {StaticColorProvider} from '../stories/utils';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+
+const meta: Meta<typeof ActionButton> = {
+  component: ActionButton,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/ActionButton'
+};
+
+export default meta;
+
+let states = [
+  {isQuiet: true},
+  {isDisabled: true},
+  {size: ['XS', 'S', 'M', 'L', 'XL']},
+  {staticColor: ['black', 'white']}
+];
+
+let combinations = generatePowerset(states);
+
+const Template = (args) => {
+  let {children, ...otherArgs} = args;
+  return (
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+      {combinations.map(c => {
+        let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+        let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+        if (!key) {
+          key = 'default';
+        }
+
+        let button = <ActionButton key={key} data-testid={fullComboName} {...otherArgs} {...c}>{children ? children : key}</ActionButton>;
+        if (c.staticColor != null) {
+          return (
+            <StaticColorProvider staticColor={c.staticColor}>
+              {button}
+            </StaticColorProvider>
+          );
+        }
+
+        return button;
+      })}
+    </div>
+  );
+};
+
+export const Default = {
+  render: Template
+};
+
+export const WithIcon = {
+  render: Template,
+  args: {
+    children: <><NewIcon /><Text>Press me</Text></>
+  }
+};
+
+export const IconOnly = {
+  render: Template,
+  args: {
+    children: <NewIcon />
+  }
+};
+
+export {Fonts, UnsafeClassName};
diff --git a/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx
new file mode 100644
index 00000000000..d2a97438a7f
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionMenu} from '../src';
+import {DynamicExample, Example} from '../stories/ActionMenu.stories';
+import type {Meta, StoryObj} from '@storybook/react';
+import {userEvent, within} from '@storybook/testing-library';
+
+const meta: Meta<typeof ActionMenu> = {
+  component: ActionMenu,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/ActionMenu'
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionMenu<any>>;
+
+export const Static: Story = {...Example};
+
+Static.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('[Enter]');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('menu');
+};
+
+export const Dynamic = {...DynamicExample};
+
+Dynamic.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('[Enter]');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('menu');
+};
diff --git a/packages/@react-spectrum/s2/chromatic/ActionMenuRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionMenuRTL.stories.tsx
new file mode 100644
index 00000000000..fdcb6f40198
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ActionMenuRTL.stories.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionMenu} from '../src';
+
+import type {Meta} from '@storybook/react';
+
+const meta: Meta<typeof ActionMenu> = {
+  component: ActionMenu,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/ActionMenuRTL'
+};
+
+export default meta;
+export {Static, Dynamic} from './ActionMenu.stories';
diff --git a/packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx b/packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx
new file mode 100644
index 00000000000..84b1288f3f9
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AlertDialog} from '../src';
+import {Example as Base} from '../stories/AlertDialog.stories';
+import type {Meta, StoryObj} from '@storybook/react';
+import {userEvent, within} from '@storybook/testing-library';
+
+const meta: Meta<typeof AlertDialog> = {
+  component: AlertDialog,
+  parameters: {
+    layout: 'centered',
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/AlertDialog'
+};
+
+export default meta;
+
+export const Example = {...Base} as StoryObj;
+
+Example.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('[Enter]');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('alertdialog');
+};
diff --git a/packages/@react-spectrum/s2/chromatic/AlertDialogRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/AlertDialogRTL.stories.tsx
new file mode 100644
index 00000000000..89cbc7ea9a9
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/AlertDialogRTL.stories.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AlertDialog} from '../src';
+
+import type {Meta} from '@storybook/react';
+
+const meta: Meta<typeof AlertDialog> = {
+  component: AlertDialog,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/AlertDialogRTL'
+};
+
+export default meta;
+export {Example} from './AlertDialog.stories';
diff --git a/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx b/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx
new file mode 100644
index 00000000000..96a3d5dc263
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Avatar} from '../src';
+import type {Meta} from '@storybook/react';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+
+const meta: Meta<typeof Avatar> = {
+  component: Avatar,
+  parameters: {
+    chromaticProvider: {backgrounds: ['base', 'layer-1', 'layer-2'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/Avatar'
+};
+
+export default meta;
+
+export const Default = {
+  render: () => <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" />
+};
+
+export const OverBackground = {
+  render: () => (
+    <div className={style({backgroundColor: 'indigo-800', padding: 40})}>
+      <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" />
+    </div>
+  )
+};
diff --git a/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx b/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx
new file mode 100644
index 00000000000..06d9b0b2d39
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Badge} from '../src';
+import {Example} from '../stories/Badge.stories';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import type {Meta} from '@storybook/react';
+import {shortName} from './utils';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+
+const meta: Meta<typeof Badge> = {
+  component: Badge,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/Badge'
+};
+
+export default meta;
+
+let states = [
+  {size: ['S', 'M', 'L', 'XL']},
+  {fillStyle: ['bold', 'subtle', 'outline']},
+  {variant: ['accent', 'informative', 'neutral', 'positive', 'notice', 'negative', 'gray', 'red', 'orange', 'yellow', 'charteuse', 'celery', 'green', 'seafoam', 'cyan', 'blue', 'indigo', 'purple', 'fuchsia', 'magenta', 'pink', 'turquoise', 'brown', 'cinnamon', 'silver']}
+];
+
+let combinations = generatePowerset(states);
+let chunkSize = Math.ceil(combinations.length / 3);
+
+const Template = ({combos, ...args}) => {
+  return (
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+      {combos.map(c => {
+        let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+        let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+        if (!key) {
+          key = 'default';
+        }
+
+        return <Badge key={key} data-testid={fullComboName} {...args} {...c}>{key}</Badge>;
+      })}
+    </div>
+  );
+};
+
+export const Default = {
+  render: Template,
+  name: 'all visual option combos 1 of 3',
+  args: {combos: combinations.slice(0, chunkSize)}
+};
+
+export const ComboPt2 = {
+  render: Template,
+  args: {combos: combinations.slice(chunkSize, chunkSize * 2)},
+  name: 'all visual option combos 2 of 3'
+};
+
+export const ComboPt3 = {
+  render: Template,
+  args: {combos: combinations.slice(chunkSize * 2, chunkSize * 3)},
+  name: 'all visual option combos 3 of 3'
+};
+
+export {Example};
diff --git a/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
new file mode 100644
index 00000000000..adef57a8476
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Breadcrumb, Breadcrumbs} from '../src';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import {Many} from '../stories/Breadcrumbs.stories';
+import type {Meta, StoryObj} from '@storybook/react';
+import {shortName} from './utils';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {userEvent, within} from '@storybook/testing-library';
+
+const meta: Meta<typeof Breadcrumbs> = {
+  component: Breadcrumbs,
+  tags: ['autodocs'],
+  title: 'S2 Chromatic/Breadcrumbs'
+};
+
+export default meta;
+
+export const Dynamic = Many as StoryObj;
+
+Dynamic.parameters = {
+  // TODO: move these options back to meta above once we get strings for ar-AE. This is just to prevent the RTL story's config from actually applying
+  chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+};
+
+Dynamic.play = async ({canvasElement}) => {
+  // This uses click because using .tab twice didn't move focus to the menu
+  let trigger = await within(canvasElement).findByRole('button');
+  await userEvent.click(trigger);
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('menu');
+};
+
+let states = [
+  {isDisabled: true},
+  {size: ['M', 'L']}
+];
+
+let combinations = generatePowerset(states);
+
+const Template = () => {
+  return (
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+      {combinations.map(c => {
+        let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+        let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+        if (!key) {
+          key = 'default';
+        }
+
+        return (
+          <Breadcrumbs data-testid={fullComboName} key={key} {...c}>
+            <Breadcrumb href="/">
+              Home
+            </Breadcrumb>
+            <Breadcrumb href="/react-aria">
+              React Aria
+            </Breadcrumb>
+            <Breadcrumb href="/breadcrumbs">
+              Breadcrumbs
+            </Breadcrumb>
+          </Breadcrumbs>
+        );
+      })}
+    </div>
+  );
+};
+
+export const Powerset = {
+  render: Template,
+  parameters: {
+    chromaticProvider: {locales: ['en-US'], disableAnimations: true}
+  }
+};
diff --git a/packages/@react-spectrum/s2/chromatic/BreadcrumbsRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/BreadcrumbsRTL.stories.tsx
new file mode 100644
index 00000000000..ec3dfa23182
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/BreadcrumbsRTL.stories.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Breadcrumbs} from '../src';
+
+import type {Meta} from '@storybook/react';
+
+const meta: Meta<typeof Breadcrumbs> = {
+  component: Breadcrumbs,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/BreadcrumbsRTL'
+};
+
+export default meta;
+export {Dynamic, Powerset} from './Breadcrumbs.stories';
diff --git a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
new file mode 100644
index 00000000000..ea095cb497f
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Button, Text} from '../src';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import type {Meta} from '@storybook/react';
+import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import {shortName} from './utils';
+import {StaticColorProvider} from '../stories/utils';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {Example as WithWrapping} from '../stories/Button.stories';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/Button'
+};
+
+export default meta;
+
+let states = [
+  {isQuiet: true},
+  {isDisabled: true},
+  {size: ['S', 'M', 'L', 'XL']},
+  {staticColor: ['black', 'white']},
+  {variant: ['accent', 'negative', 'primary', 'secondary']}
+];
+
+let combinations = generatePowerset(states);
+
+const Template = (args) => {
+  let {children, ...otherArgs} = args;
+  return (
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+      {combinations.map(c => {
+        let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+        let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+        if (!key) {
+          key = 'default';
+        }
+
+        let button = <Button data-testid={fullComboName} key={key} {...otherArgs} {...c}>{children ? children : key}</Button>;
+        if (c.staticColor != null) {
+          return (
+            <StaticColorProvider staticColor={c.staticColor}>
+              {button}
+            </StaticColorProvider>
+          );
+        }
+
+        return button;
+      })}
+    </div>
+  );
+};
+
+export const Default = {
+  render: Template
+};
+
+export const WithIcon = {
+  render: Template,
+  args: {
+    children: <><NewIcon /><Text>Press me</Text></>
+  }
+};
+
+export const IconOnly = {
+  render: Template,
+  args: {
+    children: <NewIcon />
+  }
+};
+
+export {WithWrapping};
diff --git a/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx
new file mode 100644
index 00000000000..8c37d1d8f69
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Button, ButtonGroup, Text} from '../src';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import type {Meta} from '@storybook/react';
+import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import {shortName} from './utils';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+
+const meta: Meta<typeof ButtonGroup> = {
+  component: ButtonGroup,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/ButtonGroup'
+};
+
+export default meta;
+
+const Template = ({combos, containerStyle, ...args}) => {
+  return (
+    <div className={containerStyle}>
+      {combos.map(c => {
+        let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+        let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+        if (!key) {
+          key = 'default';
+        }
+
+        return (
+          <ButtonGroup data-testid={fullComboName} {...c} {...args}>
+            <Button>Press me</Button>
+            <Button variant="accent"><NewIcon /><Text>Test</Text></Button>
+            <Button><NewIcon /></Button>
+            <Button variant="negative" styles={style({maxWidth: 128})}>{key}</Button>
+            <Button variant="secondary" styles={style({maxWidth: 128})}>
+              <NewIcon />
+              <Text>Very long button with wrapping text to see what happens</Text>
+            </Button>
+          </ButtonGroup>
+        );
+      })}
+    </div>
+  );
+};
+
+let horizontalStates = [
+  {isDisabled: true},
+  {size: ['S', 'M', 'L', 'XL']},
+  {orientation: ['horizontal']}
+];
+
+let horizontalCombos = generatePowerset(horizontalStates);
+export const Horizontal = {
+  render: Template,
+  args: {
+    combos: horizontalCombos,
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})
+  }
+};
+
+let verticalStates = [
+  {isDisabled: true},
+  {size: ['S', 'M', 'L', 'XL']},
+  {align: ['start', 'end', 'center']},
+  {orientation: ['vertical']}
+];
+
+let verticalCombos = generatePowerset(verticalStates);
+export const Vertical = {
+  render: Template,
+  args: {
+    combos: verticalCombos,
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})
+  }
+};
diff --git a/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx b/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx
new file mode 100644
index 00000000000..7c6c8697971
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Checkbox} from '../src';
+import {generateComboChunks, shortName} from './utils';
+import {LongLabel} from '../stories/Checkbox.stories';
+import type {Meta} from '@storybook/react';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/Checkbox'
+};
+
+export default meta;
+
+let states = [
+  {defaultSelected: true},
+  {isDisabled: true},
+  {isEmphasized: true},
+  {isIndeterminate: true},
+  {isInvalid: true},
+  {isReadOnly: true},
+  {isRequired: true},
+  {size: ['S', 'M', 'L', 'XL']}
+];
+
+const Template = ({combos, ...args}) => {
+  return (
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+      {combos.map(c => {
+        let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+        let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+        if (!key) {
+          key = 'default';
+        }
+
+        return <Checkbox data-testid={fullComboName} key={key} {...args} {...c}>{key}</Checkbox>;
+      })}
+    </div>
+  );
+};
+
+let chunks = generateComboChunks({states, numChunks: 3});
+export const Default = {
+  render: Template,
+  args: {
+    combos: chunks[0]
+  }
+};
+
+export const DefaultPt2 = {
+  render: Template,
+  args: {
+    combos: chunks[1]
+  }
+};
+
+export const DefaultPt3 = {
+  render: Template,
+  args: {
+    combos: chunks[2]
+  }
+};
+
+export {LongLabel};
diff --git a/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
new file mode 100644
index 00000000000..0948d4590a0
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
@@ -0,0 +1,211 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Checkbox, CheckboxGroup, Content, ContextualHelp, Heading} from '../src';
+import {generateComboChunks, shortName} from './utils';
+import type {Meta} from '@storybook/react';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+
+const meta: Meta<typeof CheckboxGroup> = {
+  component: CheckboxGroup,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/CheckboxGroup'
+};
+
+export default meta;
+
+let states = [
+  {isDisabled: true},
+  {isEmphasized: true},
+  {isInvalid: true},
+  {isReadOnly: true},
+  {isRequired: true},
+  // {labelAlign: ['start', 'end']},
+  // {labelPosition: ['top', 'side']},
+  {necessityIndicator: ['label', 'icon']},
+  {size: ['S', 'M', 'L', 'XL']}
+];
+
+const Template = ({combos, containerStyle, ...args}) => {
+  return (
+    <div className={containerStyle}>
+      {combos.map(c => {
+        let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+        let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+        if (!key) {
+          key = 'default';
+        }
+
+        return (
+          <CheckboxGroup data-testid={fullComboName} label={key} description="test description" errorMessage="test error" {...c} {...args} value="soccer">
+            <Checkbox value="soccer">Soccer</Checkbox>
+            <Checkbox value="baseball">Baseball</Checkbox>
+            <Checkbox value="basketball">Basketball</Checkbox>
+          </CheckboxGroup>
+        );
+      })}
+    </div>
+  );
+};
+
+let chunks = generateComboChunks({states, numChunks: 5});
+
+export const Horizontal = {
+  render: Template,
+  args: {
+    combos: chunks[0],
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
+    orientation: 'horizontal'
+  }
+};
+
+export const HorizontalPt2 = {
+  render: Template,
+  args: {
+    ...Horizontal.args,
+    combos: chunks[1]
+  }
+};
+
+export const HorizontalPt3 = {
+  render: Template,
+  args: {
+    ...Horizontal.args,
+    combos: chunks[2]
+  }
+};
+
+export const HorizontalPt4 = {
+  render: Template,
+  args: {
+    ...Horizontal.args,
+    combos: chunks[3]
+  }
+};
+
+export const HorizontalPt5 = {
+  render: Template,
+  args: {
+    ...Horizontal.args,
+    combos: chunks[4]
+  }
+};
+
+export const Vertical = {
+  render: Template,
+  args: {
+    combos: chunks[0],
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
+    orientation: 'vertical'
+  }
+};
+
+export const VerticalPt2 = {
+  render: Template,
+  args: {
+    ...Vertical.args,
+    combos: chunks[1]
+  }
+};
+
+export const VerticalPt3 = {
+  render: Template,
+  args: {
+    ...Vertical.args,
+    combos: chunks[2]
+  }
+};
+
+export const VerticalPt4 = {
+  render: Template,
+  args: {
+    ...Vertical.args,
+    combos: chunks[3]
+  }
+};
+
+export const VerticalPt5 = {
+  render: Template,
+  args: {
+    ...Vertical.args,
+    combos: chunks[4]
+  }
+};
+
+let statesWithContextual = [
+  {isDisabled: true},
+  {isInvalid: true},
+  {isRequired: true},
+  {necessityIndicator: ['label', 'icon']},
+  {size: ['S', 'M', 'L', 'XL']}
+];
+
+let contextualHelpChunks = generateComboChunks({states: statesWithContextual, numChunks: 3});
+
+export const ContextualHelpStories = {
+  render: Template,
+  args: {
+    combos: contextualHelpChunks[0],
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
+    orientation: 'horizontal',
+    contextualHelp: (
+      // @ts-ignore
+      <ContextualHelp>
+        <Heading>What is a segment?</Heading>
+        <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
+      </ContextualHelp>
+    )
+  }
+};
+
+export const ContextualHelpPt2 = {
+  render: Template,
+  args: {
+    ...ContextualHelpStories.args,
+    combos: contextualHelpChunks[1]
+  }
+};
+
+export const ContextualHelpPt3 = {
+  render: Template,
+  args: {
+    ...ContextualHelpStories.args,
+    combos: contextualHelpChunks[2]
+  }
+};
+
+export const ContextualHelpVertical = {
+  render: Template,
+  args: {
+    ...ContextualHelpStories.args,
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
+    orientation: 'vertical'
+  }
+};
+
+export const ContextualHelpVerticalPt2 = {
+  render: Template,
+  args: {
+    ...ContextualHelpVertical.args,
+    combos: contextualHelpChunks[1]
+  }
+};
+
+export const ContextualHelpVerticalPt3 = {
+  render: Template,
+  args: {
+    ...ContextualHelpVertical.args,
+    combos: contextualHelpChunks[2]
+  }
+};
diff --git a/packages/@react-spectrum/s2/chromatic/ColorArea.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorArea.stories.tsx
new file mode 100644
index 00000000000..936cad11829
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ColorArea.stories.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ColorArea} from '../src';
+import type {Meta} from '@storybook/react';
+
+const meta: Meta<typeof ColorArea> = {
+  component: ColorArea,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  title: 'S2 Chromatic/ColorArea'
+};
+
+export default meta;
+
+export const Default = {
+  render: (args) => <ColorArea {...args} />,
+  args: {
+    defaultValue: 'hsl(30, 100%, 50%)'
+  }
+};
+
+export const Disabled = {
+  ...Default,
+  args: {
+    ...Default.args,
+    isDisabled: true
+  }
+};
diff --git a/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
new file mode 100644
index 00000000000..0484bf2e048
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
@@ -0,0 +1,127 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ColorField} from '../src';
+import {generateComboChunks, shortName} from './utils';
+import type {Meta} from '@storybook/react';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+
+const meta: Meta<typeof ColorField> = {
+  component: ColorField,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/ColorField'
+};
+
+export default meta;
+
+let states = [
+  {isInvalid: true},
+  {isReadOnly: true},
+  {isDisabled: true},
+  {isRequired: true},
+  {necessityIndicator: ['label', 'icon']},
+  {size: ['S', 'M', 'L', 'XL']}
+];
+
+const Template = ({combos, ...args}) => {
+  return (
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 450px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+      {combos.map(c => {
+        let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+        let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+        if (!key) {
+          key = 'default';
+        }
+        return (
+          <ColorField data-testid={fullComboName} defaultValue="#e21" label={key} description="test description" errorMessage="test error" {...c} {...args}  />
+        );
+      })}
+    </div>
+  );
+};
+
+let sideChunks = generateComboChunks({states, numChunks: 3});
+
+export const LabelPositionSide = {
+  render: Template,
+  args: {
+    combos: sideChunks[0],
+    labelPosition: 'side'
+  }
+};
+
+export const LabelPositionSidePt2 = {
+  render: Template,
+  args: {
+    ...LabelPositionSide.args,
+    combos: sideChunks[1]
+  }
+};
+
+export const LabelPositionSidePt3 = {
+  render: Template,
+  args: {
+    ...LabelPositionSide.args,
+    combos: sideChunks[2]
+  }
+};
+
+let topState = [
+  ...states,
+  {labelAlign: ['start', 'end']}
+];
+
+let topChunks = generateComboChunks({states: topState, numChunks: 5});
+
+export const LabelPositionTop = {
+  render: Template,
+  args: {
+    combos: topChunks[0],
+    labelPosition: 'top'
+  }
+};
+
+export const LabelPositionTopPt2 = {
+  render: Template,
+  args: {
+    ...LabelPositionTop.args,
+    combos: topChunks[1]
+  }
+};
+
+export const LabelPositionTopPt3 = {
+  render: Template,
+  args: {
+    ...LabelPositionTop.args,
+    combos: topChunks[2]
+  }
+};
+
+export const LabelPositionTopPt4 = {
+  render: Template,
+  args: {
+    ...LabelPositionTop.args,
+    combos: topChunks[3]
+  }
+};
+
+export const LabelPositionTopPt5 = {
+  render: Template,
+  args: {
+    ...LabelPositionTop.args,
+    combos: topChunks[4]
+  }
+};
+
+// Skipped the contextual help stories from here on out since its all shared
diff --git a/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
new file mode 100644
index 00000000000..ab3b5484301
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ColorSlider, Content, ContextualHelp, Heading} from '../src';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import type {Meta} from '@storybook/react';
+import {shortName} from './utils';
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+
+const meta: Meta<typeof ColorSlider> = {
+  component: ColorSlider,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/ColorSlider'
+};
+
+export default meta;
+
+// TODO: show value label not yet supported in S2
+let states = [
+  {isDisabled: true},
+  {label: [null, 'custom label']},
+  {contextualHelp: (
+    // @ts-ignore
+    <ContextualHelp>
+      <Heading>What is a segment?</Heading>
+      <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
+    </ContextualHelp>
+  )}
+];
+
+let combinations = generatePowerset(states, (merged) => merged.label === null && (merged.showValueLabel === false || merged.contextualHelp));
+
+const Template = (args) => (
+  <div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    {combinations.map(c => {
+      let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+      let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+      if (!key) {
+        key = 'empty';
+      }
+      return <ColorSlider data-testid={fullComboName} key={key} {...args} {...c} label={c.label === 'custom label' ? key : c.label} />;
+    })}
+  </div>
+);
+
+const VerticalTemplate = (args) => (
+  <div className={style({display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    {combinations.map(c => {
+      let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
+      let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+      if (!key) {
+        key = 'empty';
+      }
+      return <ColorSlider data-testid={fullComboName} key={key} {...args} {...c} label={c.label === 'custom label' ? key : c.label} orientation="vertical" />;
+    })}
+  </div>
+);
+
+export const PropChannelRed = {
+  render: Template,
+  name: 'channel: red',
+  args: {channel: 'red', defaultValue: '#7f0000'}
+};
+
+export const PropChannelAlpha = {
+  render: Template,
+  name: 'channel: alpha',
+  args: {channel: 'alpha', defaultValue: '#7f0000'}
+};
+
+export const PropChannelLightness = {
+  render: Template,
+  name: 'channel: lightness',
+  args: {channel: 'lightness', defaultValue: 'hsla(0, 100%, 50%, 0.5)'}
+};
+
+export const PropChannelBrightness = {
+  render: Template,
+  name: 'channel: brightness',
+  args: {channel: 'brightness', defaultValue: 'hsba(0, 100%, 50%, 0.5)'}
+};
+
+export const PropVertical = {
+  render: VerticalTemplate,
+  name: 'orientation: vertical',
+  args: {channel: 'red', defaultValue: '#7f0000'}
+};
+
+export const PropCustomWidth = {
+  render: Template,
+  name: 'custom width',
+  args: {channel: 'red', defaultValue: '#7f0000', styles: style({width: 384})}
+};
+
+// TODO: Not yet supported in S2
+// export const PropCustomHeight = {
+//   render: VerticalTemplate,
+//   name: 'custom height',
+//   args: {channel: 'red', defaultValue: '#7f0000', styles: style({height: 384})}
+// };
diff --git a/packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx b/packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx
new file mode 100644
index 00000000000..3e9b5402fff
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ComboBox} from '../src';
+import {ContextualHelpExample, CustomWidth, Dynamic, Example, Sections, WithIcons} from '../stories/ComboBox.stories';
+import type {Meta, StoryObj} from '@storybook/react';
+import {userEvent, within} from '@storybook/testing-library';
+
+const meta: Meta<typeof ComboBox<any>> = {
+  component: ComboBox,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  tags: ['autodocs'],
+  title: 'S2 Chromatic/ComboBox'
+};
+
+export default meta;
+
+export const Static = Example as StoryObj;
+
+Static.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('{ArrowDown}');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('listbox');
+};
+
+export const WithSections = {...Sections, name: 'Sections'};
+
+WithSections.play = async (context) => {
+  await Static.play!(context);
+};
+
+export const WithDynamic = {...Dynamic, name: 'Dynamic',  args: {...Dynamic.args, selectedKey: 'chocolate'}};
+
+WithDynamic.play = async (context) => {
+  await Static.play!(context);
+};
+
+export const Icons = {...WithIcons, name: 'With Icons'};
+
+Icons.play = async (context) => {
+  await Static.play!(context);
+};
+
+export const ContextualHelp = {...ContextualHelpExample};
+
+ContextualHelp.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('{Enter}');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('dialog');
+};
+
+export const WithCustomWidth = CustomWidth as StoryObj;
+
+WithCustomWidth.play = async (context) => {
+  await Static.play!(context);
+};
diff --git a/packages/@react-spectrum/s2/chromatic/ComboboxRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/ComboboxRTL.stories.tsx
new file mode 100644
index 00000000000..d800658904d
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ComboboxRTL.stories.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ComboBox} from '../src';
+
+import type {Meta} from '@storybook/react';
+
+const meta: Meta<typeof ComboBox<any>> = {
+  component: ComboBox,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/ComboBoxRTL'
+};
+
+export default meta;
+export {Static, WithSections, WithDynamic, Icons, ContextualHelp, WithCustomWidth} from './Combobox.stories';
diff --git a/packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx b/packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx
new file mode 100644
index 00000000000..5180618a410
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ContextualHelp} from '../src';
+import {Example} from '../stories/ContextualHelp.stories';
+import type {Meta} from '@storybook/react';
+import {userEvent, within} from '@storybook/testing-library';
+
+const meta: Meta<typeof ContextualHelp> = {
+  component: ContextualHelp,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  tags: ['autodocs'],
+  title: 'S2 Chromatic/ContextualHelp'
+};
+
+export default meta;
+
+export const Default = Example;
+
+Default.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('{Enter}');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('dialog');
+};
diff --git a/packages/@react-spectrum/s2/chromatic/ContextualHelpRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/ContextualHelpRTL.stories.tsx
new file mode 100644
index 00000000000..ffdde6aed01
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ContextualHelpRTL.stories.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ContextualHelp} from '../src';
+
+import type {Meta} from '@storybook/react';
+
+const meta: Meta<typeof ContextualHelp> = {
+  component: ContextualHelp,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/ContextualHelpRTL'
+};
+
+export default meta;
+export {Default} from './ContextualHelp.stories';
diff --git a/packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx b/packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx
new file mode 100644
index 00000000000..5bae7a87e97
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Dialog} from '../src';
+import {DialogContainerExample, DialogTriggerExample, Example} from '../stories/Dialog.stories';
+import type {Meta, StoryObj} from '@storybook/react';
+import {userEvent, within} from '@storybook/testing-library';
+
+const meta: Meta<typeof Dialog> = {
+  component: Dialog,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  tags: ['autodocs'],
+  title: 'S2 Chromatic/Dialog'
+};
+
+export default meta;
+
+export const Default = Example as StoryObj;
+
+// TODO: maybe render dialogs with different args instead (showHero/showHeader, etc)
+Default.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('{Enter}');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('dialog');
+};
+
+export const WithDialogTrigger = DialogTriggerExample as StoryObj;
+
+WithDialogTrigger.play = async (context) => {
+  await Default.play!(context);
+};
+
+export const DialogContainer = DialogContainerExample as StoryObj;
+
+DialogContainer.play = async (context) => {
+  await Default.play!(context);
+};
diff --git a/packages/@react-spectrum/s2/chromatic/DialogRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/DialogRTL.stories.tsx
new file mode 100644
index 00000000000..5661ded5c30
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/DialogRTL.stories.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Dialog} from '../src';
+
+import type {Meta} from '@storybook/react';
+
+const meta: Meta<typeof Dialog> = {
+  component: Dialog,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/DialogRTL'
+};
+
+export default meta;
+export {Default, WithDialogTrigger, DialogContainer} from './Dialog.stories';
diff --git a/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx b/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx
new file mode 100644
index 00000000000..0cd0373d496
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {BlendModes, DynamicExample, Example, KeyboardShortcuts, PublishAndExport} from '../stories/Menu.stories';
+import {Menu} from '../src';
+import type {Meta} from '@storybook/react';
+import {userEvent, within} from '@storybook/testing-library';
+
+const meta: Meta<typeof Menu> = {
+  component: Menu,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  tags: ['autodocs'],
+  title: 'S2 Chromatic/Menu'
+};
+
+export default meta;
+
+export const Default = {...Example};
+
+Default.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('{ArrowDown}');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('menu');
+};
+
+export const WithKeyboardShortcuts = {...KeyboardShortcuts};
+
+WithKeyboardShortcuts.play = async (context) => {
+  await Default.play!(context);
+};
+
+export const WithIcons = {...PublishAndExport};
+
+WithIcons.play = async (context) => {
+  await Default.play!(context);
+};
+
+export const WithImages = {...BlendModes};
+
+WithImages.play = async (context) => {
+  await Default.play!(context);
+};
+
+export const Dynamic = {...DynamicExample};
+
+Dynamic.play = async (context) => {
+  await Default.play!(context);
+};
diff --git a/packages/@react-spectrum/s2/chromatic/MenuRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/MenuRTL.stories.tsx
new file mode 100644
index 00000000000..7e66245caa7
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/MenuRTL.stories.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Menu} from '../src';
+
+import type {Meta} from '@storybook/react';
+
+const meta: Meta<typeof Menu> = {
+  component: Menu,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/MenuRTL'
+};
+
+export default meta;
+export {Default, WithKeyboardShortcuts, WithIcons, WithImages, Dynamic} from './Menu.stories';
diff --git a/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx b/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx
new file mode 100644
index 00000000000..337ea2c45f3
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Picker.stories.tsx
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ContextualHelpExample, CustomWidth, Dynamic, Example, Sections, WithIcons} from '../stories/Picker.stories';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Picker} from '../src';
+import {userEvent, within} from '@storybook/testing-library';
+
+const meta: Meta<typeof Picker<any>> = {
+  component: Picker,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  tags: ['autodocs'],
+  title: 'S2 Chromatic/Picker'
+};
+
+export default meta;
+
+export const Default = Example as StoryObj;
+
+Default.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('{ArrowDown}');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('listbox');
+};
+
+export const WithSections = {...Sections};
+
+WithSections.play = async (context) => {
+  await Default.play!(context);
+};
+
+export const DynamicExample = {...Dynamic, name: 'Dynamic'} as StoryObj;
+
+DynamicExample.play = async (context) => {
+  await Default.play!(context);
+};
+
+export const Icons = {...WithIcons, name: 'With Icons'} as StoryObj;
+
+Icons.play = async (context) => {
+  await Default.play!(context);
+};
+
+export const WithCustomWidth = CustomWidth as StoryObj;
+
+WithCustomWidth.play = async (context) => {
+  await Default.play!(context);
+};
+
+export const ContextualHelp = {...ContextualHelpExample} as StoryObj;
+
+ContextualHelp.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  await userEvent.keyboard('{Enter}');
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('dialog');
+};
diff --git a/packages/@react-spectrum/s2/chromatic/PickerRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/PickerRTL.stories.tsx
new file mode 100644
index 00000000000..27c8a353b8c
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/PickerRTL.stories.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type {Meta} from '@storybook/react';
+import {Picker} from '../src';
+
+const meta: Meta<typeof Picker<any>> = {
+  component: Picker,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/PickerRTL'
+};
+
+export default meta;
+export {Default, WithSections, DynamicExample, Icons, WithCustomWidth, ContextualHelp} from './Picker.stories';
diff --git a/packages/@react-spectrum/s2/chromatic/Tooltip.stories.tsx b/packages/@react-spectrum/s2/chromatic/Tooltip.stories.tsx
new file mode 100644
index 00000000000..846eed01b3e
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/Tooltip.stories.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Example, LongLabel} from '../stories/Tooltip.stories';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Tooltip} from '../src';
+import {userEvent, within} from '@storybook/testing-library';
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
+  },
+  tags: ['autodocs'],
+  title: 'S2 Chromatic/Tooltip'
+};
+
+export default meta;
+
+export const Default = Example as StoryObj;
+
+Default.play = async ({canvasElement}) => {
+  await userEvent.tab();
+  let body = canvasElement.ownerDocument.body;
+  await within(body).findByRole('tooltip');
+};
+
+export const WithLongLabel = LongLabel as StoryObj;
+
+WithLongLabel.play = async (context) => {
+  await Default.play!(context);
+};
diff --git a/packages/@react-spectrum/s2/chromatic/TooltipRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/TooltipRTL.stories.tsx
new file mode 100644
index 00000000000..8e77b8394f8
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/TooltipRTL.stories.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type {Meta} from '@storybook/react';
+import {Tooltip} from '../src';
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  parameters: {
+    chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}
+  },
+  title: 'S2 Chromatic/TooltipRTL'
+};
+
+export default meta;
+export {Default, WithLongLabel} from './Tooltip.stories';
diff --git a/packages/@react-spectrum/s2/chromatic/utils.tsx b/packages/@react-spectrum/s2/chromatic/utils.tsx
new file mode 100644
index 00000000000..2bbea5f31c5
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/utils.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {generatePowerset} from '@react-spectrum/story-utils';
+
+export function shortName(key, value) {
+  let returnVal = '';
+  switch (key) {
+    case 'defaultSelected':
+      returnVal = 'selected';
+      break;
+    case 'isIndeterminate':
+      returnVal = 'indet';
+      break;
+    case 'isQuiet':
+      returnVal = 'q';
+      break;
+    case 'isDisabled':
+      returnVal = 'd';
+      break;
+    case 'isEmphasized':
+      returnVal = 'emp';
+      break;
+    case 'isInvalid':
+      returnVal = 'invalid';
+      break;
+    case 'isReadOnly':
+      returnVal = 'ro';
+      break;
+    case 'isRequired':
+      returnVal = 'req';
+      break;
+    case 'orientation':
+      returnVal = `orien: ${value}`;
+      break;
+    case 'necessityIndicator':
+      returnVal = `indicator: ${value}`;
+      break;
+    case 'size':
+      returnVal = `size: ${value}`;
+      break;
+    case 'staticColor':
+      returnVal = `static: ${value}`;
+      break;
+    case 'fillStyle':
+      returnVal = `fill: ${value}`;
+      break;
+    case 'variant':
+      returnVal = `var: ${value}`;
+      break;
+    case 'align':
+      returnVal = `align: ${value}`;
+      break;
+    case 'labelAlign':
+      returnVal = `align: ${value}`;
+      break;
+    case 'labelPosition':
+      returnVal = `pos: ${value}`;
+      break;
+
+  }
+  return returnVal;
+}
+
+export function generateComboChunks(opts: {states: Array<object>, exclude?: (merged: any) => boolean, numChunks: number}) {
+  let {states, exclude, numChunks} = opts;
+  let combos = generatePowerset(states, exclude);
+  let chunks = [];
+  let chunkSize =  Math.ceil(combos.length / numChunks);
+  for (let i = 0; i < numChunks; i++) {
+    // Not exactly sure why it is complaining about type never
+    // @ts-ignore
+    chunks.push(combos.slice(i * chunkSize, (i + 1) * chunkSize));
+  }
+
+  return chunks;
+}
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index b2de66142a1..8003a189088 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx
@@ -41,7 +41,7 @@ function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
   let {locale} = useLocale();
 
   return (
-    <AriaColorSlider 
+    <AriaColorSlider
       {...props}
       ref={containerRef}
       style={UNSAFE_style}
@@ -81,7 +81,7 @@ function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
             {props.label || state.value.getChannelName(props.channel, locale)}
           </FieldLabel>
         )}
-        {orientation === 'horizontal' && 
+        {orientation === 'horizontal' &&
           <SliderOutput
             className={style({
               gridArea: 'output',
@@ -127,7 +127,7 @@ function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
               isDisabled: 'disabled'
             }
           })}>
-          <ColorHandle 
+          <ColorHandle
             containerRef={trackRef}
             getPosition={() => {
               let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;
diff --git a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
index 0ef4a3992cb..18607008ce1 100644
--- a/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
@@ -21,6 +21,10 @@ const meta: Meta<typeof ActionButton> = {
   component: ActionButton,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   decorators: [StaticColorDecorator],
   tags: ['autodocs'],
diff --git a/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx b/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
index e60edf83962..fc28121703f 100644
--- a/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
@@ -19,6 +19,10 @@ const meta: Meta<typeof ActionMenu> = {
   component: ActionMenu,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   tags: ['autodocs'],
   argTypes: {
@@ -41,6 +45,7 @@ export const Example: Story = {
     );
   }
 };
+
 interface IExampleItem {
   id: string,
   label: string
diff --git a/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx b/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx
index b3fd6044824..6d2dd3afa8b 100644
--- a/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/AlertDialog.stories.tsx
@@ -17,6 +17,10 @@ const meta: Meta<typeof AlertDialog> = {
   component: AlertDialog as any,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   tags: ['autodocs'],
   title: 'S2/AlertDialog'
@@ -24,19 +28,22 @@ const meta: Meta<typeof AlertDialog> = {
 
 export default meta;
 
-export const Example = (args: any) => (
-  <DialogTrigger>
-    <ActionButton>Save</ActionButton>
-    <AlertDialog {...args} >
-      You have not saved your profile information
-      for this account. Would you like to register now?
-    </AlertDialog>
-  </DialogTrigger>
-);
-
-Example.args = {
-  title: 'Register profile',
-  cancelLabel: 'Cancel',
-  secondaryActionLabel: 'Remind me later',
-  primaryActionLabel: 'Register'
+export const Example = {
+  render: (args) => {
+    return (
+      <DialogTrigger>
+        <ActionButton>Save</ActionButton>
+        <AlertDialog {...args} >
+          You have not saved your profile information
+          for this account. Would you like to register now?
+        </AlertDialog>
+      </DialogTrigger>
+    );
+  },
+  args: {
+    title: 'Register profile',
+    cancelLabel: 'Cancel',
+    secondaryActionLabel: 'Remind me later',
+    primaryActionLabel: 'Register'
+  }
 };
diff --git a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
index ae53d8f711f..6dad85088f4 100644
--- a/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Avatar.stories.tsx
@@ -18,8 +18,11 @@ const meta: Meta<typeof Avatar> = {
   component: Avatar,
   argTypes: {},
   parameters: {
-    layout: 'centered',
-    chromaticProvider: {backgrounds: ['base', 'layer-1', 'layer-2']}
+    layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   tags: ['autodocs'],
   decorators: (children, {args}) => (
diff --git a/packages/@react-spectrum/s2/stories/Badge.stories.tsx b/packages/@react-spectrum/s2/stories/Badge.stories.tsx
index 6a921947e7f..310e6cab8fa 100644
--- a/packages/@react-spectrum/s2/stories/Badge.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Badge.stories.tsx
@@ -19,6 +19,10 @@ const meta: Meta<typeof Badge> = {
   component: Badge,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   tags: ['autodocs'],
   title: 'S2/Badge'
diff --git a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
index 1cf9c762d1b..60bd6eba090 100644
--- a/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Breadcrumbs.stories.tsx
@@ -20,6 +20,10 @@ const meta: Meta<typeof Breadcrumbs> = {
     layout: 'centered',
     // TODO: remove this once we get intl strings for breadcrumbs and thus the story won't crash in ar-AE
     chromaticProvider: {locales: ['en-US']}
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   argTypes: {
     size: {
diff --git a/packages/@react-spectrum/s2/stories/Button.stories.tsx b/packages/@react-spectrum/s2/stories/Button.stories.tsx
index a276f049d7c..318a5612920 100644
--- a/packages/@react-spectrum/s2/stories/Button.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Button.stories.tsx
@@ -20,6 +20,10 @@ const meta: Meta<typeof Button> = {
   component: Button,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   decorators: [StaticColorDecorator],
   tags: ['autodocs'],
diff --git a/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx b/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx
index cc45a14317c..e10bc51f281 100644
--- a/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ButtonGroup.stories.tsx
@@ -19,6 +19,10 @@ const meta: Meta<typeof ButtonGroup> = {
   component: ButtonGroup,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   tags: ['autodocs'],
   title: 'S2/ButtonGroup'
diff --git a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
index f8cf5f355f0..86912d41c34 100644
--- a/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Checkbox.stories.tsx
@@ -18,6 +18,10 @@ const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   tags: ['autodocs'],
   argTypes: {
diff --git a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
index d9858a9bc67..6e50e125e62 100644
--- a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
@@ -26,6 +26,10 @@ const meta: Meta<typeof CheckboxGroup> = {
   component: CheckboxGroup,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   tags: ['autodocs'],
   argTypes: {
diff --git a/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx b/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
index f847cac07b0..4066a369915 100644
--- a/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
@@ -18,6 +18,10 @@ const meta: Meta<typeof ColorArea> = {
   component: ColorArea,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   tags: ['autodocs'],
   argTypes: {
diff --git a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
index 7e2f0a9b91b..9806a401c06 100644
--- a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
@@ -25,6 +25,10 @@ const meta: Meta<typeof ColorField> = {
   component: ColorField,
   parameters: {
     layout: 'centered'
+    // TODO: uncomment when baseline for new S2 chromatic stories is accepted since these are resused in the chromatic stories
+    // chromatic: {
+    //   disableSnapshot: true
+    // }
   },
   tags: ['autodocs'],
   argTypes: {
diff --git a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
index 0403823931f..2e260626a78 100644
--- a/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
@@ -74,7 +74,6 @@ export const Sections: Story = {
   }
 };
 
-
 interface IExampleItem {
   id: string,
   label: string
@@ -133,36 +132,37 @@ Validation.args = {
   isRequired: true
 };
 
-export const ContextualHelpExample = (args: any) => (
-  <ComboBox {...args}>
-    <ComboBoxItem>Chocolate</ComboBoxItem>
-    <ComboBoxItem>Mint</ComboBoxItem>
-    <ComboBoxItem>Strawberry</ComboBoxItem>
-    <ComboBoxItem>Vanilla</ComboBoxItem>
-    <ComboBoxItem>Chocolate Chip Cookie Dough</ComboBoxItem>
-  </ComboBox>
-);
-
-ContextualHelpExample.args = {
-  label: 'Ice cream flavor',
-  contextualHelp: (
-    <ContextualHelp>
-      <Heading>What is a ice cream?</Heading>
-      <Content>
-        <Text>
-          A combination of sugar, eggs, milk, and cream is cooked to make
-          a custard base. Then, flavorings are added, and this flavored
-          mixture is carefully churned and frozen to make ice cream.
-        </Text>
-      </Content>
-      <Footer>
-        <Link
-          isStandalone
-          href="https://en.wikipedia.org/wiki/Ice_cream"
-          target="_blank">Learn more about ice cream</Link>
-      </Footer>
-    </ContextualHelp>
-  )
+export const ContextualHelpExample: Story = {
+  render: (args) => (
+    <ComboBox {...args}>
+      <ComboBoxItem>Chocolate</ComboBoxItem>
+      <ComboBoxItem>Mint</ComboBoxItem>
+      <ComboBoxItem>Strawberry</ComboBoxItem>
+      <ComboBoxItem>Vanilla</ComboBoxItem>
+      <ComboBoxItem>Chocolate Chip Cookie Dough</ComboBoxItem>
+    </ComboBox>
+  ),
+  args: {
+    label: 'Ice cream flavor',
+    contextualHelp: (
+      <ContextualHelp>
+        <Heading>What is a ice cream?</Heading>
+        <Content>
+          <Text>
+            A combination of sugar, eggs, milk, and cream is cooked to make
+            a custard base. Then, flavorings are added, and this flavored
+            mixture is carefully churned and frozen to make ice cream.
+          </Text>
+        </Content>
+        <Footer>
+          <Link
+            isStandalone
+            href="https://en.wikipedia.org/wiki/Ice_cream"
+            target="_blank">Learn more about ice cream</Link>
+        </Footer>
+      </ContextualHelp>
+    )
+  }
 };
 
 ContextualHelpExample.parameters = {
diff --git a/packages/@react-spectrum/s2/stories/ContextualHelp.stories.tsx b/packages/@react-spectrum/s2/stories/ContextualHelp.stories.tsx
index 688ae4d70de..c15017543bf 100644
--- a/packages/@react-spectrum/s2/stories/ContextualHelp.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ContextualHelp.stories.tsx
@@ -5,7 +5,10 @@ import type {Meta, StoryObj} from '@storybook/react';
 const meta: Meta<typeof ContextualHelp> = {
   component: ContextualHelp,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   tags: ['autodocs'],
   argTypes: {
diff --git a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
index ec5f6a70e40..d01cb7a2e19 100644
--- a/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Dialog.stories.tsx
@@ -21,6 +21,9 @@ const meta: Meta<typeof Dialog> = {
     layout: 'centered',
     docs: {
       controls: {exclude: ['showHero', 'showHeading', 'showHeader', 'showFooter', 'showButtons', 'paragraphs', 'title']}
+    },
+    chromatic: {
+      disableSnapshot: true
     }
   },
   argTypes: {
diff --git a/packages/@react-spectrum/s2/stories/Menu.stories.tsx b/packages/@react-spectrum/s2/stories/Menu.stories.tsx
index 04f206a5ab3..96d73ee8075 100644
--- a/packages/@react-spectrum/s2/stories/Menu.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Menu.stories.tsx
@@ -21,14 +21,16 @@ import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
 import ImgIcon from '../s2wf-icons/S2_Icon_Image_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
-
 import More from '../s2wf-icons/S2_Icon_More_20_N.svg';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 
 const meta: Meta<typeof CombinedMenu> = {
   component: CombinedMenu,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   tags: ['autodocs'],
   argTypes: {
diff --git a/packages/@react-spectrum/s2/stories/Picker.stories.tsx b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
index afa7534df5f..e70e8457eb5 100644
--- a/packages/@react-spectrum/s2/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
@@ -87,7 +87,6 @@ export const Sections: Story = {
   }
 };
 
-
 interface IExampleItem {
   id: string,
   label: string
@@ -111,7 +110,6 @@ export const Dynamic: Story = {
   }
 };
 
-
 export const WithIcons: Story = {
   render: (args) => (
     <Picker {...args}>
diff --git a/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx b/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx
index ab8dbb6090c..3021a70308d 100644
--- a/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tooltip.stories.tsx
@@ -16,12 +16,14 @@ import Crop from '../s2wf-icons/S2_Icon_Crop_20_N.svg';
 import LassoSelect from '../s2wf-icons/S2_Icon_LassoSelect_20_N.svg';
 import type {Meta} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
-import {userEvent, within} from '@storybook/testing-library';
 
 const meta: Meta<typeof CombinedTooltip> = {
   component: CombinedTooltip,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
+    chromatic: {
+      disableSnapshot: true
+    }
   },
   tags: ['autodocs'],
   argTypes: {
@@ -81,13 +83,6 @@ export const Example = (args: any) => {
   );
 };
 
-Example.play = async ({canvasElement}) => {
-  await userEvent.tab();
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('tooltip');
-};
-
-
 Example.story = {
   argTypes: {
     isOpen: {
@@ -142,12 +137,6 @@ LongLabel.story = {
   }
 };
 
-LongLabel.play = async ({canvasElement}) => {
-  await userEvent.tab();
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('tooltip');
-};
-
 export const ColorScheme = (args: any) => (
   <Provider colorScheme="dark" background="base" styles={style({padding: 48})}>
     <Example {...args} />
@@ -162,9 +151,3 @@ ColorScheme.story = {
     }
   }
 };
-
-ColorScheme.play = async ({canvasElement}) => {
-  await userEvent.tab();
-  let body = canvasElement.ownerDocument.body;
-  await within(body).findByRole('tooltip');
-};