From 325a4e0559b3b0d76c105a02d68ee492db7d8888 Mon Sep 17 00:00:00 2001 From: Andrew Ronaldson Date: Tue, 21 Jul 2026 15:12:08 -0300 Subject: [PATCH 1/2] chore(primary details): Demo updates --- .../PrimaryDetail/PrimaryDetailCardView.tsx | 20 +- .../PrimaryDetailContentPadding.tsx | 425 +++++++++--------- .../PrimaryDetailDataListInCard.tsx | 188 ++++---- .../PrimaryDetail/PrimaryDetailFullPage.tsx | 425 +++++++++--------- .../PrimaryDetailInlineModifier.tsx | 425 +++++++++--------- .../PrimaryDetailSimpleListInCard.tsx | 2 +- 6 files changed, 777 insertions(+), 708 deletions(-) diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx index a40275e9481..916be574367 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx @@ -16,6 +16,7 @@ import { DrawerContentBody, DrawerHead, DrawerPanelContent, + DrawerSection, Dropdown, DropdownItem, DropdownList, @@ -618,14 +619,19 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {

This is a demo that showcases Patternfly cards.

- - - {toolbarItems} - - - - + + + + {toolbarItems} + + + {drawerContent} diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx index 825f5841fd8..00aa9c1d466 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx @@ -1,4 +1,4 @@ -import { Fragment, useState } from 'react'; +import { useState } from 'react'; import { Button, ButtonVariant, @@ -23,8 +23,10 @@ import { DrawerHead, DrawerPanelBody, DrawerPanelContent, + DrawerSection, Flex, FlexItem, + Icon, InputGroup, InputGroupItem, PageSection, @@ -99,8 +101,8 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => { setSelectedDataListItemId(''); }; - const toggleGroupItems = ( - + const ToolbarItems = ( + } breakpoint="xl" alignItems="center"> @@ -122,7 +124,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => { - + - - ); - - const ToolbarItems = ( - } breakpoint="xl"> - {toggleGroupItems} ); @@ -212,211 +208,224 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => { ); const drawerContent = ( - - - {ToolbarItems} - - - - - - + + + + + + +

patternfly

+ + Working repo for PatternFly 5 https://pf5.patternfly.org/ + + + + + 10 + + + 4 + -

patternfly

- - Working repo for PatternFly 5 https://pf5.patternfly.org/ - + 5 - - - 10 - - - 4 - - - 5 - - Updated 2 days ago - + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - - - + + , + + + + + + + + + + + ]} + /> + + + + + + + +

patternfly-elements

+ PatternFly elements + + + + 10 + + + 4 + + + 5 + + + + + {' '} + 7 + + + + + {' '} + 5 + -

patternfly-elements

- PatternFly elements + + + {' '} + 5 - - - 10 - - - 4 - - - 5 - - - 7 - - - 5 - - - 5 - - Updated 2 days ago - + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - - - + + , + + + + + + + + + + + ]} + /> + + + + + + + +

patternfly

+ + Working repo for PatternFly 5 https://pf5.patternfly.org/ + + + + + 10 + + + 4 + -

patternfly

- - Working repo for PatternFly 5 https://pf5.patternfly.org/ - + 5 - - - 10 - - - 4 - - - 5 - - Updated 2 days ago - + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - - - + + , + + + + + + + + + + + ]} + /> + + + + + + + +

patternfly-elements

+ PatternFly elements + + + + 10 + -

patternfly-elements

- PatternFly elements + 4 - - - 10 - - - 4 - - - 5 - - - 7 - - - 5 - - - 5 - - Updated 2 days ago - + + 5 + + + + + {' '} + 7 + + + + + {' '} + 5 + + + + + {' '} + 5 + + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - + + , + + + + + + + + + + + ]} + /> + + + ); return ( @@ -433,6 +442,16 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => { + + + {ToolbarItems} + + + {drawerContent} diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx index f578d16d15d..e86594f6ce9 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx @@ -1,4 +1,4 @@ -import { Fragment, useState } from 'react'; +import { useState } from 'react'; import { Card, Content, @@ -19,6 +19,7 @@ import { DrawerHead, DrawerPanelBody, DrawerPanelContent, + DrawerSection, Dropdown, DropdownItem, DropdownList, @@ -88,95 +89,72 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => { ); const drawerContent = ( - - - - - setIsDropdownOpen(isOpen)} - toggle={(toggleRef) => ( - - Dropdown - - )} - > - - Option 1 - Option 2 - - - - - - - - - -
Node 1
- siemur/test-space - - ]} - /> - - - - - -
Node 2
- siemur/test-space - - ]} - /> - - - - - -
Node 3
- siemur/test-space - - ]} - /> - - - - - -
Node 4
- siemur/test-space - - ]} - /> - - - - - -
Node 5
- siemur/test-space - - ]} - /> - - - - + + + + +
Node 1
+ siemur/test-space + + ]} + /> + + + + + +
Node 2
+ siemur/test-space + + ]} + /> + + + + + +
Node 3
+ siemur/test-space + + ]} + /> + + + + + +
Node 4
+ siemur/test-space + + ]} + /> + + + + + +
Node 5
+ siemur/test-space + + ]} + /> + + + ); return ( @@ -193,7 +171,35 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => { - + + + + + + setIsDropdownOpen(isOpen)} + toggle={(toggleRef) => ( + + Dropdown + + )} + > + + Option 1 + Option 2 + + + + + + + {drawerContent} diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx index f16e350b27f..7054661f506 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx @@ -1,4 +1,4 @@ -import { Fragment, useState } from 'react'; +import { useState } from 'react'; import { Button, ButtonVariant, @@ -23,8 +23,10 @@ import { DrawerHead, DrawerPanelBody, DrawerPanelContent, + DrawerSection, Flex, FlexItem, + Icon, InputGroup, InputGroupItem, PageSection, @@ -99,8 +101,8 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => { setSelectedDataListItemId(''); }; - const toggleGroupItems = ( - + const ToolbarItems = ( + } breakpoint="xl" alignItems="center"> @@ -122,7 +124,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => { - + - - ); - - const ToolbarItems = ( - } breakpoint="xl"> - {toggleGroupItems} ); @@ -212,211 +208,224 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => { ); const drawerContent = ( - - - {ToolbarItems} - - - - - - + + + + + + +

patternfly

+ + Working repo for PatternFly 5 https://pf5.patternfly.org/ + + + + + 10 + + + 4 + -

patternfly

- - Working repo for PatternFly 5 https://pf5.patternfly.org/ - + 5 - - - 10 - - - 4 - - - 5 - - Updated 2 days ago - + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - - - + + , + + + + + + + + + + + ]} + /> + + + + + + + +

patternfly-elements

+ PatternFly elements + + + + 10 + + + 4 + + + 5 + + + + + {' '} + 7 + + + + + {' '} + 5 + -

patternfly-elements

- PatternFly elements + + + {' '} + 5 - - - 10 - - - 4 - - - 5 - - - 7 - - - 5 - - - 5 - - Updated 2 days ago - + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - - - + + , + + + + + + + + + + + ]} + /> + + + + + + + +

patternfly

+ + Working repo for PatternFly 5 https://pf5.patternfly.org/ + + + + + 10 + + + 4 + -

patternfly

- - Working repo for PatternFly 5 https://pf5.patternfly.org/ - + 5 - - - 10 - - - 4 - - - 5 - - Updated 2 days ago - + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - - - + + , + + + + + + + + + + + ]} + /> + + + + + + + +

patternfly-elements

+ PatternFly elements + + + + 10 + -

patternfly-elements

- PatternFly elements + 4 - - - 10 - - - 4 - - - 5 - - - 7 - - - 5 - - - 5 - - Updated 2 days ago - + + 5 + + + + + {' '} + 7 + + + + + {' '} + 5 + + + + + {' '} + 5 + + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - + + , + + + + + + + + + + + ]} + /> + + + ); return ( @@ -433,6 +442,16 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => { + + + {ToolbarItems} + + + {drawerContent} diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx index 3a27fe17568..354a0c519ed 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx @@ -1,4 +1,4 @@ -import { Fragment, useState } from 'react'; +import { useState } from 'react'; import { Button, ButtonVariant, @@ -23,8 +23,10 @@ import { DrawerHead, DrawerPanelBody, DrawerPanelContent, + DrawerSection, Flex, FlexItem, + Icon, InputGroup, InputGroupItem, PageSection, @@ -98,8 +100,8 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => { setSelectedDataListItemId(''); }; - const toggleGroupItems = ( - + const ToolbarItems = ( + } breakpoint="xl" alignItems="center"> @@ -121,7 +123,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => { - + - - ); - - const ToolbarItems = ( - } breakpoint="xl"> - {toggleGroupItems} ); @@ -211,211 +207,224 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => { ); const drawerContent = ( - - - {ToolbarItems} - - - - - - + + + + + + +

patternfly

+ + Working repo for PatternFly 5 https://pf5.patternfly.org/ + + + + + 10 + + + 4 + -

patternfly

- - Working repo for PatternFly 5 https://pf5.patternfly.org/ - + 5 - - - 10 - - - 4 - - - 5 - - Updated 2 days ago - + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - - - + + , + + + + + + + + + + + ]} + /> + + + + + + + +

patternfly-elements

+ PatternFly elements + + + + 10 + + + 4 + + + 5 + + + + + {' '} + 7 + + + + + {' '} + 5 + -

patternfly-elements

- PatternFly elements + + + {' '} + 5 - - - 10 - - - 4 - - - 5 - - - 7 - - - 5 - - - 5 - - Updated 2 days ago - + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - - - + + , + + + + + + + + + + + ]} + /> + + + + + + + +

patternfly

+ + Working repo for PatternFly 5 https://pf5.patternfly.org/ + + + + + 10 + + + 4 + -

patternfly

- - Working repo for PatternFly 5 https://pf5.patternfly.org/ - + 5 - - - 10 - - - 4 - - - 5 - - Updated 2 days ago - + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - - - + + , + + + + + + + + + + + ]} + /> + + + + + + + +

patternfly-elements

+ PatternFly elements + + + + 10 + -

patternfly-elements

- PatternFly elements + 4 - - - 10 - - - 4 - - - 5 - - - 7 - - - 5 - - - 5 - - Updated 2 days ago - + + 5 + + + + + {' '} + 7 + + + + + {' '} + 5 + + + + + {' '} + 5 + + Updated 2 days ago - , - - - - - - - - - - - ]} - /> - - - - + + , + + + + + + + + + + + ]} + /> + + + ); return ( @@ -432,6 +441,16 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => { + + + {ToolbarItems} + + + {drawerContent} diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx index 941944d8372..877e633486d 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx @@ -102,7 +102,7 @@ export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => { - + {drawerContent} From 7c699a8c849d66bcd40583e0f3157b5fab2ecc14 Mon Sep 17 00:00:00 2001 From: Andrew Ronaldson Date: Thu, 23 Jul 2026 10:14:51 -0300 Subject: [PATCH 2/2] chore(primary details): edit toolbars and remove old examples --- .../react-core/src/demos/PrimaryDetail.md | 12 - .../PrimaryDetailContentPadding.tsx | 1 - .../PrimaryDetailDataListInCard.tsx | 211 ------------------ .../PrimaryDetail/PrimaryDetailFullPage.tsx | 1 - .../PrimaryDetailInlineModifier.tsx | 1 - .../PrimaryDetailSimpleListInCard.tsx | 114 ---------- 6 files changed, 340 deletions(-) delete mode 100644 packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx delete mode 100644 packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index 8330132f37f..cd4c0c6aa06 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -47,18 +47,6 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ``` -### Primary-detail simple list in card - -```ts file="examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx" isFullscreen - -``` - -### Primary-detail data list in card - -```ts file="examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx" isFullscreen - -``` - ### Primary-detail inline modifier ```ts file="examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx" isFullscreen diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx index 00aa9c1d466..fbc7c9f4fd7 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx @@ -439,7 +439,6 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {

- diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx deleted file mode 100644 index e86594f6ce9..00000000000 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx +++ /dev/null @@ -1,211 +0,0 @@ -import { useState } from 'react'; -import { - Card, - Content, - DataList, - DataListCell, - DataListItem, - DataListItemCells, - DataListItemRow, - Toolbar, - ToolbarContent, - ToolbarItem, - Divider, - Drawer, - DrawerActions, - DrawerCloseButton, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerPanelBody, - DrawerPanelContent, - DrawerSection, - Dropdown, - DropdownItem, - DropdownList, - Flex, - FlexItem, - MenuToggle, - PageSection, - Progress, - Title -} from '@patternfly/react-core'; -import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; - -export const PrimaryDetailDataListInCard: React.FunctionComponent = () => { - const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1); - const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const [selectedDataListItemId, setSelectedDataListItemId] = useState('dataListItem1'); - const [isExpanded, setIsExpanded] = useState(false); - - const onDropdownToggle = () => { - setIsDropdownOpen(!isDropdownOpen); - }; - const onDropdownSelect = () => { - setIsDropdownOpen(false); - onDropdownFocus(); - }; - const onDropdownFocus = () => { - const element = document.getElementById('toggle-id'); - element?.focus(); - }; - const onSelectDataListItem = (_event, id) => { - setSelectedDataListItemId(id); - setDrawerPanelBodyContent(id.charAt(id.length - 1)); - setIsExpanded(true); - }; - const onClose = () => { - setIsExpanded(false); - }; - - const panelContent = ( - - - - Patternfly-elements - - - - - - - - -

- The content of the drawer really is up to you. It could have form fields, definition lists, text lists, - labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and - can also make the drawer scrollable. -

- - - - - - - - - - - ); - - const drawerContent = ( - - - - -
Node 1
- siemur/test-space - - ]} - /> - - - - - -
Node 2
- siemur/test-space - - ]} - /> - - - - - -
Node 3
- siemur/test-space - - ]} - /> - - - - - -
Node 4
- siemur/test-space - - ]} - /> - - - - - -
Node 5
- siemur/test-space - - ]} - /> - - - - ); - - return ( - - - -

Main title

-

- Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
- of it’s relative line height of 1.5. -

- - - - - - - - - - - setIsDropdownOpen(isOpen)} - toggle={(toggleRef) => ( - - Dropdown - - )} - > - - Option 1 - Option 2 - - - - - - - - - {drawerContent} - - - - - - ); -}; diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx index 7054661f506..dec87f89889 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx @@ -439,7 +439,6 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {

- diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx index 354a0c519ed..f4062d7792b 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx @@ -438,7 +438,6 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {

- diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx deleted file mode 100644 index 877e633486d..00000000000 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { Fragment, useState } from 'react'; -import { - Card, - Content, - Divider, - Drawer, - DrawerActions, - DrawerCloseButton, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerPanelBody, - DrawerPanelContent, - Flex, - FlexItem, - PageSection, - Progress, - SimpleList, - SimpleListGroup, - SimpleListItem, - Title -} from '@patternfly/react-core'; -import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; - -export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => { - const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1); - const [isExpanded, setIsExpanded] = useState(false); - - const onSelectListItem = (_listItem, listItemProps) => { - const id = listItemProps.children; - setDrawerPanelBodyContent(id.charAt(id.length - 1)); - setIsExpanded(true); - }; - - const onClose = () => { - setIsExpanded(false); - }; - - const panelContent = ( - - - - {`List item ${drawerPanelBodyContent} details`} - - - - - - - - -

- The content of the drawer really is up to you. It could have form fields, definition lists, text lists, - labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and - can also make the drawer scrollable. -

- - - - - - - - - - - ); - - const drawerContent = ( - - - - - List item 1 - - List item 2 - List item 3 - List item 4 - - - List item 5 - List item 6 - List item 7 - List item 8 - List item 9 - - - - ); - - return ( - - - -

Main title

-

- Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
- of it’s relative line height of 1.5. -

- - - - - - - - {drawerContent} - - - - - - ); -};