Skip to content

Commit 18835f7

Browse files
yihuiliaoyihuiliao
authored
docs: update accordion, disclosure, disclosure group docs (#7165)
* initial accordion docs * more v3 disclosure docs * add rac disclosure and disclosure group docs * add anatomy diagrams and example cards * remove disclosure children to be required * edits * update wording * edits * add inline styles * use heading, couple edits * use title instead of label, add to advance customization section * add example to disclosure group
1 parent 69109f0 commit 18835f7

File tree

11 files changed

+557
-35
lines changed

11 files changed

+557
-35
lines changed

‎packages/@react-spectrum/accordion/docs/Accordion.mdx

Lines changed: 81 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export default Layout;
1313
import docs from 'docs:@react-spectrum/accordion';
1414
import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs';
1515
import packageData from '@react-spectrum/accordion/package.json';
16-
import {InlineAlert, Content, Heading} from '@adobe/react-spectrum';
1716

1817
---
1918
category: Navigation
@@ -32,11 +31,6 @@ import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel} from '@react-s
3231
packageData={packageData}
3332
componentNames={['Accordion', 'Disclosure', 'DisclosureHeader', 'DisclosurePanel']} />
3433

35-
<InlineAlert variant="notice" marginTop={60}>
36-
<Heading>Under construction</Heading>
37-
<Content>This component is in <strong>alpha</strong>. More documentation is coming soon!</Content>
38-
</InlineAlert>
39-
4034
## Example
4135

4236
```tsx example
@@ -56,6 +50,87 @@ import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel} from '@react-s
5650
</Accordion>
5751
```
5852

