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.
Ok, finished, awesome work @alina-jacob! Just smalls things. The style tab looked perfect, no notes there.
| Do you think a universal action with a clearly defined icon is missing? Let us | ||
| know [here](https://github.com/carbon-design-system/carbon/issues/new/choose). | ||
|
|
||
| Icons that are not in this list can be used in buttons, as long as the icon |
There was a problem hiding this comment.
I think we should move the sentence up with the other content above the table. These three paragraphs just feel very choppy here.
There was a problem hiding this comment.
Yes, that makes sense! Pushing the second line about icon library above the table.
Keeping the "let us know here" sentence at the bottom, because it makes sense there!
Let me know if I should move that up as well!
|
@laurenmrice Yep, looking into it right now. |
Closes:
#4397: Belongs to button component guidance umbrella
#4176: Belongs to danger icon-only button guidance umbrella
Important links:
Figma file
Context