diff --git a/packages/react-core/src/components/Drawer/examples/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md index d2179ac5800..92be6a9680e 100644 --- a/packages/react-core/src/components/Drawer/examples/Drawer.md +++ b/packages/react-core/src/components/Drawer/examples/Drawer.md @@ -12,7 +12,7 @@ propComponents: DrawerHead, DrawerActions, DrawerCloseButton, - DrawerColorVariant + DrawerColorVariant, ] section: components --- @@ -21,1427 +21,92 @@ section: components ### Basic -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class SimpleDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="./DrawerBasic.tsx" ``` ### Panel on right -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class SimpleDrawerPanelRight extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="./DrawerPanelRight.tsx" ``` ### Panel on left -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class SimpleDrawerPanelLeft extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="./DrawerPanelLeft.tsx" ``` ### Panel on bottom -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class SimpleDrawerPanelBottom extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - -
- - - {drawerContent} - - -
- - ); - } -} +```ts file="./DrawerPanelBottom.tsx" ``` ### Basic inline -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class SimpleDrawerInlineContent extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="./DrawerBasicInline.tsx" ``` ### Inline panel on right -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class DrawerInlineContentPanelRight extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="./DrawerInlinePanelRight.tsx" ``` ### Inline panel on left -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class DrawerInlineContentPanelLeft extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="./DrawerInlinePanelLeft.tsx" ``` ### Stacked content body elements -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerPanelBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class DrawerStackedContentBodyElements extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - -

- drawer title{' '} -

