Expansion panels are containers that can be connected to a larger surface, such as a content block or card, or can live within a list. They contain information and actions that are not essential to exist at the highest level of the user interface of an application. ExpansionPanels require ExpansionTrigger and ExpansionContent sub-component to be used. The ExpansionIcon indicator may optionally be used.
See below if you have never installed a package from Bayer's npm-enterprise or
run into the following error:
npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR! npm login
Setup an access token
See the
devtools npm-e guide
to learn how to create an access token if this is the first time you are using a
npm-e package at Bayer or you do not have a line that starts with the following
in your ~/.npmrc file:
//npm.platforms.engineering/:_authToken=
Notes
Expansion Panel has been implemented in an unopinionated way that allows you to
have greater flexibility in it's use. Nearly any tag or component can be used as
an expansion panel.
The Expansion Panel is composed of 4 components:
ExpansionPanel
The root component within which all related components will be placed
ExpansionTrigger
This will define the clickable area
ExpansionContent
The content to be displayed or hidden.
ExpansionIcon
An optional customizable icon which will indicate the open or closed
state for the given ExpansionContent
To enable each pair of ExpansionTrigger and ExpansionContent components to work
together you will need to provide an expansionId. This can be any valid string
or number.
Expansion Panel Props
Name
Type
Default
Required
Description
accordion
boolean
false
false
Only one panel will be open at a time
Expansion Panel Render Props
Name
Type
Default
Required
Description
children
React.ReactNode
null
false
Content to be rendered. Expected to be ExpansionTrigger or ExpansionContent, though any other valid components or markup may be used.
Expansion Panel Events
Name
Default
Required
Params
Description
onContract
undefined
false
Fired when a trigger is clicked and the content is contracted. Note, in the case of an accordion, this will only fire for the panel that was clicked. Returns expansionId
onExpand
undefined
false
Fired when a trigger is clicked and the content is expanded. Note, in the case of an accordion, this will only fire for the panel that was clicked. Returns expansionId
Expansion Content Props
Name
Type
Default
Required
Description
className
string
undefined
false
The css class name to be passed through to the component markup.
defaultOpen
boolean
false
false
The content will display in the open (visible) state by default. If the ExpansionPanel is set to accordion, only the first item will be visible if more than one ExpansionContent is marked as open by default.
expansionId
string|number
null
true
The unique id of the expansion panel, this must match the expansionId of the ExpansionTrigger and ExpansionIcon.
maxHeight
string
undefined
false
Optionally override the automatically calculated content height. Must be specified in px.
open
boolean
undefined
false
For explicit control of the open state.
style
object
null
false
Passthrough style object.
tag
string|React.ElementType|React.Component
'div'
false
The root content HtmlElement. Expects a block element that can receive a height (spans will not work). If set to null, no HtmlElement will be inserted and the class and style properties will be added to the first child (this is for backwards compatibility.)
Expansion Content Render Props
Name
Type
Default
Required
Description
children
React.ReactNode
null
true
Content to be rendered inside the banner. Accepts any valid markup.
Expansion Content Breaking Changes
Description
ExpansionContent: ExpansionContent now renders a div around the content. The may be overridden with the tag prop.
Expansion Icon Props
Name
Type
Default
Required
Description
className
string
undefined
false
The css class name to be passed through to the component markup.
expanded
boolean
undefined
false
For explicit control of the icon's toggle state.
expansionId
string|number
null
true
The unique id of the expansion panel, this must match the expansionId of the ExpansionTrigger and ExpansionIcon.
lessIcon
string|React.ReactNode
'expand_less'
false
Accepts the name of any valid material icon (see Icon component documentation for a list of valid icons). It will be toggled with moreIcon.
moreIcon
string|React.ReactNode
'expand_more'
false
Accepts the name of any valid material icon (see Icon component documentation for a list of valid icons). It will be toggled with lessIcon.
Expansion Trigger Props
Name
Type
Default
Required
Description
className
string
undefined
false
The css class name to be passed through to the component markup.
disabled
boolean
null
false
Prevent the trigger from being activated.
expansionId
string|number
null
true
The unique id of the expansion panel, this must match the expansionId of the ExpansionTrigger and ExpansionIcon.
tag
string|React.ElementType|React.Component
'div'
false
The trigger container element. If set to null, no HtmlElement will be inserted and the css class will be added to the first child (this is for backwards compatibility.)
Expansion Trigger Render Props
Name
Type
Default
Required
Description
children
React.ReactNode
null
false
Most typically a Button, IconButton or similar clickable component.
Expansion Trigger Events
Name
Default
Required
Params
Description
onClick
null
false
Will be fired when the trigger is clicked. Returns the expansionId and open state.
onContract
null
false
Will be fired when the content panel is contracted. Returns expansionId and open state.
onExpand
null
false
Will be fired when the content panel is expanded. Returns expansionId and open state.