@patternfly/react-table 6.0.0-prerelease.9 → 6.1.0-prerelease.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.0.0-prerelease.9",
+  "version": "6.1.0-prerelease.1",
   "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.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-prerelease.9",
-    "@patternfly/react-icons": "^6.0.0-prerelease.4",
-    "@patternfly/react-styles": "^6.0.0-prerelease.3",
-    "@patternfly/react-tokens": "^6.0.0-prerelease.3",
+    "@patternfly/react-core": "^6.1.0-prerelease.1",
+    "@patternfly/react-icons": "^6.1.0-prerelease.0",
+    "@patternfly/react-styles": "^6.1.0-prerelease.0",
+    "@patternfly/react-tokens": "^6.1.0-prerelease.0",
     "lodash": "^4.17.21",
     "tslib": "^2.7.0"
   },
@@ -51,5 +51,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "94fcd9103ffba23af7b15272afd7b9b7740dd3b5"
+  "gitHead": "07cc495ab53d6d3a0c10ccdd36d20b92ce800cb7"
 }

package/src/components/Table/EditableSelectInputCell.tsx

@@ -25,6 +25,8 @@ export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLEleme
   options?: React.ReactElement[];
   /** Flag indicating the select input is disabled */
   isDisabled?: boolean;
+  /** Flag indicating the toggle gets placeholder styles **/
+  isPlaceholder?: boolean;
   /** Current selected options to display as the read only value of the table cell */
   selections?: any | any[];
   /** Flag indicating the select menu is open */
@@ -42,17 +44,14 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
   onSelect = () => {},
   clearSelection,
   isOpen = false,
+  isPlaceholder = false,
   onToggle = () => {},
   selections = [''],
   options = [] as React.ReactElement[],
   props
 }: IEditableSelectInputCell) => {
-  const onSelectHandler = (
-    event: React.MouseEvent | React.ChangeEvent,
-    newValue: any | any[]
-    //    isPlaceholder: boolean
-  ) => {
-    onSelect(event, newValue, rowIndex, cellIndex);
+  const onSelectHandler = (event: React.MouseEvent | React.ChangeEvent, newValue: any | any[]) => {
+    onSelect(event, newValue, rowIndex, cellIndex, isPlaceholder);
   };
 
   const onClear = (event: React.MouseEvent) => {
@@ -61,16 +60,16 @@ export const EditableSelectInputCell: React.FunctionComponent<IEditableSelectInp
 
   const select = (
     <Select
-      {...props.editableSelectProps}
       onSelect={onSelectHandler}
       {...(clearSelection && { onClear })}
       isOpen={isOpen}
       selected={selections}
       toggle={(toggleRef: any) => (
-        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+        <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen} isPlaceholder={isPlaceholder}>
           {isOpen ? 'Expanded' : 'Collapsed'}
         </MenuToggle>
       )}
+      {...props.editableSelectProps}
     >
       <SelectList>{options}</SelectList>
     </Select>

package/src/components/Table/HeaderCellInfoWrapper.tsx

@@ -54,6 +54,7 @@ export const HeaderCellInfoWrapper: React.FunctionComponent<ColumnHelpWrapperPro
         <Tooltip content={info} {...tooltipProps}>
           <Button
             variant="plain"
+            hasNoPadding
             aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}
             icon={<HelpIcon />}
           />
@@ -62,6 +63,7 @@ export const HeaderCellInfoWrapper: React.FunctionComponent<ColumnHelpWrapperPro
         <Popover bodyContent={info} {...popoverProps}>
           <Button
             variant="plain"
+            hasNoPadding
             aria-label={ariaLabel || (typeof info === 'string' && info) || 'More info'}
             icon={<HelpIcon />}
           />

package/src/components/Table/SortColumn.tsx

@@ -2,10 +2,13 @@ import * as React from 'react';
 import LongArrowAltUpIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-up-icon';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import ArrowsAltVIcon from '@patternfly/react-icons/dist/esm/icons/arrows-alt-v-icon';
+import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import { TableText } from './TableText';
 import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
+import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
+import { FavoriteButtonProps } from './base/types';
 
 export enum SortByDirection {
   asc = 'asc',
@@ -21,6 +24,7 @@ export interface SortColumnProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   tooltip?: React.ReactNode;
   tooltipProps?: Omit<TooltipProps, 'content'>;
   tooltipHasDefaultBehavior?: boolean;
+  favoriteButtonProps?: FavoriteButtonProps;
 }
 
 export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
@@ -33,6 +37,7 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   tooltip,
   tooltipProps,
   tooltipHasDefaultBehavior,
+  favoriteButtonProps,
   ...props
 }: SortColumnProps) => {
   let SortedByIcon;
@@ -42,6 +47,29 @@ export const SortColumn: React.FunctionComponent<SortColumnProps> = ({
   } else {
     SortedByIcon = ArrowsAltVIcon;
   }
+
+  if (favoriteButtonProps) {
+    return (
+      <ActionList isIconList>
+        <ActionListItem>
+          <Button variant="plain" icon={<StarIcon />} {...favoriteButtonProps} />
+        </ActionListItem>
+        <ActionListItem>
+          <Button
+            variant="plain"
+            icon={
+              <span className={css(styles.tableSortIndicator)}>
+                <SortedByIcon />
+              </span>
+            }
+            onClick={(event) => onSort && onSort(event)}
+            {...props}
+          />
+        </ActionListItem>
+      </ActionList>
+    );
+  }
+
   return (
     <button
       {...props}

package/src/components/Table/TableTypes.tsx

@@ -109,6 +109,7 @@ export interface IColumn {
     allRowsExpanded?: boolean;
     isHeaderSelectDisabled?: boolean;
     onFavorite?: OnFavorite;
+    favoriteButtonProps?: ButtonProps;
   };
 }
 

package/src/components/Table/Th.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 accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 import { info, sortable, sortableFavorites, selectable, collapsible, cellWidth, Visibility, classNames } from './utils';
 import { ThInfoType, ThSelectType, ThExpandType, ThSortType, formatterValueType } from './base/types';
 import { mergeProps } from './base/merge-props';
@@ -113,15 +114,18 @@ const ThBase: React.FunctionComponent<ThProps> = ({
     }
     onMouseEnterProp(event);
   };
+
   let sortParams = null;
   if (sort) {
     if (sort.isFavorites) {
       sortParams = sortableFavorites({
-        onSort: sort?.onSort,
+        onSort: sort.onSort,
         columnIndex: sort.columnIndex,
         sortBy: sort.sortBy,
         tooltip: tooltip as string,
-        tooltipProps
+        tooltipProps,
+        ariaLabel: sort['aria-label'],
+        favoriteButtonProps: sort.favoriteButtonProps
       })();
     } else {
       sortParams = sortable(children as IFormatterValueType, {
@@ -137,6 +141,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       });
     }
   }
+
   const selectParams = select
     ? selectable(children as IFormatterValueType, {
         rowData: {
@@ -217,6 +222,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
         hasRightBorder && scrollStyles.modifiers.borderRight,
         hasLeftBorder && scrollStyles.modifiers.borderLeft,
         modifier && styles.modifiers[modifier as 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap'],
+        sort?.favoriteButtonProps?.favorited && styles.modifiers.favorited,
         mergedClassName
       )}
       {...mergedProps}
@@ -230,7 +236,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
         } as React.CSSProperties
       })}
     >
