@element-public/react-elevation

Elevation

Description

Elevation provides a shadow and optionally padding to show the relative distance in space between two surfaces.

See live demos on storybook

Storybook Elevation Demos

Install from Artifactory

• Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
  • Verify your token is correctly set up in your .npmrc as per the link above
• Verify you have the @element scope configured in your .npmrc
  • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
• Install the component and themes bundles
  • npm i @element/react-components @element/themes
    • alternatively install the component individually along with the themes bundle npm i @element/react-elevation @element/themes

Notes

Some important props for Elevation include outlined, which determines whether or not the elevated object has a border around or just a shadow beneath it, rounded, which gives the elevated object a border radius of 8px, transition, which shows an animation when the object's elevation is changed, and finally padding, which adds padding around the child content and accepts standard, dense, airy, or custom values.

The customPadding prop for Elevation can be set to any user determined value, but must be passed in as a valid CSS padding declaration. i.e. 38px. This value will overwrite one of the preset padding values, if both are set.

The elevation prop can be set to a value ranging from 0, which shows no visible difference between surfaces, to 24, which creates the darkest shadow between the chosen object and the background surface.

Usage

The Elevation component is used as a container around content or other controls. The elevation applied to other components, like Button and Card, is implemented separately, as shown in Storybook demos and code snippets.

Elevation Props

Name	Type	Default	Required	Description
customPadding	string	null	false	Adds a custom padding style to the child content. Must be a valid CSS padding declaration. i.e. 38px 30px
elevation	number	0	false	Sets the distance of the elevation. Value must be between 0-24. Accepted Values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24
noWrap	boolean	null	false	Avoids adding an extra element to the DOM and applies proper classes directly to the child element.
outlined	boolean	false	false	The elevation element will have a visible border.
padding	string	undefined	false	Adds a universal padding around the child content. dense is 8px, standard is 16px, and airy is 24px. If customPadding is used, this will be ignored. Accepted Values: standard, dense, airy
rounded	boolean	false	false	The elevation element will have a border radius of 8px.
tag	string|React.ElementType|React.Component	'div'	false	HTML tag to render the contents in.
transition	boolean	null	false	Adds animation when elevation is changed.

Elevation Render Props

Name	Type	Default	Required	Description
children	React.ReactNode	null	false	Content to be rendered inside the elevation.