The Disclosure is used to create accessible, hierarchical, and collapsible structure to your pages. It uses the Paste Heading component to create consistency across pages and content hierarchy.
You must not nest focusable or actionable elements inside the DisclosureHeading. Nested actionable elements are difficult to discover for users of assistive technology as their existence is often not announced.
The default variant of a Disclosure is a composition of the Paste Heading and a chevron button icon as the "trigger" for the disclosure. This trigger controls the appearance of content that is below it.
The DisclosureHeading takes the same props as the Heading component so you can control the semantic heading level and it's visual appearance through variants.
The contained variant of the Disclosure takes the default composition and wraps it in the Paste Card component. In this instance we do not expose the props used by Card, but all previously mentioned Disclosure props behave in the same way as the default variant.
You can control the initial state of the disclosure to be expanded or collapsed by setting the visible prop.
Disclosure comes with the option of "hooking" into the internal state by using the state hook originally provided by Reakit.
The state prop allows you to hook into, and keep in sync the state of the Disclosure and the state of your application.
This will allow you to set initial state and merge the returned state from the hook with the application state, and keep it in sync with user interactions.
It should be noted that when doing so, the state prop takes precident over the other properties that affect the state or initial state of the Disclosure. They will be ignored in favour of them being provided as arguments to the useDisclosureState hook.
For full details on how to use the state hook, and what props to provide it, follow the Disclosure Primitive documentation. It's the same hook, just renamed.
You could use this if you need to wait for a response from an API before opening the Disclosure content. In the example below, we're simulating the response time by adding a delay.
Another usecase of this might be programmatically opening/closing a Disclosure. In the example below we are using a separate button to toggle the visibilty of the disclosure content.
Each Disclosure can be disabled by setting the disabled prop on the DisclosureHeading
Both DisclosureHeading and DisclosureContent accept any child component. However, avoid placing a focusable element inside the DisclosureHeading.
Disclosure headers should be short, no more than 1 line, and prioritize the user goal. Use sentence case for the headers.
Any content contained within a disclosure can be formatted into multiple paragraphs with sub-headers, if needed.
Disclosures with an error icon in the header must include additional information on the nature of the error and how the user can fix it within the disclosure content. For additional guidance on how to compose error messages, refer to the error state pattern.