-      {transformedChildren || (screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>)}
+      {transformedChildren ||
+        (screenReaderText && <span className={accessibilityStyles.screenReader}>{screenReaderText}</span>)}
     </MergedComponent>
   );
 

package/src/components/Table/base/types.tsx

@@ -6,9 +6,7 @@
  */
 
 import * as React from 'react';
-import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
-import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover';
-import { SelectProps } from '@patternfly/react-core/dist/esm/components/Select';
+import { ButtonProps, PopoverProps, SelectProps, TooltipProps } from '@patternfly/react-core';
 import { Table } from '../Table';
 import { Thead } from '../Thead';
 import { Tbody } from '../Tbody';
@@ -156,6 +154,11 @@ export interface ThInfoType {
   className?: string;
 }
 
+export interface FavoriteButtonProps extends ButtonProps {
+  /** Flag if the button is favorited. */
+  favorited?: boolean;
+}
+
 export interface ThSortType {
   /** Wraps the content in a button and adds a sort icon - Click callback on the sortable cell */
   onSort?: OnSort;
@@ -163,8 +166,12 @@ export interface ThSortType {
   sortBy: ISortBy;
   /** The column index */
   columnIndex: number;
+  /** Adds accessible text to the sort button. */
+  'aria-label'?: string;
   /** True to make this a favoritable sorting cell */
   isFavorites?: boolean;
+  /** Props for the favorite button (only for favoritable cell). */
+  favoriteButtonProps?: FavoriteButtonProps;
 }
 
 export interface ThSelectType {

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

@@ -1,6 +1,6 @@
 ---
 id: Table
-cssPrefix: pf-c-table
+cssPrefix: pf-v6-c-table
 section: components
 propComponents:
   [
@@ -60,7 +60,7 @@ 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 inlineEditStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
-import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
+import t_global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_secondary_default';
 
 ## Table examples
 
@@ -172,6 +172,7 @@ This selectable rows feature is intended for use when a table is used to present
 This example shows a table with editable rows. Cells in a row can be edited after clicking on the edit icon.
 
 ```ts file="TableEditable.tsx"
+
 ```
 
 ### Actions

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

@@ -28,10 +28,10 @@ export const TableFavoritable: React.FunctionComponent = () => {
   // Index of the currently sorted column
   // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
   // as the identifier of the sorted column. See the "Compound expandable" example.
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+  const [activeSortIndex, setActiveSortIndex] = React.useState<number>();
 
   // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc'>();
 
   // Favorite state is similar to selection state, see Selectable with checkbox.
   const [favoriteRepoNames, setFavoriteRepoNames] = React.useState<string[]>([]);
@@ -42,6 +42,9 @@ export const TableFavoritable: React.FunctionComponent = () => {
     });
   const isRepoFavorited = (repo: Repository) => favoriteRepoNames.includes(repo.name);
 
+  // State of the header cell to favorite / unfavorite all rows
+  const [headerFavorited, setHeaderFavorited] = React.useState(false);
+
   // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
   // In this example we only deal with booleans here because we only sort on the favorites column.
   // For more complex sorting, see Sortable.
@@ -55,7 +58,7 @@ export const TableFavoritable: React.FunctionComponent = () => {
   // Note that we perform the sort as part of the component's render logic and not in onSort.
   // We shouldn't store the list of data in state because we don't want to have to sync that with props.
   let sortedRepositories = repositories;
-  if (activeSortIndex !== null) {
+  if (activeSortIndex !== undefined) {
     sortedRepositories = repositories.sort((a, b) => {
       const aValue = getSortableRowValues(a)[activeSortIndex];
       const bValue = getSortableRowValues(b)[activeSortIndex];
@@ -80,7 +83,16 @@ export const TableFavoritable: React.FunctionComponent = () => {
       setActiveSortIndex(index);
       setActiveSortDirection(direction);
     },
-    columnIndex
+    'aria-label': 'Sort favorites',
+    columnIndex,
+    favoriteButtonProps: {
+      favorited: headerFavorited,
+      onClick: (_event) => {
+        repositories.forEach((repo) => setRepoFavorited(repo, !headerFavorited));
+        setHeaderFavorited(!headerFavorited);
+      },
+      'aria-label': headerFavorited ? 'Unfavorite all' : 'Favorite all'
+    }
   });
 
   return (
@@ -101,7 +113,20 @@ export const TableFavoritable: React.FunctionComponent = () => {
             <Td
               favorites={{
                 isFavorited: isRepoFavorited(repo),
-                onFavorite: (_event, isFavoriting) => setRepoFavorited(repo, isFavoriting),
+                onFavorite: (_event, isFavoriting) => {
+                  setRepoFavorited(repo, isFavoriting);
+
+                  if (
+                    isFavoriting &&
+                    repositories.filter((r) => r !== repo).every((r) => favoriteRepoNames.includes(r.name))
+                  ) {
+                    setHeaderFavorited(true);
+                  }
+
+                  if (!isFavoriting && favoriteRepoNames.length === 1 && favoriteRepoNames.includes(repo.name)) {
+                    setHeaderFavorited(false);
+                  }
+                },
                 rowIndex
               }}
             />

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 /* eslint-disable camelcase */
-import global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/global_background_color_secondary_default';
+import t_global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_secondary_default';
 
 interface Repository {
   name: string;
@@ -67,7 +67,7 @@ export const TableMisc: React.FunctionComponent = () => {
         {repositories.map((repo, rowIndex) => {
           const isOddRow = (rowIndex + 1) % 2;
           const customStyle = {
-            backgroundColor: global_background_color_secondary_default.var
+            backgroundColor: t_global_background_color_secondary_default.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/utils/decorators/sortable.tsx

@@ -8,12 +8,13 @@ import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 export const sortableFavorites = (sort: any) => () =>
   sortable(<StarIcon aria-hidden />, {
     columnIndex: sort.columnIndex,
-    className: styles.modifiers.favorite,
-    ariaLabel: 'Sort favorites',
+    className: styles.tableFavorite,
+    ariaLabel: sort.ariaLabel ?? 'Sort favorites',
     column: {
       extraParams: {
         sortBy: sort.sortBy,
-        onSort: sort?.onSort
+        onSort: sort.onSort,
+        favoriteButtonProps: sort.favoriteButtonProps
       }
     },
     tooltip: sort.tooltip,
@@ -26,7 +27,7 @@ export const sortable: ITransform = (
   { columnIndex, column, property, className, ariaLabel, tooltip, tooltipProps, tooltipHasDefaultBehavior }: IExtra
 ) => {
   const {
-    extraParams: { sortBy, onSort }
+    extraParams: { sortBy, onSort, favoriteButtonProps }
   } = column;
 
   const extraData = {
@@ -52,7 +53,7 @@ export const sortable: ITransform = (
 
   return {
     className: css(styles.tableSort, isSortedBy && styles.modifiers.selected, className),
-    'aria-sort': isSortedBy ? `${sortBy.direction}ending` : 'none',
+    ...(isSortedBy && { 'aria-sort': `${sortBy.direction}ending` }),
     children: (
       <SortColumn
         isSortedBy={isSortedBy}
@@ -62,6 +63,7 @@ export const sortable: ITransform = (
         tooltip={tooltip}
         tooltipProps={tooltipProps}
         tooltipHasDefaultBehavior={tooltipHasDefaultBehavior}
+        favoriteButtonProps={favoriteButtonProps}
       >
         {label as React.ReactNode}
       </SortColumn>

package/src/demos/examples/TableBulkSelect.tsx

@@ -113,21 +113,19 @@ export const TableBulkSelect: React.FunctionComponent = () => {
             isExpanded={isBulkSelectDropdownOpen}
             onClick={() => setIsBulkSelectDropdownOpen(!isBulkSelectDropdownOpen)}
             aria-label="Select cards"
-            splitButtonOptions={{
-              items: [
-                <MenuToggleCheckbox
-                  id="split-dropdown-checkbox"
-                  key="split-dropdown-checkbox"
-                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
-                  isChecked={isChecked}
-                  onClick={() => {
-                    anySelected ? setSelectedRows([]) : selectAllRows(bulkSelection !== 'all');
-                  }}
-                >
-                  {numSelected !== 0 && `${numSelected} selected`}
-                </MenuToggleCheckbox>
-              ]
-            }}
+            splitButtonItems={[
+              <MenuToggleCheckbox
+                id="split-dropdown-checkbox"
+                key="split-dropdown-checkbox"
+                aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
+                isChecked={isChecked}
+                onClick={() => {
+                  anySelected ? setSelectedRows([]) : selectAllRows(bulkSelection !== 'all');
+                }}
+              >
+                {numSelected !== 0 && `${numSelected} selected`}
+              </MenuToggleCheckbox>
+            ]}
           ></MenuToggle>
         )}
       >

package/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -20,7 +20,6 @@ exports[`Table Actions table 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -861,7 +860,6 @@ exports[`Table Cell header table 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -1433,7 +1431,6 @@ exports[`Table Collapsible nested table 1`] = `
           tabindex="-1"
         />
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="1"
           data-label="Header cell"
@@ -2198,7 +2195,6 @@ exports[`Table Collapsible table 1`] = `
           tabindex="-1"
         />
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="1"
           data-label="Header cell"
@@ -4234,7 +4230,6 @@ exports[`Table Selectable table 1`] = `
           </label>
         </th>
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="1"
           data-label="Header cell"
@@ -4927,7 +4922,6 @@ exports[`Table Selectable table with Radio 1`] = `
           tabindex="-1"
         />
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="1"
           data-label="Header cell"
@@ -5717,7 +5711,6 @@ exports[`Table Simple Actions table 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -6640,7 +6633,6 @@ exports[`Table Table variants Breakpoint -  1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -7169,7 +7161,6 @@ exports[`Table Table variants Breakpoint - grid 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -7698,7 +7689,6 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -8227,7 +8217,6 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -8756,7 +8745,6 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -9285,7 +9273,6 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -9814,7 +9801,6 @@ exports[`Table Table variants Size - compact 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -10908,7 +10894,6 @@ exports[`Table simple Row click table 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"
@@ -11437,7 +11422,6 @@ exports[`Table simple Sortable table 1`] = `
         data-ouia-safe="true"
       >
         <th
-          aria-sort="none"
           class="pf-v6-c-table__th pf-v6-c-table__sort"
           data-key="0"
           data-label="Header cell"

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

@@ -2,7 +2,7 @@ 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_color_brand_default from '@patternfly/react-tokens/dist/esm/global_color_brand_default';
+import t_global_color_brand_default from '@patternfly/react-tokens/dist/esm/t_global_color_brand_default';
 
 interface Repository {
   name: string;
@@ -32,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 ${global_color_brand_default.var}`
+      borderLeft: `3px solid ${t_global_color_brand_default.var}`
     };
     return (
       <tr