@paprika/panel

Description

The Panel component provides a view that slides in from one side so the user can maintain context of their main task while they work on a sub task.

Installation

yarn add @paprika/panel

or with npm:

npm install @paprika/panel

Props

Panel

| Prop | Type | required | default | Description | | --------------------- | ------------------------------------------------------------------------------------------- | -------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | a11yText | string | false | null | | | children | node | true | - | The content for the Panel. | | container | custom | false | null | Portal container for the Panel (DOM element) | | getPushContentElement | func | false | null | Function that provides the container DOM element to be pushed. | | groupOffsetY | number | false | 0 | Y offset that is passed down from <Panel.Group> | | height | [string,number] | false | "33%" | The height of the open Panel (when slide in from bottom) | | size | [ Panel.types.sizes.MEDIUM, Panel.types.sizes.LARGE] | false | Panel.types.sizes.MEDIUM | Control the size of the Panel | | isInline | bool | false | false | Render the panel inline | | isOpen | bool | false | false | Control the visibility of the Panel. This prop makes the Panel appear. | | offset | shape | false | { top: 0, left: 0, right: 0 } | Control offset of the Panel. Only use 'top' when sliding in from the left or right. Only use 'left' or 'right' when sliding in from the bottom. | | onAfterClose | func | false | () => {} | Callback once the Panel has been closed event | | onAfterOpen | func | false | () => {} | Callback once the Panel has been opened event | | onClose | func | false | null | Callback triggered when the Panel needs to be close | | slideFrom | [ Panel.types.slideFroms.RIGHT, Panel.types.slideFroms.LEFT, Panel.types.slideFroms.BOTTOM] | false | Panel.types.slideFroms.RIGHT | Control where the Panel slides in from | | width | [string,number,custom,custom,custom] | false | "33%" | The width of the open Panel (when slide in from left or right) | | zIndex | number | false | zValue(7) | Control the z-index of the Panel | | hasAccent | bool | false | false | Differentiate between similar coloured UI elements |

Panel.Header

| Prop | Type | required | default | Description | | --------------------- | ---- | -------- | -------- | ----------- | | children | node | true | - | | | getPushContentElement | func | false | () => {} | | | hasAccent | bool | false | false | | | hasCloseButton | bool | false | true | | | isCloseButtonSemantic | bool | false | true | | | isHeaderSticky | bool | false | false | | | onClose | func | false | () => {} | |

Panel.Content

| Prop | Type | required | default | Description | | -------- | ---- | -------- | ------- | --------------------------- | | children | node | false | null | Body content of the Content |

Panel.Footer

| Prop | Type | required | default | Description | | -------- | ---- | -------- | ------- | ----------- | | children | node | true | - | | | isSticky | bool | false | false | |

Panel.Overlay

| Prop | Type | required | default | Description | | ----------------- | ------ | -------- | ------- | -------------------------------- | | backdropClassName | string | false | - | | | children | func | false | - | | | container | node | false | - | container of the Overlay element | | focusLockOptions | shape | false | - | | | hasBackdrop | bool | false | - | | | isOpen | bool | false | - | | | onClose | func | false | - | | | onAfterOpen | func | false | - | | | onAfterClose | func | false | - | | | zIndex | number | false | - | The z-index of the Panel Overlay |

Panel.Trigger

| Prop | Type | required | default | Description | | -------- | ---- | -------- | ------- | ----------- | | children | node | true | - | |

Components

You can use any of the following components to compose the Panel:

<Panel.Content />
<Panel.Header />
<Panel.Footer />
<Panel.Overlay />
<Panel.FocusLock />
<Panel.Trigger />

Basic examples

import Panel from "@paprika/panel";

const [isOpen, setIsOpen] = React.useState(true);

<Panel isOpen={isOpen} onClose={() => setIsOpen(false)} slideFrom={Panel.types.slideFrom.LEFT}>
  <Panel.Header>Header</Panel.Header>
  <Panel.Content>Your content here</Panel.Content>
  <Panel.Footer>
    <button>Accept</button>
    <button>Cancel</button>
  </Panel.Footer>
</Panel>;

FocusLock

There are issues when using FocusLock without the <Panel.Overlay />. Therefore the Panel will not use the focus lock when there is no overlay present. Focus locking will only be used when overlay is used to prevent this issue.

Warnings

If the content you are putting into this component will try and control focus (like CKEditor), read this: https://github.com/acl-services/paprika/issues/453

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG