Expandable - Elements

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

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

AndroidElementsiOSReactVue

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Accessibility

Usage

Examples

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

Expandable box

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

Expandable box with custom title

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

<w-expandable animated box>
  <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

<w-expandable animated box 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

w-expandable::part(base) {
	box-shadow: inset 0 0 0 1px currentColor;
}

Component tokens

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

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

Name	Type	Default	Summary
animated	boolean	false	Will animate the expansion/collapse
bleed	boolean	false	Will make the expandable full-width on the sm breakpoint size
box	boolean	false	Will make the expandable a Box
button-class	string | undefined	-	Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
content-class	string | undefined	-	Deprecated: Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
expanded	boolean	false	Controls component's expanded state
heading-level	number | 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-chevron	boolean	false	Controls chevron visibility
title	string	-	Component title. Used to display the title value which is always present regardless of whether the component is open or closed.

Property Details

animated

Will animate the expansion/collapse

• Type: boolean
• Default: false

bleed

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

• Type: boolean
• Default: false

box

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: -

Questions?

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