[component audit] data table bugs

Code bugs:

• tr row hover should be using token hover-ui and not hover-field
• ~In Safari, focus is not appearing on the column headers~ See TJs comment below
• Disabled row styling is missing.
• Zebra stripes: in the G90 and G100 themes the first row and the table headers are blending together. The first row should use the default color and the second row should use the zebra color. (we may need to re-evaluate this from a design perspective but this will resolve the main issue for now).

Visual bugs:

• Overflow menu: in G100 theme the menu blends into the table background.

Questions:

• Is the row of a data table supposed to be focusable? I cannot get it to focus in the storybook.
• Is disabling a row or the whole table possible?

[tw15egan]

Safari recenty changed how they handle focus so you may need to change your settings (Preferences --> Advanced)

Once I enable that, I’m able to get focus styles when I tab through elements. Chrome / Firefox / Safari all handle click focus differently (Chrome will show and keep focus on click, the others won’t)

Rows can’t be focused, only the focusable elements (since no action can be taken on a row). If you tab through a selectable row, the focus is on the input (since that is what is being checked / unchecked)

[aagonzales]

@tw15egan Turning on the light prop for the overflow I think would solve that problem. I’m ok with it being like that across themes.

And yes we need to update $data-table-column-hover.

• G100: #4C4C4C
• G90: #656565