|
1 | 1 | # Accessible Accordion |
2 | 2 |
|
3 | | -This control allows you to render an accordion control. Is a Implementation based on React Accessible Accordion Control, that was customize UI to be more Fluent. |
| 3 | +This control allows you to render an accordion control. It is an implementation based on React Accessible Accordion Control, that was customized to be more "Fluent". |
4 | 4 |
|
5 | 5 | Here is an example of the control in action: |
6 | 6 |
|
7 | | - |
| 7 | + |
8 | 8 |
|
9 | 9 | ## How to use this control in your solutions |
10 | 10 |
|
@@ -66,90 +66,63 @@ The `Accordion` control can be configured with the following properties: |
66 | 66 |
|
67 | 67 | ### Accordion |
68 | 68 |
|
69 | | -#### allowMultipleExpanded : `boolean` [*optional*, default: `false`] |
| 69 | +| Property | Type | Required | Description | Default | |
| 70 | +| ---- | ---- | ---- | ---- | ---- | |
| 71 | +| allowMultipleExpanded | boolean | no | Don't autocollapse items when expanding other items. | `false` | |
| 72 | +| allowZeroExpanded | boolean | no | Allow the only remaining expanded item to be collapsed. | `false` | |
| 73 | +| preExpanded | string[] | no | Accepts an array of strings and any `AccordionItem` whose `uuid` prop matches any one of these strings will be expanded on mount. | `[]` | |
| 74 | +| className | string | no | Class(es) to apply to element. | "accordion" | |
| 75 | +| onChange | (string[]) => void | no | Callback which is invoked when items are expanded or collapsed. Gets passed `uuid`s of the currently expanded `AccordionItem`s. | | |
70 | 76 |
|
71 | | -Don't autocollapse items when expanding other items. |
72 | 77 |
|
73 | | -#### allowZeroExpanded : `boolean` [*optional*, default: `false`] |
74 | | -
|
75 | | -Allow the only remaining expanded item to be collapsed. |
76 | | -
|
77 | | -#### preExpanded: `string[]` [_optional_, default: `[]`] |
78 | | -
|
79 | | -Accepts an array of strings and any `AccordionItem` whose `uuid` prop matches |
80 | | -any one of these strings will be expanded on mount. |
81 | | -
|
82 | | -#### className : `string` [*optional*, default: `'accordion'`] |
83 | | -
|
84 | | -Class(es) to apply to element. |
85 | | -
|
86 | | -#### onChange : `(string[]) => void` [*optional*] |
87 | | -
|
88 | | -Callback which is invoked when items are expanded or collapsed. Gets passed |
89 | | -`uuid`s of the currently expanded `AccordionItem`s. |
90 | | -
|
91 | | ---- |
92 | 78 |
|
93 | 79 | ### AccordionItem |
94 | 80 |
|
95 | | -#### className : `string` [*optional*, default: `accordion__item`] |
96 | | -
|
97 | | -Class(es) to apply to element. |
98 | | -
|
99 | | -#### uuid : `string|number` [*optional*] |
100 | | -
|
101 | | -Recommended for use with `onChange`. Will be auto-generated if not provided. |
| 81 | +| Property | Type | Required | Description | Default | |
| 82 | +| ---- | ---- | ---- | ---- | ---- | |
| 83 | +| className | string | no | Class(es) to apply to element. | "accordion__item" | |
| 84 | +| uuid | string \| number | no | Recommended for use with `onChange`. Will be auto-generated if not provided. | | |
| 85 | +| dangerouslySetExpanded | boolean | no | Enables external control of the expansion. **Warning: This may impact accessibility negatively, use at your own risk** | | |
102 | 86 |
|
103 | | -#### dangerouslySetExpanded: `boolean` [*optional*] |
104 | | -
|
105 | | -Enables external control of the expansion. |
106 | | -
|
107 | | -> Warning: This may impact accessibility negatively, use at your own risk |
108 | | -
|
109 | | ---- |
110 | 87 |
|
111 | 88 | ### AccordionItemHeading |
112 | 89 |
|
113 | | -#### className : `string` [*optional*, default: `'accordion__heading'`] |
114 | | -
|
115 | | -Class(es) to apply to the 'heading' element. |
116 | | -
|
117 | | -#### aria-level : `number` [*optional*, default: `3`] |
118 | | -
|
119 | | -Semantics to apply to the 'heading' element. A value of `1` would make your |
120 | | -heading element hierarchically equivalent to an `<h1>` tag, and likewise a value |
121 | | -of `6` would make it equivalent to an `<h6>` tag. |
| 90 | +| Property | Type | Required | Description | Default | |
| 91 | +| ---- | ---- | ---- | ---- | ---- | |
| 92 | +| className | string | no | Class(es) to apply to the 'heading' element. | "accordion__heading" | |
| 93 | +| aria-level | number | no | Semantics to apply to the 'heading' element. A value of `1` would make your heading element hierarchically equivalent to an `<h1>` tag, and likewise a value of `6` would make it equivalent to an `<h6>` tag. | `3` | |
122 | 94 |
|
123 | 95 | ### AccordionItemButton |
124 | 96 |
|
125 | | -#### className : `string` [*optional*, default: `'accordion__button'`] |
| 97 | +| Property | Type | Required | Description | Default | |
| 98 | +| ---- | ---- | ---- | ---- | ---- | |
| 99 | +| className | string | no | Class(es) to apply to the 'button' element. | "accordion__button" | |
126 | 100 |
|
127 | | -Class(es) to apply to the 'button' element. |
128 | | -
|
129 | | ---- |
130 | 101 |
|
131 | 102 | ### AccordionItemPanel |
132 | 103 |
|
133 | | -#### className : `string` [*optional*, default: `'accordion__panel'`] |
134 | | -
|
135 | | -Class(es) to apply to element. |
| 104 | +| Property | Type | Required | Description | Default | |
| 105 | +| ---- | ---- | ---- | ---- | ---- | |
| 106 | +| className | string | no | Class(es) to apply to element. | "accordion__panel" | |
136 | 107 |
|
137 | | ---- |
138 | 108 |
|
139 | 109 | ### AccordionItemState |
140 | 110 |
|
141 | | -#### children : `({ expanded: boolean, disabled: boolean }): JSX.Element` [**required**] |
| 111 | +| Property | Type | Required | Description | Default | |
| 112 | +| ---- | ---- | ---- | ---- | ---- | |
| 113 | +| children | ({ expanded: boolean, disabled: booleam }): JSX.Element | yes | item's children. | | |
142 | 114 |
|
143 | | ---- |
144 | 115 |
|
145 | 116 | ## Helpers |
146 | 117 |
|
147 | | -### resetNextUuid : `(): void` |
| 118 | +### resetNextUuid |
| 119 | +
|
| 120 | +```typescript |
| 121 | +resetNextUuid : () => void |
| 122 | +``` |
148 | 123 |
|
149 | 124 | Resets the internal counter for Accordion items' identifiers (including `id` |
150 | 125 | attributes). For use in test suites and isomorphic frameworks. |
151 | 126 |
|
152 | | ---- |
153 | | -
|
154 | 127 |
|
155 | 128 |  |
0 commit comments