53+
54+
## Content
55+
56+
Accordion accepts multiple [Disclosure](Disclosure.html) elements as children. Each disclosure accepts an `id` prop which is passed to the `onExpandedChange` handler to identify the expanded disclosure within the accordion. See the [Events](#events) section for more details about expansion.
57+
58+
### Internationalization
59+
In order to internationalize an Accordion, all text content within the accordion should be localized.
60+
61+
## Events
62+
63+
Accordion accepts an `onExpandedChange` prop which is triggered when a disclosure is expanded or collapsed. The example below uses `onExpandedChange` to programmatically control disclosure expansion.
64+
65+
```tsx example
66+
import {Key} from "@react-types/shared";
67+
68+
function ControlledExpansion() {
69+
let [expandedKeys, setExpandedKeys] = React.useState<Set<Key>>(new Set(['personal']))
70+
71+
return (
72+
<>
73+
<Accordion expandedKeys={expandedKeys} onExpandedChange={setExpandedKeys}>
74+
<Disclosure id="personal">
75+
<DisclosureHeader>Personal Information</DisclosureHeader>
76+
<DisclosurePanel>
77+
<p>Personal information form here.</p>
78+
</DisclosurePanel>
79+
</Disclosure>
80+
<Disclosure id="billing">
81+
<DisclosureHeader>Billing Address</DisclosureHeader>
82+
<DisclosurePanel>
83+
<p>Billing address form here.</p>
84+
</DisclosurePanel>
85+
</Disclosure>
86+
</Accordion>
87+
<div style={{marginTop: '20px'}}>You have expanded: {expandedKeys}</div>
88+
</>
89+
)
90+
}
91+
```
92+
93+
## Expansion
94+
95+
By default, only one disclosure will be expanded at a time. To expand multiple disclosures, apply the `allowsMultipleExpanded` prop to Accordion.
96+
97+
```tsx example
98+
<Accordion allowsMultipleExpanded defaultExpandedKeys={['personal', 'billing']}>
99+
<Disclosure id="personal">
100+
<DisclosureHeader>Personal Information</DisclosureHeader>
101+
<DisclosurePanel>
102+
<p>Personal information form here.</p>
103+
</DisclosurePanel>
104+
</Disclosure>
105+
<Disclosure id="billing">
106+
<DisclosureHeader>Billing Address</DisclosureHeader>
107+
<DisclosurePanel>
108+
<p>Billing address form here.</p>
109+
</DisclosurePanel>
110+
</Disclosure>
111+
</Accordion>
112+
```
59113
## Props
60114

61115
<PropTable component={docs.exports.Accordion} links={docs.links} />
116+
117+
## Visual Options
118+
119+
### Disabled
120+
121+
```tsx example
122+
<Accordion isDisabled>
123+
<Disclosure id="personal">
124+
<DisclosureHeader>Personal Information</DisclosureHeader>
125+
<DisclosurePanel>
126+
<p>Personal information form here.</p>
127+
</DisclosurePanel>
128+
</Disclosure>
129+
<Disclosure id="billing">
130+
<DisclosureHeader>Billing Address</DisclosureHeader>
131+
<DisclosurePanel>
132+
<p>Billing address form here.</p>
133+
</DisclosurePanel>
134+
</Disclosure>
135+
</Accordion>
136+
```

‎packages/@react-spectrum/accordion/docs/Disclosure.mdx

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export default Layout;
1313
import docs from 'docs:@react-spectrum/accordion';
1414
import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs';
1515
import packageData from '@react-spectrum/accordion/package.json';
16-
import {InlineAlert, Content, Heading} from '@adobe/react-spectrum';
1716

1817
---
1918
category: Navigation
@@ -32,11 +31,6 @@ import {Disclosure, DisclosureHeader, DisclosurePanel} from '@react-spectrum/acc
3231
packageData={packageData}
3332
componentNames={['Disclosure', 'DisclosureHeader', 'DisclosurePanel']} />
3433

35-
<InlineAlert variant="notice" marginTop={60}>
36-
<Heading>Under construction</Heading>
37-
<Content>This component is in <strong>alpha</strong>. More documentation is coming soon!</Content>
38-
</InlineAlert>
39-
4034
## Example
4135

4236
```tsx example
@@ -48,6 +42,38 @@ import {Disclosure, DisclosureHeader, DisclosurePanel} from '@react-spectrum/acc
4842
</Disclosure>
4943
```
5044

45+
## Content
46+
47+
Disclosure follows the [ARIA Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and consists of two children: `DisclosureHeader` and `DisclosurePanel`. The `DisclosureHeader` controls the expansion of the `DisclosurePanel` and the contents inside.
48+
49+
Disclosure can be used as a standalone collapsible section of content. However, multiple discosures can be combined to form an [Accordion](Accordion.html).
50+
51+
### Internationalization
52+
53+
In order to internationalize a disclosure, all text content within the disclosure should be localized.
54+
55+
## Events
56+
57+
Disclosure accepts an `onExpandedChange` prop which is triggered when it is expanded or collapsed. The example below uses `onExpandedChange` to programmatically control disclosure expansion.
58+
59+
```tsx example
60+
function ControlledExpansion() {
61+
let [isExpanded, setIsExpanded] = React.useState<boolean>(false);
62+
63+
return (
64+
<>
65+
<Disclosure isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
66+
<DisclosureHeader>System Requirements</DisclosureHeader>
67+
<DisclosurePanel>
68+
<p>Details about system requirements here.</p>
69+
</DisclosurePanel>
70+
</Disclosure>
71+
<div style={{marginTop: '20px'}}>{isExpanded ? 'The disclosure is expanded' : 'The disclosure is collapsed'}</div>
72+
</>
73+
)
74+
}
75+
```
76+
5177
## Props
5278

5379
### Disclosure
@@ -61,3 +87,28 @@ import {Disclosure, DisclosureHeader, DisclosurePanel} from '@react-spectrum/acc
6187
### DisclosurePanel
6288

6389
<PropTable component={docs.exports.DisclosurePanel} links={docs.links} />
90+
91+
92+
## Visual Options
93+
94+
### Disabled
95+
96+
```tsx example
97+
<Disclosure isDisabled>
98+
<DisclosureHeader>System Requirements</DisclosureHeader>
99+
<DisclosurePanel>
100+
<p>Details about system requirements here.</p>
101+
</DisclosurePanel>
102+
</Disclosure>
103+
```
104+
105+
### Expanded
106+
107+
```tsx example
108+
<Disclosure defaultExpanded>
109+
<DisclosureHeader>System Requirements</DisclosureHeader>
110+
<DisclosurePanel>
111+
<p>Details about system requirements here.</p>
112+
</DisclosurePanel>
113+
</Disclosure>
114+
```

‎packages/dev/docs/pages/assets/component-illustrations/Disclosure.svg

Lines changed: 5 additions & 0 deletions
Loading

‎packages/dev/docs/pages/assets/component-illustrations/DisclosureGroup.svg

Lines changed: 10 additions & 0 deletions
Loading

‎packages/dev/docs/pages/react-aria/components.mdx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ import ColorField from '../assets/component-illustrations/ColorField.svg';
6363
import ColorSwatch from '../assets/component-illustrations/ColorSwatch.svg';
6464
import ColorSwatchPicker from '../assets/component-illustrations/ColorSwatchPicker.svg';
6565
import ColorPicker from '../assets/component-illustrations/ColorPicker.svg';
66+
import Disclosure from '../assets/component-illustrations/Disclosure.svg';
67+
import DisclosureGroup from '../assets/component-illustrations/DisclosureGroup.svg';
6668

6769
---
6870
category: Introduction
@@ -385,6 +387,20 @@ order: 5
385387
<Breadcrumbs />
386388
</ExampleCard>
387389

390+
<ExampleCard
391+
url="Disclosure.html"
392+
title="Disclosure"
393+
description="A disclosure is a collapsible section of content.">
394+
<Disclosure />
395+
</ExampleCard>
396+
397+
<ExampleCard
398+
url="DisclosureGroup.html"
399+
title="DisclosureGroup"
400+
description="A disclosure group is a grouping of related disclosures, sometimes called an Accordion.">
401+
<DisclosureGroup />
402+
</ExampleCard>
403+
388404
</section>
389405

390406
## Status

‎packages/dev/docs/pages/react-spectrum/index.mdx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ import ColorField from '../assets/component-illustrations/ColorField.svg';
7676
import ColorSwatch from '../assets/component-illustrations/ColorSwatch.svg';
7777
import ColorSwatchPicker from '../assets/component-illustrations/ColorSwatchPicker.svg';
7878
import ColorPicker from '../assets/component-illustrations/ColorPicker.svg';
79+
import Disclosure from '../assets/component-illustrations/Disclosure.svg';
80+
import Accordion from '../assets/component-illustrations/DisclosureGroup.svg';
7981

8082
---
8183
category: Libraries
@@ -478,6 +480,20 @@ A React implementation of Spectrum, Adobe’s design system.
478480
<Breadcrumbs />
479481
</ExampleCard>
480482

483+
<ExampleCard
484+
url="Disclosure.html"
485+
title="Disclosure"
486+
description="A disclosure is a collapsible section of content.">
487+
<Disclosure />
488+
</ExampleCard>
489+
490+
<ExampleCard
491+
url="Accordion.html"
492+
title="Accordion"
493+
description="An accordion is a grouping of related disclosures.">
494+
<Accordion />
495+
</ExampleCard>
496+
481497
</section>
482498

483499
### Status

0 commit comments

Comments
 (0)