import { CollapseProvider } from '@uhg-abyss/web/ui/CollapseProvider';Usage
Wrap any number of collapsible child components utilizing the useCollapse hook in the CollapseProvider to allow for collapse/expand control of all children.
CollapseProvider.Button
Use CollapseProvider.Button within the CollapseProvider to interface directly with the collapse/expand functionality. The collapsed state will be uncontrolled and handled internally by the component. If you'd like to provide a default state to all collapsible child components, utilize the defaultIsOpen prop detailed below.
Use the expandText and collapseText props to set custom text for the expand and collapse buttons. The default text is "Expand All" and "Collapse All", respectively.
useCollapseContext (custom button)
import { useCollapseContext } from '@uhg-abyss/web/hooks/useCollapseContext';To use a custom button that interfaces with the collapse/expand functionality of the CollapseProvider use the useCollapseContext hook. This hook provides access to the global collapse state and methods to toggle all collapsible children.
defaultIsOpen
Use the defaultIsOpen prop to set a default collapse state for all collapsible child components within the CollapseProvider. This should be utilized when using Collapse.Button. Default value is true.
CollapseProvider Props
| Name | Type | Description |
|---|---|---|
defaultIsOpen | boolean | undefined | The default open state of the collapse. |
CollapseProvider.Button Props
| Name | Type | A11y | Description |
|---|---|---|---|
className | string | undefined | CSS class name to apply to each element within the component | |
collapseText | string | undefined | Custom text for collapse button; used as its aria-label when the section is open. | |
css | CSSProperties | Partial<Record<"abyss-collapse-button-root" | "abyss-collapse-all-button" | "abyss-expand-all-button" | "abyss-collapse-all-button-icon" | "abyss-expand-all-button-icon" | "abyss-collapse-all-button-text" | "abyss-expand-all-button-text", CSSProperties>> | undefined | Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information | |
data-testid | string | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | |
expandText | string | undefined | Custom text for expand button; used as its aria-label when the section is closed. | |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | |
slotProps | Partial<Record<string, SlotPropsValue<string>>> | undefined | Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information | |
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
CollapseProvider.Button Classes
| Class Name | Description |
|---|---|
| .abyss-collapse-all-button | Collapse all button element |
| .abyss-collapse-all-button-icon | IconSymbol for collapse all button |
| .abyss-collapse-all-button-text | Text content for collapse all button |
| .abyss-collapse-button-root | CollapseButton root element |
| .abyss-expand-all-button | Expand all button element |
| .abyss-expand-all-button-icon | IconSymbol for expand all button |
| .abyss-expand-all-button-text | Text content for expand all button |