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

Author: LFDanLu

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

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

.chromatic/preview.js

@@ -14,7 +14,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['*', 'S2']
+      order: ['*', 'S2', 'S2 Chromatic']
     }
   },
   a11y: {},

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};

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');
+};

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';

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');
+};

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';

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>
+  )
+};

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};