Table headers hover state is too narrow

[ConradSchmidt]

Table headers hover state is too narrow

What package(s) are you using?

• carbon-components
• carbon-components-react
• carbon-components-angular

Not affected:

• @carbon/vue

Detailed description

Describe in detail the issue you're having.
Table headers having no or not enough spacing to the left when hovering. It is quite different over all the versions and use cases

Vanilla JS (Select)

8px instead of 16px

React

0px instead of 16px

Angular

this is good, but in other uses cases it is still broken:

0px instead of 16px - this is a custom header, but in the next use case with the same "custom header" is fine again

Vue

this is good

Is this issue related to a specific component?

• DataTable

What did you expect to happen? What happened instead? What would you like to
see changed?

Table headers should have 16px to left as described here:
https://www.carbondesignsystem.com/components/data-table/style#columns
and shown here:
https://www.carbondesignsystem.com/components/data-table/usage#sorting

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

• carbon-components : 10.28.0
• carbon-components-react 7.28.0

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Watson Knowledge Catalog
No ship or release dates are effected by this

Steps to reproduce the issue

1. Open the links
2. Hover over column header

Additional information

N/A

[emyarod]

this should be resolved in #7726

[ConradSchmidt]

Oh sorry for the duplicate, I searched only in open issues...
I guess this fixes the react version, do you think it will resolve the others (vanilla and angular) as well? Or breaking the vue one to have 32px after the change? In vanilla there was a padding of 8px, not like the 0px as in react, maybe worth checking this out.