Skip to content

Commit df4bc51

Browse files
ryo-manbaryo-manba
authored
refactor: isolate Listbox stories (#5575)
1 parent 9dc29f3 commit df4bc51

File tree

2 files changed

+92
-72
lines changed

2 files changed

+92
-72
lines changed

‎packages/react-aria-components/stories/ListBox.stories.tsx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/*
2+
* Copyright 2022 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Header, ListBox, Section, Separator, Text} from 'react-aria-components';
14+
import {MyListBoxItem} from './utils';
15+
import React from 'react';
16+
import styles from '../example/index.css';
17+
18+
export default {
19+
title: 'React Aria Components'
20+
};
21+
22+
export const ListBoxExample = (args) => (
23+
<ListBox className={styles.menu} {...args} aria-label="test listbox">
24+
<MyListBoxItem>Foo</MyListBoxItem>
25+
<MyListBoxItem>Bar</MyListBoxItem>
26+
<MyListBoxItem>Baz</MyListBoxItem>
27+
<MyListBoxItem href="http://google.com">Google</MyListBoxItem>
28+
</ListBox>
29+
);
30+
31+
ListBoxExample.story = {
32+
args: {
33+
selectionMode: 'none',
34+
selectionBehavior: 'toggle',
35+
shouldFocusOnHover: false
36+
},
37+
argTypes: {
38+
selectionMode: {
39+
control: {
40+
type: 'radio',
41+
options: ['none', 'single', 'multiple']
42+
}
43+
},
44+
selectionBehavior: {
45+
control: {
46+
type: 'radio',
47+
options: ['toggle', 'replace']
48+
}
49+
}
50+
},
51+
parameters: {
52+
description: {
53+
data: 'Hover styles should have higher specificity than focus style for testing purposes. Hover style should not be applied on keyboard focus even if shouldFocusOnHover is true'
54+
}
55+
}
56+
};
57+
58+
// Known accessibility false positive: https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#listbox
59+
// also has a aXe landmark error, not sure what it means
60+
export const ListBoxSections = () => (
61+
<ListBox className={styles.menu} selectionMode="multiple" selectionBehavior="replace" aria-label="test listbox with section">
62+
<Section className={styles.group}>
63+
<Header style={{fontSize: '1.2em'}}>Section 1</Header>
64+
<MyListBoxItem>Foo</MyListBoxItem>
65+
<MyListBoxItem>Bar</MyListBoxItem>
66+
<MyListBoxItem>Baz</MyListBoxItem>
67+
</Section>
68+
<Separator style={{borderTop: '1px solid gray', margin: '2px 5px'}} />
69+
<Section className={styles.group} aria-label="Section 2">
70+
<MyListBoxItem>Foo</MyListBoxItem>
71+
<MyListBoxItem>Bar</MyListBoxItem>
72+
<MyListBoxItem>Baz</MyListBoxItem>
73+
</Section>
74+
</ListBox>
75+
);
76+
77+
export const ListBoxComplex = () => (
78+
<ListBox className={styles.menu} selectionMode="multiple" selectionBehavior="replace" aria-label="listbox complex">
79+
<MyListBoxItem>
80+
<Text slot="label">Item 1</Text>
81+
<Text slot="description">Description</Text>
82+
</MyListBoxItem>
83+
<MyListBoxItem>
84+
<Text slot="label">Item 2</Text>
85+
<Text slot="description">Description</Text>
86+
</MyListBoxItem>
87+
<MyListBoxItem>
88+
<Text slot="label">Item 3</Text>
89+
<Text slot="description">Description</Text>
90+
</MyListBoxItem>
91+
</ListBox>
92+
);

‎packages/react-aria-components/stories/index.stories.tsx

Lines changed: 0 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -25,78 +25,6 @@ export default {
2525
title: 'React Aria Components'
2626
};
2727

28-
export const ListBoxExample = (args) => (
29-
<ListBox className={styles.menu} {...args} aria-label="test listbox">
30-
<MyListBoxItem>Foo</MyListBoxItem>
31-
<MyListBoxItem>Bar</MyListBoxItem>
32-
<MyListBoxItem>Baz</MyListBoxItem>
33-
<MyListBoxItem href="http://google.com">Google</MyListBoxItem>
34-
</ListBox>
35-
);
36-
37-
ListBoxExample.story = {
38-
args: {
39-
selectionMode: 'none',
40-
selectionBehavior: 'toggle',
41-
shouldFocusOnHover: false
42-
},
43-
argTypes: {
44-
selectionMode: {
45-
control: {
46-
type: 'radio',
47-
options: ['none', 'single', 'multiple']
48-
}
49-
},
50-
selectionBehavior: {
51-
control: {
52-
type: 'radio',
53-
options: ['toggle', 'replace']
54-
}
55-
}
56-
},
57-
parameters: {
58-
description: {
59-
data: 'Hover styles should have higher specificity than focus style for testing purposes. Hover style should not be applied on keyboard focus even if shouldFocusOnHover is true'
60-
}
61-
}
62-
};
63-
64-
// Known accessibility false positive: https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#listbox
65-
// also has a aXe landmark error, not sure what it means
66-
export const ListBoxSections = () => (
67-
<ListBox className={styles.menu} selectionMode="multiple" selectionBehavior="replace" aria-label="test listbox with section">
68-
<Section className={styles.group}>
69-
<Header style={{fontSize: '1.2em'}}>Section 1</Header>
70-
<MyListBoxItem>Foo</MyListBoxItem>
71-
<MyListBoxItem>Bar</MyListBoxItem>
72-
<MyListBoxItem>Baz</MyListBoxItem>
73-
</Section>
74-
<Separator style={{borderTop: '1px solid gray', margin: '2px 5px'}} />
75-
<Section className={styles.group} aria-label="Section 2">
76-
<MyListBoxItem>Foo</MyListBoxItem>
77-
<MyListBoxItem>Bar</MyListBoxItem>
78-
<MyListBoxItem>Baz</MyListBoxItem>
79-
</Section>
80-
</ListBox>
81-
);
82-
83-
export const ListBoxComplex = () => (
84-
<ListBox className={styles.menu} selectionMode="multiple" selectionBehavior="replace" aria-label="listbox complex">
85-
<MyListBoxItem>
86-
<Text slot="label">Item 1</Text>
87-
<Text slot="description">Description</Text>
88-
</MyListBoxItem>
89-
<MyListBoxItem>
90-
<Text slot="label">Item 2</Text>
91-
<Text slot="description">Description</Text>
92-
</MyListBoxItem>
93-
<MyListBoxItem>
94-
<Text slot="label">Item 3</Text>
95-
<Text slot="description">Description</Text>
96-
</MyListBoxItem>
97-
</ListBox>
98-
);
99-
10028
export const TagGroupExample = (props) => (
10129
<TagGroup {...props}>
10230
<Label>Categories</Label>

0 commit comments

Comments
 (0)