From bf044657c055bb4925570e5815a2f3a613383627 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 28 Apr 2022 10:29:37 -0400 Subject: [PATCH 1/3] wip drawer demos --- .../Drawer/examples/BasicDrawer.tsx | 57 +++++++ .../Drawer/examples/BasicInlineDrawer.tsx | 57 +++++++ .../src/components/Drawer/examples/Drawer.md | 144 +----------------- .../Drawer/examples/InlinePanelLeftDrawer.tsx | 57 +++++++ .../examples/InlinePanelRightDrawer.tsx | 57 +++++++ .../Drawer/examples/PanelBottomDrawer.tsx | 59 +++++++ .../Drawer/examples/PanelLeftDrawer.tsx | 57 +++++++ .../Drawer/examples/PanelRightDrawer.tsx | 57 +++++++ .../StackedContentBodyElementsDrawer.tsx | 0 9 files changed, 403 insertions(+), 142 deletions(-) create mode 100644 packages/react-core/src/components/Drawer/examples/BasicDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/BasicInlineDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/InlinePanelLeftDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/InlinePanelRightDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/PanelBottomDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/PanelLeftDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/PanelRightDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/StackedContentBodyElementsDrawer.tsx diff --git a/packages/react-core/src/components/Drawer/examples/BasicDrawer.tsx b/packages/react-core/src/components/Drawer/examples/BasicDrawer.tsx new file mode 100644 index 00000000000..bd0c2b428f7 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/BasicDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const BasicDrawer: 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/BasicInlineDrawer.tsx b/packages/react-core/src/components/Drawer/examples/BasicInlineDrawer.tsx new file mode 100644 index 00000000000..a39d5fab3cf --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/BasicInlineDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const BasicInlineDrawer: 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/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md index d2179ac5800..5dc51c5736d 100644 --- a/packages/react-core/src/components/Drawer/examples/Drawer.md +++ b/packages/react-core/src/components/Drawer/examples/Drawer.md @@ -21,152 +21,12 @@ 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="./BasicDrawer.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="./PanelRightDrawer.tsx" ``` ### Panel on left diff --git a/packages/react-core/src/components/Drawer/examples/InlinePanelLeftDrawer.tsx b/packages/react-core/src/components/Drawer/examples/InlinePanelLeftDrawer.tsx new file mode 100644 index 00000000000..a405180df40 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/InlinePanelLeftDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const InlinePanelLeftDrawer: 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/InlinePanelRightDrawer.tsx b/packages/react-core/src/components/Drawer/examples/InlinePanelRightDrawer.tsx new file mode 100644 index 00000000000..49582cad3b8 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/InlinePanelRightDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const InlinePanelRightDrawer: 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/PanelBottomDrawer.tsx b/packages/react-core/src/components/Drawer/examples/PanelBottomDrawer.tsx new file mode 100644 index 00000000000..ad7abe538d8 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/PanelBottomDrawer.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const PanelLeftDrawer: 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/PanelLeftDrawer.tsx b/packages/react-core/src/components/Drawer/examples/PanelLeftDrawer.tsx new file mode 100644 index 00000000000..7111e138232 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/PanelLeftDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const PanelLeftDrawer: 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/PanelRightDrawer.tsx b/packages/react-core/src/components/Drawer/examples/PanelRightDrawer.tsx new file mode 100644 index 00000000000..3a5597c9586 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/PanelRightDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const PanelRightDrawer: 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/StackedContentBodyElementsDrawer.tsx b/packages/react-core/src/components/Drawer/examples/StackedContentBodyElementsDrawer.tsx new file mode 100644 index 00000000000..e69de29bb2d From f43add0c630b11ae047c4eca843792831482b081 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 29 Apr 2022 15:46:53 -0400 Subject: [PATCH 2/3] convert drawer examples to TS --- .../AdditionalSectionAboveContentDrawer.tsx | 59 + .../Drawer/examples/BreakpointDrawer.tsx | 57 + .../src/components/Drawer/examples/Drawer.md | 1229 +---------------- .../Drawer/examples/LightGrayDrawer.tsx | 107 ++ .../examples/ModifiedContentPaddingDrawer.tsx | 59 + .../examples/ModifiedPanelPaddingDrawer.tsx | 57 + .../examples/ResizableOnBottomDrawer.tsx | 58 + .../examples/ResizableOnInlineDrawer.tsx | 56 + .../Drawer/examples/ResizableOnLeftDrawer.tsx | 57 + .../examples/ResizableOnRightDrawer.tsx | 62 + .../StackedContentBodyElementsDrawer.tsx | 60 + .../Drawer/examples/StaticDrawer.tsx | 57 + 12 files changed, 706 insertions(+), 1212 deletions(-) create mode 100644 packages/react-core/src/components/Drawer/examples/AdditionalSectionAboveContentDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/BreakpointDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/LightGrayDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/ModifiedContentPaddingDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/ModifiedPanelPaddingDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/ResizableOnBottomDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/ResizableOnInlineDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/ResizableOnLeftDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/ResizableOnRightDrawer.tsx create mode 100644 packages/react-core/src/components/Drawer/examples/StaticDrawer.tsx diff --git a/packages/react-core/src/components/Drawer/examples/AdditionalSectionAboveContentDrawer.tsx b/packages/react-core/src/components/Drawer/examples/AdditionalSectionAboveContentDrawer.tsx new file mode 100644 index 00000000000..28e8cbfb346 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/AdditionalSectionAboveContentDrawer.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 AdditionalSectionAboveContentDrawer: 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/BreakpointDrawer.tsx b/packages/react-core/src/components/Drawer/examples/BreakpointDrawer.tsx new file mode 100644 index 00000000000..0ab54ebd224 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/BreakpointDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const BreakpointDrawer: 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/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md index 5dc51c5736d..37d0a48c1f2 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 --- @@ -31,1277 +31,82 @@ section: components ### 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="./PanelLeftDrawer.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="./PanelBottomDrawer.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="./BasicInlineDrawer.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="./InlinePanelRightDrawer.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="./InlinePanelLeftDrawer.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="./StackedContentBodyElementsDrawer.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="ModifiedContentPaddingDrawer.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="ModifiedPanelPaddingDrawer.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="AdditionalSectionAboveContentDrawer.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="StaticDrawer.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="BreakpointDrawer.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="ResizableOnRightDrawer.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="ResizableOnLeftDrawer.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="ResizableOnBottomDrawer.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="ResizableOnInlineDrawer.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="LightGrayDrawer.tsx" ``` diff --git a/packages/react-core/src/components/Drawer/examples/LightGrayDrawer.tsx b/packages/react-core/src/components/Drawer/examples/LightGrayDrawer.tsx new file mode 100644 index 00000000000..3e737db6093 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/LightGrayDrawer.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 LightGrayDrawer: 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/ModifiedContentPaddingDrawer.tsx b/packages/react-core/src/components/Drawer/examples/ModifiedContentPaddingDrawer.tsx new file mode 100644 index 00000000000..8e72f845fb5 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/ModifiedContentPaddingDrawer.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const ModifiedContentPaddingDrawer: 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/ModifiedPanelPaddingDrawer.tsx b/packages/react-core/src/components/Drawer/examples/ModifiedPanelPaddingDrawer.tsx new file mode 100644 index 00000000000..a1fb2928e7e --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/ModifiedPanelPaddingDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const ModifiedPanelPaddingDrawer: 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/ResizableOnBottomDrawer.tsx b/packages/react-core/src/components/Drawer/examples/ResizableOnBottomDrawer.tsx new file mode 100644 index 00000000000..f72c8db3c1b --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/ResizableOnBottomDrawer.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button, + DrawerContent, + DrawerContentBody +} from '@patternfly/react-core'; + +export const ResizableOnBottomDrawer: 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/ResizableOnInlineDrawer.tsx b/packages/react-core/src/components/Drawer/examples/ResizableOnInlineDrawer.tsx new file mode 100644 index 00000000000..69829ce9ced --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/ResizableOnInlineDrawer.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button, + DrawerContent, + DrawerContentBody +} from '@patternfly/react-core'; + +export const ResizableOnInlineDrawer: 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/ResizableOnLeftDrawer.tsx b/packages/react-core/src/components/Drawer/examples/ResizableOnLeftDrawer.tsx new file mode 100644 index 00000000000..679e35511ce --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/ResizableOnLeftDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const ResizableOnRightDrawer: 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/ResizableOnRightDrawer.tsx b/packages/react-core/src/components/Drawer/examples/ResizableOnRightDrawer.tsx new file mode 100644 index 00000000000..3bfe1265322 --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/ResizableOnRightDrawer.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const ResizableOnRightDrawer: 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/StackedContentBodyElementsDrawer.tsx b/packages/react-core/src/components/Drawer/examples/StackedContentBodyElementsDrawer.tsx index e69de29bb2d..b139a48c967 100644 --- a/packages/react-core/src/components/Drawer/examples/StackedContentBodyElementsDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/StackedContentBodyElementsDrawer.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 StackedContentBodyElementsDrawer: 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/StaticDrawer.tsx b/packages/react-core/src/components/Drawer/examples/StaticDrawer.tsx new file mode 100644 index 00000000000..5b3fa6f11ad --- /dev/null +++ b/packages/react-core/src/components/Drawer/examples/StaticDrawer.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + Button +} from '@patternfly/react-core'; + +export const StaticDrawer: 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} + + + + ); +}; From c5e4dc513d040d20492792686387aaaed2024677 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 4 May 2022 14:23:39 -0400 Subject: [PATCH 3/3] PR feedback from Eric --- .../src/components/Drawer/examples/Drawer.md | 36 +++++++++---------- ...> DrawerAdditionalSectionAboveContent.tsx} | 2 +- .../{BasicDrawer.tsx => DrawerBasic.tsx} | 2 +- ...InlineDrawer.tsx => DrawerBasicInline.tsx} | 2 +- ...akpointDrawer.tsx => DrawerBreakpoint.tsx} | 2 +- ...ftDrawer.tsx => DrawerInlinePanelLeft.tsx} | 2 +- ...tDrawer.tsx => DrawerInlinePanelRight.tsx} | 2 +- ...ightGrayDrawer.tsx => DrawerLightGray.tsx} | 2 +- ...r.tsx => DrawerModifiedContentPadding.tsx} | 2 +- ...wer.tsx => DrawerModifiedPanelPadding.tsx} | 2 +- ...BottomDrawer.tsx => DrawerPanelBottom.tsx} | 2 +- ...anelLeftDrawer.tsx => DrawerPanelLeft.tsx} | 2 +- ...elRightDrawer.tsx => DrawerPanelRight.tsx} | 2 +- ...Drawer.tsx => DrawerResizableOnBottom.tsx} | 2 +- ...Drawer.tsx => DrawerResizableOnInline.tsx} | 2 +- ...ftDrawer.tsx => DrawerResizableOnLeft.tsx} | 2 +- ...tDrawer.tsx => DrawerResizableOnRight.tsx} | 2 +- ...x => DrawerStackedContentBodyElements.tsx} | 2 +- .../{StaticDrawer.tsx => DrawerStatic.tsx} | 2 +- 19 files changed, 36 insertions(+), 36 deletions(-) rename packages/react-core/src/components/Drawer/examples/{AdditionalSectionAboveContentDrawer.tsx => DrawerAdditionalSectionAboveContent.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{BasicDrawer.tsx => DrawerBasic.tsx} (97%) rename packages/react-core/src/components/Drawer/examples/{BasicInlineDrawer.tsx => DrawerBasicInline.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{BreakpointDrawer.tsx => DrawerBreakpoint.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{InlinePanelLeftDrawer.tsx => DrawerInlinePanelLeft.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{InlinePanelRightDrawer.tsx => DrawerInlinePanelRight.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{LightGrayDrawer.tsx => DrawerLightGray.tsx} (98%) rename packages/react-core/src/components/Drawer/examples/{ModifiedContentPaddingDrawer.tsx => DrawerModifiedContentPadding.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{ModifiedPanelPaddingDrawer.tsx => DrawerModifiedPanelPadding.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{PanelBottomDrawer.tsx => DrawerPanelBottom.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{PanelLeftDrawer.tsx => DrawerPanelLeft.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{PanelRightDrawer.tsx => DrawerPanelRight.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{ResizableOnBottomDrawer.tsx => DrawerResizableOnBottom.tsx} (97%) rename packages/react-core/src/components/Drawer/examples/{ResizableOnInlineDrawer.tsx => DrawerResizableOnInline.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{ResizableOnLeftDrawer.tsx => DrawerResizableOnLeft.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{ResizableOnRightDrawer.tsx => DrawerResizableOnRight.tsx} (97%) rename packages/react-core/src/components/Drawer/examples/{StackedContentBodyElementsDrawer.tsx => DrawerStackedContentBodyElements.tsx} (96%) rename packages/react-core/src/components/Drawer/examples/{StaticDrawer.tsx => DrawerStatic.tsx} (97%) diff --git a/packages/react-core/src/components/Drawer/examples/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md index 37d0a48c1f2..92be6a9680e 100644 --- a/packages/react-core/src/components/Drawer/examples/Drawer.md +++ b/packages/react-core/src/components/Drawer/examples/Drawer.md @@ -21,92 +21,92 @@ section: components ### Basic -```ts file="./BasicDrawer.tsx" +```ts file="./DrawerBasic.tsx" ``` ### Panel on right -```ts file="./PanelRightDrawer.tsx" +```ts file="./DrawerPanelRight.tsx" ``` ### Panel on left -```ts file="./PanelLeftDrawer.tsx" +```ts file="./DrawerPanelLeft.tsx" ``` ### Panel on bottom -```ts file="./PanelBottomDrawer.tsx" +```ts file="./DrawerPanelBottom.tsx" ``` ### Basic inline -```ts file="./BasicInlineDrawer.tsx" +```ts file="./DrawerBasicInline.tsx" ``` ### Inline panel on right -```ts file="./InlinePanelRightDrawer.tsx" +```ts file="./DrawerInlinePanelRight.tsx" ``` ### Inline panel on left -```ts file="./InlinePanelLeftDrawer.tsx" +```ts file="./DrawerInlinePanelLeft.tsx" ``` ### Stacked content body elements -```ts file="./StackedContentBodyElementsDrawer.tsx" +```ts file="./DrawerStackedContentBodyElements.tsx" ``` ### Modified content padding -```ts file="ModifiedContentPaddingDrawer.tsx" +```ts file="DrawerModifiedContentPadding.tsx" ``` ### Modified panel padding -```ts file="ModifiedPanelPaddingDrawer.tsx" +```ts file="DrawerModifiedPanelPadding.tsx" ``` ### Additional section above drawer content -```ts file="AdditionalSectionAboveContentDrawer.tsx" +```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. -```ts file="StaticDrawer.tsx" +```ts file="DrawerStatic.tsx" ``` ### Breakpoint -```ts file="BreakpointDrawer.tsx" +```ts file="DrawerBreakpoint.tsx" ``` ### Resizable on right -```ts file="ResizableOnRightDrawer.tsx" +```ts file="DrawerResizableOnRight.tsx" ``` ### Resizable on left -```ts file="ResizableOnLeftDrawer.tsx" +```ts file="DrawerResizableOnLeft.tsx" ``` ### Resizable on bottom -```ts file="ResizableOnBottomDrawer.tsx" +```ts file="DrawerResizableOnBottom.tsx" ``` ### Resizable on inline -```ts file="ResizableOnInlineDrawer.tsx" +```ts file="DrawerResizableOnInline.tsx" ``` ### Panel with light-200 background -```ts file="LightGrayDrawer.tsx" +```ts file="DrawerLightGray.tsx" ``` diff --git a/packages/react-core/src/components/Drawer/examples/AdditionalSectionAboveContentDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/AdditionalSectionAboveContentDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx index 28e8cbfb346..7ef58face19 100644 --- a/packages/react-core/src/components/Drawer/examples/AdditionalSectionAboveContentDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx @@ -11,7 +11,7 @@ import { Button } from '@patternfly/react-core'; -export const AdditionalSectionAboveContentDrawer: React.FunctionComponent = () => { +export const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/BasicDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx similarity index 97% rename from packages/react-core/src/components/Drawer/examples/BasicDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx index bd0c2b428f7..9201073717a 100644 --- a/packages/react-core/src/components/Drawer/examples/BasicDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const BasicDrawer: React.FunctionComponent = () => { +export const DrawerBasic: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/BasicInlineDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/BasicInlineDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx index a39d5fab3cf..d07d31ceab6 100644 --- a/packages/react-core/src/components/Drawer/examples/BasicInlineDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const BasicInlineDrawer: React.FunctionComponent = () => { +export const DrawerBasicInline: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/BreakpointDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/BreakpointDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx index 0ab54ebd224..1eefd9d6c80 100644 --- a/packages/react-core/src/components/Drawer/examples/BreakpointDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const BreakpointDrawer: React.FunctionComponent = () => { +export const DrawerBreakpoint: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/InlinePanelLeftDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/InlinePanelLeftDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx index a405180df40..c4ab29674ae 100644 --- a/packages/react-core/src/components/Drawer/examples/InlinePanelLeftDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelLeft.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const InlinePanelLeftDrawer: React.FunctionComponent = () => { +export const DrawerInlinePanelLeft: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/InlinePanelRightDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelRight.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/InlinePanelRightDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerInlinePanelRight.tsx index 49582cad3b8..0693ae7aeb5 100644 --- a/packages/react-core/src/components/Drawer/examples/InlinePanelRightDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelRight.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const InlinePanelRightDrawer: React.FunctionComponent = () => { +export const DrawerInlinePanelRight: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/LightGrayDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerLightGray.tsx similarity index 98% rename from packages/react-core/src/components/Drawer/examples/LightGrayDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerLightGray.tsx index 3e737db6093..4aedef7ff09 100644 --- a/packages/react-core/src/components/Drawer/examples/LightGrayDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerLightGray.tsx @@ -13,7 +13,7 @@ import { DrawerColorVariant } from '@patternfly/react-core'; -export const LightGrayDrawer: React.FunctionComponent = () => { +export const DrawerLightGray: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const [panelGray, setPanelGray] = React.useState(true); const [contentGray, setContentGray] = React.useState(false); diff --git a/packages/react-core/src/components/Drawer/examples/ModifiedContentPaddingDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/ModifiedContentPaddingDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx index 8e72f845fb5..94813db2e5d 100644 --- a/packages/react-core/src/components/Drawer/examples/ModifiedContentPaddingDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const ModifiedContentPaddingDrawer: React.FunctionComponent = () => { +export const DrawerModifiedContentPadding: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/ModifiedPanelPaddingDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/ModifiedPanelPaddingDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx index a1fb2928e7e..2292c11be4f 100644 --- a/packages/react-core/src/components/Drawer/examples/ModifiedPanelPaddingDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const ModifiedPanelPaddingDrawer: React.FunctionComponent = () => { +export const DrawerModifiedPanelPadding: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/PanelBottomDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/PanelBottomDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx index ad7abe538d8..33ab1663e59 100644 --- a/packages/react-core/src/components/Drawer/examples/PanelBottomDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const PanelLeftDrawer: React.FunctionComponent = () => { +export const DrawerPanelBottom: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/PanelLeftDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/PanelLeftDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx index 7111e138232..391b1ee953f 100644 --- a/packages/react-core/src/components/Drawer/examples/PanelLeftDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelLeft.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const PanelLeftDrawer: React.FunctionComponent = () => { +export const DrawerPanelLeft: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/PanelRightDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/PanelRightDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx index 3a5597c9586..abb563a9700 100644 --- a/packages/react-core/src/components/Drawer/examples/PanelRightDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelRight.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const PanelRightDrawer: React.FunctionComponent = () => { +export const DrawerPanelRight: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/ResizableOnBottomDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx similarity index 97% rename from packages/react-core/src/components/Drawer/examples/ResizableOnBottomDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx index f72c8db3c1b..0f480e3d570 100644 --- a/packages/react-core/src/components/Drawer/examples/ResizableOnBottomDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx @@ -10,7 +10,7 @@ import { DrawerContentBody } from '@patternfly/react-core'; -export const ResizableOnBottomDrawer: React.FunctionComponent = () => { +export const DrawerResizableOnBottom: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/ResizableOnInlineDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/ResizableOnInlineDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx index 69829ce9ced..883d92af49e 100644 --- a/packages/react-core/src/components/Drawer/examples/ResizableOnInlineDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx @@ -10,7 +10,7 @@ import { DrawerContentBody } from '@patternfly/react-core'; -export const ResizableOnInlineDrawer: React.FunctionComponent = () => { +export const DrawerResizableOnInline: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/ResizableOnLeftDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/ResizableOnLeftDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx index 679e35511ce..6e11e2525a8 100644 --- a/packages/react-core/src/components/Drawer/examples/ResizableOnLeftDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnLeft.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const ResizableOnRightDrawer: React.FunctionComponent = () => { +export const DrawerResizableOnLeft: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/ResizableOnRightDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx similarity index 97% rename from packages/react-core/src/components/Drawer/examples/ResizableOnRightDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx index 3bfe1265322..0e813260f40 100644 --- a/packages/react-core/src/components/Drawer/examples/ResizableOnRightDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnRight.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const ResizableOnRightDrawer: React.FunctionComponent = () => { +export const DrawerResizableOnRight: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/StackedContentBodyElementsDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx similarity index 96% rename from packages/react-core/src/components/Drawer/examples/StackedContentBodyElementsDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx index b139a48c967..4589c070e00 100644 --- a/packages/react-core/src/components/Drawer/examples/StackedContentBodyElementsDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx @@ -11,7 +11,7 @@ import { Button } from '@patternfly/react-core'; -export const StackedContentBodyElementsDrawer: React.FunctionComponent = () => { +export const DrawerStackedContentBodyElements: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef(); diff --git a/packages/react-core/src/components/Drawer/examples/StaticDrawer.tsx b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx similarity index 97% rename from packages/react-core/src/components/Drawer/examples/StaticDrawer.tsx rename to packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx index 5b3fa6f11ad..f13eca8e5b2 100644 --- a/packages/react-core/src/components/Drawer/examples/StaticDrawer.tsx +++ b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx @@ -10,7 +10,7 @@ import { Button } from '@patternfly/react-core'; -export const StaticDrawer: React.FunctionComponent = () => { +export const DrawerStatic: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = React.useState(false); const drawerRef = React.useRef();