Disclosure

An internal utility that provides hide/show functionality.

Usage

This component is intended only for internal use (for now). If you need to use it please speak with the HDS team.

How to use this component

Use an interactive element that can trigger a custom event handler provided by the :toggle block (is passed via hash by Ember). This element is usually usually a button, or a component that renders a button (for accessibility reasons).

<Hds::Disclosure>
  <:toggle as |t|>
    <button type="button" {{on "click" t.onClickToggle}}>Click me</button>
  </:toggle>
  <:content>
    your content here
  </:content>
</Hds::Disclosure>

When the content is disclosed, the container can be closed in different way: toggling again the visibility via the button (click or enter/return), clicking outside of the content, or via the esc key.

The "content" is not positioned in any way in relation to the toggle: this responsibility is left to the consumers (eg by applying a position: absolute to a wrapper around the content that is passed to the :content block).

Component API

Name
<:toggle>
Type
named block
Description
This is a named block where to pass the interactive element that works as "toggle" for the disclosure.
Name
[:toggle].onClickToggle
Type
event handler
Description
Function that needs to be called by the interactive element to toggle the visibility of the content.
Name
[:toggle].isOpen
Type
tracked property
Description
Hook into this tracked property if you need to access the state of `isOpen`.
Name
<:content>
Type
named block
Description
This is a named block where to pass the actual content that is shown/hidden upon toggling.
Name
[:content].close
Type
function
Description
Function that can be called to programmatically close the dropdown.
Name
onClose
Type
function
Description
Callback function invoked when the dropdown is closed (if provided).
Name
…attributes
Description
...attributes spreading is supported on this component.

Showcase

Variants

with generic HTML <button> and generic content (placeholder)

with generic HTML <button> and generic list of <a> links

with <Hds::Button> and generic list of <a> links

with <Hds::Button> inside a larger container and generic list of <a> links

On this page: