Improve Clarity Column Selector

[nshileva]

Summary

Column customization in datagrids is a desired functionality by many customers. Currently Clarity provides such functionality through Column Selector, positioned in bottom left corner, yet many users don't recognize it as an actionable icon - some say it looks disabled, others don't even notice it.

Visually, Clarity Column Selector needs to be improved so that it looks like an action and gets noticed by users.

Use case

For large datagrids with many columns, customers need a way to manage the datagrid information that they're seeing. Many customers are unaware that such functionality exists and are frustrated that they cannot reduce the number of columns they're seeing.

User quotes:
"the column selector is less obvious, you know, it took me a while to notice it and start use it.."

"So the different columns that are available, it would be nice to be able to customize the view, have potentially more items or be able to reduce the number of columns."

"but as we add more information, that's available, the ability to show and hide columns could be useful."

"It's just, as you say, you've got different, different columns there. One thing is it, would it be possible at all to choose which columns are displayed"

"So again, I would like to be able to choose it as a field, to be obviously hidden or displayed. "

"So I think it would be nice to have, and then obviously give us the option of being able to select that as being viewable or not a column to appear or be hidden"

[dexfab]

Any clues as to whether this might get prioritized anytime soon? This keeps coming up as an issue with our users.

[Jinnie]

@lil-kim Hi Lilia, this is marked "design complete". Can we have a spec, or guidance what icon/text/anything-else to use here?

[lil-kim]

Hi @Jinnie

Apologies - I forgot to attach the link. Here is the Figma file with the spec.
https://www.figma.com/file/gLjZWnLwWaRnylV7BmeKTK/GH43-Datagrid-show%2Fhide-columns-NG?node-id=554%3A15880&t=HKRbeYQ2cac6Q9Ln-1

If you have any problems accessing it, here's the .png:

[Jinnie]

@lil-kim The button style, hover and click behaviors are much different than the normal buttons we have in Clarity. So we'll need a separate Dark mode spec for it too.

[lil-kim]

Hi @Jinnie
I've added the dark theme color spec. See Figma file:
https://www.figma.com/file/gLjZWnLwWaRnylV7BmeKTK/GH43-Datagrid-show%2Fhide-columns-NG?node-id=554%3A15883&t=Ay8chw8nmEysyLQi-1

PNG version:

[Jinnie]

Some of the colors do not have perfectly matching Clarity palette colors. Here's my research, please confirm if I should use these, or a lighter/darker than the suggested shade where we don't have a match.

Requested:

Light theme

Normal:
Border: 9A9A9A -> hsl(0, 0%, 60%)
Fill: FAFAFA -> hsl(0, 0%, 98%)
Text: 565656 -> hsl(0, 0%, 34%)
Hover:
Border: 565656 -> hsl(0, 0%, 34%)
Fill: FFFFFF -> hsl(0, 0%, 100%)
Text: 000000 -> hsl(0, 0%, 0%)
Click:
Border: 565656 -> hsl(0, 0%, 34%)
Fill: F2F2F2 -> hsl(0, 0%, 95%)
Text: 565656 -> hsl(0, 0%, 34%)

Closest Palette Colors:

Light theme

Normal:
Border: hsl(198, 0%, 55%) <- clr-color-neutral-600 (-5% difference in lightness)
Fill: hsl(198, 0%, 98%) <- clr-color-neutral-50 (perfect match)
Text: hsl(198, 0%, 40%) <- clr-color-neutral-700 (+6% difference in lightness)
Hover:
Border: hsl(198, 0%, 40%) <- clr-color-neutral-700 (+6% difference in lightness)
Fill: hsl(198, 0%, 100%) <- clr-color-neutral-0 (perfect match)
Text: hsl(198, 0%, 0%) <- clr-color-neutral-1000 (perfect match)
Click:
Border: hsl(198, 0%, 40%) <- clr-color-neutral-700 (+6% difference in lightness)
Fill: hsl(198, 0%, 95%) <- clr-color-neutral-100 (perfect match)
Text: hsl(198, 0%, 40%) <- clr-color-neutral-700 (+6% difference in lightness)

For the dark theme we are using hard-coded HSL values, so we'll be able to make it 100% matching the spec.

[lil-kim]

Hi @Jinnie
Thanks for doing this research! Yes, please use the closest palette colors that you've attached. I tested them in Figma and the tiny differences are not noticeable. 👍

[github-actions]

🎉 This issue has been resolved in version 13.11.0 🎉

The release is available on:

• GitHub release
• v13.11.0

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 15.0.0-beta.2 🎉

The release is available on:

• GitHub release
• v15.0.0-beta.2

Your semantic-release bot 📦🚀

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.