@element-public/react-side-sheet NPM

SideSheet

Description

Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.

See live demos on storybook

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-side-sheet @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

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=

Variants

All variants of SideSheet behave and look like the modal variant at smaller screen sizes.

The elevated and coplanar variants requires a parent wrapper context for layout.

All SideSheet require a container context, which can typically be <body> in most instances.

Accessibility Concerns

To keep the user-experience for SideSheet as accessible as possible, it strives to do the following when SideSheet is at small-screen size and always during the modal variant:

On Side Sheet open, set focus on the Side Sheet Dismiss button
On Side Sheet close, return focus to the last focused element
While open, prevent mouse clicks outside the side sheet
While open, prevent tabbing to outside the Side Sheet
Allow the ESC Key to close the Side Sheet

It is important that upon closing the SideSheetReturnFocus event be listened for and return focus managed appropriately in the surrounding application context.

Props

SideSheet

The SideSheetWrapper component is necessary for the elevated or coplanar variants.

Example pseudo-code:

<body>
    <header></header>
    <SideSheetWrapper variant='elevated'>
        <main></main>
        <SideSheet variant='elevated'></SideSheet>
    </SideSheetWrapper>
    <footer></footer>
</body>

The SideSheetWrapper component can be omitted entirely for modal and floating variants.

Example pseudo-code:

<body>
    <header></header>
    <main></main>
    <SideSheet></SideSheet>
    <footer></footer>
</body>

SideSheetContainer

The SideSheetContainer component is used as a substitute for a typical <body> context. It is required when attachContainerClassesToBody is set to false on SideSheet.

The main responsibility of SideSheetContainer is to control scrolling when the background content is obscured by modal content. This happens at all small-screen sizes for all variants and for the modal variant at all screen sizes.

<body>
    <SideSheetContainer>
        <header></header>
        <SideSheetWrapper variant='coplanar'>
            <main></main>
            <SideSheet variant='coplanar'></SideSheet>
        </SideSheetWrapper>
        <footer></footer>
    </SideSheetContainer>
</body>

Side Sheet Props

Name	Type	Default	Required	Description
allowOutsideClick	boolean	true	false	Set to false to stop Side Sheet from closing when scrim is clicked when the variant is modal.
attachContainerClassesToBody	boolean	true	false	Add classes to body for when side-sheet-container is not present in DOM.
className	string	undefined	false	The css class name to be passed through to the component markup.
headlineText	string	null	false	The text to be displayed along side the dismiss button in SideSheet.
open	boolean	false	false	Make the SideSheet visible using the experience set in variant prop.
position	string	'right'	false	Location of the side-sheet anchor point.Accepted Values: left, right
returnFocusSelector	string	'.lmnt-side-sheet-trigger'	false	DOM selector to provide a target to return focus. Accepts any valid query (see mdn docs for Element.querySelector). If omitted focus will return to the last focused element upon closing.
variant	string	'modal'	false	The behavior styles available to side sheet: one of modal, floating, elevated, or coplanar.Accepted Values: modal, elevated, floating, coplanar

Side Sheet Render Props

Name	Type	Default	Required	Description
children	React.ReactNode	null	false	Primary content. Accepts any valid markup.

Side Sheet Events

Name	Default	Required	Params	Description
onClose	null	false		A provided function to fire when Side Sheet becomes hidden.
onOpen	null	false		A provided function to fire when Side Sheet becomes visible.

Side Sheet Container Props

Name	Type	Default	Required	Description
isSideSheetVisible	boolean	false	false	This prop is tied to the state of `SideSheet` and should be managed accordingly.
variant	string	null	false	The behavior styles available to side sheet: one of `modal` (with room to grow in the future).