fix: Table row height is determined by cells (#25717)

* fix: Table row height is determined by cells Table rows no longer determine the row height. The height styles are set of each table cell. This allows for better flexibility and fixes a bug where table header cell height should be different from other cells. Addresses #25706 * changefile * update md
microsoft · Nov 21, 2022 · 3ca7917 · 3ca7917
1 parent 1327146
commit 3ca7917
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 29 deletions.
diff --git a/change/@fluentui-react-table-6c92019b-b4d2-4482-bf0c-e3564c2de0f0.json b/change/@fluentui-react-table-6c92019b-b4d2-4482-bf0c-e3564c2de0f0.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "fix: Table row height is determined by cells",
+ "packageName": "@fluentui/react-table",
+ "email": "lingfangao@hotmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md
@@ -333,7 +333,7 @@ export type TableCellSlots = {
 };
 
 // @public
-export type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements'>;
+export type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'>;
 
 // @public (undocumented)
 export const tableClassName = "fui-Table";

diff --git a/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts b/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts
@@ -13,4 +13,4 @@ export type TableCellProps = ComponentProps<TableCellSlots> & {};
 /**
  * State used in rendering TableCell
  */
-export type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements'>;
+export type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'>;
diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts
@@ -13,7 +13,7 @@ import { useTableContext } from '../../contexts/tableContext';
  * @param ref - reference to root HTMLElement of TableCell
  */
 export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {
- const { noNativeElements } = useTableContext();
+ const { noNativeElements, size } = useTableContext();
 
  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';
 
@@ -27,5 +27,6 @@ export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTML
  ...props,
  }),
  noNativeElements,
+ size,
  };
 };
diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts
@@ -13,6 +13,18 @@ const useTableLayoutStyles = makeStyles({
  display: 'table-cell',
  verticalAlign: 'middle',
  },
+
+ medium: {
+ height: '44px',
+ },
+
+ small: {
+ height: '34px',
+ },
+
+ smaller: {
+ height: '24px',
+ },
 });
 
 const useFlexLayoutStyles = makeStyles({
@@ -22,6 +34,18 @@ const useFlexLayoutStyles = makeStyles({
  alignItems: 'center',
  ...shorthands.flex(1, 1, '0px'),
  },
+
+ medium: {
+ minHeight: '44px',
+ },
+
+ small: {
+ minHeight: '34px',
+ },
+
+ smaller: {
+ minHeight: '24px',
+ },
 });
 
 /**
@@ -47,6 +71,7 @@ export const useTableCellStyles_unstable = (state: TableCellState): TableCellSta
  tableCellClassNames.root,
  styles.root,
  state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+ state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],
  state.root.className,
  );
  return state;

diff --git a/...s/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts b/...s/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts
@@ -64,7 +64,7 @@ const useStyles = makeStyles({
  height: '100%',
  alignItems: 'center',
  ...shorthands.gap(tokens.spacingHorizontalS),
- minHeight: '44px',
+ minHeight: '32px',
  ...shorthands.flex(1, 1, '0px'),
  },
  sortable: {

diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts
@@ -16,37 +16,13 @@ const useTableLayoutStyles = makeStyles({
  root: {
  display: 'table-row',
  },
-
- medium: {
- height: '44px',
- },
-
- small: {
- height: '34px',
- },
-
- smaller: {
- height: '24px',
- },
 });
 
 const useFlexLayoutStyles = makeStyles({
  root: {
  display: 'flex',
  alignItems: 'center',
  },
-
- medium: {
- minHeight: '44px',
- },
-
- small: {
- minHeight: '34px',
- },
-
- smaller: {
- minHeight: '24px',
- },
 });
 
 /**
@@ -172,7 +148,6 @@ export const useTableRowStyles_unstable = (state: TableRowState): TableRowState
  !isHeaderRow && styles.rootInteractive,
  styles[state.size],
  state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
- state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],
  styles[state.appearance],
  state.root.className,
  );