Make links in tables more clearly clickable #1899
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
I'm noticing in the gif that the more action button gets a slightly different color than the other row cells on hover. Could we make that consistent? I like the idea of the row being highlighted on hover, but it's also nice if when a cell is clickable it's hover color is differentiable. The underlines are nice too as a persistent reminder. |
| const instanceLinkCell = linkCell((instanceName) => | ||
| pb.instancePage({ ...projectSelector, instance: instanceName }) | ||
| ) | ||
|
|
||
| return instance ? instanceLinkCell({ value: instance.name }) : null |
There was a problem hiding this comment.
Nice, happy to see the reuse of linkcell here
libs/table/cells/LinkCell.tsx
Outdated
| className="flex h-full w-full items-center text-sans-semi-md text-default hover:underline" | ||
| className="flex h-full w-full items-center underline text-sans-semi-md text-secondary hover:text-default" |
There was a problem hiding this comment.
Is hover:bg-raise to distracting here?
There was a problem hiding this comment.
I was kinda thinking the same
There was a problem hiding this comment.
"bg-hover" is too strong, and my concern was that "bg-raise" was inconsistent.
My rationale for more actions and the link cell having a different treatment is partly the distinction between a button and a link but that's perhaps a weak argument.
I'll collect our options and drop them in here and we can decide which is working the best.
There was a problem hiding this comment.
Yeah, my preference would be to treat clickable things consistently, regardless of what kind of clickable thing they are. I feel like bg-raise does a good job of calling extra attention which (when combined with a pointer) is a doubly helpful indication.
|
Few options:
|
|
None are bad but I think 2 is most natural. Like Eugene said, the permanent underline on links is most accessible, even though it feels a little noisy. |
Agreed. On the underline.
|
|
Perfect, just spotted a little stroke overlap I need to fix then will merge. |
oxidecomputer/console@b9013a3...1a4f5d8 * [1a4f5d81](oxidecomputer/console@1a4f5d81) oxidecomputer/console#1910 * [34596e33](oxidecomputer/console@34596e33) oxidecomputer/console#1928 * [ff7cdb28](oxidecomputer/console@ff7cdb28) oxidecomputer/console#1926 * [efa39789](oxidecomputer/console@efa39789) oxidecomputer/console#1867 * [4bfadc02](oxidecomputer/console@4bfadc02) oxidecomputer/console#1927 * [695d3671](oxidecomputer/console@695d3671) oxidecomputer/console#1925 * [30070292](oxidecomputer/console@30070292) better path filter for local files in msw handler * [5cf4339c](oxidecomputer/console@5cf4339c) oxidecomputer/console#1916 * [a26f7c1e](oxidecomputer/console@a26f7c1e) oxidecomputer/console#1922 * [231b93ed](oxidecomputer/console@231b93ed) oxidecomputer/console#1923 * [c8364638](oxidecomputer/console@c8364638) better msw warning filter so we don't get warning noise in console * [764f7310](oxidecomputer/console@764f7310) oxidecomputer/console#1908 * [945619eb](oxidecomputer/console@945619eb) oxidecomputer/console#1921 * [e2d82a4c](oxidecomputer/console@e2d82a4c) oxidecomputer/console#1887 * [d6a67bd5](oxidecomputer/console@d6a67bd5) oxidecomputer/console#1918 * [1fb746f4](oxidecomputer/console@1fb746f4) oxidecomputer/console#1899 * [ca7c85de](oxidecomputer/console@ca7c85de) oxidecomputer/console#1917 * [28598e1d](oxidecomputer/console@28598e1d) oxidecomputer/console#1914 * [34eb478d](oxidecomputer/console@34eb478d) oxidecomputer/console#1912 * [4d693088](oxidecomputer/console@4d693088) bump vite-plugin-html to stop getting deprecation warning * [d5c39549](oxidecomputer/console@d5c39549) oxidecomputer/console#1909 * [7c6f53db](oxidecomputer/console@7c6f53db) oxidecomputer/console#1854
oxidecomputer/console@b9013a3...1a4f5d8 * [1a4f5d81](oxidecomputer/console@1a4f5d81) oxidecomputer/console#1910 * [34596e33](oxidecomputer/console@34596e33) oxidecomputer/console#1928 * [ff7cdb28](oxidecomputer/console@ff7cdb28) oxidecomputer/console#1926 * [efa39789](oxidecomputer/console@efa39789) oxidecomputer/console#1867 * [4bfadc02](oxidecomputer/console@4bfadc02) oxidecomputer/console#1927 * [695d3671](oxidecomputer/console@695d3671) oxidecomputer/console#1925 * [30070292](oxidecomputer/console@30070292) better path filter for local files in msw handler * [5cf4339c](oxidecomputer/console@5cf4339c) oxidecomputer/console#1916 * [a26f7c1e](oxidecomputer/console@a26f7c1e) oxidecomputer/console#1922 * [231b93ed](oxidecomputer/console@231b93ed) oxidecomputer/console#1923 * [c8364638](oxidecomputer/console@c8364638) better msw warning filter so we don't get warning noise in console * [764f7310](oxidecomputer/console@764f7310) oxidecomputer/console#1908 * [945619eb](oxidecomputer/console@945619eb) oxidecomputer/console#1921 * [e2d82a4c](oxidecomputer/console@e2d82a4c) oxidecomputer/console#1887 * [d6a67bd5](oxidecomputer/console@d6a67bd5) oxidecomputer/console#1918 * [1fb746f4](oxidecomputer/console@1fb746f4) oxidecomputer/console#1899 * [ca7c85de](oxidecomputer/console@ca7c85de) oxidecomputer/console#1917 * [28598e1d](oxidecomputer/console@28598e1d) oxidecomputer/console#1914 * [34eb478d](oxidecomputer/console@34eb478d) oxidecomputer/console#1912 * [4d693088](oxidecomputer/console@4d693088) bump vite-plugin-html to stop getting deprecation warning * [d5c39549](oxidecomputer/console@d5c39549) oxidecomputer/console#1909 * [7c6f53db](oxidecomputer/console@7c6f53db) oxidecomputer/console#1854
Follow up from #1886 and feedback from the team.
I'd would have liked to have the first cell be
text-defaultbut unsure what to do with the hover state in that instance since we don't have a colour brighter than that.