@patternfly/react-table 5.2.0-prerelease.4 → 5.2.0-prerelease.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "5.2.0-prerelease.4",
+  "version": "5.2.0-prerelease.6",
   "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",
@@ -39,10 +39,10 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.2.0-prerelease.4",
-    "@patternfly/react-icons": "^5.2.0-prerelease.2",
-    "@patternfly/react-styles": "^5.2.0-prerelease.1",
-    "@patternfly/react-tokens": "^5.2.0-prerelease.2",
+    "@patternfly/react-core": "^5.2.0-prerelease.6",
+    "@patternfly/react-icons": "^5.2.0-prerelease.3",
+    "@patternfly/react-styles": "^5.2.0-prerelease.2",
+    "@patternfly/react-tokens": "^5.2.0-prerelease.3",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0"
   },
@@ -54,5 +54,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d3ab21c492302f816f435e8f053adbb1014d283d"
+  "gitHead": "50f5acd4ba1650ceb3634d249777a840186e4ee4"
 }

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/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;
@@ -30,7 +32,7 @@ export const LegacyTableMisc: React.FunctionComponent = () => {
   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

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/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-demos/CompoundExpansion.jsx

@@ -21,6 +21,7 @@ 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/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>