fix(components): make DataList and DataTable sorting interactions match [JOB-98193]

chris-at-jobber commented 3 months ago

Motivations

DataList and DataTable, despite having almost identical interactions to sort columns, have their UI built styled differently. I'm not addressing the built bit here, as there's some functionality to untangle, but I am making the interactions of the sort arrows work and feel the same.

active sort arrow is --color-interactive--subtle
inactive sort arrow is --color-interactive--subtle at 0.4 opacity
inactive arrow while hovered is 0.6 opacity

This allows the user to observe

arrows are hovered
while the arrows are being clicked, the user can perceive the changing sort order

https://github.com/GetJobber/atlantis/assets/39704901/708bd99a-e5f4-4691-ba09-8dc864d14974

Changes

Changed

CSS for both DataList and DataTable's sort arrows

Fixed

Sort arrow interactions are now consistent across the DataList and DataTable

Testing

The split view in Arc like you see in my video is pretty handy. Recommend pulling into Jobber to test in dark mode.

Changes can be tested via Pre-release

In Atlantis we use Github's built in pull request reviews.

Random photo of Atlantis

cloudflare-workers-and-pages[bot] commented 3 months ago

Deploying atlantis with Cloudflare Pages

Latest commit:	`22bfb27`
Status:	✅ Deploy successful!
Preview URL:	https://6abfc5d1.atlantis.pages.dev
Branch Preview URL:	https://standardize-data-sorting-ui.atlantis.pages.dev

View logs

github-actions[bot] commented 3 months ago

Published Pre-release for 22bfb2721db21682ff1a707f9a44654e5d175edd with versions:

  - @jobber/components@5.16.2-standardiz.1+22bfb272

To install the new version(s) for Web run:

npm install @jobber/components@5.16.2-standardiz.1+22bfb272

GetJobber / atlantis