Surface

Description

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

See live demos on storybook

Storybook Surface 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-surface @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.

Surface 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 surface. 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 surface 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 surface element will have a border radius of 8px. | | tag | string|React.ElementType|React.Component | 'div' | false | HTML tag to render the contents in. | | themeColor | string | undefined | false | The surface background color.Accepted Values: primary, secondary, primary-alt, secondary-alt, success, warning, danger | | transition | boolean | null | false | Adds animation when surface is changed. |

Surface Render Props

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