The responsive layout is in early preview. Please report any bugs.

Disclosure

The Disclosure is used to create accessible, hierarchical, and collapsible structure to your pages.

Status: beta
Version: 5.0.2
Sources: Github
Storybook
Import from: @twilio-paste/core/disclosure — or — @twilio-paste/disclosure

Guidelines#

About Disclosure#

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.

Accessibility#

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.

Examples#

Default Disclosure#

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.

Between the World and Me by Ta-Nehisi Coates

Disclosure Heading

<Stack orientation="vertical" spacing="space70">
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading30">
      Between the World and Me by Ta-Nehisi Coates
    </DisclosureHeading>
    <DisclosureContent>
      But race is the child of racism, not the father. And the process of naming “the people” has never been a matter of genealogy and physiognomy so much as one of hierarchy. Difference in hue and hair is old. But the belief in the preeminence of hue and hair, the notion that these factors can correctly organize a society and that they signify deeper attributes, which are indelible—this is the new idea at the heart of these new people who have been brought up hopelessly, tragically, deceitfully, to believe that they are white.
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading10">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading20">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading30">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading40">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading50">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading60">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
</Stack>

<Stack orientation="vertical" spacing="space70">
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading30">
      Between the World and Me by Ta-Nehisi Coates
    </DisclosureHeading>
    <DisclosureContent>
      But race is the child of racism, not the father. And the process of naming “the people” has never been a matter of genealogy and physiognomy so much as one of hierarchy. Difference in hue and hair is old. But the belief in the preeminence of hue and hair, the notion that these factors can correctly organize a society and that they signify deeper attributes, which are indelible—this is the new idea at the heart of these new people who have been brought up hopelessly, tragically, deceitfully, to believe that they are white.
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading10">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading20">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading30">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading40">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading50">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure>
    <DisclosureHeading as="h2" variant="heading60">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
</Stack>

Contained Disclosure#

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.

Disclosure Heading

<Stack orientation="vertical" spacing="space70">
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading10">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading20">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading30">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading40">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading50">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading60">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
</Stack>

<Stack orientation="vertical" spacing="space70">
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading10">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading20">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading30">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading40">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading50">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
  <Disclosure variant="contained">
    <DisclosureHeading as="h2" variant="heading60">
      Disclosure Heading
    </DisclosureHeading>
    <DisclosureContent>
      Content
    </DisclosureContent>
  </Disclosure>
</Stack>

Controlling initial state#

You can control the initial state of the disclosure to be expanded or collapsed by setting the visible prop.

Disclosure Heading

Content

<Disclosure visible>
  <DisclosureHeading as="h2" variant="heading30">
    Disclosure Heading
  </DisclosureHeading>
  <DisclosureContent>
    Content
  </DisclosureContent>
</Disclosure>

<Disclosure visible>
  <DisclosureHeading as="h2" variant="heading30">
    Disclosure Heading
  </DisclosureHeading>
  <DisclosureContent>
    Content
  </DisclosureContent>
</Disclosure>

Using state hooks#

🚨 ATTENTION!! 🚨

If you decided to use state hooks, the Paste team is NOT responsible for debugging any issues in your application.

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.

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.

Show with delay

const useDelayedDisclosureState = ({delay, ...initialState}) => {
  const disclosure = useDisclosureState(initialState);
  const [transitioning, setTransitioning] = React.useState(false);
  return {
    ...disclosure,
    transitioning,
    toggle: () => {
      setTransitioning(true);
      setTimeout(() => {
        disclosure.toggle();
        setTransitioning(false);
      }, delay);
    },
  };
};

const StateHookDisclosure = () => {
  const {transitioning, ...disclosure} = useDelayedDisclosureState({
    delay: 500,
  });
  const clickableHeading = disclosure.visible ? 'Hide with delay' : 'Show with delay';
  return (
    <>
      <Disclosure variant="contained" state={disclosure}>
        <DisclosureHeading as="h2" variant="heading20">
          {transitioning ? 'Please wait...' : clickableHeading}
        </DisclosureHeading>
        <DisclosureContent>Disclosure content</DisclosureContent>
      </Disclosure>
    </>
  );
};

render(
  <StateHookDisclosure />
)

const useDelayedDisclosureState = ({delay, ...initialState}) => {
  const disclosure = useDisclosureState(initialState);
  const [transitioning, setTransitioning] = React.useState(false);
  return {
    ...disclosure,
    transitioning,
    toggle: () => {
      setTransitioning(true);
      setTimeout(() => {
        disclosure.toggle();
        setTransitioning(false);
      }, delay);
    },
  };
};
const StateHookDisclosure = () => {
  const {transitioning, ...disclosure} = useDelayedDisclosureState({
    delay: 500,
  });
  const clickableHeading = disclosure.visible ? 'Hide with delay' : 'Show with delay';
  return (
    <>
      <Disclosure variant="contained" state={disclosure}>
        <DisclosureHeading as="h2" variant="heading20">
          {transitioning ? 'Please wait...' : clickableHeading}
        </DisclosureHeading>
        <DisclosureContent>Disclosure content</DisclosureContent>
      </Disclosure>
    </>
  );
};
render(
  <StateHookDisclosure />
)

