diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx index 350b7480899..09d1da82cb6 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; + /** @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'; /** 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) + + ]} + /> + + + +); diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index 1cdcd5a2881..144fc0ccb24 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; + /** @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; /** @hide Forwarded ref */ @@ -94,6 +96,7 @@ const TableBase: React.FunctionComponent = ({ variant, borders = true, isStickyHeader = false, + isPlain = false, gridBreakPoint = TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', @@ -222,6 +225,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..8d8d13dabe1 --- /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}
+ ); +};