[Table] Change header menu icon to chevron and add a bounding box for better affordance

[cmslewis]

Changes proposed in this pull request:

Quick little thing. In the spirit of aggressively opening PRs and then asking for feedback, I propose that we change the default header-menu icon from pt-icon-more (···) to pt-icon-chevron-down (⌄), which looks and feels much more intuitive to me.

Also, I found it annoying that the icon looked the same whether you were hovering inside or outside of it within the header cell. This PR shows the icon with $pt-icon-color when you hover in the header cell but NOT within the icon, showing $pt-icon-color-hover only when you mouse over the clickable icon area.

Before:

After (Light theme):

After (Dark theme):

For what it's worth, these changes seem consistent with the original mocks for the Table from way back when (although the chevron in the mocks feels too big):

Reviewers should focus on:

• I think the second piece (the hover/non-hover color) should merge regardless—do you agree?
• Do you like the icon change?

[blueprint-bot]

Show more muted icon color when not directly hovering on th-menu

Preview: docs | table
Coverage: core | datetime

[llorca]

Agree with the hover/non-hover color, that's certainly a visual bug that we've been wanting to address! 🎉

Regarding the icon change:

• I've heard concerns about too many "..." in the table. It's because of truncation which adds an ellipsis popover when the content is too large for the cell, but the way we handle truncation now is a band-aid IMO -- we did what we could with the current tech limitations. For instance, Excel and Spreadsheet handle it better and don't need additional "..."
• The designs are outdated, we actually recently changed the icon from chevron to dot-dot-dot for two reasons, first it was too easily confused with the icon for the action of sorting a column, which by standard is a chevron/caret up/down; and second the dot-dot-dot simply seemed like a better generic icon for representing a list of actions or menu (it's also an accepted pattern in other software platforms)

Clearly we had trouble with chevrons here in the past, and dot-dot-dot now doesn't seem quite ideal. Do we postpone this matter until we fix truncation and "..." in every cell with oversized content, do we try to find an alternative to "..."?

[tgreenwatts]

I like the idea of changing to the chevron. There are many sorting icons and they can be collapsed into the chevron menu. I think the ... overload is a serious problem so we should bias to changing now, rather than fixing the much more challenging problem of fixing truncation & wrapping 😀

[llorca]

Sorry, I'm not comfortable moving forward with the icon change. I prefer "..." overload than caret confusion, as we've seen in the past. In a demo, the former is acceptable while the latter isn't

[tgreenwatts]

It's actually worse now though. If you've got a lot of '...'s on the screen, people don't see the ... in the header. So now we're missing it even more than we could have with the caret. '...' is a true overload, whereas the caret is only a perceived overload where some people could get confused with sorting - but our sort icon is actually totally different.

[llorca]

It isn't about our sort icon, it's about general table sorting patterns outside of Palantir: they use carets. It's super common and if we're breaking out of that, we probably need a different icon, which is why https://pl.ntr/eB exists.

Additionally, I'm super against a band-aid influencing other parts of the product. That's how we end up in a failed state like recently. The band-aid here is the way we currently truncate cells with a dot-dot-dot icon. That would mean that we have to change dot-dot-dot usage elsewhere, like column headers? I don't buy this reasoning

[cmslewis]

Hmm, this is tricky. Each icon we've considered as an overloaded meaning in a table context:

• ··· - also means "there is more text than fits in view"
• ▾/▴ - (in a header cell) also means "this column is or can be sorted"
• ⌄ - (in a header cell) frankly haven't seen this as often as a caret for sorting purposes, but I guess it could reasonably mean "this column is or can be sorted"

Google Sheets uses a caret with a background and border. Makes it fairly clear that this is not a sort-related indicator:

How about that?

[llorca]

That's good @cmslewis! I remember we considered a chevron in a button but never implemented it. Let's try that out, it will most likely require some custom styles for the border and such (don't think we can rely on default button styles, may look muddy), I can assist with CSS and @pkwi will make sure it looks 👌

[cmslewis]

Sounds good. @llorca @pkwi - feel free to push to this branch with those style changes.

[michael-yx-wu]

will there ever a situation when the table header dropdown menu should render above the header instead of below?

[tgreenwatts]

Ok chatted with Gaby offline and she's on-board with keeping the '...' given that the caret isn't much better (or even worse).

I don't feel strongly that caret is better, just that current is not good.

[llorca]

@michael-yx-wu unlikely, unless your table height is very tiny. In any case, we have smart positioning for popovers and it should work within the table (it may not at the moment)

Edit: it seems to be working

deferring to antoine's design feedback

[blueprint-bot]

Add styles for action icon in column header

Preview: docs | table
Coverage: core | datetime

[llorca]

Pretty happy with the latest preview, what do y'all think?

[adidahiya]

I like it 👍

[adidahiya]

This selector seems overly complicated, why not just style .pt-icon or .pt-icon-standard (whatever the sizing class is)? same below

[tgreenwatts]

Column D doesn't work

I don't like that it's not shown until hover - is that always the case? Now I see a stinking ... (the non-clickable kind) and then surprise I have a thing on hover.

Am I crazy for thinking this visually looks a little weird? Less polished than the rest of blueprint ? I don't know.

[edit] Confirmed with others that the arrow is off-center, and it just looks not great somehow...

[llorca]

We can discuss the hover thing separately, it's not relevant to this PR.

@pkwi is it expected that the small chevron is not centered in its 16px bounding box?

[llorca]

Other visual option:

[tgreenwatts]

I think if we're changing to make this more discoverable/understandable we could easily update the hover here.
If that's expected to be offcenter then that seems not good.

[llorca]

@tgreenwatts we have gone through the hover story many times, I'm happy to bring you up to speed in person but it's not the topic here.

@pkwi quick approval before merging

[pkwi]

The positioning seems fine.

Yeah, I like the chevron within a small grey square. Not too heavy but distinguishable from the sorting icon

[michael-yx-wu]

I like the gray square as well. It seems to match the default table themes a bit better and doesn't draw too much attention to itself.

[cmslewis]

1. @pkwi @llorca I'm seeing it off-center on OS X Chrome:

And I think I'd prefer a default minimal button styling. This looks a little too unique, particularly when we add the primary intent on click.

2. @tgreenwatts @llorca not to continue an off-topic discussion, but I like having the icon hide until you hover on the column header. Otherwise you have a bunch of irrelevant visual elements competing for your attention.

[adidahiya]

I don't think it's "too unique", that would suggest the design system is too rigid IMO. I've already seen reasonable requests for adding visual intents only in button active/hover states and this doesn't seem far from that.

[llorca]

Regarding the positioning of the icon within its background, I could always try to hack it for different browsers but it's really not worth it. I'm leveraging the icon bounding box directly, it's super simple. The alignment problem most likely comes from the icon font and problems highlighted in this issue: #365

I can always follow up with visual improvements later if necessary, but I think we're good here.

[blueprint-bot]

Better selector for action icon in column header

Preview: docs | table
Coverage: core | datetime

[tgreenwatts]

Yea this got merged before the click region was changed, you can click a way far away from the chevron and still open the menu which is weird. @cmslewis is going to update it

[llorca]

It's like this by design. Small button needs a large click target, else it's a pain to aim. Please leave as is

[tgreenwatts]

It's more than double the size, I think it's too big. I can click all the way to the left of the 'a' here

[llorca]

We stick to a 30px hit target because a bunch of users can't aim at small icons. This approach has been successful, whereas smaller hit targets have caused problems in the past. It's also a basic usability rule in software design, there's real research on that