Warp Design System

Appearance

Expandable - Elements ​

Expandable is a layout component used for creating content that can be expanded and collapsed.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Accessibility ​

Usage ​

Use variant to choose the visual treatment:

  • variant="default" - the standard unboxed expandable
  • variant="box" - the boxed expandable treatment
  • variant="box-bleed" - the boxed treatment that bleeds to the container edge on small screens
  • variant="default-with-divider" - the full-width row treatment with dividers

New usage should prefer variant. The box and bleed flags are deprecated and remain supported only for compatibility.

Examples ​

html
<w-expandable variant="default" title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>

Raised variant ​

html
<w-expandable variant="box" title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>

Raised edge-to-edge variant ​

html
<w-expandable variant="box-bleed" title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>

Expandable with divider ​

html
<w-expandable variant="default-with-divider" title="I'm expandable" animated>
  <p>with expanded content</p>
</w-expandable>

Custom title ​

This can be used if more control over styling is needed than the title prop allows

html
<w-expandable variant="box" animated>
  <div slot="title" class="flex flex-row items-center">
    <w-icon-bag-16></w-icon-bag-16>
    <p class="ml-8 mb-0">This is a title with an icon</p>
  </div>
  <p>with expanded content</p>
</w-expandable>

With expanded prop ​

html
<w-expandable variant="box" animated title="I'm expanded by default" expanded>
  <p>content should be visible</p>
</w-expandable>

Styling API ​

Expandable supports styling through component tokens (CSS custom properties with a --w-c- prefix) and parts.

Parts ​

Use ::part(part-name) from outside the component.

  • base - the root wrapper element
  • chevron - the chevron container
css
w-expandable::part(base) {
	box-shadow: inset 0 0 0 1px currentColor;
}

Component tokens ​

Set these on <w-expandable> to override visuals.

css
w-expandable {
	--w-c-expandable-bg: rebeccapurple;
	--w-c-expandable-border-color: cyan;
	--w-c-expandable-border-radius: 12px;
	--w-c-expandable-padding-x: 1rem;
	--w-c-expandable-padding-y: 1rem;
	--w-c-expandable-gap: 1.25rem;
}
Surface and border ​
  • --w-c-expandable-bg
  • --w-c-expandable-bg-hover
  • --w-c-expandable-bg-active
  • --w-c-expandable-border-color
  • --w-c-expandable-border-width
  • --w-c-expandable-border-radius
  • --w-c-expandable-color
  • --w-c-expandable-icon-color
Layout and spacing ​
  • --w-c-expandable-padding-x
  • --w-c-expandable-padding-y
  • --w-c-expandable-gap - distance between the title area and the content when both are present
Typography ​
  • --w-c-expandable-title-font-size
  • --w-c-expandable-title-line-height
  • --w-c-expandable-title-font-weight
Motion ​
  • --w-c-expandable-transition-duration
  • --w-c-expandable-transition-timing-function
  • --w-c-expandable-expansion-duration
  • --w-c-expandable-expansion-timing-function

<w-expandable> API ​

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties ​

NameTypeDefaultSummary
animatedbooleanfalseWill animate the expansion/collapse
bleedbooleanfalseWill make the expandable full-width on the sm breakpoint size. Deprecated: Use variant="box-bleed" instead.
boxbooleanfalseWill make the expandable a Box. Deprecated: Use variant="box" instead.
button-classstring | undefined-Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
content-classstring | undefined-Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
expandedbooleanfalseControls component's expanded state
heading-levelnumber | undefined-Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
no-chevronbooleanfalseControls chevron visibility
titlestring-Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
variantExpandableVariant"default"Visual style of the expandable.

Property Details ​

animated ​

Will animate the expansion/collapse

  • Type: boolean
  • Default: false

bleed ​

Deprecated: Use variant="box-bleed" instead.

Will make the expandable full-width on the sm breakpoint size.

  • Type: boolean
  • Default: false

box ​

Deprecated: Use variant="box" instead.

Will make the expandable a Box.

  • Type: boolean
  • Default: false

button-class ​

Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.

  • Type: string | undefined
  • Default: -

content-class ​

Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.

  • Type: string | undefined
  • Default: -

expanded ​

Controls component's expanded state

  • Type: boolean
  • Default: false

heading-level ​

Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.

  • Type: number | undefined
  • Default: -

no-chevron ​

Controls chevron visibility

  • Type: boolean
  • Default: false

title ​

Component title. Used to display the title value which is always present regardless of whether the component is open or closed.

  • Type: string
  • Default: -

variant ​

Visual style of the expandable. Accepted values are "default", "box", "box-bleed", and "default-with-divider". If omitted, deprecated box and bleed flags are still used for compatibility.

Types ​

ExpandableVariant ​

'default' | 'box' | 'box-bleed' | 'default-with-divider'

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system