search

carbon-design-system / carbon-design-kit

A versioned, comprehensive kit of the Carbon Design System visual assets (components, icons, pictograms, text styles, color styles, grid templates).
Apache License 2.0
1.06k stars 154 forks source link

Inconsistent Vertical Alignment of Data Table Contents in Larger Sizes #805

Closed netanyaj closed 1 month ago

netanyaj commented 2 months ago

Problem: When utilising instances of the data table component from the (v11) All themes - Carbon Design System library, an inconsistency in text alignment is noticed across different sizes. Specifically, while the contents of SM/XS size data tables are vertically center-aligned, those of the XL/LG/MD sizes aren't, resulting in a discrepancy in presentation.

To Reproduce:

  1. Create an instance of the data table component using the (v11) All themes - Carbon Design System library.
  2. Observe the vertical alignment of the contents in data tables of various sizes (SM, XS, XL, LG, MD).
  3. Note the inconsistency in vertical alignment of table contents between SM/XS sizes and XL/LG/MD sizes.
  4. This behaviour can be observed in the carbon storybook playground also, while switching between LG and other sizes.

Expected Behaviour: The vertical alignment of content within data tables should be consistent across all sizes, maintaining center alignment for readability and consistency.

References: Attaching screenshots from https://react.carbondesignsystem.com/?path=/story/components-datatable-basic--playground&args=size:xl for reference.

carbon1 carbon2
laurenmrice commented 2 months ago

Hi @netanyaj 👋

All text alignments are currently correct for the row heights for the data table component in React.

The text alignment in the XL height size is visually different from the other height sizes because we wanted to introduce some extra breathing room and padding below the text. The XL height size is typically used to display a lot of information, and we also have a multi-line XL data table where the extra space below helps accommodate the second line of text.

We introduce this pattern of having extra padding below the text in other components throughout our system, which stems from our IBM Design Language guidelines that sometimes introduce moments of having a more editorial feel.