Skip to content

Commit 6dbcdc7

Browse files
devongovettdevongovett
authored
Add basic docs for Accordion, DisclosureGroup, Disclosure, and Tree (#7071)
1 parent 5a0b4fa commit 6dbcdc7

File tree

18 files changed

+849
-90
lines changed

18 files changed

+849
-90
lines changed

‎packages/@adobe/spectrum-css-temp/components/accordion/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ governing permissions and limitations under the License.
4343
position: relative;
4444

4545
display: list-item;
46+
list-style: none;
4647
margin: 0;
4748

4849
border-bottom: var(--spectrum-accordion-item-border-size) solid transparent;

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{/* Copyright 2024 Adobe. All rights reserved.
2+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
3+
you may not use this file except in compliance with the License. You may obtain a copy
4+
of the License at http://www.apache.org/licenses/LICENSE-2.0
5+
Unless required by applicable law or agreed to in writing, software distributed under
6+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
7+
OF ANY KIND, either express or implied. See the License for the specific language
8+
governing permissions and limitations under the License. */}
9+
10+
import {Layout} from '@react-spectrum/docs';
11+
export default Layout;
12+
13+
import docs from 'docs:@react-spectrum/accordion';
14+
import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs';
15+
import packageData from '@react-spectrum/accordion/package.json';
16+
import {InlineAlert, Content, Heading} from '@adobe/react-spectrum';
17+
18+
---
19+
category: Navigation
20+
keywords: [disclosure, accordion, collapse, expand]
21+
---
22+
23+
```jsx import
24+
import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel} from '@react-spectrum/accordion';
25+
```
26+
27+
# Accordion
28+
29+
<PageDescription>{docs.exports.Accordion.description}</PageDescription>
30+
31+
<HeaderInfo
32+
packageData={packageData}
33+
componentNames={['Accordion', 'Disclosure', 'DisclosureHeader', 'DisclosurePanel']} />
34+
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+
40+
## Example
41+
42+
```tsx example
43+
<Accordion defaultExpandedKeys={['personal']}>
44+
<Disclosure id="personal">
45+
<DisclosureHeader>Personal Information</DisclosureHeader>
46+
<DisclosurePanel>
47+
<p>Personal information form here.</p>
48+
</DisclosurePanel>
49+
</Disclosure>
50+
<Disclosure id="billing">
51+
<DisclosureHeader>Billing Address</DisclosureHeader>
52+
<DisclosurePanel>
53+
<p>Billing address form here.</p>
54+
</DisclosurePanel>
55+
</Disclosure>
56+
</Accordion>
57+
```
58+
59+
## Props
60+
61+
<PropTable component={docs.exports.Accordion} links={docs.links} />

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{/* Copyright 2024 Adobe. All rights reserved.
2+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
3+
you may not use this file except in compliance with the License. You may obtain a copy
4+
of the License at http://www.apache.org/licenses/LICENSE-2.0
5+
Unless required by applicable law or agreed to in writing, software distributed under
6+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
7+
OF ANY KIND, either express or implied. See the License for the specific language
8+
governing permissions and limitations under the License. */}
9+
10+
import {Layout} from '@react-spectrum/docs';
11+
export default Layout;
12+
13+
import docs from 'docs:@react-spectrum/accordion';
14+
import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs';
15+
import packageData from '@react-spectrum/accordion/package.json';
16+
import {InlineAlert, Content, Heading} from '@adobe/react-spectrum';
17+
18+
---
19+
category: Navigation
20+
keywords: [disclosure, accordion, collapse, expand]
21+
---
22+
23+
```jsx import
24+
import {Disclosure, DisclosureHeader, DisclosurePanel} from '@react-spectrum/accordion';
25+
```
26+
27+
# Disclosure
28+
29+
<PageDescription>{docs.exports.Disclosure.description}</PageDescription>
30+
31+
<HeaderInfo
32+
packageData={packageData}
33+
componentNames={['Disclosure', 'DisclosureHeader', 'DisclosurePanel']} />
34+
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+
40+
## Example
41+
42+
```tsx example
43+
<Disclosure>
44+
<DisclosureHeader>System Requirements</DisclosureHeader>
45+
<DisclosurePanel>
46+
<p>Details about system requirements here.</p>
47+
</DisclosurePanel>
48+
</Disclosure>
49+
```
50+
51+
## Props
52+
53+
### Disclosure
54+
55+
<PropTable component={docs.exports.Disclosure} links={docs.links} />
56+
57+
### DisclosureHeader
58+
59+
<PropTable component={docs.exports.DisclosureHeader} links={docs.links} />
60+
61+
### DisclosurePanel
62+
63+
<PropTable component={docs.exports.DisclosurePanel} links={docs.links} />

‎packages/@react-spectrum/accordion/src/Accordion.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@
1111
*/
1212

1313
import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';
14-
import {Button, DisclosureGroup, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';
14+
import {Button, UNSTABLE_DisclosureGroup as DisclosureGroup, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading, UNSTABLE_Disclosure as RACDisclosure, UNSTABLE_DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';
1515
import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
1616
import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
1717
import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
18-
import React, {forwardRef, ReactElement} from 'react';
18+
import React, {forwardRef} from 'react';
1919
import styles from '@adobe/spectrum-css-temp/components/accordion/vars.css';
2020
import {useLocale} from '@react-aria/i18n';
2121
import {useProviderProps} from '@react-spectrum/provider';
2222

23-
export interface SpectrumAccordionProps extends StyleProps, DOMProps, AriaLabelingProps {
23+
export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps, AriaLabelingProps {
2424
/** The disclosures within the accordion group. */
2525
children: React.ReactNode
2626
}
@@ -40,9 +40,9 @@ function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
4040
);
4141
}
4242

43-
export interface SpectrumDisclosureProps extends DisclosureProps, AriaLabelingProps {
43+
export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps {
4444
/** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */
45-
children: [ReactElement<SpectrumDisclosureHeaderProps>, ReactElement<SpectrumDisclosurePanelProps>]
45+
children: React.ReactNode
4646
}
4747

4848
function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {
@@ -61,7 +61,7 @@ function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>)
6161
);
6262
}
6363

64-
export interface SpectrumDisclosurePanelProps extends DisclosurePanelProps, DOMProps, AriaLabelingProps {
64+
export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps, 'className' | 'style' | 'children'>, DOMProps, AriaLabelingProps {
6565
/** The contents of the accordion panel. */
6666
children: React.ReactNode
6767
}

‎packages/@react-spectrum/s2/src/Accordion.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {ContextValue, DisclosureGroup, DisclosureGroupProps, SlotProps} from 'react-aria-components';
13+
import {ContextValue, UNSTABLE_DisclosureGroup as DisclosureGroup, DisclosureGroupProps, SlotProps} from 'react-aria-components';
1414
import {DisclosureContext} from './Disclosure';
1515
import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
1616
import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' };
@@ -19,7 +19,7 @@ import {style} from '../style/spectrum-theme' with { type: 'macro' };
1919
import {useDOMRef} from '@react-spectrum/utils';
2020
import {useSpectrumContextProps} from './useSpectrumContextProps';
2121

22-
export interface AccordionProps extends DisclosureGroupProps, UnsafeStyles, DOMProps, SlotProps {
22+
export interface AccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, SlotProps {
2323
/** The disclosure elements in the accordion. */
2424
children: React.ReactNode,
2525
/** Spectrum-defined styles, returned by the `style()` macro. */

‎packages/@react-spectrum/s2/src/Disclosure.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
14-
import {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';
14+
import {Button, ContextValue, DisclosureStateContext, Heading, Provider, UNSTABLE_Disclosure as RACDisclosure, UNSTABLE_DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';
1515
import {CenterBaseline} from './CenterBaseline';
1616
import {centerPadding, focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };
1717
import Chevron from '../ui-icons/Chevron';
@@ -21,7 +21,7 @@ import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
2121
import {useDOMRef} from '@react-spectrum/utils';
2222
import {useSpectrumContextProps} from './useSpectrumContextProps';
2323

24-
export interface DisclosureProps extends RACDisclosureProps, StyleProps {
24+
export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {
2525
/**
2626
* The size of the disclosure.
2727
* @default "M"
@@ -231,7 +231,7 @@ function DisclosureHeader(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivEleme
231231
let _DisclosureHeader = forwardRef(DisclosureHeader);
232232
export {_DisclosureHeader as DisclosureHeader};
233233

234-
export interface DisclosurePanelProps extends RACDisclosurePanelProps, UnsafeStyles, DOMProps, AriaLabelingProps {
234+
export interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {
235235
children: React.ReactNode
236236
}
237237

‎packages/@react-spectrum/tree/test/TreeView.test.tsx

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,6 @@ describe('Tree', () => {
227227
expect(row).toHaveAttribute('data-level');
228228
expect(row).toHaveAttribute('aria-posinset');
229229
expect(row).toHaveAttribute('aria-setsize');
230-
expect(row).toHaveAttribute('data-has-child-rows');
231230
expect(row).toHaveAttribute('data-rac');
232231
expect(row).not.toHaveAttribute('data-selected');
233232
expect(row).not.toHaveAttribute('data-disabled');
@@ -251,7 +250,7 @@ describe('Tree', () => {
251250
expect(rowNoChild).toHaveAttribute('data-level', '1');
252251
expect(rowNoChild).toHaveAttribute('aria-posinset', '1');
253252
expect(rowNoChild).toHaveAttribute('aria-setsize', '2');
254-
expect(rowNoChild).toHaveAttribute('data-has-child-rows', 'false');
253+
expect(rowNoChild).not.toHaveAttribute('data-has-child-rows');
255254
expect(rowNoChild).toHaveAttribute('data-rac');
256255

257256
let rowWithChildren = rows[1];
@@ -285,7 +284,7 @@ describe('Tree', () => {
285284
expect(level3ChildRow).toHaveAttribute('data-level', '3');
286285
expect(level3ChildRow).toHaveAttribute('aria-posinset', '1');
287286
expect(level3ChildRow).toHaveAttribute('aria-setsize', '1');
288-
expect(level3ChildRow).toHaveAttribute('data-has-child-rows', 'false');
287+
expect(level3ChildRow).not.toHaveAttribute('data-has-child-rows');
289288
expect(level3ChildRow).toHaveAttribute('data-rac');
290289

291290
let level2ChildRow2 = rows[4];
@@ -296,7 +295,7 @@ describe('Tree', () => {
296295
expect(level2ChildRow2).toHaveAttribute('data-level', '2');
297296
expect(level2ChildRow2).toHaveAttribute('aria-posinset', '2');
298297
expect(level2ChildRow2).toHaveAttribute('aria-setsize', '3');
299-
expect(level2ChildRow2).toHaveAttribute('data-has-child-rows', 'false');
298+
expect(level2ChildRow2).not.toHaveAttribute('data-has-child-rows');
300299
expect(level2ChildRow2).toHaveAttribute('data-rac');
301300

302301
let level2ChildRow3 = rows[5];
@@ -307,7 +306,7 @@ describe('Tree', () => {
307306
expect(level2ChildRow3).toHaveAttribute('data-level', '2');
308307
expect(level2ChildRow3).toHaveAttribute('aria-posinset', '3');
309308
expect(level2ChildRow3).toHaveAttribute('aria-setsize', '3');
310-
expect(level2ChildRow3).toHaveAttribute('data-has-child-rows', 'false');
309+
expect(level2ChildRow3).not.toHaveAttribute('data-has-child-rows');
311310
expect(level2ChildRow3).toHaveAttribute('data-rac');
312311
});
313312

@@ -430,7 +429,7 @@ describe('Tree', () => {
430429
expect(rows[0]).toHaveAttribute('aria-label', 'Test');
431430
// Until the row gets children, don't mark it with the aria/data attributes.
432431
expect(rows[0]).not.toHaveAttribute('aria-expanded');
433-
expect(rows[0]).toHaveAttribute('data-has-child-rows', 'false');
432+
expect(rows[0]).not.toHaveAttribute('data-has-child-rows');
434433
expect(chevron).toBeTruthy();
435434
});
436435

@@ -846,7 +845,7 @@ describe('Tree', () => {
846845
await trigger(rows[0], 'Enter');
847846
expect(document.activeElement).toBe(rows[0]);
848847
expect(rows[0]).toHaveAttribute('aria-expanded', 'false');
849-
expect(rows[0]).toHaveAttribute('data-expanded', 'false');
848+
expect(rows[0]).not.toHaveAttribute('data-expanded');
850849
expect(rows[0]).toHaveAttribute('aria-level', '1');
851850
expect(rows[0]).toHaveAttribute('aria-posinset', '1');
852851
expect(rows[0]).toHaveAttribute('aria-setsize', '2');
@@ -884,7 +883,7 @@ describe('Tree', () => {
884883
await trigger(rows[2], 'ArrowLeft');
885884
expect(document.activeElement).toBe(rows[2]);
886885
expect(rows[2]).toHaveAttribute('aria-expanded', 'false');
887-
expect(rows[2]).toHaveAttribute('data-expanded', 'false');
886+
expect(rows[2]).not.toHaveAttribute('data-expanded');
888887
expect(rows[2]).toHaveAttribute('aria-level', '2');
889888
expect(rows[2]).toHaveAttribute('aria-posinset', '2');
890889
expect(rows[2]).toHaveAttribute('aria-setsize', '5');
@@ -944,14 +943,14 @@ describe('Tree', () => {
944943
await user.tab();
945944
rows = tree.getAllByRole('row');
946945
expect(rows[0]).toHaveAttribute('aria-expanded', 'false');
947-
expect(rows[0]).toHaveAttribute('data-expanded', 'false');
946+
expect(rows[0]).not.toHaveAttribute('data-expanded');
948947
expect(rows[0]).toHaveAttribute('aria-disabled', 'true');
949948
expect(rows[0]).toHaveAttribute('data-disabled', 'true');
950949
expect(onExpandedChange).toHaveBeenCalledTimes(0);
951950

952951
await trigger(rows[0], 'Space');
953952
expect(rows[0]).toHaveAttribute('aria-expanded', 'false');
954-
expect(rows[0]).toHaveAttribute('data-expanded', 'false');
953+
expect(rows[0]).not.toHaveAttribute('data-expanded');
955954
expect(onExpandedChange).toHaveBeenCalledTimes(0);
956955
});
957956

@@ -971,7 +970,7 @@ describe('Tree', () => {
971970
await trigger(chevron, 'ArrowLeft');
972971
expect(document.activeElement).toBe(rows[0]);
973972
expect(rows[0]).toHaveAttribute('aria-expanded', 'false');
974-
expect(rows[0]).toHaveAttribute('data-expanded', 'false');
973+
expect(rows[0]).not.toHaveAttribute('data-expanded');
975974
expect(onExpandedChange).toHaveBeenCalledTimes(1);
976975
expect(new Set(onExpandedChange.mock.calls[0][0])).toEqual(new Set(['Project-2', 'Project-5', 'Reports', 'Reports-1', 'Reports-1A', 'Reports-1AB']));
977976
expect(onSelectionChange).toHaveBeenCalledTimes(0);
@@ -1016,7 +1015,7 @@ describe('Tree', () => {
10161015
let chevron = within(rows[0]).getAllByRole('button')[0];
10171016
await trigger(chevron, 'ArrowLeft');
10181017
expect(rows[0]).toHaveAttribute('aria-expanded', 'false');
1019-
expect(rows[0]).toHaveAttribute('data-expanded', 'false');
1018+
expect(rows[0]).not.toHaveAttribute('data-expanded');
10201019
expect(onExpandedChange).toHaveBeenCalledTimes(1);
10211020
expect(new Set(onExpandedChange.mock.calls[0][0])).toEqual(new Set(['Project-2', 'Project-5', 'Reports', 'Reports-1', 'Reports-1A', 'Reports-1AB']));
10221021
expect(onSelectionChange).toHaveBeenCalledTimes(2);
@@ -1044,7 +1043,7 @@ describe('Tree', () => {
10441043
let chevron = within(rows[0]).getAllByRole('button')[0];
10451044
await trigger(chevron, 'ArrowLeft');
10461045
expect(rows[0]).toHaveAttribute('aria-expanded', 'false');
1047-
expect(rows[0]).toHaveAttribute('data-expanded', 'false');
1046+
expect(rows[0]).not.toHaveAttribute('data-expanded');
10481047
expect(onExpandedChange).toHaveBeenCalledTimes(1);
10491048
expect(new Set(onExpandedChange.mock.calls[0][0])).toEqual(new Set(['Project-2', 'Project-5', 'Reports', 'Reports-1', 'Reports-1A', 'Reports-1AB']));
10501049
expect(onAction).toHaveBeenCalledTimes(1);
@@ -1075,7 +1074,7 @@ describe('Tree', () => {
10751074
let chevron = within(rows[0]).getAllByRole('button')[0];
10761075
await trigger(chevron, 'ArrowLeft');
10771076
expect(rows[0]).toHaveAttribute('aria-expanded', 'false');
1078-
expect(rows[0]).toHaveAttribute('data-expanded', 'false');
1077+
expect(rows[0]).not.toHaveAttribute('data-expanded');
10791078
expect(onExpandedChange).toHaveBeenCalledTimes(1);
10801079
expect(new Set(onExpandedChange.mock.calls[0][0])).toEqual(new Set(['Project-2', 'Project-5', 'Reports', 'Reports-1', 'Reports-1A', 'Reports-1AB']));
10811080
});
@@ -1097,15 +1096,15 @@ describe('Tree', () => {
10971096
await user.tab();
10981097
expect(document.activeElement).toBe(rows[0]);
10991098
expect(rows[0]).toHaveAttribute('aria-expanded', 'false');
1100-
expect(rows[0]).toHaveAttribute('data-expanded', 'false');
1099+
expect(rows[0]).not.toHaveAttribute('data-expanded');
11011100

11021101
await user.click(rows[0]);
11031102
rows = getAllByRole('row');
11041103
expect(rows).toHaveLength(7);
11051104

11061105
await user.click(rows[0]);
11071106
expect(rows[0]).toHaveAttribute('aria-expanded', 'false');
1108-
expect(rows[0]).toHaveAttribute('data-expanded', 'false');
1107+
expect(rows[0]).not.toHaveAttribute('data-expanded');
11091108
rows = getAllByRole('row');
11101109
expect(rows).toHaveLength(2);
11111110
});

‎packages/react-aria-components/docs/Checkbox.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ This example wraps `Checkbox` and all of its children together into a single com
166166
```tsx example export=true
167167
import type {CheckboxProps} from 'react-aria-components';
168168

169-
function MyCheckbox({children, ...props}: CheckboxProps) {
169+
export function MyCheckbox({children, ...props}: CheckboxProps) {
170170
return (
171171
<Checkbox {...props}>
172172
{({isIndeterminate}) => <>

0 commit comments

Comments
 (0)