Table: omit opacity on IconButton in TableRow #566
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
natalyjazzviolin
requested review from
crisalbu,
hoorayimhelping and
vineethasok
hoorayimhelping
left a comment
hoorayimhelping
left a comment
There was a problem hiding this comment.
Can you add isDeleted and isDisabled to the Table story props so reviewers can see the behavior more easily please?
| $isDeleted?: boolean; | ||
| $isDisabled?: boolean; |
There was a problem hiding this comment.
From a component interface perspective, do we need both of these properties? isDeleted seems kind of implementation specific. Couldn't isDisabled handle that? I'm not seeing isDeleted used on tables in CP.
Maybe @vineethasok or @gjones could answer
There was a problem hiding this comment.
Agreed, I'd try to keep it as simple as possible until there is a clear reason why we need a separate style between isDeleted and isDisabled, and if we decide there's a legit reason, they should look distinct from one another.
|
@gjones Design wise do we need to add a new token for the disabled state for these cases? |
There was a problem hiding this comment.
Hey @natalyjazzviolin , the colour should be the same as the colour for enabled columns
We need to make sure that for disabled/removed columns, the + action doesn't have the same colour as the pencil.
|
@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? |
| ${({ theme, $size }) => ` | ||
| color: ${theme.click.table.row.color.text.default}; | ||
| ${({ theme, $size, $isDeleted, $isDisabled }) => ` | ||
| color: ${$isDeleted || $isDisabled ? "tomato" : "blue"}; |
There was a problem hiding this comment.
what does tomato and blue do here?
@vineethasok are you thinking something like |
Closes #565
Why
If a row is set to
isDisabledorisDeleted, the opacity on the row is set to0.5. This causes all children of theTableRowto be greyed out and makes it unclear that theTableRowCloseButtonicon is actionable:What
TableRowCloseButtoncolor to the default theme colorTableRowSelectData(checkbox) andTableData, while leavingopacity: 1on theTableRowCloseButtonI left the
TableRowCloseButtonicon to usetype="ghostbecause theprimarybutton type has a different styling onclick:https://github.com/user-attachments/assets/bdd0e16c-a92c-4286-9890-26ca087347ac