Skip to content

Commit 9e5ed25

Browse files
LFDanLuLFDanLu
authored
ListView testing followups (#3158)
* updating ListView stories with missing storybook actions * force listview to update row height when overflowMode changes adding overflowMode to useListLayout dep array so we can force a layout recalculation * getting rid of some console warnings * fixing lint * adding description to button story * adding actions to actiongroup and actionmenu buttons
1 parent e8a1bf5 commit 9e5ed25

File tree

3 files changed

+36
-33
lines changed

3 files changed

+36
-33
lines changed

‎packages/@react-spectrum/button/stories/Button.stories.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,8 @@ storiesOf('Button', module)
9292
)
9393
.add(
9494
'user-select:none on press test',
95-
() => <Example />
95+
() => <Example />,
96+
{description: {data: 'Pressing and holding on either buttons shouldn\'t trigger text selection on the button labels (wait for buttons to turn red).'}}
9697
)
9798
.add(
9899
'styles to check WHCM support',

‎packages/@react-spectrum/list/src/ListView.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const ROW_HEIGHTS = {
6464
}
6565
};
6666

67-
function useListLayout<T>(state: ListState<T>, density: SpectrumListProps<T>['density'], allowDisabledKeyFocus: boolean) {
67+
function useListLayout<T>(state: ListState<T>, density: SpectrumListProps<T>['density'], allowDisabledKeyFocus: boolean, overflowMode: SpectrumListProps<T>['overflowMode']) {
6868
let {scale} = useProvider();
6969
let collator = useCollator({usage: 'search', sensitivity: 'base'});
7070
let isEmpty = state.collection.size === 0;
@@ -76,7 +76,8 @@ function useListLayout<T>(state: ListState<T>, density: SpectrumListProps<T>['de
7676
loaderHeight: isEmpty ? null : ROW_HEIGHTS[density][scale],
7777
allowDisabledKeyFocus
7878
})
79-
, [collator, scale, density, isEmpty, allowDisabledKeyFocus]);
79+
// eslint-disable-next-line react-hooks/exhaustive-deps
80+
, [collator, scale, density, isEmpty, allowDisabledKeyFocus, overflowMode]);
8081

