Button guidance PR #4409
Button guidance PR #4409
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
I need to finish reviewing but don't want to lose my comments so far. Update: I'm done reviewing. Its looking good though! Most of my comments are little things or on sections that were probably out of scope for your work but wanted to leave comments anyways.
| @@ -84,13 +104,13 @@ communicate calls to action to the user and allow users to interact with pages | |||
| in a variety of ways. Button labels express what action will occur when the user | |||
| interacts with it. | |||
|
|
|||
| #### When to use | |||
| ### When to use | |||
There was a problem hiding this comment.
I know it's probably not consistent with other pages but I liked these as H4s more. Their hierarchy is just clearer since they're such short sections (just an opinion here).
There was a problem hiding this comment.
I did a cursory glance on 25% of our components, among the first 10, about 4 components have "When to use" as an H3 and some content below it as "H4".
Maybe we can keep a rule that, if there's additional H4 content associated with "When and When not to use" content, use H3, if not then keep it H4.
As per that logic, Button will have it as H4, but screenshots attached above can continue to be the way they are!
Any thoughts on this @aagonzales and @laurenmrice?
There was a problem hiding this comment.
Yeah maybe its that and if you don't have a lot of points to make in a bullet format and its just a sentence or two. I would be fine with keeping the H4 here in your scenario.
There was a problem hiding this comment.
The overlay of this button looks off. Maybe try it with the multiply effect.
There was a problem hiding this comment.
While creating this image, I was referring to the Menu buttons image where Thy has used a Magenta 30 overlay.
Referring to AI label and Tag, it uses Magenta 20 as an underlay and overlay respectively.
I won't be able to use an underlay for button, so doing an overlay with Magenta 20 (L-new) vs 30 (R-as is) for comparison, any preference? Magenta 20 looks better IMO!
There was a problem hiding this comment.
Yeah, multiply doesn’t seem to be working in this situation since the button blue is much higher contrast than our usual components where we overlay this color. I was unable to find your actual image in your file and I could not replicate an "Overlay" blend mode at Magenta 20 to get the result you are showing. But Magenta 30, @80% looks pretty similar to it.
In the production guidelines for dark themes in these highlight situations, Jeannie specified using opacity instead of multiply. Maybe we could use an opacity here and just use a lighter or darker magenta step color?
Here are some options below, if you go anywhere lighter or darker than these either in opacity or color step it starts to get weird.
There was a problem hiding this comment.
The most accessible among these options (from a color contrast perspective) is the last option which is Magenta 40 at 60% opacity. Shall I proceed with that?
There was a problem hiding this comment.
Could we use a tertiary button here instead of a primary? That might help with clarity. But I do like the Magenta 40 @60% that works fine IMO. Could maybe also add a border? Either way I think you can just pick an option @alina-jacob and we can be done with this one. Its an odd ball.
There was a problem hiding this comment.
Tertiary button idea is great, so I can do that!
I'll refer the AI label for specs.
Thanks guys!
There was a problem hiding this comment.
Ok, finished, awesome work @alina-jacob! Just smalls things. The style tab looked perfect, no notes there.
|
@laurenmrice Yep, looking into it right now. |
There was a problem hiding this comment.
Ok it looks good! I just happened to notice this one last thing on the final read through. There are three different "Note" styles happening. Plain text, italic and inline notification. We should at least streamline the plain text and italic ones. My recommendation would be to use the italic.
Closes:
#4397: Belongs to button component guidance umbrella
#4176: Belongs to danger icon-only button guidance umbrella
Important links:
Figma file
Context