Table: omit opacity on IconButton in TableRow

Open natalyjazzviolin opened this issue 10 months ago • 4 comments

Closes https://github.com/ClickHouse/click-ui/issues/565

Why

If a row is set to isDisabled or isDeleted, the opacity on the row is set to 0.5. This causes all children of the TableRow to be greyed out and makes it unclear that the TableRowCloseButton icon is actionable: Screenshot 2025-03-12 at 11 29 21 AM

What

Sets the TableRowCloseButton color to the default theme color
Removes opacity styling from TableRow
Adds conditional opacity to SelectData (checkbox) and TableData, while leaving opacity: 1 on the TableRowCloseButton

I left the TableRowCloseButton icon to use type="ghost because the primary button type has a different styling onclick: https://github.com/user-attachments/assets/bdd0e16c-a92c-4286-9890-26ca087347ac Screenshot 2025-03-12 at 4 24 54 PM

Mar 12 '25 21:03 natalyjazzviolin

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
click-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 12, 2025 9:09pm

Mar 12 '25 21:03 vercel[bot]

@gjones Design wise do we need to add a new token for the disabled state for these cases? Like the icon button and other form fields

Mar 13 '25 13:03 vineethasok

@crisalbu do I understand correctly that if a row is disabled/removed, the pencil needs to be a muted color, and the x or + icon the same color as an enabled row would have? In this PR I only changed the styling of the + icon case, not the x icon case.

Mar 13 '25 18:03 natalyjazzviolin

@gjones Design wise do we need to add a new token for the disabled state for these cases? Like the icon button and other form fields

@vineethasok are you thinking something like click.table.row.color.text.disabled?

Mar 15 '25 03:03 gjones