Table hover states
Problem to solve
Hover states on rows (regardless of whether the component itself is a table, a list, etc) are widely different across the platform, leading to inconsistency. A frontend developer in this comment told me that while the tables used on the Observability pages are using GlTable
, "there is not default hover state as far as I can tell".
The example on the Tables page in Pajamas is a gray hover but across the product I also see:
- Blue hover
- Link underline hover
- Click to select (for bulk actions on the Vulnerability Report page)
While conducting user research, I also saw several users that were unaware that the traces on the Tracing page were clickable, despite the gray hover state. (Same applied for the spans on the Trace detail page - they were unaware that they were clickable in spite of the gray hover state. Perhaps because we use a blue hover state elsewhere in the product?)
Proposal
Introduce guidance into the Table page in Pajamas (and the example there) that hover states should be blue, regardless if the component is a list or table (users don't really care about the difference anyway; if it's a list of items that are clickable, they essentially serve the same purpose). Selected state could be either gray, e.g. if a drawer opens with metadata and you want to visually confirm which of the items in the list/ table was selected.