Disclosure#

The <Disclosure> utility component can be used to control visibility of it's content. It is an export of Reakit's Disclosure

Import#

import { Disclosure } from 'bumbag';

Usage#

Editable example

<Disclosure.State>
  <Disclosure>Toggle</Disclosure>
  <Disclosure.Content>Hello world</Disclosure.Content>
</Disclosure.State>

<Disclosure.State>
  <Disclosure>Toggle</Disclosure>
  <Disclosure.Content>Hello world</Disclosure.Content>
</Disclosure.State>

Controlled#

Editable example

function Example() {
  const disclosure = Disclosure.useState();

  return (
    <React.Fragment>
      <Disclosure {...disclosure}>Toggle</Disclosure>
      <Disclosure.Content {...disclosure}>Hello world</Disclosure.Content>
    </React.Fragment>
  )
}

function Example() {
  const disclosure = Disclosure.useState();

  return (
    <React.Fragment>
      <Disclosure {...disclosure}>Toggle</Disclosure>
      <Disclosure.Content {...disclosure}>Hello world</Disclosure.Content>
    </React.Fragment>
  )
}

Accessing internal state#

Any descendant component of Disclosure.State can utilise Disclosure.useContext to access the internal disclosure state:

function Example() {
  const { disclosure } = Disclosure.useContext();
  return (
    <Button onClick={disclosure.toggle}>Toggle</Button>
  )
}

Accessibility#

Rules#

Each Disclosure must have an accomanying Disclosure.Content.

Patterns#

Disclosure extends the accessibility features of a Button.
Disclosure has a aria-controls value to the ID of the Disclosure.Content.
When the disclosure is visible, aria-expanded is set to true. If it is hidden, it is set to false.

Props#

Disclosure Props#

disabled boolean

Same as the HTML attribute.

focusable boolean

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

3 state props

These props are returned by the state hook. You can spread them into this component (...state) or pass them separately. You can also provide these props from your own state logic.

visible boolean

Whether it's visible or not.

baseId string Required

ID that will serve as a base for all the items IDs.

toggle () => void Required

Toggles the visible state

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Disclosure.Content Props#

5 state props

These props are returned by the state hook. You can spread them into this component (...state) or pass them separately. You can also provide these props from your own state logic.

baseId string

ID that will serve as a base for all the items IDs.

visible boolean

Whether it's visible or not.

animating boolean

Whether it's animating or not.

animated number | boolean

If true, animating will be set to true when visible is updated. It'll wait for stopAnimation to be called or a CSS transition ends. If animated is set to a number, stopAnimation will be called only after the same number of milliseconds have passed.

stopAnimation () => void

Stops animation. It's called automatically if there's a CSS transition.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

State#

Disclosure.State API#

baseId string

ID that will serve as a base for all the items IDs.

visible boolean

Whether it's visible or not.

animated number | boolean

Disclosure.State Return Values#

12 values

baseId string Required

ID that will serve as a base for all the items IDs.

visible boolean Required

Whether it's visible or not.

animated number | boolean Required

animating boolean Required

Whether it's animating or not.

setBaseId (value: SetStateAction<string>) => void Required

Sets baseId.

show () => void Required

Changes the visible state to true

hide () => void Required

Changes the visible state to false

toggle () => void Required

Toggles the visible state

setVisible (value: SetStateAction<boolean>) => void Required

Sets visible.

setAnimated (value: SetStateAction<number | boolean>) => void Required

Sets animated.

stopAnimation () => void Required

Stops animation. It's called automatically if there's a CSS transition.

Disclosure.useState API#

baseId string

ID that will serve as a base for all the items IDs.

visible boolean

Whether it's visible or not.

animated number | boolean

Disclosure.useState Return Values#

12 values

baseId string Required

ID that will serve as a base for all the items IDs.

visible boolean Required

Whether it's visible or not.

animated number | boolean Required

animating boolean Required

Whether it's animating or not.

setBaseId (value: SetStateAction<string>) => void Required

Sets baseId.

show () => void Required

Changes the visible state to true

hide () => void Required

Changes the visible state to false

toggle () => void Required

Toggles the visible state

setVisible (value: SetStateAction<boolean>) => void Required

Sets visible.

setAnimated (value: SetStateAction<number | boolean>) => void Required

Sets animated.

stopAnimation () => void Required

Stops animation. It's called automatically if there's a CSS transition.

Theming#

Disclosure.styles.base

Disclosure.Content.styles.base

Hello world

On this page