From f3515c0736c404bf4d01fbb3509bfd5076db494b Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 20 Apr 2022 16:44:18 -0400 Subject: [PATCH 1/5] add support for switching orientation at various breakpoints --- .../src/components/Divider/Divider.tsx | 10 ++++++++++ .../src/components/Divider/examples/Divider.md | 6 ++++++ .../DividerOrientationVariousBreakpoints.tsx | 17 +++++++++++++++++ ...viderVerticalFlexInsetVariousBreakpoints.tsx | 2 +- 4 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx index 321f5190835..431e6ad1a3d 100644 --- a/packages/react-core/src/components/Divider/Divider.tsx +++ b/packages/react-core/src/components/Divider/Divider.tsx @@ -25,6 +25,14 @@ export interface DividerProps extends React.HTMLProps { xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; }; + /** Indicates how the divider will display at various breakpoints. */ + orientation?: { + sm?: 'vertical' | 'horizontal'; + md?: 'vertical' | 'horizontal'; + lg?: 'vertical' | 'horizontal'; + xl?: 'vertical' | 'horizontal'; + '2xl'?: 'vertical' | 'horizontal'; + }; } export const Divider: React.FunctionComponent = ({ @@ -32,6 +40,7 @@ export const Divider: React.FunctionComponent = ({ component = DividerVariant.hr, isVertical = false, inset, + orientation, ...props }: DividerProps) => { const Component: any = component; @@ -42,6 +51,7 @@ export const Divider: React.FunctionComponent = ({ styles.divider, isVertical && styles.modifiers.vertical, formatBreakpointMods(inset, styles), + formatBreakpointMods(orientation, styles), className )} {...(component !== 'hr' && { role: 'separator' })} diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md index 93cf361ae2a..6d9b86d78e4 100644 --- a/packages/react-core/src/components/Divider/examples/Divider.md +++ b/packages/react-core/src/components/Divider/examples/Divider.md @@ -46,3 +46,9 @@ propComponents: ['Divider'] ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx' ``` + +### Switch orientation at various breakpoints + +```ts file='./DividerOrientationVariousBreakpoints.tsx' +``` + diff --git a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx new file mode 100644 index 00000000000..f6ff86b9cbc --- /dev/null +++ b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Divider, Flex, FlexItem } from '@patternfly/react-core'; + +export const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => ( + + first item + + second item + +); diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx index e82d433546d..4a8ba25c7d3 100644 --- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx @@ -13,6 +13,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent xl: 'insetXs' }} /> - first item + second item ); From e69e965cdf1da46d8e94dd432bfb1ce8d9a1f0ea Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 2 May 2022 10:31:09 -0400 Subject: [PATCH 2/5] update paths --- .../src/components/Divider/Divider.tsx | 10 ---------- .../src/components/Divider/examples/Divider.md | 6 ------ .../DividerOrientationVariousBreakpoints.tsx | 17 ----------------- ...viderVerticalFlexInsetVariousBreakpoints.tsx | 2 +- 4 files changed, 1 insertion(+), 34 deletions(-) delete mode 100644 packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx index 431e6ad1a3d..321f5190835 100644 --- a/packages/react-core/src/components/Divider/Divider.tsx +++ b/packages/react-core/src/components/Divider/Divider.tsx @@ -25,14 +25,6 @@ export interface DividerProps extends React.HTMLProps { xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; }; - /** Indicates how the divider will display at various breakpoints. */ - orientation?: { - sm?: 'vertical' | 'horizontal'; - md?: 'vertical' | 'horizontal'; - lg?: 'vertical' | 'horizontal'; - xl?: 'vertical' | 'horizontal'; - '2xl'?: 'vertical' | 'horizontal'; - }; } export const Divider: React.FunctionComponent = ({ @@ -40,7 +32,6 @@ export const Divider: React.FunctionComponent = ({ component = DividerVariant.hr, isVertical = false, inset, - orientation, ...props }: DividerProps) => { const Component: any = component; @@ -51,7 +42,6 @@ export const Divider: React.FunctionComponent = ({ styles.divider, isVertical && styles.modifiers.vertical, formatBreakpointMods(inset, styles), - formatBreakpointMods(orientation, styles), className )} {...(component !== 'hr' && { role: 'separator' })} diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md index 6d9b86d78e4..93cf361ae2a 100644 --- a/packages/react-core/src/components/Divider/examples/Divider.md +++ b/packages/react-core/src/components/Divider/examples/Divider.md @@ -46,9 +46,3 @@ propComponents: ['Divider'] ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx' ``` - -### Switch orientation at various breakpoints - -```ts file='./DividerOrientationVariousBreakpoints.tsx' -``` - diff --git a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx deleted file mode 100644 index f6ff86b9cbc..00000000000 --- a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Divider, Flex, FlexItem } from '@patternfly/react-core'; - -export const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => ( - - first item - - second item - -); diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx index 4a8ba25c7d3..e82d433546d 100644 --- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx @@ -13,6 +13,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent xl: 'insetXs' }} /> - second item + first item ); From 23c591b69214384b1c37f87ec22ea07acb40dfcd Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 4 May 2022 13:35:47 -0400 Subject: [PATCH 3/5] add compound expandable demo --- packages/react-table/src/demos/Table.md | 7 + .../demos/table-demos/CompoundExpandable.jsx | 235 ++++++++++++++++++ 2 files changed, 242 insertions(+) create mode 100644 packages/react-table/src/demos/table-demos/CompoundExpandable.jsx diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md index 341692f5dd5..9f394ef2341 100644 --- a/packages/react-table/src/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -22,6 +22,8 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon'; +import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; + ### Bulk select ```js @@ -268,6 +270,11 @@ class BulkSelectTableDemo extends React.Component { ```js file="table-demos/ExpandCollapseAll.jsx" ``` +### Compound expandable + +```js isFullscreen file="table-demos/CompoundExpandable.jsx" +``` + ### Column management ```js diff --git a/packages/react-table/src/demos/table-demos/CompoundExpandable.jsx b/packages/react-table/src/demos/table-demos/CompoundExpandable.jsx new file mode 100644 index 00000000000..79f95310f64 --- /dev/null +++ b/packages/react-table/src/demos/table-demos/CompoundExpandable.jsx @@ -0,0 +1,235 @@ +import React from 'react'; +import { + ActionsColumn, + TableComposable, + Thead, + Tr, + Th, + Tbody, + Td, + ExpandableRowContent +} from '@patternfly/react-table'; +import { + Button, + Toolbar, + ToolbarContent, + ToolbarGroup, + ToolbarItem, + Pagination, + PaginationVariant, + Select, + SelectVariant, + SelectOption, + PageSection +} from '@patternfly/react-core'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; +import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; + +export const CompoundExpandable = () => { + // In real usage, this data would come from some external source like an API via props. + const [isSelectOpen, setIsSelectOpen] = React.useState(false); + + const NestedItemsTable = () => { + // In real usage, this data would come from some external source like an API via props. + const items = [ + { description: 'Item 1', date: 'May 9, 2018', status: 'Active' }, + { description: 'Item 2', date: 'May 9, 2018', status: 'Warning' }, + { description: 'Item 3', date: 'May 9, 2018', status: 'Active' }, + { description: 'Item 4', date: 'May 9, 2018', status: 'Active' }, + { description: 'Item 5', date: 'May 9, 2018', status: 'Active' } + ]; + + const columnNames = { + description: 'Description', + date: 'Date', + status: 'Status' + }; + + return ( + + + + {columnNames.description} + {columnNames.date} + {columnNames.status} + + + + + {items.map(item => ( + + {item.description} + {item.date} + {item.status} + + + + + ))} + + + ); + }; + + const tableToolbar = ( + + + + + + + + + + + + + + + + ); + + const defaultActions = () => [ + { + title: 'Settings', + // eslint-disable-next-line no-console + onClick: () => console.log(`clicked on Settings`) + }, + { + title: 'Help', + // eslint-disable-next-line no-console + onClick: () => console.log(`clicked on Help`) + } + ]; + + const repositories = [ + { + name: 'siemur/test-space', + branches: 10, + prs: 4, + workspaces: 4, + lastCommit: '20 minutes' + }, + { name: 'siemur/test-space-2', branches: 3, prs: 4, workspaces: 4, lastCommit: '20 minutes' } + ]; + + const columnNames = { + name: 'Repositories', + branches: 'Branches', + prs: 'Pull requests', + workspaces: 'Workspaces', + lastCommit: 'Last commit' + }; + + // In this example, expanded cells are tracked by the repo and property names from each row. This could be any pair of unique identifiers. + // This is to prevent state from being based on row and column order index in case we later add sorting and rearranging columns. + // Note that this behavior is very similar to selection state. + const [expandedCells, setExpandedCells] = React.useState({ + 'siemur/test-space': 'branches' // Default to the first cell of the first row being expanded + }); + const setCellExpanded = (repo, columnKey, isExpanding = true) => { + const newExpandedCells = { ...expandedCells }; + if (isExpanding) { + newExpandedCells[repo.name] = columnKey; + } else { + delete newExpandedCells[repo.name]; + } + setExpandedCells(newExpandedCells); + }; + const compoundExpandParams = (repo, columnKey) => ({ + isExpanded: expandedCells[repo.name] === columnKey, + onToggle: () => setCellExpanded(repo, columnKey, expandedCells[repo.name] !== columnKey) + }); + + return ( + + + {tableToolbar} + + + + {columnNames.name} + {columnNames.branches} + {columnNames.prs} + {columnNames.workspaces} + {columnNames.lastCommit} + + + + {repositories.map(repo => { + const expandedCellKey = expandedCells[repo.name]; + const isRowExpanded = !!expandedCellKey; + return ( + + + + {repo.name} + + + {repo.branches} + + + {repo.prs} + + + {repo.workspaces} + + {repo.lastCommit} + + Open in GitHub + + + + + + {isRowExpanded ? ( + + + {expandedCellKey === 'branches' && repo.name === 'siemur/test-space' ? ( + + ) : ( + +
+ Expanded content for {repo.name}: {expandedCellKey} goes here! +
+ + )} + + + ) : null} + + ); + })} + + + + ); +}; From 2a49241cd87512429dc0e8d19dbdde6dc5701faa Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 6 May 2022 16:13:25 -0400 Subject: [PATCH 4/5] rename demo, add bottom pagination, wip toolbar --- packages/react-table/src/demos/Table.md | 4 +-- ...ndExpandable.jsx => CompoundExpansion.jsx} | 25 +++++++++++-------- 2 files changed, 17 insertions(+), 12 deletions(-) rename packages/react-table/src/demos/table-demos/{CompoundExpandable.jsx => CompoundExpansion.jsx} (95%) diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md index 9f394ef2341..3e648405ad8 100644 --- a/packages/react-table/src/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -270,9 +270,9 @@ class BulkSelectTableDemo extends React.Component { ```js file="table-demos/ExpandCollapseAll.jsx" ``` -### Compound expandable +### Compound expansion -```js isFullscreen file="table-demos/CompoundExpandable.jsx" +```js isFullscreen file="table-demos/CompoundExpansion.jsx" ``` ### Column management diff --git a/packages/react-table/src/demos/table-demos/CompoundExpandable.jsx b/packages/react-table/src/demos/table-demos/CompoundExpansion.jsx similarity index 95% rename from packages/react-table/src/demos/table-demos/CompoundExpandable.jsx rename to packages/react-table/src/demos/table-demos/CompoundExpansion.jsx index 79f95310f64..a862f32f42c 100644 --- a/packages/react-table/src/demos/table-demos/CompoundExpandable.jsx +++ b/packages/react-table/src/demos/table-demos/CompoundExpansion.jsx @@ -16,7 +16,6 @@ import { ToolbarGroup, ToolbarItem, Pagination, - PaginationVariant, Select, SelectVariant, SelectOption, @@ -74,6 +73,19 @@ export const CompoundExpandable = () => { ); }; + const renderPagination = (variant, isCompact) => ( + + ); + const tableToolbar = ( @@ -104,15 +116,7 @@ export const CompoundExpandable = () => { - - - + {renderPagination('top', true)} ); @@ -229,6 +233,7 @@ export const CompoundExpandable = () => { ); })} + {renderPagination('bottom', false)} ); From f995c58bb095fdd8ef431bc17e2c18a585b1a6ff Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 13 May 2022 14:30:41 -0400 Subject: [PATCH 5/5] PR feedback from mcoker, wrap with card, use flex layout --- .../demos/table-demos/CompoundExpansion.jsx | 138 ++++++++++-------- 1 file changed, 79 insertions(+), 59 deletions(-) diff --git a/packages/react-table/src/demos/table-demos/CompoundExpansion.jsx b/packages/react-table/src/demos/table-demos/CompoundExpansion.jsx index a862f32f42c..c8f80a2dba9 100644 --- a/packages/react-table/src/demos/table-demos/CompoundExpansion.jsx +++ b/packages/react-table/src/demos/table-demos/CompoundExpansion.jsx @@ -11,6 +11,9 @@ import { } from '@patternfly/react-table'; import { Button, + Card, + Flex, + FlexItem, Toolbar, ToolbarContent, ToolbarGroup, @@ -48,7 +51,7 @@ export const CompoundExpandable = () => { }; return ( - + {columnNames.description} @@ -87,7 +90,7 @@ export const CompoundExpandable = () => { ); const tableToolbar = ( - +