Fix table re-rendering by showing/hiding actions column via CSS instead

[jen-huang]

Fixes #441

This PR fixes unnecessary re-rendering of the entire EuiBasicTable component upon hovering over table rows by:

• removing hoverRow state on EuiBasicTable
• adding the class .euiTableCellContent--showOnHover to EuiTableRowCell when prop showOnHover is true

The .euiTableCellContent--showOnHover class has styling rules to hide its content by default and show it when its parent .euiTableRow is hovered.

Normal/keyboard navigation for single and multiple action column remains the same (no functionality changes).

[cjcenizal]

Code LGTM but I haven't tested in browser. I'm going to add @nreese as a reviewer to verify this fixes his performance issue.

[cchaos]

Seems to work for me, just one comment about the CSS.

[cchaos]

Makes way more sense to handle the hover opacities via css. But, universal selectors are not great in practice and we're trying to stay away from them in EUI as it can have unintended behaviors if the DOM is not exactly as the CSS is expecting.

To remedy this, I think you need to pass the showOnHover prop down to the child element of the EuiTableRowCell and apply the opacities directly to this. This will ensure you're targeting the correct element to show/hide.

[nreese]

lgtm

Thanks for fixing this.

[jen-huang]

@cchaos Thanks for the feedback - updated PR to replace the wildcard selector with .euiTableCellContent__hoverItem.

[cchaos]

The specificity of this selector is too high. Remove the > .euiTableRowCell > and it should still work with just .euiTableRow:hover &

[jen-huang]

Updated!

[cchaos]

Thanks Jen!