States#

Disabled#

Each Disclosure can be disabled by setting the disabled prop on the DisclosureHeading

Disclosure Heading

Content

<Disclosure visible>
  <DisclosureHeading as="h2" disabled variant="heading30">
    Disclosure Heading
  </DisclosureHeading>
  <DisclosureContent>
    Content
  </DisclosureContent>
</Disclosure>

<Disclosure visible>
  <DisclosureHeading as="h2" disabled variant="heading30">
    Disclosure Heading
  </DisclosureHeading>
  <DisclosureContent>
    Content
  </DisclosureContent>
</Disclosure>

Composition notes#

Both DisclosureHeading and DisclosureContent accept any child component, leaving flexibility to create a large number of custom compositions for your product needs.

The only thing you must not do is place a focusable element inside the DisclosureHeading, see accessibility notes.

Disclosure Heading (3 new items)

<Disclosure>
  <DisclosureHeading as="h2" variant="heading30">
    Disclosure Heading <Text color="colorTextWeak" fontSize="fontSize50" as="span">(3 new items)</Text>
  </DisclosureHeading>
  <DisclosureContent>
    Content
  </DisclosureContent>
</Disclosure>

<Disclosure>
  <DisclosureHeading as="h2" variant="heading30">
    Disclosure Heading <Text color="colorTextWeak" fontSize="fontSize50" as="span">(3 new items)</Text>
  </DisclosureHeading>
  <DisclosureContent>
    Content
  </DisclosureContent>
</Disclosure>

Disclosure Heading - deployment issue

Content

<Disclosure variant="contained" visible>
  <DisclosureHeading as="h2" variant="heading30">
    <MediaObject verticalAlign="center">
      <MediaBody>
        Disclosure Heading <Text color="colorTextWeak" fontSize="fontSize50" as="span">- deployment issue</Text>
      </MediaBody>
      <MediaFigure>
        <ErrorIcon color="colorTextError" decorative={false} title="Error" />
      </MediaFigure>
    </MediaObject>
  </DisclosureHeading>
  <DisclosureContent>
    Content
  </DisclosureContent>
</Disclosure>

<Disclosure variant="contained" visible>
  <DisclosureHeading as="h2" variant="heading30">
    <MediaObject verticalAlign="center">
      <MediaBody>
        Disclosure Heading <Text color="colorTextWeak" fontSize="fontSize50" as="span">- deployment issue</Text>
      </MediaBody>
      <MediaFigure>
        <ErrorIcon color="colorTextError" decorative={false} title="Error" />
      </MediaFigure>
    </MediaObject>
  </DisclosureHeading>
  <DisclosureContent>
    Content
  </DisclosureContent>
</Disclosure>

Anatomy#

Disclosure#

Contained#

Contained Disclosure variants share the Paste Card anatomy.

DisclosureHeading#

Same Anatomy as Heading, plus:

Property	Default token	Modifiable?
background-color	color-background-body	No
border-radius	border-radius-20	No
border-bottom-left-radius	Default: border-radius-20, Contained: border-radius-0	No
border-bottom-right-radius	Default: border-radius-20, Contained: border-radius-0	No
padding	space-30	No

Expanded#

Property	Default token	Modifiable?
background-color	color-background	No

Hover#

Property	Default token	Modifiable?
background-color	color-background-dark	No

Focus#

Property	Default token	Modifiable?
box-shadow	shadow-focus	No

DisclosureContent#

Property	Default token	Modifiable?
padding	space-50	No

Usage Guide#

API#

Installation#

yarn add @twilio-paste/disclosure - or - yarn add @twilio-paste/core

Usage#

import {Disclosure, DisclosureHeading, DisclosureContent} from '@twilio-paste/disclosure';
const PopoverExample: React.FC = () => {
  return (
    <Disclosure>
      <DisclosureHeading as="h2" variant="heading20">
        Disclosure Heading
      </DisclosureHeading>
      <DisclosureContent>Disclosure content</DisclosureContent>
    </Disclosure>
  );
};

Props#

Disclosure Props#

All the regular HTML attributes (role, aria-*, type, and so on) including the following custom props:

`baseId` prop

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

`visible` prop

Whether it's visible or not.

`variant` prop

Changes the styling on the component based on the variant selected.

DisclosureHeading Props#

All the regular HTML attributes (role, aria-*, type, and so on).

All Heading props.

Also including the following custom props:

`disabled` prop

Same as the HTML attribute.

`focusable` prop

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.

DisclosureContent Props#

All the regular HTML attributes (role, aria-*, type, and so on) including the following custom props:

