Side Sheet component for Element React
Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.
- 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-side-sheet @element/themes
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 in
most instances.
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:
1. On Side Sheet open, set focus on the Side Sheet Dismiss button
2. On Side Sheet close, return focus to the last focused element
3. While open, prevent mouse clicks outside the side sheet
4. While open, prevent tabbing to outside the Side Sheet
5. 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.
The SideSheetWrapper component is necessary for the elevated orcoplanar variants.
Example pseudo-code:
``jsx`
The SideSheetWrapper component can be omitted entirely for modal andfloating variants.
Example pseudo-code:
`jsx`
The SideSheetContainer component is used as a substitute for a typical
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.`jsx
`Further Reading
Side Sheet behaves like a typical modal component at small-screen sizes, and
always when in the
variant.- https://material.io/components/sheets-side
- https://bitsofco.de/accessible-modal-dialog/
- http://web-accessibility.carnegiemuseums.org/code/dialogs/
- https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/
- https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element
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. |
| autoFocus | boolean | true | false | The close button should automatically receive focus when the Bottom Sheet opens. |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| headlineText | string\|React.ReactNode | null | false | The text to be displayed along side the dismiss button in SideSheet and used for ARIA 'labeled-by
. If using anything other than a string, please make sure to include text to maintain W3C compliance and test with a screen-reader for accuracy. || Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | ------------------------------------------ |
| children | React.ReactNode | null | false | Primary content. Accepts any valid markup. |
| 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. |
| Name | Type | Default | Required | Description |
| ------------------ | ------- | --------- | -------- | ---------------------------------------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| 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). |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | ------------------------------------------ |
| children | React.ReactNode | null | false | Primary content. Accepts any valid markup. |
| Name | Type | Default | Required | Description |
| --------- | ------ | --------- | -------- | ------------------------------------------------------------------------------ |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| variant | string | null | false | The behavior styles available to side sheet: one of elevated, or coplanar. |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | ------------------------------------------ |
| children | React.ReactNode | null | false | Primary content. Accepts any valid markup. |