Alternative proposal for hover state of sortable table headers

In the product right now, the sorting icon on tables has the gray-900 color and it is not visible on hover. This is not aligned with the design specs in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/%F0%9F%93%99-Component-library?type=design&node-id=49122%3A76749&mode=design&t=keHovLHMCSXy3Uzt-1

  • When sorting is active: changes the cell background color to gray-50, and also changes the icon color (from gray-500 to gray-900).
  • When sorting is not active: changes the cell background color to gray-50 , and shows the sorting icon in gray-500.
Product Figma
image.png image.png

Instead of working on moving more towards these design specs, I would like to propose an alternative style for hover states for sortable table headers, as I believe that (1) the current design specs might not be the best option to visualize whether a column is sortable, and because I believe that (2) we have significant barriers ahead of us to get the current design specs into the product.

Alternative proposal for hover states of table headers

No background color change on hover, just showing the sorting icon in a lighter gray than in the resting state.

image.pngThis would work exactly the same as Shopify's design system (even though I would want a significantly higher contrast for the icon than what they have).

Visualizing whether a column is sortable

  • As only the icon appears, it's more clear what exactly the action after click will be.
  • When we change the entire cell background on hover, the user might not even notice directly that an icon appeared as well as they are focused on that background color change.
  • Currently when resting we use gray-500 for the sorting icon to show that this is column being used for sorting. When hovering we also use gray-500, but it is not the column used for sorting right now.
  • In my opinion, the current mix of gray-10 for table rows and gray-50 for column headers also doesn't look visually appealing.

My opinion summarized: showing just the icon without changing the background color simplifies the model, avoids potential misunderstandings and looks more appealing.

The only argument I could come up with so far that speaks for keeping the background color changing on hover in addition to showing the icon would be that it's a bigger change to the resting state, and thus more visible feedback to the user that something is clickable here.

Barriers ahead of us to get the current design specs into the product.

Note: The reasons listed below are not why I would prefer a different hover state, as technical or time constraints should not dictate the design solution, but are meant to illustrate additional advantages we could gain if we moved to the alternative proposal.

Tables with different background colors

There are multiple instances in the product where the entire table has a different background color because it's integrated into a card. That means there is no hover state at all currently for these tables, as it already has the gray-50 background that should normally only appear on hover.

So while the point against this might be that these tables violate our Pajamas guidelines, this is how they are at this point, and to move to the correct design specs for the hover state would mean we would have to (1) design them in a different way and (2) implement this change, whereas the alternative proposal of the hover state could be implemented for these tables immediately.

image.pngConsistency of tables in production

The hover background color for column headers is controlled by an extra attribute (variant="secondary") for <gl-table> and right now we have a mix of tables that do have that, and others that don't. Sometimes the reason is the background color from the example above, but most often there is no reason at all.

If we moved to the alternative propose we could just remove the entire attribute and associated CSS, whereas staying with the current design specs means we would have to review every single table to see if that attribute can be added to these tables.

No background change Background change

Summary

I hope that the alternative proposal could be simpler, showing more directly what the action will be, and also enable us to more quickly move towards the new pattern in the product.

Edited by Marcel van Remmerden