Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add sortable indicator icon to DataTable sortable columns #1647

Merged
merged 2 commits into from
Aug 8, 2024

Conversation

acelaya
Copy link
Contributor

@acelaya acelaya commented Aug 8, 2024

Improve a bit discoverability of orderable DataTable columns by adding an icon indicating it.

Up until now, only the actively ordered column had an icon, making it impossible to tell which other columns could be used for ordering.

This is a need that was initially requested in https://hypothes-is.slack.com/archives/C07NXBDNW/p1722017120383689?thread_ts=1722016950.558659&cid=C07NXBDNW, and the design was provided here https://www.figma.com/design/rugQ2tONStRF3RL9UXZaGW/Search-Explorations?node-id=1291-1432.

Before:

Grabacion.de.pantalla.desde.2024-08-08.09-30-36.webm

After:

Grabacion.de.pantalla.desde.2024-08-08.09-29-16.webm

@acelaya acelaya force-pushed the sortable-indicator branch from 8daddbf to 2489461 Compare August 8, 2024 07:33
Copy link

codecov bot commented Aug 8, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (67a2853) to head (22f05af).

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #1647   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           61        61           
  Lines         1036      1040    +4     
  Branches       398       402    +4     
=========================================
+ Hits          1036      1040    +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@acelaya acelaya force-pushed the sortable-indicator branch from 2489461 to 3d784c2 Compare August 8, 2024 07:41
@acelaya acelaya requested a review from robertknight August 8, 2024 07:41
@acelaya acelaya changed the title Sortable indicator Add sortable indicator icon to DataTable sortable columns Aug 8, 2024
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I took this icon from Figma

Copy link
Member

@robertknight robertknight left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Conceptually the change makes sense. The icon shifts slightly when it transitions from being the orderable to ordered icons. Putting the OrderableIcon inside the same div might help, but with the background removed when the sorting is not active.

@acelaya
Copy link
Contributor Author

acelaya commented Aug 8, 2024

The icon shifts slightly when it transitions from being the orderable to ordered icons. Putting the OrderableIcon inside the same div might help, but with the background removed when the sorting is not active.

Good catch

@acelaya acelaya force-pushed the sortable-indicator branch 2 times, most recently from e2d95a4 to 676ff61 Compare August 8, 2024 10:24
@acelaya acelaya requested a review from robertknight August 8, 2024 10:24
@acelaya acelaya force-pushed the sortable-indicator branch from 676ff61 to 22f05af Compare August 8, 2024 10:37
Copy link
Member

@robertknight robertknight left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@acelaya acelaya merged commit deed288 into main Aug 8, 2024
4 checks passed
@acelaya acelaya deleted the sortable-indicator branch August 8, 2024 13:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants