feat: Adds verticalAlign property to table cells (#2488)

Co-authored-by: Katie George <[email protected]>

pages/table/permutations.page.tsx

@@ -3,7 +3,9 @@
 import React from 'react';
 import range from 'lodash/range';
 
+import FormField from '~components/form-field';
 import Header from '~components/header';
+import Input from '~components/input';
 import Link from '~components/link';
 import PropertyFilter from '~components/property-filter';
 import Table, { TableProps } from '~components/table';
@@ -58,6 +60,31 @@ const PROPERTY_COLUMNS: TableProps.ColumnDefinition<any>[] = [
   },
 ];
 
+const VERTICAL_ALIGN_COLUMNS: TableProps.ColumnDefinition<any>[] = [
+  {
+    id: 'variable',
+    header: 'Property',
+    cell: item => <Input ariaLabel="vertical align input" readOnly={true} value={item.number} />,
+    verticalAlign: 'top',
+  },
+  {
+    id: 'type',
+    header: 'Type',
+    cell: item => (
+      <FormField errorText={`${item.text} error text`} i18nStrings={{ errorIconAriaLabel: 'Error' }}>
+        <Input ariaLabel="vertical align error input" readOnly={true} value={item.text} />
+      </FormField>
+    ),
+    verticalAlign: 'top',
+  },
+  {
+    id: 'type-2',
+    header: 'Value',
+    cell: item => item.text,
+    verticalAlign: 'top',
+  },
+];
+
 /* eslint-disable react/jsx-key */
 const permutations = createPermutations<TableProps>([
   {
@@ -282,6 +309,11 @@ const permutations = createPermutations<TableProps>([
     preferences: ['preferences'],
     items: [createSimpleItems(3)],
   },
+  {
+    columnDefinitions: [VERTICAL_ALIGN_COLUMNS],
+    items: [createSimpleItems(3)],
+    variant: [undefined, 'full-page'],
+  },
 ]);
 /* eslint-enable react/jsx-key */
 

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -14708,7 +14708,8 @@ add a meaningful description to the whole selection.
        The \`cellContext\` object contains the following properties:
     * \`cellContext.currentValue\` - State to keep track of a value in input fields while editing.
     * \`cellContext.setValue\` - Function to update \`currentValue\`. This should be called when the value in input field changes.
-* \`isRowHeader\` (boolean) - Specifies that cells in this column should be used as row headers.",
+* \`isRowHeader\` (boolean) - Specifies that cells in this column should be used as row headers.
+* \`verticalAlign\` ('middle' | 'top') - Determines the alignment of the content in the table cell.",
       "name": "columnDefinitions",
       "optional": false,
       "type": "ReadonlyArray<TableProps.ColumnDefinition<T>>",

src/table/__tests__/body-cell.test.tsx

@@ -350,4 +350,17 @@ describe('TableBodyCell', () => {
     setCurrentTarget(null);
     expect(tableCell).not.toHaveAttribute('tabIndex');
   });
+
+  describe('vertical align', () => {
+    const verticalAlignTopClass = `.${styles['body-cell-align-top']}`;
+    test('verticalAlign style is not present by default', () => {
+      const { container } = render(<TestComponent />);
+      expect(container.querySelector(verticalAlignTopClass)!).not.toBeInTheDocument();
+    });
+
+    test('verticalAlign style works as expected when defined', () => {
+      const { container } = render(<TestComponent verticalAlign="top" />);
+      expect(container.querySelector(verticalAlignTopClass)!).toBeInTheDocument();
+    });
+  });
 });

src/table/body-cell/styles.scss

@@ -176,6 +176,9 @@ $cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
   &:first-child:not(.is-visual-refresh) {
     @include cell-padding-inline-start($cell-edge-horizontal-padding);
   }
+  &-align-top {
+    vertical-align: top;
+  }
   &-first-row {
     border-block-start: $border-placeholder;
   }

src/table/body-cell/td-element.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { ExpandToggleButton } from '../expandable-rows/expand-toggle-button';
+import { TableProps } from '../interfaces.js';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
 import { getTableCellRoleProps, TableRole } from '../table-role';
 import { getStickyClassNames } from '../utils';
@@ -45,6 +46,7 @@ export interface TableTdElementProps {
   onExpandableItemToggle?: () => void;
   expandButtonLabel?: string;
   collapseButtonLabel?: string;
+  verticalAlign?: TableProps.VerticalAlign;
 }
 
 export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElementProps>(
@@ -79,6 +81,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
       onExpandableItemToggle,
       expandButtonLabel,
       collapseButtonLabel,
+      verticalAlign,
     },
     ref
   ) => {
@@ -115,6 +118,7 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           hasFooter && styles['has-footer'],
           level !== undefined && styles['body-cell-expandable'],
           level !== undefined && styles[`expandable-level-${getLevelClassSuffix(level)}`],
+          verticalAlign === 'top' && styles['body-cell-align-top'],
           stickyStyles.className
         )}
         onClick={onClick}

src/table/interfaces.tsx

@@ -106,6 +106,7 @@ export interface TableProps<T = any> extends BaseComponentProps {
    *     * `cellContext.currentValue` - State to keep track of a value in input fields while editing.
    *     * `cellContext.setValue` - Function to update `currentValue`. This should be called when the value in input field changes.
    * * `isRowHeader` (boolean) - Specifies that cells in this column should be used as row headers.
+   * * `verticalAlign` ('middle' | 'top') - Determines the alignment of the content in the table cell.
    */
   columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>;
   /**
@@ -427,6 +428,7 @@ export namespace TableProps {
     maxWidth?: number | string;
     editConfig?: EditConfig<ItemType>;
     isRowHeader?: boolean;
+    verticalAlign?: VerticalAlign;
     cell(item: ItemType): React.ReactNode;
   } & SortingColumn<ItemType>;
 
@@ -435,6 +437,7 @@ export namespace TableProps {
     last?: number;
   }
 
+  export type VerticalAlign = 'middle' | 'top';
   export type SelectionType = 'single' | 'multi';
   export type Variant = 'container' | 'embedded' | 'borderless' | 'stacked' | 'full-page';
   export interface SelectionState<T> {

src/table/internal.tsx

@@ -579,6 +579,7 @@ const InternalTable = React.forwardRef(
                                     submitEdit={cellEditing.submitEdit}
                                     columnId={column.id ?? colIndex}
                                     colIndex={colIndex + colIndexOffset}
+                                    verticalAlign={column.verticalAlign}
                                     {...cellExpandableProps}
                                   />
                                 );