From 796e695c7e6a4e411d3274ae23bdc274ad0fe0b4 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 3 Nov 2025 18:32:54 -0500 Subject: [PATCH 1/5] feat: Added isPlain for data list. --- .../src/components/DataList/DataList.tsx | 4 +++ .../components/DataList/examples/DataList.md | 5 +++ .../DataList/examples/DataListPlain.tsx | 32 +++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 packages/react-core/src/components/DataList/examples/DataListPlain.tsx diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx index 350b7480899..3f173aa7c6c 100644 --- a/packages/react-core/src/components/DataList/DataList.tsx +++ b/packages/react-core/src/components/DataList/DataList.tsx @@ -31,6 +31,8 @@ export interface DataListProps extends React.HTMLProps { selectedDataListItemId?: string; /** Flag indicating if DataList should have compact styling */ isCompact?: boolean; + /** Flag indicating if DataList should have plain styling */ + isPlain?: boolean; /** Specifies the grid breakpoints */ gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; /** Determines which wrapping modifier to apply to the DataList */ @@ -59,6 +61,7 @@ export const DataListBase: React.FunctionComponent = ({ onSelectDataListItem, selectedDataListItemId = '', isCompact = false, + isPlain = false, gridBreakpoint = 'md', wrapModifier = null, onSelectableRowChange, @@ -84,6 +87,7 @@ export const DataListBase: React.FunctionComponent = ({ className={css( styles.dataList, isCompact && styles.modifiers.compact, + isPlain && styles.modifiers.plain, gridBreakpointClasses[gridBreakpoint], wrapModifier && styles.modifiers[wrapModifier], className diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md index b4e06fa735b..d449b39f607 100644 --- a/packages/react-core/src/components/DataList/examples/DataList.md +++ b/packages/react-core/src/components/DataList/examples/DataList.md @@ -38,6 +38,11 @@ import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@pat ```ts file="./DataListCompact.tsx" +``` +### Plain + +```ts file="./DataListPlain.tsx" + ``` ### Checkboxes, actions and additional cells diff --git a/packages/react-core/src/components/DataList/examples/DataListPlain.tsx b/packages/react-core/src/components/DataList/examples/DataListPlain.tsx new file mode 100644 index 00000000000..af0b9f9618d --- /dev/null +++ b/packages/react-core/src/components/DataList/examples/DataListPlain.tsx @@ -0,0 +1,32 @@ +import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core'; + +export const DataListPlain: React.FunctionComponent = () => ( + + + + + Primary content + , + Secondary content + ]} + /> + + + + + + Secondary content (pf-m-no-fill) + , + + Secondary content (pf-m-align-right pf-m-no-fill) + + ]} + /> + + + +); From 94bfbd744143b8f23cc5982286752082015c6c97 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 3 Nov 2025 18:43:43 -0500 Subject: [PATCH 2/5] feat: Added isPlain for data list. --- .../src/components/Table/Table.tsx | 3 ++ .../src/components/Table/examples/Table.md | 3 ++ .../components/Table/examples/TablePlain.tsx | 52 +++++++++++++++++++ 3 files changed, 58 insertions(+) create mode 100644 packages/react-table/src/components/Table/examples/TablePlain.tsx diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index 1cdcd5a2881..51b6f2225c9 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -48,6 +48,8 @@ export interface TableProps extends React.HTMLProps, OUIAProps gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'; /** A valid WAI-ARIA role to be applied to the table element */ role?: string; + /** Flag indicating if the table should have plain styling */ + isPlain?: boolean; /** If set to true, the table header sticks to the top of its container */ isStickyHeader?: boolean; /** @hide Forwarded ref */ @@ -222,6 +224,7 @@ const TableBase: React.FunctionComponent = ({ isTreeTable && stylesTreeView.modifiers.treeView, isStriped && styles.modifiers.striped, isExpandable && styles.modifiers.expandable, + isPlain && styles.modifiers.plain, hasNoInset && stylesTreeView.modifiers.noInset, isNested && 'pf-m-nested', hasAnimations && styles.modifiers.animateExpand diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index d2a5a9646d5..3e12221ae7b 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -78,7 +78,10 @@ Some general notes: ```ts file="TableBasic.tsx" ``` +### Table Plain +``` file="TablePlain.tsx" +``` ### Custom row wrapper, header tooltips & popovers - If you add the `noWrap` prop to `Thead`, it won't wrap it if there is no space diff --git a/packages/react-table/src/components/Table/examples/TablePlain.tsx b/packages/react-table/src/components/Table/examples/TablePlain.tsx new file mode 100644 index 00000000000..0ae8e435e23 --- /dev/null +++ b/packages/react-table/src/components/Table/examples/TablePlain.tsx @@ -0,0 +1,52 @@ +import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; + +interface Repository { + name: string; + branches: string | null; + prs: string | null; + workspaces: string; + lastCommit: string; +} + +export const TablePlain: React.FunctionComponent = () => { + // In real usage, this data would come from some external source like an API via props. + const repositories: Repository[] = [ + { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' }, + { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' }, + { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' } + ]; + + const columnNames = { + name: 'Repositories', + branches: 'Branches', + prs: 'Pull requests', + workspaces: 'Workspaces', + lastCommit: 'Last commit' + }; + + return ( + + + + + + + + + + + + + {repositories.map((repo) => ( + + + + + + + + ))} + +
Simple table with plain styling using composable components
{columnNames.name}{columnNames.branches}{columnNames.prs}{columnNames.workspaces}{columnNames.lastCommit}
{repo.name}{repo.branches}{repo.prs}{repo.workspaces}{repo.lastCommit}
+ ); +}; From bb6c6514f6ce78841d3eac41a6cd18024cb604ff Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 3 Nov 2025 19:00:54 -0500 Subject: [PATCH 3/5] fix: Updated code to support isPlain for table. --- packages/react-table/src/components/Table/Table.tsx | 1 + .../react-table/src/components/Table/examples/TablePlain.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index 51b6f2225c9..adba97b108d 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -96,6 +96,7 @@ const TableBase: React.FunctionComponent = ({ variant, borders = true, isStickyHeader = false, + isPlain = false, gridBreakPoint = TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', diff --git a/packages/react-table/src/components/Table/examples/TablePlain.tsx b/packages/react-table/src/components/Table/examples/TablePlain.tsx index 0ae8e435e23..8d8d13dabe1 100644 --- a/packages/react-table/src/components/Table/examples/TablePlain.tsx +++ b/packages/react-table/src/components/Table/examples/TablePlain.tsx @@ -25,7 +25,7 @@ export const TablePlain: React.FunctionComponent = () => { }; return ( - +
From 4c6e252fcec32a384b7055d4830de9c621b6002c Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 4 Nov 2025 10:57:14 -0500 Subject: [PATCH 4/5] Update packages/react-core/src/components/DataList/DataList.tsx Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- packages/react-core/src/components/DataList/DataList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx index 3f173aa7c6c..09d1da82cb6 100644 --- a/packages/react-core/src/components/DataList/DataList.tsx +++ b/packages/react-core/src/components/DataList/DataList.tsx @@ -31,7 +31,7 @@ export interface DataListProps extends React.HTMLProps { selectedDataListItemId?: string; /** Flag indicating if DataList should have compact styling */ isCompact?: boolean; - /** Flag indicating if DataList should have plain styling */ + /** @beta Flag indicating if DataList should have plain styling with a transparent background */ isPlain?: boolean; /** Specifies the grid breakpoints */ gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; From b1ccca2b800d2d096fa4203bbfe87b419568db2b Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 4 Nov 2025 10:57:19 -0500 Subject: [PATCH 5/5] Update packages/react-table/src/components/Table/Table.tsx Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> --- packages/react-table/src/components/Table/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index adba97b108d..144fc0ccb24 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -48,7 +48,7 @@ export interface TableProps extends React.HTMLProps, OUIAProps gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl'; /** A valid WAI-ARIA role to be applied to the table element */ role?: string; - /** Flag indicating if the table should have plain styling */ + /** @beta Flag indicating if the table should have plain styling with a transparent background */ isPlain?: boolean; /** If set to true, the table header sticks to the top of its container */ isStickyHeader?: boolean;
Simple table with plain styling using composable components