fix(table): add pf-m-small to expandable toggle on small tables (#11947)

* fix(table): add pf-m-small to expandable toggle on small tables

* fix(table): add pf-m-small to expandable toggle on Th in compact table

* fix(table): add sm button variant in place of hardcode classname

Author: evwilkin

packages/react-table/src/components/Table/CollapseColumn.tsx

@@ -11,19 +11,22 @@ export interface CollapseColumnProps {
   onToggle?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   isOpen?: boolean;
   'aria-label'?: string;
+  variant?: 'compact';
 }
 
 export const CollapseColumn: React.FunctionComponent<CollapseColumnProps> = ({
   className = '' as string,
   children = null as React.ReactNode,
   isOpen,
   onToggle,
+  variant,
   ...props
 }: CollapseColumnProps) => (
   <Fragment>
     {isOpen !== undefined && (
       <Button
         className={css(className, isOpen && styles.modifiers.expanded)}
+        size={variant === 'compact' ? 'sm' : undefined}
         {...props}
         variant="plain"
         aria-label={props['aria-label'] || 'Details'}

packages/react-table/src/components/Table/Table.tsx

@@ -78,11 +78,13 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
 interface TableContextProps {
   registerSelectableRow?: () => void;
   hasAnimations?: boolean;
+  variant?: TableVariant | 'compact';
 }
 
 export const TableContext = createContext<TableContextProps>({
   registerSelectableRow: () => {},
-  hasAnimations: false
+  hasAnimations: false,
+  variant: undefined
 });
 
 const TableBase: React.FunctionComponent<TableProps> = ({
@@ -204,7 +206,7 @@ const TableBase: React.FunctionComponent<TableProps> = ({
   };
 
   return (
-    <TableContext.Provider value={{ registerSelectableRow, hasAnimations }}>
+    <TableContext.Provider value={{ registerSelectableRow, hasAnimations, variant }}>
       <table
         aria-label={ariaLabel}
         role={role}

packages/react-table/src/components/Table/TableTypes.tsx

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

packages/react-table/src/components/Table/Td.tsx

@@ -182,6 +182,9 @@ const TdBase: React.FunctionComponent<TdProps> = ({
         }
       })
     : null;
+
+  const { hasAnimations, variant } = useContext(TableContext);
+
   const expandableParams =
     expand !== null
       ? collapsible(null, {
@@ -193,13 +196,12 @@ const TdBase: React.FunctionComponent<TdProps> = ({
           column: {
             extraParams: {
               onCollapse: expand?.onToggle,
-              expandId: expand?.expandId
+              expandId: expand?.expandId,
+              variant
             }
           }
         })
       : null;
-
-  const { hasAnimations } = useContext(TableContext);
   const updateAnimationClass = () => {
     const ancestorControlRow = (cellRef as React.RefObject<HTMLElement | null>)?.current?.closest(
       `.${styles.tableTr}.${styles.tableControlRow}`

packages/react-table/src/components/Table/Th.tsx

@@ -1,4 +1,4 @@
-import { createRef, forwardRef, useEffect, useState } from 'react';
+import { createRef, forwardRef, useEffect, useState, useContext } 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';
@@ -8,7 +8,7 @@ import { ThInfoType, ThSelectType, ThExpandType, ThSortType, formatterValueType
 import { mergeProps } from './base/merge-props';
 import { IVisibility } from './utils/decorators/classNames';
 import { Tooltip, TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip';
-import { BaseCellProps } from './Table';
+import { BaseCellProps, TableContext } from './Table';
 import { IFormatterValueType, IColumn } from './TableTypes';
 import cssStickyCellMinWidth from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_MinWidth';
 import cssStickyCellInlineStart from '@patternfly/react-tokens/dist/esm/c_table__sticky_cell_InsetInlineStart';
@@ -96,6 +96,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
   'aria-label': ariaLabel,
   ...props
 }: ThProps) => {
+  const { variant } = useContext(TableContext);
+
   if (!children && !screenReaderText && !ariaLabel) {
     // eslint-disable-next-line no-console
     console.warn(
@@ -167,7 +169,8 @@ const ThBase: React.FunctionComponent<ThProps> = ({
           extraParams: {
             onCollapse: collapse?.onToggle,
             allRowsExpanded: !collapse.areAllExpanded,
-            collapseAllAriaLabel: ''
+            collapseAllAriaLabel: '',
+            variant
           }
         }
       })

packages/react-table/src/components/Table/__tests__/Table.test.tsx

@@ -1,5 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { Table } from '../Table';
+import { Td } from '../Td';
+import { Th } from '../Th';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
 test('Renders without children', () => {
@@ -60,3 +62,63 @@ test('Matches snapshot without children', () => {
 
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders expandable toggle button with pf-m-small class when variant is compact', () => {
+  render(
+    <Table variant="compact" isExpandable aria-label="Test table">
+      <tbody>
+        <tr>
+          <Td
+            expand={{
+              rowIndex: 0,
+              isExpanded: false,
+              onToggle: () => {}
+            }}
+          />
+          <Td>Test content</Td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+
+  const toggleButton = screen.getByRole('button', { name: 'Details' });
+  expect(toggleButton).toHaveClass('pf-m-small');
+});
+
+test('Renders expandable toggle button in Th with pf-m-small class when variant is compact', () => {
+  render(
+    <Table variant="compact" isExpandable aria-label="Test table">
+      <thead>
+        <tr>
+          <Th
+            expand={{
+              areAllExpanded: false,
+              collapseAllAriaLabel: 'Expand all',
+              onToggle: () => {}
+            }}
+            aria-label="Row expansion"
+          />
+          <Th>Name</Th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <Td
+            expand={{
+              rowIndex: 0,
+              isExpanded: false,
+              onToggle: () => {}
+            }}
+          />
+          <td>Test content</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+
+  const toggleButtons = screen.getAllByRole('button');
+  expect(toggleButtons).toHaveLength(2); // One in Th, one in Td
+  toggleButtons.forEach((button) => {
+    expect(button).toHaveClass('pf-m-small');
+  });
+});

packages/react-table/src/components/Table/utils/decorators/collapsible.tsx

@@ -14,7 +14,8 @@ export const collapsible: IFormatter = (
       rowLabeledBy = 'simple-node',
       expandId = 'expand-toggle',
       allRowsExpanded,
-      collapseAllAriaLabel
+      collapseAllAriaLabel,
+      variant
     }
   } = column;
   const extraData = {
@@ -55,6 +56,7 @@ export const collapsible: IFormatter = (
         aria-labelledby={`${rowLabeledBy}${rowId} ${expandId}${rowId}`}
         onToggle={onToggle}
         id={expandId + rowId}
+        variant={variant}
         {...customProps}
       >
         {value as React.ReactNode}