Disclosure

Guidelines.css-1p5xx02{-webkit-text-decoration:none;text-decoration:none;margin-left:0.5rem;color:rgb(96,107,133);}.css-1p5xx02:hover{-webkit-text-decoration:underline;text-decoration:underline;}#

About Disclosure#

Accessibility#

Examples#

Default Disclosure#

Disclosure Heading

Disclosure Heading

Contained Disclosure#

Disclosure Heading

Disclosure Heading

Disclosure Heading

Disclosure Heading

Disclosure Heading

Controlling initial state#

Using state hooks#

🚨 ATTENTION!! 🚨

Show with delay

States#

Disabled#

.css-odvzrt{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:1.75rem;width:1.75rem;color:rgb(96,107,133);}Disclosure Heading

Composition notes#

Disclosure Heading .css-uedd02{margin:0;padding:0;color:rgb(96,107,133);font-size:1.125rem;line-height:1.25rem;}(3 new items)

Anatomy#

Disclosure#

Contained#

DisclosureHeading#

Expanded#

Hover#

Focus#

DisclosureContent#

Usage Guide#

API#

Installation#

Usage#

Props#

Disclosure Props#

baseId prop

visible prop

variant prop

DisclosureHeading Props#

disabled prop

focusable prop

DisclosureContent Props#

Changelog

5.0.2#

Patch Changes#

5.0.1#

Patch Changes#

5.0.0#

Patch Changes#

4.0.1#

Patch Changes#

4.0.0#

Patch Changes#

3.0.3#

Patch Changes#

3.0.2#

Patch Changes#

3.0.1#

Patch Changes#

3.0.0#

Patch Changes#

2.0.1#

Patch Changes#

2.0.0#

Patch Changes#

1.0.0#

Major Changes#

0.4.1link takes you to an external page (2021-01-25)

Bug Fixes#

Features#

0.3.6link takes you to an external page (2021-01-15)

0.3.5link takes you to an external page (2021-01-14)

0.3.4link takes you to an external page (2021-01-14)

0.3.3link takes you to an external page (2021-01-13)

0.3.2link takes you to an external page (2021-01-07)

0.3.1link takes you to an external page (2020-12-17)

Bug Fixes#

BREAKING CHANGES#

Guidelines#

Disclosure Heading

Disclosure Heading (3 new items)

`baseId` prop

`visible` prop

`variant` prop

`disabled` prop

`focusable` prop

0.4.1 (2021-01-25)

0.3.6 (2021-01-15)

0.3.5 (2021-01-14)

0.3.4 (2021-01-14)

0.3.3 (2021-01-13)

0.3.2 (2021-01-07)

0.3.1 (2020-12-17)

0.2.49 (2020-12-15)

0.2.48 (2020-12-11)

0.2.47 (2020-12-11)

0.2.46 (2020-12-09)

0.2.45 (2020-12-03)

0.2.44 (2020-12-02)

0.2.43 (2020-11-16)

0.2.42 (2020-11-11)

0.2.41 (2020-11-11)

0.2.40 (2020-11-10)

0.2.39 (2020-11-06)

0.2.38 (2020-11-05)

0.2.37 (2020-10-30)

0.2.36 (2020-10-29)

0.2.35 (2020-10-23)

0.2.34 (2020-10-21)

0.2.33 (2020-10-19)

0.2.32 (2020-10-15)

0.2.31 (2020-10-13)

0.2.30 (2020-10-09)

0.2.29 (2020-10-07)

0.2.28 (2020-10-07)

0.2.27 (2020-10-07)

0.2.26 (2020-10-07)

0.2.25 (2020-09-22)

0.2.24 (2020-09-21)

0.2.23 (2020-09-15)

0.2.22 (2020-09-15)

0.2.21 (2020-09-14)

0.2.20 (2020-09-10)

0.2.19 (2020-09-09)

0.2.18 (2020-09-09)

0.2.17 (2020-09-08)

0.2.16 (2020-09-08)

0.2.15 (2020-09-03)

0.2.14 (2020-08-31)

0.2.13 (2020-08-31)

0.2.12 (2020-08-31)

0.2.11 (2020-08-24)

0.2.10 (2020-08-19)

0.2.9 (2020-08-12)

0.2.8 (2020-08-12)

0.2.7 (2020-08-06)

0.2.6 (2020-08-05)

0.2.5 (2020-08-04)

0.2.4 (2020-08-04)

0.2.3 (2020-07-31)

0.2.2 (2020-07-30)

0.2.1 (2020-07-29)

0.1.10 (2020-07-28)

0.1.9 (2020-07-22)

0.1.8 (2020-07-20)

0.1.7 (2020-07-15)

0.1.6 (2020-07-14)

0.1.5 (2020-07-14)

0.1.4 (2020-07-13)

0.1.3 (2020-07-02)

0.1.2 (2020-07-02)

0.1.1 (2020-07-01)