- - - - drawer-panel - - drawer-panel with no padding - drawer-panel - - ); - - return ( - - - - - content-body - content-body with padding - content-body - - - - ); - } -} +```ts file="./DrawerStackedContentBodyElements.tsx" ``` ### Modified content padding -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class DrawerModifiedContentPadding extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - - Drawer content padding. {drawerContent} - - - - - ); - } -} +```ts file="DrawerModifiedContentPadding.tsx" ``` ### Modified panel padding -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class DrawerModifiedPanelPadding extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="DrawerModifiedPanelPadding.tsx" ``` ### Additional section above drawer content -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - DrawerSection, - Button -} from '@patternfly/react-core'; - -class DrawerWithSection extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - drawer-section - - {drawerContent} - - - - ); - } -} +```ts file="DrawerAdditionalSectionAboveContent.tsx" ``` ### Static drawer **Note:** For mobile viewports, all drawer variants behave the same way. At the `md` breakpoint, or where `.pf-m-static{-on-[lg, xl, 2xl]}` is applied, the `static drawer` variant’s `close button` is automatically hidden because the drawer panel doesn’t close by design. -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class StaticDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - drawer-panel - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="DrawerStatic.tsx" ``` ### Breakpoint -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class SimpleDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="DrawerBreakpoint.tsx" ``` ### Resizable on right -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class ResizableDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false, - isResizing: false, - panelWidth: 200 - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onResize = (newWidth, id) => { - this.setState( - { - panelWidth: newWidth - }, - () => console.log(`${id} has new width of: ${newWidth}`) - ); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="DrawerResizableOnRight.tsx" ``` ### Resizable on left -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class ResizableDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false, - isResizing: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="DrawerResizableOnLeft.tsx" ``` ### Resizable on bottom -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class ResizableDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false, - isResizing: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - -
- - - {drawerContent} - - -
- - ); - } -} +```ts file="DrawerResizableOnBottom.tsx" ``` ### Resizable on inline -```js -import React from 'react'; -import { - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - Button -} from '@patternfly/react-core'; - -class ResizableDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false, - isResizing: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - } - - render() { - const { isExpanded } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - - return ( - - - - - {drawerContent} - - - - ); - } -} +```ts file="DrawerResizableOnInline.tsx" ``` ### Panel with light-200 background -```js -import React from 'react'; -import { - Checkbox, - Drawer, - DrawerPanelContent, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerActions, - DrawerCloseButton, - DrawerSection, - Button, - DrawerColorVariant -} from '@patternfly/react-core'; - -class LightGrayDrawer extends React.Component { - constructor(props) { - super(props); - this.state = { - isExpanded: false, - sectionGray: false, - panelGray: true, - contentGray: false - }; - this.drawerRef = React.createRef(); - - this.onExpand = () => { - this.drawerRef.current && this.drawerRef.current.focus(); - }; - - this.onClick = () => { - const isExpanded = !this.state.isExpanded; - this.setState({ - isExpanded - }); - }; - - this.onCloseClick = () => { - this.setState({ - isExpanded: false - }); - }; - - this.togglePanelGray = (checked) => { - this.setState({ - panelGray: checked - }) - }; - - this.toggleSectionGray = (checked) => { - this.setState({ - sectionGray: checked - }) - }; - - this.toggleContentGray = (checked) => { - this.setState({ - contentGray: checked - }) - }; - } - - render() { - const { isExpanded, panelGray, sectionGray, contentGray } = this.state; - const panelContent = ( - - - - drawer-panel - - - - - - - ); - - const drawerContent = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; - return ( - - - - -
- - - - drawer-section - - - {drawerContent} - - - - ); - } -} +```ts file="DrawerLightGray.tsx" ``` diff --git a/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx b/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx new file mode 100644 index 00000000000..7ef58face19 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + DrawerSection, + Button +} from '@patternfly/react-core'; + +export const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + drawer-section + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx new file mode 100644 index 00000000000..9201073717a --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerBasic: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx new file mode 100644 index 00000000000..d07d31ceab6 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerBasicInline: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx new file mode 100644 index 00000000000..1eefd9d6c80 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerBreakpoint: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx new file mode 100644 index 00000000000..c4ab29674ae --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerInlinePanelLeft: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelRight.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelRight.tsx new file mode 100644 index 00000000000..0693ae7aeb5 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelRight.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerInlinePanelRight: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerLightGray.tsx b/packages/react-core/src/components/Drawer/examples/DrawerLightGray.tsx new file mode 100644 index 00000000000..4aedef7ff09 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerLightGray.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import { + Checkbox, + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + DrawerSection, + Button, + DrawerColorVariant +} from '@patternfly/react-core'; + +export const DrawerLightGray: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const [panelGray, setPanelGray] = React.useState(true); + const [contentGray, setContentGray] = React.useState(false); + const [sectionGray, setSectionGray] = React.useState(false); + + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const togglePanelGray = (checked: boolean) => { + setPanelGray(checked); + }; + + const toggleSectionGray = (checked: boolean) => { + setSectionGray(checked); + }; + + const toggleContentGray = (checked: boolean) => { + setContentGray(checked); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + +
+ + + + drawer-section + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx new file mode 100644 index 00000000000..94813db2e5d --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerModifiedContentPadding: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + + Drawer content padding. {drawerContent} + + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx new file mode 100644 index 00000000000..2292c11be4f --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerModifiedPanelPadding: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx new file mode 100644 index 00000000000..33ab1663e59 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerPanelBottom: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + +
+ + + {drawerContent} + + +
+ + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx new file mode 100644 index 00000000000..391b1ee953f --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerPanelLeft: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx new file mode 100644 index 00000000000..abb563a9700 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerPanelRight: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx new file mode 100644 index 00000000000..0f480e3d570 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button, + DrawerContent, + DrawerContentBody +} from '@patternfly/react-core'; + +export const DrawerResizableOnBottom: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + +
+ + + {drawerContent} + + +
+ + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx new file mode 100644 index 00000000000..883d92af49e --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button, + DrawerContent, + DrawerContentBody +} from '@patternfly/react-core'; + +export const DrawerResizableOnInline: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx new file mode 100644 index 00000000000..6e11e2525a8 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerResizableOnLeft: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx new file mode 100644 index 00000000000..0e813260f40 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerResizableOnRight: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const onResize = (newWidth: number, id: string) => { + // eslint-disable-next-line no-console + console.log(`${id} has new width of: ${newWidth}`); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx b/packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx new file mode 100644 index 00000000000..4589c070e00 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + DrawerPanelBody, + Button +} from '@patternfly/react-core'; + +export const DrawerStackedContentBodyElements: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + +

+ drawer title{' '} +

+ + + + drawer-panel + + drawer-panel with no padding + drawer-panel + + ); + + return ( + + + + + content-body + content-body with padding + content-body + + + + ); +}; diff --git a/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx new file mode 100644 index 00000000000..f13eca8e5b2 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const DrawerStatic: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const drawerRef = React.useRef(); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onClick = () => { + setIsExpanded(!isExpanded); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + + drawer-panel + + + + + + + ); + + const drawerContent = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; + + return ( + + + + + {drawerContent} + + + + ); +};