@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