Adding ListView chromatic stories

packages/@react-spectrum/list/chromatic/ListView.chromatic.tsx

@@ -10,55 +10,124 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionButton} from '@react-spectrum/button';
+import {ActionGroup} from '@react-spectrum/actiongroup';
+import {ActionMenu} from '@react-spectrum/menu';
+import Add from '@spectrum-icons/workflow/Add';
 import {Content, View} from '@react-spectrum/view';
-import {Flex} from '@react-spectrum/layout';
-import {Heading} from '@react-spectrum/text';
+import Delete from '@spectrum-icons/workflow/Delete';
+import Folder from '@spectrum-icons/workflow/Folder';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import {Grid, repeat} from '@react-spectrum/layout';
+import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
+import Info from '@spectrum-icons/workflow/Info';
 import {Item, ListView} from '../';
+import {Link} from '@react-spectrum/link';
 import {Meta, Story} from '@storybook/react';
 import React from 'react';
 
-let flatOptions = [
-  {name: 'row 1'},
-  {name: 'row 2'},
-  {name: 'row 3'}
+// TODO: add overflow mode and thumbnails when those PRs are merged
+let states = [
+  {isQuiet: true},
+  // No visual difference between single and multiple
+  {selectionMode: 'single'},
+  {density: ['compact', 'spacious']},
+  {selectionStyle: 'highlight'}
 ];
 
-let withButtons = [
-  {name: 'row 1', button: 'Button 1'},
-  {name: 'row 2', button: 'Button 2'},
-  {name: 'row 3', button: 'Button 3'}
-];
+let combinations = generatePowerset(states);
+let chunkSize = Math.ceil(combinations.length / 3);
+
+function shortName(key, value) {
+  let returnVal = '';
+  switch (key) {
+    case 'isQuiet':
+      returnVal = 'quiet';
+      break;
+    case 'selectionMode':
+      returnVal = `sm: ${value === undefined ? 'none' : value}`;
+      break;
+    case 'density':
+      returnVal = `den: ${value === undefined ? 'regular' : value}`;
+      break;
+    case 'selectionStyle':
+      returnVal = 'highlight';
+      break;
+  }
+  return returnVal;
+}
 
 const meta: Meta = {
   title: 'ListView',
   component: ListView,
   parameters: {
+    chromaticProvider: {colorSchemes: ['light', 'dark'], locales: ['en-US'], scales: ['medium', 'large'], disableAnimations: true},
     // noticed a small shifting before final layout, delaying so chromatic doesn't hit that
     chromatic: {delay: 600}
   }
 };
 
 export default meta;
 
-const Template = (): Story => (args) => (
-  <ListView {...args} width="size-3400" items={flatOptions}>
-    {(item) => <Item key={item.name}>{item.name}</Item>}
-  </ListView>
+const renderActions = (
+  <>
+    <ActionGroup buttonLabelBehavior="hide">
+      <Item key="info">
+        <Info />
+        <Text>Info</Text>
+      </Item>
+    </ActionGroup>
+    <ActionMenu>
+      <Item key="add">
+        <Add />
+        <Text>Add</Text>
+      </Item>
+      <Item key="delete">
+        <Delete />
+        <Text>Delete</Text>
+      </Item>
+    </ActionMenu>
+  </>
 );
 
-const TemplateWithButtons = (): Story => (args) => (
-  <ListView {...args} width="size-3400" items={withButtons}>
-    {(item) => (
-      <Item key={item.name}>
-        <Flex alignItems="center">
-          <View flexGrow={1}>{item.name}</View>
-          <ActionButton>{item.button}</ActionButton>
-        </Flex>
-      </Item>
-    )}
-  </ListView>
+const Template = (): Story => ({combos, ...args}) => (
+  <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
+    {combos.map(c => {
+      let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
+      if (!key) {
+        key = 'empty';
+      }
+      return (
+        <View flexGrow={1} maxWidth="size-5000" maxHeight={700} id={key}>
+          <ListView aria-label={key} width="size-3600" height="100%" selectedKeys={['a', 'd']} disabledKeys={['c']} {...args} {...c}>
+            <Item key="a" textValue="Utilities" hasChildItems>
+              <Folder />
+              <Content>
+                <Link>Utilities</Link>
+              </Content>
+              <Text slot="description">16 items</Text>
+              {renderActions}
+            </Item>
+            <Item key="b" textValue="Adobe Photoshop">
+              <Content>Adobe Photoshop</Content>
+              <Text slot="description">Application</Text>
+              {renderActions}
+            </Item>
+            <Item key="c" textValue="Adobe Illustrator">
+              <Content>Adobe Illustrator</Content>
+              <Text slot="description">Application</Text>
+              {renderActions}
+            </Item>
+            <Item key="d" textValue="Adobe XD">
+              <Content>Adobe XD</Content>
+              <Text slot="description">Application</Text>
+              {renderActions}
+            </Item>
+          </ListView>
+        </View>
+      );
+    })}
+  </Grid>
 );
 
 function renderEmptyState() {
@@ -80,10 +149,16 @@ const TemplateEmptyState = (): Story => () => (
 );
 
 export const Default = Template().bind({});
-Default.storyName = 'default';
+Default.storyName = 'all visual option combos 1 of 3';
+Default.args = {combos: combinations.slice(0, chunkSize)};
+
+export const ComboPt2 = Template().bind({});
+ComboPt2.args = {combos: combinations.slice(chunkSize, chunkSize * 2)};
+ComboPt2.storyName = 'all visual option combos 2 of 3';
 
-export const WithButtons = TemplateWithButtons().bind({});
-WithButtons.storyName = 'with buttons';
+export const ComboPt3 = Template().bind({});
+ComboPt3.args = {combos: combinations.slice(chunkSize * 2, chunkSize * 3)};
+ComboPt3.storyName = 'all visual option combos 3 of 3';
 
 export const Empty = TemplateEmptyState().bind({});
 Empty.storyName = 'empty state';

packages/@react-spectrum/list/chromatic/ListViewRTL.chromatic.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2022 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 {Meta} from '@storybook/react';
+
+const meta: Meta = {
+  title: 'ListViewRTL',
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light', 'dark'], locales: ['ar-AE'], scales: ['medium', 'large'], disableAnimations: true},
+    chromatic: {delay: 600}
+  }
+};
+
+export default meta;
+
+export {
+  Default,
+  ComboPt2,
+  ComboPt3,
+  Empty
+} from './ListView.chromatic';

packages/@react-spectrum/menu/src/ActionMenu.tsx

@@ -24,7 +24,7 @@ import {useMessageFormatter} from '@react-aria/i18n';
 import {useSlotProps} from '@react-spectrum/utils';
 
 function ActionMenu<T extends object>(props: SpectrumActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
-  props = useSlotProps(props, 'actionmenu');
+  props = useSlotProps(props, 'actionMenu');
   let formatMessage = useMessageFormatter(intlMessages);
   let buttonProps = filterDOMProps(props, {labelable: true});
   if (buttonProps['aria-label'] === undefined) {

packages/@react-types/actiongroup/src/index.d.ts

@@ -70,5 +70,10 @@ export interface SpectrumActionGroupProps<T> extends AriaActionGroupProps<T>, St
    */
   buttonLabelBehavior?: 'show' | 'collapse' | 'hide',
   /** The icon displayed in the dropdown menu button when a selectable ActionGroup is collapsed. */
-  summaryIcon?: ReactElement
+  summaryIcon?: ReactElement,
+  /**
+   * A slot to place the ActionGroup in.
+   * @default 'actionGroup'
+   */
+  slot?: string
 }

packages/@react-types/menu/src/index.d.ts

@@ -86,5 +86,10 @@ export interface SpectrumActionMenuProps<T> extends CollectionBase<T>, MenuTrigg
   /** Whether the element should receive focus on render. */
   autoFocus?: boolean,
   /** Handler that is called when an item is selected. */
-  onAction?: (key: Key) => void
+  onAction?: (key: Key) => void,
+  /**
+   * A slot to place the action menu in.
+   * @default 'actionMenu'
+   */
+  slot?: string
 }