Table column vertical alignment

packages/table/src/Cell/Cell.styles.ts

@@ -1,6 +1,8 @@
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 
+import { VerticalAlignment } from '../Table/Table.types';
+
 import { Align } from './Cell.types';
 
 /** The base left & right padding in the table */
@@ -67,10 +69,12 @@ export const getCellContainerStyles = (align: Align = 'left') => css`
   text-align: ${align};
 `;
 
-export const baseCellStyles = css`
+export const getBaseCellStyles = (
+  verticalAlignment: VerticalAlignment = VerticalAlignment.Top,
+) => css`
   padding: 0 ${spacing[200]}px;
   overflow: hidden;
-  vertical-align: top;
+  vertical-align: ${verticalAlignment};
 
   &:focus-visible {
     box-shadow: inset;
@@ -87,13 +91,13 @@ export const cellInnerStyles = css`
   min-width: 100%;
 `;
 
-export const getCellEllipsisStyles = (shouldTruncate: boolean) => css`
-  ${shouldTruncate &&
-  css`
-    flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    contain: inline-size; // 🤯
-  `}
-`;
+export const getCellEllipsisStyles = (shouldTruncate: boolean) =>
+  cx({
+    [css`
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      contain: inline-size; // 🤯
+    `]: shouldTruncate,
+  });

packages/table/src/Cell/HeaderCell/HeaderCell.styles.ts

@@ -2,7 +2,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 
 import {
-  baseCellStyles,
+  getBaseCellStyles,
   getCellContainerStyles,
   getCellPadding,
 } from '../Cell.styles';
@@ -14,7 +14,7 @@ export const headerCellContentStyles = css`
 
 export const getBaseHeaderCellStyles = (size: number, isSelectable?: boolean) =>
   cx(
-    baseCellStyles,
+    getBaseCellStyles(),
     css`
       &:first-of-type {
         ${getCellPadding({ depth: 0, isExpandable: false, isSelectable })}

packages/table/src/Cell/InternalCellBase.tsx

@@ -3,10 +3,11 @@ import React, { forwardRef } from 'react';
 import { cx } from '@leafygreen-ui/emotion';
 
 import { LGIDS } from '../constants';
+import { useTableContext } from '../TableContext';
 
 import {
-  baseCellStyles,
   cellInnerStyles,
+  getBaseCellStyles,
   getCellContainerStyles,
 } from './Cell.styles';
 import { InternalCellProps } from './Cell.types';
@@ -25,10 +26,11 @@ const InternalCellBase = forwardRef<HTMLTableCellElement, InternalCellProps>(
     }: InternalCellProps,
     fwdRref,
   ) => {
+    const { verticalAlignment } = useTableContext();
     return (
       <td
         data-lgid={LGIDS.cell}
-        className={cx(baseCellStyles, className)}
+        className={cx(getBaseCellStyles(verticalAlignment), className)}
         ref={fwdRref}
         {...rest}
       >

packages/table/src/Row/Row.stories.tsx

@@ -10,6 +10,7 @@ import {
 import { StoryFn } from '@storybook/react';
 
 import Button from '@leafygreen-ui/button';
+import { css } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 
@@ -33,21 +34,22 @@ import {
   RowProps,
 } from '..';
 
-// TODO: UPDATE ME
-
 const meta: StoryMetaType<typeof Row> = {
   title: 'Components/Table/Row',
   component: Row,
   argTypes: {
-    virtualRow: { control: 'none' },
-    row: { control: 'none' },
-    className: { control: 'none' },
     disabled: { control: 'boolean' },
   },
   parameters: {
     default: null,
     controls: {
-      exclude: [...storybookExcludedControlParams, 'ref', 'children'],
+      exclude: [
+        ...storybookExcludedControlParams,
+        'ref',
+        'children',
+        'row',
+        'virtualRow',
+      ],
     },
     chromatic: {
       disableSnapshot: true,
@@ -61,18 +63,45 @@ const meta: StoryMetaType<typeof Row> = {
       combineArgs: {
         darkMode: [false, true],
         disabled: [false, true],
+        // @ts-ignore - this is a table prop
+        shouldTruncate: [false, true],
+        verticalAlignment: ['top', 'center'],
       },
-      args: {
-        children: makeData(false, 1).map(rowData =>
-          Object.values(rowData).map(c => <Cell>{c}</Cell>),
-        ),
-      },
+      excludeCombinations: [
+        {
+          // @ts-ignore - this is a table prop
+          shouldTruncate: true,
+          verticalAlignment: 'center',
+        },
+      ],
       decorator: (Instance, ctx) => {
         return (
           <LeafyGreenProvider darkMode={ctx?.args.darkMode}>
-            <Table>
+            <Table
+              shouldTruncate={ctx?.args.shouldTruncate}
+              verticalAlignment={ctx?.args.verticalAlignment}
+            >
               <TableBody>
-                <Instance />
+                <Instance>
+                  <Cell
+                    className={css`
+                      width: 60px;
+                    `}
+                  >
+                    1
+                  </Cell>
+                  <Cell
+                    className={css`
+                      width: 200px;
+                    `}
+                  >
+                    Est mollitia laborum dolores dolorem corporis explicabo
+                    nobis enim omnis. Minima excepturi accusantium iure culpa.
+                  </Cell>
+                  <Cell>MongoDB</Cell>
+                  <Cell>7.85</Cell>
+                  <Cell>Complicated</Cell>
+                </Instance>
               </TableBody>
             </Table>
           </LeafyGreenProvider>
@@ -242,7 +271,6 @@ DisabledClickableRows.args = {
 export const DisabledSelectableRows: StoryFn<
   RowProps<Person> & DarkModeProps
 > = ({ darkMode, ...args }: DarkModeProps & RowProps<Person>) => {
-  const tableContainerRef = React.useRef<HTMLDivElement>(null);
   const data = React.useState(() => makeData(false, 100))[0];
   const [rowSelection, setRowSelection] = React.useState({});
 
@@ -326,7 +354,6 @@ export const DisabledSelectableRows: StoryFn<
       <Table
         darkMode={darkMode}
         table={table}
-        ref={tableContainerRef}
         data-total-rows={table.getRowModel().rows.length}
       >
         <TableHead>
@@ -371,4 +398,8 @@ DisabledSelectableRows.argTypes = {
   darkMode: storybookArgTypes.darkMode,
 };
 
+DisabledSelectableRows.args = {
+  disabled: true,
+};
+
 export const Generated = () => <></>;

packages/table/src/Table.stories.tsx

@@ -12,6 +12,7 @@ import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import Pagination, { PaginationProps } from '@leafygreen-ui/pagination';
 
+import { VerticalAlignment } from './Table/Table.types';
 import {
   makeData,
   makeKitchenSinkData,
@@ -42,7 +43,18 @@ const meta: StoryMetaType<typeof Table> = {
   title: 'Components/Table',
   component: Table,
   argTypes: {
-    shouldAlternateRowColor: { control: 'boolean' },
+    shouldAlternateRowColor: { control: 'boolean', defaultValue: false },
+    shouldTruncate: { control: 'boolean', defaultValue: true },
+    verticalAlignment: {
+      control: { type: 'radio' },
+      options: VerticalAlignment,
+      defaultValue: VerticalAlignment.Top,
+    },
+  },
+  args: {
+    verticalAlignment: VerticalAlignment.Top,
+    shouldTruncate: true,
+    shouldAlternateRowColor: false,
   },
   parameters: {
     default: 'LiveExample',
@@ -220,12 +232,6 @@ export const LiveExample: StoryFn<StoryTableProps> = args => {
   );
 };
 
-LiveExample.argTypes = {
-  shouldAlternateRowColor: {
-    control: 'none',
-  },
-};
-
 export const HundredsOfRows: StoryFn<StoryTableProps> = args => {
   const tableContainerRef = React.useRef<HTMLDivElement>(null);
   const [data] = useState(() => makeKitchenSinkData(500));
@@ -353,18 +359,17 @@ export const HundredsOfRows: StoryFn<StoryTableProps> = args => {
   );
 };
 
-HundredsOfRows.argTypes = {
-  shouldAlternateRowColor: {
-    control: 'none',
-  },
-};
-
 HundredsOfRows.parameters = {
   chromatic: {
     disableSnapshots: true,
   },
 };
 
+export const NoTruncation = LiveExample.bind({});
+NoTruncation.args = {
+  shouldTruncate: false,
+};
+
 export const Basic = Template.bind({});
 
 export const ZebraStripes = Template.bind({});

packages/table/src/Table/Table.tsx

@@ -17,19 +17,20 @@ import {
   getTableStyles,
   tableClassName,
 } from './Table.styles';
-import { TableProps } from './Table.types';
+import { TableProps, VerticalAlignment } from './Table.types';
 
 // Inferred generic type from component gets used in place of `any`
 const Table = forwardRef<HTMLDivElement, TableProps<any>>(
   <T extends LGRowData>(
     {
+      table,
       children,
       className,
+      verticalAlignment = VerticalAlignment.Top,
       shouldAlternateRowColor = false,
       shouldTruncate = true,
       baseFontSize: baseFontSizeProp,
       darkMode: darkModeProp,
-      table,
       'data-lgid': lgidProp = LGIDS.root,
       ...rest
     }: TableProps<T>,
@@ -67,6 +68,7 @@ const Table = forwardRef<HTMLDivElement, TableProps<any>>(
           isSelectable={isSelectable}
           shouldTruncate={shouldTruncate}
           virtualTable={virtualTable}
+          verticalAlignment={verticalAlignment}
         >
           <table
             className={cx(tableClassName, getTableStyles(theme, baseFontSize))}

packages/table/src/Table/Table.types.ts

@@ -4,6 +4,14 @@ import { BaseFontSize } from '@leafygreen-ui/tokens';
 import { LeafyGreenTable, LGRowData } from '../useLeafyGreenTable';
 import { LeafyGreenVirtualTable } from '../useLeafyGreenVirtualTable/useLeafyGreenVirtualTable.types';
 
+export const VerticalAlignment = {
+  Top: 'top',
+  Middle: 'middle',
+} as const;
+
+export type VerticalAlignment =
+  (typeof VerticalAlignment)[keyof typeof VerticalAlignment];
+
 export interface TableProps<T extends LGRowData>
   extends HTMLElementProps<'table'>,
     DarkModeProps,
@@ -30,4 +38,10 @@ export interface TableProps<T extends LGRowData>
    * @default true
    */
   shouldTruncate?: boolean;
+
+  /**
+   * When rows are not truncated, this will determine if cells should be top or middle aligned
+   * @default 'top'
+   */
+  verticalAlignment?: VerticalAlignment;
 }