[Bug]: Batch checkbox in DataTable header is incorrectly sized and is clipped by the next table header when sorted

[obambrough]

Package

carbon-components

Browser

Chrome, Firefox (probably all browsers)

Package version

v10.45.0

Description

The checkbox for the batch actions on the DataTable header is clipped by the next column. This isn't obvious until you add sorting which changes the background color of the next column.

It's very obvious when using the derived @carbon/ibm-security library as the header background is opaque making the checkbox be clearly clipped (without needing sorting.)

The provided codesandbox demonstrates the issue when you sort the column next to the checkbox column (it clips the checkbox) but again its not the sorting that's the issue, the checkbox column is incorrectly sized but its only noticeable using carbon-components when sorting is used.

CodeSandbox example

https://codesandbox.io/s/2lx3v

Steps to reproduce

Add batch actions and isSortable to a DataTable then sort by the column next to the batch action checkbox column - the sorted column header will then partially cover the batch action checkbox.

Or without sorting using the devtools view the width of the checkbox column and the column next to it, you'll see they overlap.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@obambrough Thanks for reporting! It looks like this bug has been around for a while, all the way back to v10.15.0 in this codesandbox. This probably hasn't been caught because we don't have a storybook example where both sorting and checkbox selection are used.

[tay1orjones]

I think we'll need some more info from @carbon-design-system/design - do we have a spec for the intended design when table checkbox selection is used in conjunction with sorting?

[laurenmrice]

@tay1orjones There should be 16px padding between the checkbox and the column header text/cell text. Looks like there is currently 8px padding and the sort state is overlapping with the icon. Here is the spec of what it should be: