@patternfly/react-table 6.0.0-alpha.1 → 6.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.2",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,10 +40,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.1",
-    "@patternfly/react-icons": "^6.0.0-alpha.1",
-    "@patternfly/react-styles": "^6.0.0-alpha.1",
-    "@patternfly/react-tokens": "^6.0.0-alpha.1",
+    "@patternfly/react-core": "^6.0.0-alpha.2",
+    "@patternfly/react-icons": "^6.0.0-alpha.2",
+    "@patternfly/react-styles": "^6.0.0-alpha.2",
+    "@patternfly/react-tokens": "^6.0.0-alpha.2",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -55,5 +55,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "abccf530a0a642a4d7b4eda6ada09c5822c855b0"
+  "gitHead": "e097336a87fa3cd2ab41654bec28d120beed10bc"
 }

package/src/components/Table/Table.tsx

@@ -159,8 +159,8 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   const handleKeys = (event: KeyboardEvent) => {
     if (
       isNested ||
-      !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
-      (tableRef && tableRef.current !== (event.target as HTMLElement).closest('.pf-v5-c-table:not(.pf-m-nested)'))
+      !(tableRef && tableRef.current && tableRef.current.classList.contains(stylesTreeView.modifiers.treeView)) || // implements roving tab-index to tree tables only
+      (tableRef && tableRef.current !== (event.target as HTMLElement).closest(`.${styles.table}:not(.pf-m-nested)`))
     ) {
       return;
     }

package/src/components/Table/Td.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
+import treeViewStyles from '@patternfly/react-styles/css/components/Table/table-tree-view';
 import { BaseCellProps } from './Table';
 import {
   cellActions,
@@ -28,6 +29,10 @@ import {
   TdSelectType,
   TdTreeRowType
 } from './base/types';
+import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
+import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
+import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
+
 export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> {
   /**
    * The column header the cell corresponds to.
@@ -253,8 +258,8 @@ const TdBase: React.FunctionComponent<TdProps> = ({
   } = merged;
 
   const treeTableTitleCell =
-    (className && className.includes('pf-v5-c-table__tree-view-title-cell')) ||
-    (mergedClassName && mergedClassName.includes('pf-v5-c-table__tree-view-title-cell'));
+    (className && className.includes(treeViewStyles.tableTreeViewTitleCell)) ||
+    (mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell));
 
   React.useEffect(() => {
     setTruncated(
@@ -288,9 +293,9 @@ const TdBase: React.FunctionComponent<TdProps> = ({
       {...props}
       {...(isStickyColumn && {
         style: {
-          '--pf-v5-c-table__sticky-cell--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
-          '--pf-v5-c-table__sticky-cell--Left': stickyLeftOffset ? stickyLeftOffset : 0,
-          '--pf-v5-c-table__sticky-cell--Right': stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
+          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Table/Th.tsx

@@ -9,6 +9,9 @@ import { IVisibility } from './utils/decorators/classNames';
 import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
 import { BaseCellProps } from './Table';
 import { IFormatterValueType, IColumn } from './TableTypes';
+import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
+import cssStickyCellLeft from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Left';
+import cssStickyCellRight from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_Right';
 
 export interface ThProps
   extends BaseCellProps,
@@ -193,9 +196,9 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       {...props}
       {...(isStickyColumn && {
         style: {
-          '--pf-v5-c-table__sticky-cell--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
-          '--pf-v5-c-table__sticky-cell--Left': stickyLeftOffset ? stickyLeftOffset : 0,
-          '--pf-v5-c-table__sticky-cell--Right': stickyRightOffset ? stickyRightOffset : 0,
+          [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
+          [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+          [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0,
           ...props.style
         } as React.CSSProperties
       })}

package/src/components/Table/Tr.tsx

@@ -5,7 +5,7 @@ import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inl
 import { css } from '@patternfly/react-styles';
 import { TableContext } from './Table';
 
-export interface TrProps extends React.HTMLProps<HTMLTableRowElement>, OUIAProps {
+export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onResize'>, OUIAProps {
   /** Content rendered inside the <tr> row */
   children?: React.ReactNode;
   /** Additional classes added to the <tr> row  */

package/src/components/Table/examples/Table.md

@@ -54,6 +54,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
+import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
 
 ## Table examples
 

package/src/components/Table/examples/TableCompoundExpandable.tsx

@@ -4,6 +4,7 @@ import { Table, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '
 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 spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 interface Repository {
   name: string;
@@ -110,7 +111,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
               <Tr isExpanded={isRowExpanded}>
                 <Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={6}>
                   <ExpandableRowContent>
-                    <div className="pf-v5-u-m-md">
+                    <div className={spacing.mMd}>
                       Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
                       ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
                       sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit

package/src/components/Table/examples/TableMisc.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+/* eslint-disable camelcase */
+import global_BackgroundColor_150 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_150';
 
 interface Repository {
   name: string;
@@ -65,7 +67,7 @@ export const TableMisc: React.FunctionComponent = () => {
         {repositories.map((repo, rowIndex) => {
           const isOddRow = (rowIndex + 1) % 2;
           const customStyle = {
-            backgroundColor: 'var(--pf-v5-global--BackgroundColor--150)'
+            backgroundColor: global_BackgroundColor_150.var
           };
           // Some arbitrary logic to demonstrate that cell styles can be based on anything
           const nameColSpan = repo.branches === null && repo.prs === null ? 3 : 1;

package/src/components/Table/examples/TableNestedHeaders.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem } from '@patternfly/react-core';
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 
 interface PodConnection {
   source: {
@@ -162,7 +163,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.datetime}>
                 <div>
                   <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className="pf-v5-u-color-200">{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -171,7 +172,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.source.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>
@@ -181,7 +182,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.destination.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>

package/src/components/Table/examples/TableNestedStickyHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem } from '@patternfly/react-core';
+import textStyles from '@patternfly/react-styles/css/utilities/Text/text';
 
 interface PodConnection {
   source: {
@@ -165,7 +166,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
               <Td dataLabel={columnNames.datetime}>
                 <div>
                   <span>{new Date(connection.timestamp).toDateString()}</span>{' '}
-                  <span className="pf-v5-u-color-200">{new Date(connection.timestamp).toLocaleTimeString()}</span>
+                  <span className={textStyles.color_200}>{new Date(connection.timestamp).toLocaleTimeString()}</span>
                 </div>
               </Td>
               <Td dataLabel={columnNames.source}>
@@ -174,7 +175,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.source.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.source.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.source.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>
@@ -184,7 +185,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
                     <span>{connection.destination.port.num}</span>
                   </StackItem>
                   <StackItem>
-                    <span className="pf-v5-u-color-200">({connection.destination.port.protocol})</span>
+                    <span className={textStyles.color_200}>({connection.destination.port.protocol})</span>
                   </StackItem>
                 </Stack>
               </Td>

package/src/components/Table/utils/decorators/treeRow.tsx

@@ -31,7 +31,7 @@ export const treeRow =
             {icon}
           </span>
         )}
-        <span className="pf-v5-c-table__text" key="table-text">
+        <span className={styles.tableText} key="table-text">
           {content as React.ReactNode}
         </span>
       </div>
@@ -41,7 +41,7 @@ export const treeRow =
     };
     return {
       component: 'th',
-      className: 'pf-v5-c-table__tree-view-title-cell',
+      className: stylesTreeView.tableTreeViewTitleCell,
       children:
         level !== undefined ? (
           <div className={css(stylesTreeView.tableTreeViewMain)}>
@@ -83,7 +83,7 @@ export const treeRow =
                     onToggleRowDetails && onToggleRowDetails(event, rowIndex, content as React.ReactNode, rowData)
                   }
                 >
-                  <span className="pf-v5-c-table__details-toggle-icon">
+                  <span className={`${styles.table}__details-toggle-icon`}>
                     <EllipsisHIcon aria-hidden />
                   </span>
                 </Button>

package/src/components/Table/utils/transformers.test.tsx

@@ -29,6 +29,9 @@ import {
   IRowData,
   ISeparator
 } from '../TableTypes';
+import { css } from '@patternfly/react-styles';
+import tableStyles from '@patternfly/react-styles/css/components/Table/table';
+import dropdownStyles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
 
 const testCellActions = async ({
   actions,
@@ -65,7 +68,7 @@ const testCellActions = async ({
     actions = actionResolver(rowData, extraData);
   }
 
-  expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__action' });
+  expect(returnedData).toMatchObject({ className: tableStyles.tableAction });
 
   if (!actions || actions.length === 0) {
     expect(returnedData.children).toBeUndefined();
@@ -73,7 +76,9 @@ const testCellActions = async ({
     const { container } = render(returnedData.children as React.ReactElement<any>);
     await user.click(screen.getAllByRole('button')[0]);
     await waitFor(() =>
-      expect(container.querySelectorAll('.pf-v5-c-dropdown__menu li button')).toHaveLength(expectDisabled ? 0 : 1)
+      expect(container.querySelectorAll(`.${dropdownStyles.dropdownMenu} li button`)).toHaveLength(
+        expectDisabled ? 0 : 1
+      )
     );
   }
 };
@@ -86,7 +91,7 @@ describe('Transformer functions', () => {
         extraParams: { onSelect }
       };
       const returnedData = selectable('', { column, rowData: {} } as IExtra);
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__check' });
+      expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
 
       const user = userEvent.setup();
 
@@ -103,7 +108,7 @@ describe('Transformer functions', () => {
         extraParams: { onSelect }
       };
       const returnedData = selectable('', { column, rowIndex: 0, rowData: { selected: true } } as IExtra);
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__check' });
+      expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
       const user = userEvent.setup();
 
       render(returnedData.children as React.ReactElement<any>);
@@ -128,7 +133,7 @@ describe('Transformer functions', () => {
       const onSort = jest.fn();
       const column = { extraParams: { sortBy: {}, onSort } };
       const returnedData = sortable('', { column, columnIndex: 0 });
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__sort' });
+      expect(returnedData).toMatchObject({ className: tableStyles.tableSort });
 
       const user = userEvent.setup();
 
@@ -154,7 +159,7 @@ describe('Transformer functions', () => {
       const onSort = jest.fn();
       const column = { extraParams: { sortBy: { index: 0, direction: 'desc' }, onSort } };
       const returnedData = sortable('', { column, columnIndex: 0 } as IExtra);
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__sort pf-m-selected' });
+      expect(returnedData).toMatchObject({ className: css(tableStyles.tableSort, tableStyles.modifiers.selected) });
 
       const user = userEvent.setup();
 
@@ -226,7 +231,7 @@ describe('Transformer functions', () => {
       extraParams: { onCollapse }
     };
     const returnedData = collapsible('', { rowIndex: 0, rowData, column });
-    expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__toggle' });
+    expect(returnedData).toMatchObject({ className: tableStyles.tableToggle });
 
     const user = userEvent.setup();
 
@@ -332,7 +337,7 @@ describe('Transformer functions', () => {
       extraParams: { onRowEdit }
     };
     const returned = editable('test', { rowIndex: 0, column });
-    expect(returned).toMatchObject({ className: 'pf-v5-c-table__inline-edit-action' });
+    expect(returned).toMatchObject({ className: tableStyles.tableInlineEditAction });
   });
 
   describe('visibility classNames', () => {

package/src/deprecated/components/Table/examples/LegacyTableCompoundExpandable.tsx

@@ -5,6 +5,7 @@ import { compoundExpand } from '@patternfly/react-table';
 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 spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 interface Repository {
   name: string;
@@ -117,7 +118,7 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
       cells: [
         {
           title: (
-            <div className="pf-v5-u-m-md" id={`compound-expansion-table-${repo.name}-1`}>
+            <div className={spacing.mMd} id={`compound-expansion-table-${repo.name}-1`}>
               Expanded content for {repo.name}: Branches goes here!
             </div>
           ),
@@ -132,7 +133,7 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
       cells: [
         {
           title: (
-            <div className="pf-v5-u-m-md" id={`compound-expansion-table-${repo.name}-2`}>
+            <div className={spacing.mMd} id={`compound-expansion-table-${repo.name}-2`}>
               Expanded content for {repo.name}: Pull requests goes here!
             </div>
           ),
@@ -147,7 +148,7 @@ export const LegacyTableCompoundExpandable: React.FunctionComponent = () => {
       cells: [
         {
           title: (
-            <div className="pf-v5-u-m-md" id={`compound-expansion-table-${repo.name}-3`}>
+            <div className={spacing.mMd} id={`compound-expansion-table-${repo.name}-3`}>
               Expanded content for {repo.name}: Workspaces goes here!
             </div>
           ),

package/src/deprecated/components/Table/examples/LegacyTableMisc.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';
+/* eslint-disable camelcase */
+import global_primary_color_100 from '@patternfly/react-tokens/dist/esm/global_primary_color_100';
 
 interface Repository {
   name: string;
@@ -27,14 +29,13 @@ export const LegacyTableMisc: React.FunctionComponent = () => {
     repo.lastCommit
   ]);
 
-  const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row, ...props }) => {
+  const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row }) => {
     const isOddRow = rowProps ? !!((rowProps.rowIndex + 1) % 2) : true;
     const customStyle = {
-      borderLeft: '3px solid var(--pf-v5-global--primary-color--100)'
+      borderLeft: `3px solid ${global_primary_color_100.var}`
     };
     return (
       <tr
-        {...props}
         ref={trRef as React.LegacyRef<HTMLTableRowElement>}
         className={css(className, isOddRow ? 'odd-row-class' : 'even-row-class', 'custom-static-class')}
         style={isOddRow ? customStyle : {}}

package/src/deprecated/components/Table/examples/LegacyTableSelectable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { headerCol } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 interface Repository {
   name: string;
@@ -96,7 +97,7 @@ export const LegacyTableSelectable: React.FunctionComponent = () => {
     <div>
       <Checkbox
         label="Can select all"
-        className="pf-v5-u-mb-lg"
+        className={spacing.mbLg}
         isChecked={canSelectAll}
         onChange={(_event, checked) => setCanSelectAll(checked)}
         aria-label="toggle select all checkbox"

package/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx

@@ -27,14 +27,10 @@ export const LegacyTableStripedCustomTr: React.FunctionComponent = () => {
     repo.lastCommit
   ]);
 
-  const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row, ...props }) => {
+  const customRowWrapper: TableProps['rowWrapper'] = ({ trRef, className, rowProps, row: _row }) => {
     const isOddRow = rowProps ? !!((rowProps.rowIndex + 1) % 2) : true;
     return (
-      <tr
-        {...props}
-        ref={trRef as React.LegacyRef<HTMLTableRowElement>}
-        className={css(className, isOddRow && 'pf-m-striped')}
-      />
+      <tr ref={trRef as React.LegacyRef<HTMLTableRowElement>} className={css(className, isOddRow && 'pf-m-striped')} />
     );
   };
 

package/src/deprecated/components/Table/examples/Table.md

@@ -32,6 +32,8 @@ import {
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import global_primary_color_100 from '@patternfly/react-tokens/dist/esm/global_primary_color_100';
 
 ## Table Columns
 

package/src/docs/demos/Table.md

@@ -20,7 +20,6 @@ SkipToContent,
 Breadcrumb,
 BreadcrumbItem,
 Page,
-PageSectionVariants,
 TextContent,
 Text,
 Divider } from '@patternfly/react-core';
@@ -47,7 +46,6 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 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';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
@@ -1468,7 +1466,7 @@ import {
   PageSection
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const TableEmptyState: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -1529,7 +1527,7 @@ import {
   PageSection,
   Spinner
 } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const LoadingStateDemo: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -1580,7 +1578,7 @@ import {
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const ErrorStateDemo: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>

package/src/docs/demos/table-demos/BulkSelect.jsx

@@ -14,7 +14,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const BulkSelectTableDemo = () => {

package/src/docs/demos/table-demos/ColumnManagement.jsx

@@ -28,7 +28,7 @@ import {
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper.js';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper.js';
 import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils';
 import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 

package/src/docs/demos/table-demos/Compact.jsx

@@ -17,7 +17,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const CompactTable = () => {

package/src/docs/demos/table-demos/CompoundExpansion.jsx

@@ -19,8 +19,9 @@ import {
 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 { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const CompoundExpandable = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -248,7 +249,7 @@ export const CompoundExpandable = () => {
                           <NestedItemsTable />
                         ) : (
                           <ExpandableRowContent>
-                            <div className="pf-v5-u-m-md">
+                            <div className={spacing.mMd}>
                               Expanded content for {repo.name}: {expandedCellKey} goes here!
                             </div>
                           </ExpandableRowContent>

package/src/docs/demos/table-demos/ExpandCollapseAll.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 const expandableColumns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Status'];
 

package/src/docs/demos/table-demos/SortableResponsive.jsx

@@ -17,7 +17,6 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   PageSection,
-  PageSectionVariants,
   Pagination,
   Select,
   SelectOption,
@@ -38,7 +37,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
@@ -231,7 +230,7 @@ export const ComposableTableSortable = () => {
   return (
     <React.Fragment>
       <DashboardWrapper>
-        <PageSection isWidthLimited variant={PageSectionVariants.light}>
+        <PageSection isWidthLimited>
           <TextContent>
             <Text component="h1">Table demos</Text>
             <Text component="p">

package/src/docs/demos/table-demos/StaticBottomPagination.jsx

@@ -17,7 +17,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const StaticBottomPagination = () => {

package/src/docs/demos/table-demos/StickyFirstColumn.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
 import { Card, PageSection } from '@patternfly/react-core';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const StickyFirstColumn = () => {
   const facts = Array.from(

package/src/docs/demos/table-demos/StickyHeader.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Card, Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/src/docs/demos/table-demos/sampleData';
 
 export const StickyHeader: React.FunctionComponent = () => {