twenty
twenty copied to clipboard
twentyhq
Add 'Inverted' Variants to Button Component for Banners
Scope
We want to add new "Inverted" variants to the button component to be used first for the banners. These variants are meant to be used on a colorful background.
New variants
https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=3122-142114&mode=design&t=mzGw3gdPlFH6KOCR-11
Hi @flatypus are you still on it? @charlesBochet maybe we should do it together
Hey! Sorry, I've been busy with work in the last month, but I have started on completing this on my branch. If you could give me until the end of the week to try to finish this that'd be great, I'll leave a post on Sunday if I can't.
Here's the PR, I'm not sure if there's a better way to modify the Storybook component background color to make the inverted buttons actually look good in review, so pls lmk. The PR is also still in draft because I need to finish the secondary and tertiary variations tomorrow.
Hey @Bonapara , I've updated the styles for the Button.tsx. There are a few things that I find sketchy (most particularly the '${theme.color.blue}1A`' instead of an actual string, because I couldn't find a transparent blue) but the styles are overall done.
I also updated a couple styles outside of inverted because they just didn't make sense given the figma page (for example, I made all the styles background: transparent on secondary/tertiary because that's what is indicated in figma). Please let me know if any more work has to be done. I'm not too familiar with the rest of the code base, and if any other types should be changed to include the inverted: boolean type outside of Button.tsx, so please let me know as well.
Sorry again for the delay on the PR, I will be more punctual next time.
https://github.com/twentyhq/twenty/assets/68029599/caa7beec-cf78-4267-beae-9ee7f4663834
Hey @flatypus, thanks for your work! When you mentioned you couldn't find a Transparent Blue, was it for the disabled states? If so, disabled states are created by applying transparency to the entire button, not by using a specific color. In your video, I noticed at 24 seconds that the button text is lighter than the button border. Do you know why?
Hey @flatypus, thanks for your work! When you mentioned you couldn't find a
Transparent Blue, was it for the disabled states? If so, disabled states are created by applying transparency to the entire button, not by using a specific color. In your video, I noticed at 24 seconds that the button text is lighter than the button border. Do you know why?
Oh, no I've already added that opacity line for the disabled bit. That's not the problem.
If you notice for focused elements (like in the screenshot), the box-shadow isn't red or anything; it's a 10% transparency shade of blue. I wasn't sure how to get that in code. I also wanted to point out that it's that shade of blue for all the types (danger, blue, and default).
Oh I see! You're right, that feels awkward, thanks for noticing! I just updated the focus color to Transparent/medium for all inverted buttons:
Cool, thanks @Bonapara! I've just updated the code to reflect your figma change. It should be ready for a review now.