From 8c911f1d3d363d880d6037109c81f65dbdee9144 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Thu, 21 Mar 2024 20:14:04 +0530 Subject: [PATCH 01/10] add description list basic demo --- .gitignore | 1 + .../demos/DescriptionList/DescriptionList.md | 24 ++++++++ .../examples/DescriptionListBasic.tsx | 56 +++++++++++++++++++ 3 files changed, 81 insertions(+) create mode 100644 packages/react-core/src/demos/DescriptionList/DescriptionList.md create mode 100644 packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx diff --git a/.gitignore b/.gitignore index ac4282c4b23..3949234056b 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ lerna-debug.log .vscode # For vim *.swp +.yarn \ No newline at end of file diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md new file mode 100644 index 00000000000..613702023a5 --- /dev/null +++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md @@ -0,0 +1,24 @@ +--- +id: Description list +section: components +--- + +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; +import pfIcon from '../assets/pf-logo-small.svg'; +import pfLogo from '../assets/pf-logo.svg'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import { Link } from '@reach/router'; + +## Demos + +### Basic + +```js file='./examples/DescriptionListBasic.tsx' isFullscreen +``` \ No newline at end of file diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx new file mode 100644 index 00000000000..75e4e80f469 --- /dev/null +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { + Button, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription, + PageSection, + PageSectionVariants, + Card, + CardBody +} from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; + +export const DescriptionListBasic: React.FunctionComponent = () => ( + + + + Details + + + + + + Name + Example + + + Namespace + + mary-test + + + + Labels + example + + + Pod selector + + + + + + Annotation + 2 Annotations + + + + + + +); From 36c6945fdf9e0e29e1c4ef975ec6f0eb163d4633 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Wed, 27 Mar 2024 16:38:20 +0530 Subject: [PATCH 02/10] fix DashboardWrapper not found issue --- .../react-core/src/demos/DescriptionList/DescriptionList.md | 1 + .../src/demos/DescriptionList/examples/DescriptionListBasic.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md index 613702023a5..9af10f483a9 100644 --- a/packages/react-core/src/demos/DescriptionList/DescriptionList.md +++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md @@ -15,6 +15,7 @@ import pfIcon from '../assets/pf-logo-small.svg'; import pfLogo from '../assets/pf-logo.svg'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import { Link } from '@reach/router'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; ## Demos diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx index 75e4e80f469..f66140f47c1 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx @@ -11,7 +11,7 @@ import { CardBody } from '@patternfly/react-core'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; -import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; export const DescriptionListBasic: React.FunctionComponent = () => ( From 428d2802a4f3056d4d3d36e3e4a2a79dac7c3422 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Mon, 1 Apr 2024 23:01:27 +0530 Subject: [PATCH 03/10] add descriptionlist in drawer demo --- .../demos/DescriptionList/DescriptionList.md | 4 +- .../examples/DescriptionListBasic.tsx | 56 ------ .../examples/DescriptionListDrawer.tsx | 159 ++++++++++++++++++ 3 files changed, 161 insertions(+), 58 deletions(-) delete mode 100644 packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx create mode 100644 packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md index 9af10f483a9..0a0ade7f3b8 100644 --- a/packages/react-core/src/demos/DescriptionList/DescriptionList.md +++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md @@ -19,7 +19,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ## Demos -### Basic +### In drawer -```js file='./examples/DescriptionListBasic.tsx' isFullscreen +```js file='./examples/DescriptionListDrawer.tsx' isFullscreen ``` \ No newline at end of file diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx deleted file mode 100644 index f66140f47c1..00000000000 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { - Button, - DescriptionList, - DescriptionListTerm, - DescriptionListGroup, - DescriptionListDescription, - PageSection, - PageSectionVariants, - Card, - CardBody -} from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; - -export const DescriptionListBasic: React.FunctionComponent = () => ( - - - - Details - - - - - - Name - Example - - - Namespace - - mary-test - - - - Labels - example - - - Pod selector - - - - - - Annotation - 2 Annotations - - - - - - -); diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx new file mode 100644 index 00000000000..867bf23fa9b --- /dev/null +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx @@ -0,0 +1,159 @@ +import React from 'react'; +import { + Gallery, + PageSection, + GalleryItem, + Card, + CardBody, + Drawer, + DrawerPanelContent, + DrawerContent, + DrawerContentBody, + DrawerHead, + DrawerActions, + DrawerCloseButton, + PageSectionVariants, + TextContent, + Text, + DrawerPanelBody, + DescriptionList, + DescriptionListTerm, + DescriptionListGroup, + DescriptionListDescription, + Button, + Tabs, + Tab +} from '@patternfly/react-core'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +export const DescriptionListDrawer: React.FunctionComponent = () => { + const drawerRef = React.useRef(); + const [isExpanded, setIsExpanded] = React.useState(true); + + const onExpand = () => { + drawerRef.current && drawerRef.current.focus(); + }; + + const onCloseClick = () => { + setIsExpanded(false); + }; + + const panelContent = ( + + + ajay-test + + + + + + + + + + Name + ajay-test + + + Namespace + + mary-test + + + + Labels + app=ajay-test + + + Pod selector + Nod selector is not available at this time + + + Tolerations + No tolerations + + + Annotations + No annotaions + + + Status + Active + + + Created at: + 3 minutes agot + + + Pod selector + + + + + + Session affinity + None + + + Latest version + 1.0 + + + Update strategy + Rolling + + + Timeout + 600 seconds + + + Max available + 25% of 1 pod + + + Max surge + 25% greater than 1 pod + + + + + content + + + + + ); + + const drawerContent = ( + + {Array.from({ length: 30 }).map((_value, index) => ( + + + This is a card + + + ))} + + ); + + return ( + + + + Main title + This is a full page demo. + + + + + + {drawerContent} + + + + + ); +}; From ecdda3e145990b4419a4cf845693f3abb4aad64c Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Mon, 1 Apr 2024 23:43:14 +0530 Subject: [PATCH 04/10] open drawer on card click --- .../DescriptionList/examples/DescriptionListDrawer.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx index 867bf23fa9b..42602abf56b 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx @@ -39,6 +39,10 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { setIsExpanded(false); }; + const onClickCard = () => { + setIsExpanded(true); + }; + const panelContent = ( @@ -131,8 +135,8 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { {Array.from({ length: 30 }).map((_value, index) => ( - - This is a card + + Click here to open drawer ))} From 0e8133502cb6cc014b1353d6575accbeb7b55d59 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Mon, 22 Apr 2024 16:53:17 +0530 Subject: [PATCH 05/10] fix drawer height issue --- .../examples/DescriptionListDrawer.tsx | 197 +++++++++--------- 1 file changed, 100 insertions(+), 97 deletions(-) diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx index 42602abf56b..ce4f7224471 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx @@ -8,7 +8,6 @@ import { Drawer, DrawerPanelContent, DrawerContent, - DrawerContentBody, DrawerHead, DrawerActions, DrawerCloseButton, @@ -21,8 +20,8 @@ import { DescriptionListGroup, DescriptionListDescription, Button, - Tabs, - Tab + Page, + Title } from '@patternfly/react-core'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; @@ -39,125 +38,129 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { setIsExpanded(false); }; - const onClickCard = () => { + const onOpenDrawer = () => { setIsExpanded(true); }; const panelContent = ( - ajay-test + test - - - - - Name - ajay-test - - - Namespace - - mary-test - - - - Labels - app=ajay-test - - - Pod selector - Nod selector is not available at this time - - - Tolerations - No tolerations - - - Annotations - No annotaions - - - Status - Active - - - Created at: - 3 minutes agot - - - Pod selector - - - - - - Session affinity - None - - - Latest version - 1.0 - - - Update strategy - Rolling - - - Timeout - 600 seconds - - - Max available - 25% of 1 pod - - - Max surge - 25% greater than 1 pod - - - - - content - - + + + Name + test + + + Namespace + + mary-test + + + + Labels + app=test + + + Pod selector + Nod selector is not available at this time + + + Tolerations + No tolerations + + + Annotations + No annotaions + + + Status + Active + + + Created at: + 3 minutes agot + + + Pod selector + + + + + + Session affinity + None + + + Latest version + 1.0 + + + Update strategy + Rolling + + + Timeout + 600 seconds + + + Max available + 25% of 1 pod + + + Max surge + 25% greater than 1 pod + + ); const drawerContent = ( + + + + + + + {Array.from({ length: 30 }).map((_value, index) => ( - - - Click here to open drawer + + + {`Card-${index + 1}`} ))} ); + const buildDrawer = ( + + + + ); + return ( - - - - Main title - This is a full page demo. - - - - - - {drawerContent} - - - + + + + + Main title + This is a full page demo. + + + {drawerContent} + ); }; From efa6dbbe7e384a350eda358ab5581c435fcc301c Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Wed, 24 Apr 2024 02:38:44 +0530 Subject: [PATCH 06/10] remove unused imports and set focus back on button after closing drawer --- .../src/demos/DescriptionList/DescriptionList.md | 11 ----------- .../examples/DescriptionListDrawer.tsx | 3 ++- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md index 0a0ade7f3b8..b0ad5b511a7 100644 --- a/packages/react-core/src/demos/DescriptionList/DescriptionList.md +++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md @@ -3,18 +3,7 @@ id: Description list section: components --- -import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; -import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; -import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; -import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; -import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; -import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; -import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; -import pfIcon from '../assets/pf-logo-small.svg'; -import pfLogo from '../assets/pf-logo.svg'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; -import { Link } from '@reach/router'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; ## Demos diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx index ce4f7224471..2f10a90f334 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx @@ -36,6 +36,7 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { const onCloseClick = () => { setIsExpanded(false); + drawerRef.current && drawerRef.current.focus(); }; const onOpenDrawer = () => { @@ -128,7 +129,7 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { - From dab63d4c3b9f255d6c7a3af355b2d0310c399100 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Wed, 24 Apr 2024 19:30:10 +0530 Subject: [PATCH 07/10] fix typo --- .../demos/DescriptionList/examples/DescriptionListDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx index 2f10a90f334..6866d629cc8 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx @@ -69,7 +69,7 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { Pod selector - Nod selector is not available at this time + Node selector is not available at this time Tolerations From 438245b6ee7bf25d17ba18f8dbc40ca8f585b26d Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Thu, 25 Apr 2024 16:31:57 +0530 Subject: [PATCH 08/10] add isInline prop in button --- .../demos/DescriptionList/examples/DescriptionListDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx index 6866d629cc8..ffdc076ba59 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx @@ -129,7 +129,7 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { - From d150b5a5141b25b969d80a220411900fccfe9d53 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Fri, 26 Apr 2024 00:12:49 +0530 Subject: [PATCH 09/10] set focus on drawer title --- .../DescriptionList/examples/DescriptionListDrawer.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx index ffdc076ba59..237db3c1aa4 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx @@ -27,7 +27,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; export const DescriptionListDrawer: React.FunctionComponent = () => { - const drawerRef = React.useRef(); + const drawerRef = React.useRef(null); const [isExpanded, setIsExpanded] = React.useState(true); const onExpand = () => { @@ -46,7 +46,9 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { const panelContent = ( - test + + test + @@ -129,7 +131,7 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { - From cd2d87f0a80666cb2dd715fba38d4585e0fbde38 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Mon, 6 May 2024 22:55:18 +0530 Subject: [PATCH 10/10] fix drawer porps issue --- .../examples/DescriptionListDrawer.tsx | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx index 237db3c1aa4..c258a3ce938 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListDrawer.tsx @@ -5,9 +5,6 @@ import { GalleryItem, Card, CardBody, - Drawer, - DrawerPanelContent, - DrawerContent, DrawerHead, DrawerActions, DrawerCloseButton, @@ -28,6 +25,7 @@ import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-i export const DescriptionListDrawer: React.FunctionComponent = () => { const drawerRef = React.useRef(null); + const btnRef = React.useRef(null); const [isExpanded, setIsExpanded] = React.useState(true); const onExpand = () => { @@ -36,7 +34,7 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { const onCloseClick = () => { setIsExpanded(false); - drawerRef.current && drawerRef.current.focus(); + btnRef.current && btnRef.current.focus(); }; const onOpenDrawer = () => { @@ -44,10 +42,12 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { }; const panelContent = ( - + <> - - test + <Title headingLevel="h2"> + <span ref={drawerRef} tabIndex={isExpanded ? 0 : -1}> + test + </span> @@ -123,7 +123,7 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { - + ); const drawerContent = ( @@ -131,7 +131,7 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { - @@ -147,14 +147,12 @@ export const DescriptionListDrawer: React.FunctionComponent = () => { ); - const buildDrawer = ( - - - - ); - return ( - +