8182
layout.collection = state.collection;
8283
layout.disabledKeys = state.disabledKeys;
@@ -115,7 +116,7 @@ function ListView<T extends object>(props: SpectrumListProps<T>, ref: DOMRef<HTM
115116
let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
116117

117118
let {styleProps} = useStyleProps(props);
118-
let layout = useListLayout(state, props.density || 'regular', state.selectionManager.disabledBehavior === 'selection');
119+
let layout = useListLayout(state, props.density || 'regular', state.selectionManager.disabledBehavior === 'selection', overflowMode);
119120
let dragState: DraggableCollectionState;
120121
let preview = useRef(null);
121122
if (isListDraggable) {

‎packages/@react-spectrum/list/stories/ListView.stories.tsx

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ storiesOf('ListView', module)
139139
.addDecorator(decorator)
140140
.addParameters(parameters)
141141
.add('default', args => (
142-
<ListView width="250px" {...args}>
142+
<ListView width="250px" aria-label="default ListView" {...args}>
143143
<Item textValue="Adobe Photoshop">Adobe Photoshop</Item>
144144
<Item textValue="Adobe Illustrator">Adobe Illustrator</Item>
145145
<Item textValue="Adobe XD">Adobe XD</Item>
@@ -168,7 +168,7 @@ storiesOf('ListView', module)
168168
)
169169
)
170170
.add('dynamic items - small viewport', args => (
171-
<ListView items={items} width="100px" height="250px" {...args}>
171+
<ListView aria-label="small view port listview" items={items} width="100px" height="250px" {...args}>
172172
{(item: any) => (
173173
<Item key={item.key} textValue={item.name}>
174174
<Text>
@@ -193,17 +193,17 @@ storiesOf('ListView', module)
193193
<FalsyIds {...args} />
194194
))
195195
.add('empty list', args => (
196-
<ListView width="300px" height="300px" renderEmptyState={renderEmptyState} {...args}>
196+
<ListView aria-label="empty ListView" width="300px" height="300px" renderEmptyState={renderEmptyState} {...args}>
197197
{[]}
198198
</ListView>
199199
))
200200
.add('loading', args => (
201-
<ListView width="300px" height="300px" loadingState="loading" {...args}>
201+
<ListView aria-label="loading ListView" width="300px" height="300px" loadingState="loading" {...args}>
202202
{[]}
203203
</ListView>
204204
))
205205
.add('loadingMore', args => (
206-
<ListView width="300px" height="300px" loadingState="loadingMore" {...args}>
206+
<ListView aria-label="loading more ListView" width="300px" height="300px" loadingState="loadingMore" {...args}>
207207
<Item textValue="Adobe Photoshop">Adobe Photoshop</Item>
208208
<Item textValue="Adobe Illustrator">Adobe Illustrator</Item>
209209
<Item textValue="Adobe XD">Adobe XD</Item>
@@ -219,12 +219,12 @@ storiesOf('ListView', module)
219219
.add('with ActionBar', args => <ActionBarExample {...args} />)
220220
.add('with emphasized ActionBar', args => <ActionBarExample isEmphasized {...args} />)
221221
.add('thumbnails', args => (
222-
<ListView width="250px" items={itemsWithThumbs} {...args}>
223-
{(item: any) => <Item textValue={item.title}><Image src={item.url} /><Text>{item.title}</Text><Text slot="description">JPG</Text></Item>}
222+
<ListView width="250px" items={itemsWithThumbs} aria-label="ListView with thumbnails" {...args}>
223+
{(item: any) => <Item textValue={item.title}><Image src={item.url} alt="" /><Text>{item.title}</Text><Text slot="description">JPG</Text></Item>}
224224
</ListView>
225225
))
226226
.add('long text', args => (
227-
<ListView width="250px" {...args}>
227+
<ListView width="250px" aria-label="long text ListView" {...args}>
228228
<Item textValue="row 1">row 1 with a very very very very very long title</Item>
229229
<Item textValue="row 2">
230230
<Text>Text slot with a really really really long name</Text>
@@ -238,8 +238,8 @@ storiesOf('ListView/Actions', module)
238238
.add('ActionButton', (args) =>
239239
renderActionsExample(props => <ActionButton {...props}><Copy /></ActionButton>, args))
240240
.add('ActionGroup', args =>
241-
renderActionsExample(props => (
242-
<ActionGroup buttonLabelBehavior="hide" {...props}>
241+
renderActionsExample(() => (
242+
<ActionGroup buttonLabelBehavior="hide" onAction={action('actionGroupAction')}>
243243
<Item key="add">
244244
<Add />
245245
<Text>Add</Text>
@@ -251,8 +251,8 @@ storiesOf('ListView/Actions', module)
251251
</ActionGroup>
252252
), args))
253253
.add('ActionMenu', args =>
254-
renderActionsExample(props => (
255-
<ActionMenu {...props}>
254+
renderActionsExample(() => (
255+
<ActionMenu onAction={action('actionMenuAction')}>
256256
<Item key="add">
257257
<Add />
258258
<Text>Add</Text>
@@ -264,15 +264,15 @@ storiesOf('ListView/Actions', module)
264264
</ActionMenu>
265265
), args))
266266
.add('ActionGroup + ActionMenu', args =>
267-
renderActionsExample(props => (
267+
renderActionsExample(() => (
268268
<>
269-
<ActionGroup buttonLabelBehavior="hide" {...props}>
269+
<ActionGroup buttonLabelBehavior="hide" onAction={action('actionGroupAction')}>
270270
<Item key="info">
271271
<Info />
272272
<Text>Info</Text>
273273
</Item>
274274
</ActionGroup>
275-
<ActionMenu {...props}>
275+
<ActionMenu onAction={action('actionMenuACtion')}>
276276
<Item key="add">
277277
<Add />
278278
<Text>Add</Text>
@@ -288,27 +288,27 @@ storiesOf('ListView/Actions', module)
288288
storiesOf('ListView/Selection', module)
289289
.addParameters(parameters)
290290
.add('default', args => (
291-
<ListView width="250px" height={400} onSelectionChange={action('onSelectionChange')} items={items} {...args}>
291+
<ListView aria-label="default selection ListView" width="250px" height={400} onSelectionChange={action('onSelectionChange')} items={items} {...args}>
292292
{(item: any) => (
293-
<Item>
293+
<Item textValue={item.name}>
294294
{item.type === 'folder' ? <Folder /> : null}
295295
<Text>{item.name}</Text>
296296
</Item>
297297
)}
298298
</ListView>
299299
))
300300
.add('disable folders', args => (
301-
<ListView width="250px" height={400} onSelectionChange={action('onSelectionChange')} items={items} disabledKeys={['c', 'e', 'm']} {...args}>
301+
<ListView aria-label="disabled folders ListView" width="250px" height={400} onSelectionChange={action('onSelectionChange')} items={items} disabledKeys={['c', 'e', 'm']} {...args}>
302302
{(item: any) => (
303-
<Item>
303+
<Item textValue={item.name}>
304304
{item.type === 'folder' ? <Folder /> : null}
305305
<Text>{item.name}</Text>
306306
</Item>
307307
)}
308308
</ListView>
309309
))
310310
.add('disable folder selection', args => (
311-
<ListView width="250px" height={400} onSelectionChange={action('onSelectionChange')} items={items} disabledKeys={['c', 'e', 'm']} disabledBehavior="selection" {...args}>
311+
<ListView aria-label="disabled folder selection ListView" width="250px" height={400} onSelectionChange={action('onSelectionChange')} items={items} disabledKeys={['c', 'e', 'm']} disabledBehavior="selection" {...args}>
312312
{(item: any) => (
313313
<Item textValue={item.name}>
314314
{item.type === 'folder' ? <Folder /> : null}
@@ -411,7 +411,7 @@ storiesOf('ListView/Drag and Drop', module)
411411

412412
function renderActionsExample(renderActions, props?) {
413413
return (
414-
<ListView width="300px" selectionMode="single" {...props} onAction={action('onAction')} onSelectionChange={keys => console.log('sel', keys)}>
414+
<ListView width="300px" selectionMode="single" {...props} onAction={action('onAction')} onSelectionChange={action('onSelectionChange')} aria-label="render actions ListView">
415415
<Item key="a" textValue="Utilities" hasChildItems>
416416
<Folder />
417417
<Text>Utilities</Text>
@@ -479,7 +479,7 @@ function NavigationExample(props) {
479479
selectedKeys={selectedKeys}
480480
items={children}
481481
disabledKeys={props.disabledType ? children.filter(item => item.type === props.disabledType).map(item => item.key) : null}
482-
onAction={onAction}
482+
onAction={chain(onAction, action('onAction'))}
483483
{...props}>
484484
{(item: any) => (
485485
<Item hasChildItems={item.type === 'folder'} textValue={item.name}>
@@ -528,7 +528,7 @@ function EmptyTest() {
528528
<div>
529529
<Flex direction="row">
530530
<div {...divProps}>
531-
<ListView items={items} width="250px" height={hasDivProps ? null : '500px'} renderEmptyState={renderEmpty}>
531+
<ListView aria-label="render empty state ListView" items={items} width="250px" height={hasDivProps ? null : '500px'} renderEmptyState={renderEmpty}>
532532
{
533533
item => (
534534
<Item key={item.key}>
@@ -1124,8 +1124,9 @@ function AsyncList(props) {
11241124
height="size-3000"
11251125
items={list.items}
11261126
loadingState={list.loadingState}
1127-
onLoadMore={list.loadMore}>
1128-
{(item) => {
1127+
onLoadMore={list.loadMore}
1128+
{...props}>
1129+
{(item: any) => {
11291130
if (props.withActions) {
11301131
return <Item key={item.name} textValue={item.name}><Text>{item.name}</Text><ActionButton>Edit</ActionButton></Item>;
11311132
}
@@ -1135,15 +1136,15 @@ function AsyncList(props) {
11351136
);
11361137
}
11371138

1138-
function FalsyIds() {
1139+
function FalsyIds(props) {
11391140
let items = [
11401141
{id: 1, name: 'key=1'},
11411142
{id: 0, name: 'key=0'}
11421143
];
11431144

11441145
return (
1145-
<ListView width="250px" height={400} selectionMode="multiple" onSelectionChange={action('onSelectionChange')} items={items} onAction={action('onAction')}>
1146-
{item => <Item>{item.name}</Item>}
1146+
<ListView aria-label="falsy id ListView" width="250px" height={400} selectionMode="multiple" onSelectionChange={action('onSelectionChange')} items={items} onAction={action('onAction')} {...props}>
1147+
{(item: any) => <Item>{item.name}</Item>}
11471148
</ListView>
11481149
);
11491150
}
@@ -1159,7 +1160,7 @@ function ActionBarExample(props?) {
11591160
});
11601161
return (
11611162
<ActionBarContainer height={300}>
1162-
<ListView {...props} selectedKeys={list.selectedKeys} onSelectionChange={list.setSelectedKeys} items={list.items} width="250px">
1163+
<ListView {...props} selectedKeys={list.selectedKeys} onSelectionChange={list.setSelectedKeys} items={list.items} width="250px" aria-label="Action Bar ListView">
11631164
{(item: any) => <Item>{item.name}</Item>}
11641165
</ListView>
11651166
<ActionBar

0 commit comments

Comments
 (0)