From b5df2095178df6836fab2ba71c2b2f60931b8dd5 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Thu, 21 Mar 2024 20:14:04 +0530 Subject: [PATCH 1/6] add description list basic demo --- .../demos/DescriptionList/DescriptionList.md | 24 ++++++++ .../examples/DescriptionListBasic.tsx | 56 +++++++++++++++++++ 2 files changed, 80 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/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 e914a51afa1df2d55848b04f27b511212dacf25e Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Wed, 27 Mar 2024 16:38:20 +0530 Subject: [PATCH 2/6] 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 2c06da19433888672abc3dd1b496d8d6f7eb9e3e Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Wed, 24 Apr 2024 17:13:45 +0530 Subject: [PATCH 3/6] implement review comments --- .../demos/DescriptionList/DescriptionList.md | 11 ----------- .../examples/DescriptionListBasic.tsx | 18 ++++++++++++++---- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md index 9af10f483a9..8098054b4e8 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/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx index f66140f47c1..4b97d5a996d 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx @@ -8,7 +8,11 @@ import { PageSection, PageSectionVariants, Card, - CardBody + CardBody, + CardHeader, + TextContent, + Text, + Title } 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'; @@ -16,10 +20,16 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard export const DescriptionListBasic: React.FunctionComponent = () => ( + + Projects + This is a full page demo + + + - Details - - + + Details + From e4d7ba2354ebe34df87d1afe2e3adddaa86c1ac9 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Wed, 24 Apr 2024 19:26:30 +0530 Subject: [PATCH 4/6] add divider and size --- .../DescriptionList/examples/DescriptionListBasic.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx index 4b97d5a996d..b6627cd1d4b 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx @@ -12,7 +12,8 @@ import { CardHeader, TextContent, Text, - Title + Title, + Divider } 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'; @@ -28,7 +29,10 @@ export const DescriptionListBasic: React.FunctionComponent = () => ( - Details + + Details + + From 8a979526a1dfffc6ad0b2e870e12f90a766254e1 Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Mon, 29 Apr 2024 20:04:10 +0530 Subject: [PATCH 5/6] update content --- .../demos/DescriptionList/DescriptionList.md | 2 +- .../examples/DescriptionListBasic.tsx | 38 ++++++++++++------- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md index 8098054b4e8..bf064a69b39 100644 --- a/packages/react-core/src/demos/DescriptionList/DescriptionList.md +++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md @@ -3,7 +3,7 @@ id: Description list section: components --- -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; 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 b6627cd1d4b..7b1578f62c5 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx @@ -15,7 +15,7 @@ import { Title, Divider } from '@patternfly/react-core'; -import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; +import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; export const DescriptionListBasic: React.FunctionComponent = () => ( @@ -38,29 +38,41 @@ export const DescriptionListBasic: React.FunctionComponent = () => ( Name - Example + mary-test - Namespace + Network Policies - mary-test + Network Policies - Labels - example - - - Pod selector + Status - - Annotation - 2 Annotations + Display name + mary + + + Default pull secret + Not configured + + + Requester + kube:admin + + + Tolerations + 6 Tolerations + + + Created at: + 3 minutes ago From dc49a7524456d73a90552763c9622555c48be82e Mon Sep 17 00:00:00 2001 From: ajaypratap003 Date: Mon, 6 May 2024 18:58:26 +0530 Subject: [PATCH 6/6] fixed layout issues --- .../examples/DescriptionListBasic.tsx | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx index 7b1578f62c5..772ce127546 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { - Button, DescriptionList, DescriptionListTerm, DescriptionListGroup, @@ -13,7 +12,9 @@ import { TextContent, Text, Title, - Divider + Divider, + Flex, + FlexItem } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; @@ -32,44 +33,47 @@ export const DescriptionListBasic: React.FunctionComponent = () => ( Details - + - + Name mary-test - Network Policies + Status - Network Policies + + + + + Active + - Status + Default pull secret + Not configured + + + Tolerations + 6 Tolerations + + + Network Policies - + Network Policies Display name mary - - Default pull secret - Not configured - Requester kube:admin - - Tolerations - 6 Tolerations - Created at: 3 minutes ago