feat(studio): clearer table row actions #40170
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
6 Skipped Deployments
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
Studio E2E Results
Artifacts: https://github.com/supabase/supabase/actions/runs/19094398916 Last updated: Wednesday 5, November, 2025 07:39:38 (UTC) |
| className="text-foreground text-sm p-0 hover:bg-transparent" | ||
| className="text-link-table-cell text-sm p-0 hover:bg-transparent title" | ||
| onClick={() => editFunction(x)} | ||
| title={x.name} |
There was a problem hiding this comment.
title being the HTML attribute that adds a browser-native tooltip. Useful for the name instances of a TableCell, in case they are truncated.
| <p | ||
| title={x.argument_types} | ||
| className={`truncate ${x.argument_types ? 'text-foreground-light' : 'text-foreground-muted'}`} | ||
| > | ||
| {x.argument_types || '–'} |
There was a problem hiding this comment.
Just made this a little lighter if there are no arguments.
| <Button | ||
| type="text" | ||
| onClick={() => editTrigger(x)} | ||
| title={x.name} | ||
| className="text-link-table-cell text-left text-sm min-w-0 p-0 hover:bg-transparent font-medium max-w-48 title" | ||
| > | ||
| {x.name} | ||
| </Button> |
There was a problem hiding this comment.
Tooltip felt a bit unnecessary. I added title (native tooltip as explained above) in the rare case that it is truncated.
| .text-link-table-cell { | ||
| @apply truncate cursor-pointer underline underline-offset-4 decoration-foreground-muted/50 hover:decoration-foreground-lighter/80 transition-colors duration-100; | ||
| } |
There was a problem hiding this comment.
This is the meat-and-potatoes. It contains the base styles for any table cell text that acts as a link (or button).
A previous commit used a new TableLink component but that quickly got out of hand given the amount of variation. Especially as this style is used across links and buttons.
| <Link | ||
| href={`/project/${projectRef}/storage/files/buckets/${encodeURIComponent(bucket.id)}`} | ||
| title={bucket.id} | ||
| className="text-link-table-cell" |
There was a problem hiding this comment.
Overall I'm a big fan of text styling like this where we load a class with the properties outside of mark up ...it's almost like what we used to call CSS back in my day. 👴 Big yes from me.
There was a problem hiding this comment.
What’s old is new again!
kemaldotearth
left a comment
kemaldotearth
left a comment
There was a problem hiding this comment.
Good stuff, I recently found myself styling links like this in log drains, happy to re-use these classes. 
What kind of change does this PR introduce?
What is the current behavior?
What is the new behavior?
Additional context
.text-link-table-celltypography style classStill to come: