feat(DatatableV2): center cell content vertically

The decision to top align was mostly to account for use cases where we are displaying a lot of content in a cell. In retrospect, this was optimising for undesirable use cases. Aligning content of varying sizes with top aligned cells is difficult and leads to visual artefacts in the most common use case when rows are not tall. By aligning to center we may create some issues in already problematic layouts, but will make working with most use cases easier. Closes UXD-1627
securityscorecard · Oct 4, 2024 · dc96843 · dc96843
1 parent f0f668c
commit dc96843
Show file tree

Hide file tree

Showing 45 changed files with 1 addition and 1 deletion.
diff --git a/...pshots/expected/components_DatatableV2_ColumnActions_Column Actions Enabled.png b/...pshots/expected/components_DatatableV2_ColumnActions_Column Actions Enabled.png
diff --git a/...ted/components_DatatableV2_ColumnActions_Disabled Column Actions Per Column.png b/...ted/components_DatatableV2_ColumnActions_Disabled Column Actions Per Column.png
diff --git a/...shots/expected/components_DatatableV2_ColumnActions_Disabled Column Actions.png b/...shots/expected/components_DatatableV2_ColumnActions_Disabled Column Actions.png
diff --git a/...cted/components_DatatableV2_ColumnActions_Enabled Column Actions Per Column.png b/...cted/components_DatatableV2_ColumnActions_Enabled Column Actions Per Column.png
diff --git a/...hots/expected/components_DatatableV2_ColumnOrdering_Initial Column Ordering.png b/...hots/expected/components_DatatableV2_ColumnOrdering_Initial Column Ordering.png
diff --git a/...pshots/expected/components_DatatableV2_ColumnPinning_Initial Column Pinning.png b/...pshots/expected/components_DatatableV2_ColumnPinning_Initial Column Pinning.png
diff --git a/...expected/components_DatatableV2_ColumnResizing_Custom Default Columns Width.png b/...expected/components_DatatableV2_ColumnResizing_Custom Default Columns Width.png
diff --git a/...hots/expected/components_DatatableV2_ColumnResizing_Initial Column Resizing.png b/...hots/expected/components_DatatableV2_ColumnResizing_Initial Column Resizing.png
diff --git a/...ts_DatatableV2_ColumnSettingsPanel_Disabled Column Hiding In Settings Panel.png b/...ts_DatatableV2_ColumnSettingsPanel_Disabled Column Hiding In Settings Panel.png
diff --git a/...s_DatatableV2_ColumnSettingsPanel_Disabled Column Pinning In Settings Panel.png b/...s_DatatableV2_ColumnSettingsPanel_Disabled Column Pinning In Settings Panel.png
diff --git a/...ed/components_DatatableV2_ColumnSettingsPanel_Initial Column Settings Panel.png b/...ed/components_DatatableV2_ColumnSettingsPanel_Initial Column Settings Panel.png
diff --git a/.../expected/components_DatatableV2_ColumnVisibility_Initial Column Visibility.png b/.../expected/components_DatatableV2_ColumnVisibility_Initial Column Visibility.png
diff --git a/...-snapshots/expected/components_DatatableV2_DetailPanel_Detail Panel Enabled.png b/...-snapshots/expected/components_DatatableV2_DetailPanel_Detail Panel Enabled.png
diff --git a/...ge-snapshots/expected/components_DatatableV2_DetailPanel_Disable Expand All.png b/...ge-snapshots/expected/components_DatatableV2_DetailPanel_Disable Expand All.png
diff --git a/...ected/components_DatatableV2_DetailPanel_Initial Expanded All Detail Panels.png b/...ected/components_DatatableV2_DetailPanel_Initial Expanded All Detail Panels.png
diff --git a/...cted/components_DatatableV2_DetailPanel_Initial Expanded Some Detail Panels.png b/...cted/components_DatatableV2_DetailPanel_Initial Expanded Some Detail Panels.png
diff --git a/...hots/expected/components_DatatableV2_FullscreenMode_Initial Fullscreen Mode.png b/...hots/expected/components_DatatableV2_FullscreenMode_Initial Fullscreen Mode.png
diff --git a/...snapshots/expected/components_DatatableV2_Loading_Loading With Detail Panel.png b/...snapshots/expected/components_DatatableV2_Loading_Loading With Detail Panel.png
diff --git a/...ge-snapshots/expected/components_DatatableV2_Loading_Loading With Selection.png b/...ge-snapshots/expected/components_DatatableV2_Loading_Loading With Selection.png
diff --git a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Reloading.png b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Reloading.png
diff --git a/...ots/expected/components_DatatableV2_Pagination_Custom Rows Per Page Options.png b/...ots/expected/components_DatatableV2_Pagination_Custom Rows Per Page Options.png
diff --git a/...ge-snapshots/expected/components_DatatableV2_Pagination_Disabled Pagination.png b/...ge-snapshots/expected/components_DatatableV2_Pagination_Disabled Pagination.png
diff --git a/...-snapshots/expected/components_DatatableV2_Pagination_Enabled Rows Per Page.png b/...-snapshots/expected/components_DatatableV2_Pagination_Enabled Rows Per Page.png
diff --git a/...age-snapshots/expected/components_DatatableV2_Pagination_Initial Pagination.png b/...age-snapshots/expected/components_DatatableV2_Pagination_Initial Pagination.png
diff --git a/...age-snapshots/expected/components_DatatableV2_Pagination_Pagination Enabled.png b/...age-snapshots/expected/components_DatatableV2_Pagination_Pagination Enabled.png
diff --git a/.../components_DatatableV2_RowActions_Conditionally Disabled Single Row Action.png b/.../components_DatatableV2_RowActions_Conditionally Disabled Single Row Action.png
diff --git a/...e-snapshots/expected/components_DatatableV2_RowActions_Disabled Row Actions.png b/...e-snapshots/expected/components_DatatableV2_RowActions_Disabled Row Actions.png
diff --git a/...k/image-snapshots/expected/components_DatatableV2_RowActions_No Row Actions.png b/...k/image-snapshots/expected/components_DatatableV2_RowActions_No Row Actions.png
diff --git a/...ge-snapshots/expected/components_DatatableV2_RowActions_Row Actions Enabled.png b/...ge-snapshots/expected/components_DatatableV2_RowActions_Row Actions Enabled.png
diff --git a/...mage-snapshots/expected/components_DatatableV2_RowActions_Single Row Action.png b/...mage-snapshots/expected/components_DatatableV2_RowActions_Single Row Action.png
diff --git a/...ybook/image-snapshots/expected/components_DatatableV2_RowOnClick_Active Row.png b/...ybook/image-snapshots/expected/components_DatatableV2_RowOnClick_Active Row.png
diff --git a/...s/expected/components_DatatableV2_Selection_Conditionally Enabled Selection.png b/...s/expected/components_DatatableV2_Selection_Conditionally Enabled Selection.png
diff --git a/...hots/expected/components_DatatableV2_Selection_Disabled Batch Row Selection.png b/...hots/expected/components_DatatableV2_Selection_Disabled Batch Row Selection.png
diff --git a/...pshots/expected/components_DatatableV2_Selection_Disabled Select All Header.png b/...pshots/expected/components_DatatableV2_Selection_Disabled Select All Header.png
diff --git a/...mage-snapshots/expected/components_DatatableV2_Selection_Disabled Selection.png b/...mage-snapshots/expected/components_DatatableV2_Selection_Disabled Selection.png
diff --git a/...e-snapshots/expected/components_DatatableV2_Selection_Row Selection Actions.png b/...e-snapshots/expected/components_DatatableV2_Selection_Row Selection Actions.png
diff --git a/...image-snapshots/expected/components_DatatableV2_Selection_Selection Enabled.png b/...image-snapshots/expected/components_DatatableV2_Selection_Selection Enabled.png
diff --git a/...ge-snapshots/expected/components_DatatableV2_Selection_Single Row Selection.png b/...ge-snapshots/expected/components_DatatableV2_Selection_Single Row Selection.png
diff --git a/...ook/image-snapshots/expected/components_DatatableV2_Sorting_Initial Sorting.png b/...ook/image-snapshots/expected/components_DatatableV2_Sorting_Initial Sorting.png
diff --git a/...apshots/expected/components_DatatableV2_TopToolbar_Disabled Column Settings.png b/...apshots/expected/components_DatatableV2_TopToolbar_Disabled Column Settings.png
diff --git a/...apshots/expected/components_DatatableV2_TopToolbar_Disabled Fullscreen Mode.png b/...apshots/expected/components_DatatableV2_TopToolbar_Disabled Fullscreen Mode.png
diff --git a/...e-snapshots/expected/components_DatatableV2_TopToolbar_Disabled Top Toolbar.png b/...e-snapshots/expected/components_DatatableV2_TopToolbar_Disabled Top Toolbar.png
diff --git a/...ge-snapshots/expected/components_DatatableV2_TopToolbar_Top Toolbar Enabled.png b/...ge-snapshots/expected/components_DatatableV2_TopToolbar_Top Toolbar Enabled.png
diff --git a/...ge-snapshots/expected/components_DatatableV2_TopToolbar_With Hidden Columns.png b/...ge-snapshots/expected/components_DatatableV2_TopToolbar_With Hidden Columns.png
diff --git a/src/components/DatatableV2/table/TableRoot.tsx b/src/components/DatatableV2/table/TableRoot.tsx
@@ -161,7 +161,7 @@ const TableRoot = styled.div`
   }
 
   .ds-table-body-cell {
-    align-items: flex-start;
+    align-items: center;
   }
 
   .ds-table-body-cell:has([data-radix-popper-content-wrapper]) {