carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
97 stars 138 forks source link

Update alignment of nested row text #3559

Closed elycheea closed 1 week ago

elycheea commented 1 year ago
          Design review feedback from Virginia:

Originally posted by @vsnichols in https://github.com/carbon-design-system/ibm-products/issues/3506#issuecomment-1751271371

### Acceptance criteria
- [ ] Update nested rows so that text aligns with the row border without losing header cell padding
- [ ] Verify no regressions in expanded rows
matthewgallo commented 1 year ago

Hey @vsnichols, just reviewing this behavior here with the Carbon DataTable with row expansion, the row's bottom border also extends past the table. One of the reasons for this is because of the padding the cells/header cells have.

Removing the padding from the header cells will allow for the text to align with the row bottom border but the hover state looks incorrect.

Image

We could apply some kind of mask to visually shorten the row bottom border for each expanded row. Something like the following:

Image