diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index 8330132f37f..fe63ac5bf2d 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -35,30 +35,12 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ``` -### Primary-detail content padding - -```ts file="examples/PrimaryDetail/PrimaryDetailContentPadding.tsx" isFullscreen - -``` - ### Primary-detail card view ```ts file="examples/PrimaryDetail/PrimaryDetailCardView.tsx" isFullscreen ``` -### 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/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 deleted file mode 100644 index 825f5841fd8..00000000000 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx +++ /dev/null @@ -1,443 +0,0 @@ -import { Fragment, useState } from 'react'; -import { - Button, - ButtonVariant, - Content, - DataList, - DataListAction, - DataListCell, - DataListItem, - DataListItemCells, - DataListItemRow, - Toolbar, - ToolbarItem, - ToolbarContent, - ToolbarToggleGroup, - ToolbarGroup, - Divider, - Drawer, - DrawerActions, - DrawerCloseButton, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerPanelBody, - DrawerPanelContent, - Flex, - FlexItem, - InputGroup, - InputGroupItem, - PageSection, - Progress, - Stack, - StackItem, - TextInput, - Title, - Select, - SelectOption, - SelectOptionProps, - MenuToggle -} from '@patternfly/react-core'; -import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; -import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; -import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; -import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; -import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon'; -import RhUiCloseCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-circle-fill-icon'; -import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon'; - -interface SelectOptionType extends Omit { - label: string; -} - -const statusOptions: SelectOptionType[] = [ - { value: 'New', label: 'New' }, - { value: 'Pending', label: 'Pending' }, - { value: 'Running', label: 'Running' }, - { value: 'Cancelled', label: 'Cancelled' } -]; - -const riskOptions: SelectOptionType[] = [ - { value: 'Low', label: 'Low' }, - { value: 'Medium', label: 'Medium' }, - { value: 'High', label: 'High' } -]; - -export const PrimaryDetailContentPadding: React.FunctionComponent = () => { - const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); - const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(''); - const [inputValue, setInputValue] = useState(''); - const [statusIsOpen, setStatusIsOpen] = useState(false); - const [statusSelected, setStatusSelected] = useState('Status'); - const [riskIsOpen, setRiskIsOpen] = useState(false); - const [riskSelected, setRiskSelected] = useState('Risk'); - const [selectedDataListItemId, setSelectedDataListItemId] = useState(''); - - const onStatusSelect = (_event: React.MouseEvent | undefined, value: string | number | undefined) => { - setStatusSelected(value); - setStatusIsOpen(false); - }; - - const onRiskSelect = (_event: React.MouseEvent | undefined, value: string | number | undefined) => { - setRiskSelected(value); - setRiskIsOpen(false); - }; - - const onSelectDataListItem = ( - _event: React.MouseEvent | React.KeyboardEvent, - id: string - ) => { - setSelectedDataListItemId(id); - setIsDrawerExpanded(true); - setDrawerPanelBodyContent(id.charAt(id.length - 1)); - }; - - const onCloseDrawerClick = (_event: React.MouseEvent) => { - setIsDrawerExpanded(false); - setSelectedDataListItemId(''); - }; - - const toggleGroupItems = ( - - - - - , value: string) => setInputValue(value)} - value={inputValue} - /> - - - - - - - - - - ]} - /> - - - - - - - -

patternfly-elements

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

patternfly

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

patternfly-elements

- PatternFly elements - - - - 10 - - - 4 - - - 5 - - - 7 - - - 5 - - - 5 - - Updated 2 days ago - - - , - - - - - - - - - - - ]} - /> - - - - - ); - - 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} - - - - - ); -}; 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 f578d16d15d..00000000000 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import { Fragment, useState } from 'react'; -import { - Card, - Content, - DataList, - DataListCell, - DataListItem, - DataListItemCells, - DataListItemRow, - Toolbar, - ToolbarContent, - ToolbarItem, - Divider, - Drawer, - DrawerActions, - DrawerCloseButton, - DrawerContent, - DrawerContentBody, - DrawerHead, - DrawerPanelBody, - DrawerPanelContent, - 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 = ( - - - - - 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 - - ]} - /> - - - - - ); - - 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} - - - - - - ); -}; diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx index f16e350b27f..dec87f89889 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 ( @@ -430,9 +439,18 @@ 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..f4062d7792b 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 ( @@ -429,9 +438,18 @@ 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 deleted file mode 100644 index 941944d8372..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} - - - - - - ); -};