Focus Management within Shadow DOM

.chromatic-fc/.parcelrc

@@ -0,0 +1,12 @@
+{
+  "extends": "@parcel/config-storybook",
+  "resolvers": ["@parcel/resolver-glob", "..."],
+  "transformers": {
+    "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"],
+    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
+  }
+}

.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: ''},

.chromatic-fc/custom-addons/chromatic/index.js

@@ -1,6 +1,7 @@
-import {expressThemes, locales, scales, themes} from '../../constants';
-import {makeDecorator} from '@storybook/addons';
+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(() => {

.chromatic-fc/main.js

@@ -1,9 +1,13 @@
 
 module.exports = {
-  core: {
-    builder: "storybook-builder-parcel",
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
   },
-  stories: ['../packages/**/chromatic/**/*.chromatic-fc.{js,jsx,ts,tsx}'],
+  stories: [
+    '../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}',
+    '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
   addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
     '@storybook/addon-a11y'

.chromatic-fc/manager.js

@@ -1,6 +1,8 @@
-import addons from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 
 addons.setConfig({
-  showRoots: false,
-  enableShortcuts: false
+  enableShortcuts: false,
+  sidebar: {
+    showRoots: false,
+  }
 });

.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.

.chromatic-fc/preview.js

@@ -7,15 +7,15 @@ import {withChromaticProvider} from './custom-addons/chromatic';
 // decorator order matters, the last one will be the outer most
 
 configureActions({
-  depth: 10
+  depth: 2
 });
 
 export const parameters = {
   options: {
-    storySort: (a, b) =>
-      a[1].kind === b[1].kind
-        ? 0
-        : a[1].id.localeCompare(b[1].id, undefined, {numeric: true})
+    storySort: {
+      method: 'alphabetical',
+      order: ['*', 'S2']
+    }
   },
   a11y: {},
   layout: 'fullscreen',

.chromatic/.parcelrc

@@ -0,0 +1,12 @@
+{
+  "extends": "@parcel/config-storybook",
+  "resolvers": ["@parcel/resolver-glob",  "..."],
+  "transformers": {
+    "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"],
+    "packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"]
+  }
+}

.chromatic/constants.js

@@ -62,6 +62,8 @@ for (let key in themes) {
   };
 }
 
+export let S2ColorThemes = ['light', 'dark'];
+
 // Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
 export let locales = [
   {label: 'Auto', value: ''},

.chromatic/custom-addons/chromatic/index.js

@@ -1,7 +1,10 @@
-import {expressThemes, locales, scales, themes} from '../../constants';
-import {makeDecorator} from '@storybook/addons';
+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,77 @@ 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;
+  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 (
+    <DisableAnimations disableAnimations={options.disableAnimations}>
+      <div style={{display: 'flex', flexDirection: 'column', height, minHeight, width: '90vw'}}>
+        {colorSchemes.map(colorScheme =>
+          backgrounds.map(background =>
+            (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>
+                  {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) {

.chromatic/main.js

@@ -1,9 +1,13 @@
 
 module.exports = {
-  core: {
-    builder: "storybook-builder-parcel",
+  framework: {
+    name: "storybook-react-parcel",
+    options: {},
   },
-  stories: ['../packages/**/chromatic/**/*.chromatic.{js,jsx,ts,tsx}'],
+  stories: [
+    '../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)',
+    '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
   addons: process.env.NODE_ENV === 'production' ? [] : [
     '@storybook/addon-actions',
     '@storybook/addon-a11y'

.chromatic/manager.js

@@ -1,6 +1,8 @@
-import addons from '@storybook/addons';
+import {addons} from '@storybook/manager-api';
 
 addons.setConfig({
-  showRoots: false,
-  enableShortcuts: false
+  enableShortcuts: false,
+  sidebar: {
+    showRoots: false,
+  }
 });