From 1b4c44935a3a510ae30002e21e76f1036d7eb985 Mon Sep 17 00:00:00 2001 From: Daniel Lu Date: Thu, 5 May 2022 15:44:41 -0700 Subject: [PATCH] adding listview chromatic stories --- .../list/chromatic/ListView.chromatic.tsx | 135 ++++++++++++++---- .../list/chromatic/ListViewRTL.chromatic.tsx | 30 ++++ .../@react-spectrum/menu/src/ActionMenu.tsx | 2 +- .../@react-types/actiongroup/src/index.d.ts | 7 +- packages/@react-types/menu/src/index.d.ts | 7 +- 5 files changed, 148 insertions(+), 33 deletions(-) create mode 100644 packages/@react-spectrum/list/chromatic/ListViewRTL.chromatic.tsx diff --git a/packages/@react-spectrum/list/chromatic/ListView.chromatic.tsx b/packages/@react-spectrum/list/chromatic/ListView.chromatic.tsx index dcf2c881262..5516ad39d38 100644 --- a/packages/@react-spectrum/list/chromatic/ListView.chromatic.tsx +++ b/packages/@react-spectrum/list/chromatic/ListView.chromatic.tsx @@ -10,31 +10,58 @@ * 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} } @@ -42,23 +69,65 @@ const meta: Meta = { export default meta; -const Template = (): Story => (args) => ( - - {(item) => {item.name}} - +const renderActions = ( + <> + + + + Info + + + + + + Add + + + + Delete + + + ); -const TemplateWithButtons = (): Story => (args) => ( - - {(item) => ( - - - {item.name} - {item.button} - - - )} - +const Template = (): Story => ({combos, ...args}) => ( + + {combos.map(c => { + let key = Object.keys(c).map(k => shortName(k, c[k])).join(' '); + if (!key) { + key = 'empty'; + } + return ( + + + + + + Utilities + + 16 items + {renderActions} + + + Adobe Photoshop + Application + {renderActions} + + + Adobe Illustrator + Application + {renderActions} + + + Adobe XD + Application + {renderActions} + + + + ); + })} + ); 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'; diff --git a/packages/@react-spectrum/list/chromatic/ListViewRTL.chromatic.tsx b/packages/@react-spectrum/list/chromatic/ListViewRTL.chromatic.tsx new file mode 100644 index 00000000000..4e34e0a4ea3 --- /dev/null +++ b/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'; diff --git a/packages/@react-spectrum/menu/src/ActionMenu.tsx b/packages/@react-spectrum/menu/src/ActionMenu.tsx index dc6a498ab16..1b3903d0daf 100644 --- a/packages/@react-spectrum/menu/src/ActionMenu.tsx +++ b/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(props: SpectrumActionMenuProps, ref: FocusableRef) { - props = useSlotProps(props, 'actionmenu'); + props = useSlotProps(props, 'actionMenu'); let formatMessage = useMessageFormatter(intlMessages); let buttonProps = filterDOMProps(props, {labelable: true}); if (buttonProps['aria-label'] === undefined) { diff --git a/packages/@react-types/actiongroup/src/index.d.ts b/packages/@react-types/actiongroup/src/index.d.ts index 13ef725b051..f8fdee94c38 100644 --- a/packages/@react-types/actiongroup/src/index.d.ts +++ b/packages/@react-types/actiongroup/src/index.d.ts @@ -70,5 +70,10 @@ export interface SpectrumActionGroupProps extends AriaActionGroupProps, 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 } diff --git a/packages/@react-types/menu/src/index.d.ts b/packages/@react-types/menu/src/index.d.ts index 06c2e4a6149..07b5d774e44 100644 --- a/packages/@react-types/menu/src/index.d.ts +++ b/packages/@react-types/menu/src/index.d.ts @@ -86,5 +86,10 @@ export interface SpectrumActionMenuProps extends CollectionBase, 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 }