New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Increase WooPay button label font so that it has equal prominence to competing PRBs #8136
Comments
@pierorocca Does this issue have everything it needs to be ready for someone to work on? I see that there is a draft notice at the beginning of the issue, and that's the reason why I am asking this. |
It's not ready, and is pending design guidance. The current behavior is not what design expected so Nikki is taking another look. Likely will have a set of revised font sizes for each button size. |
Thank you for the feedback @pierorocca . I can move this issue to the Shopper Experience team, or do you think that there is a another team that could work on this issue? |
Assigned it to myself. Thanks @zmaglica. |
Great. Thank you for the feedback. Moving this to the Other Teams Queue as part of Gamma Triage process. |
I've updated the issue with the correct text sizes and added an additional Figma reference |
Hi @nikkivias , in the Figma reference the button height and the logo height are the same. I'm confused how this is supposed to work because if they are the same then you get something like this: |
@LCmry that does look like a typo. What were the values prior because the only thing that needed updatig relative to the existing implementation were the font sizes. |
@pierorocca Button height for default (small) is 40px, 'medium' is 48px while the logo is 27px, for large it's button 56px and logo 32px. Also, in this issue and the design say "small, default, large" but I think the small is default and it's really more like "default, medium, large" unless we want to change that. |
Medium is definitely the current default. Originally 40px was the default for a new merchant and it was deemed too small relative to the size of most theme's Cart and Checkout buttons. 48px size became the new default. @LCmry I'd keep those logo sizes as is at 27px and 32px. Only the font sizes were part of the problem we were trying to resolve. |
Description
Competing PRB buttons have label text that significantly larger the WooPay text, create visual inequality. In order to provide equal treatment, the WooPay label text size will be increased for all button sizes.
Acceptance criteria
Small button - The label text is 16px across all breakpoints
Default button - The label text is 18px across all breakpoints
Large button - The label text is 20px across all breakpoints
Designs
@nikkivias for further details as needed.
https://developer.woo.com/docs/user-experience-guidelines-payment-button-size-and-anatomy/ for reference.
Additional reference: Figma
Testing instructions
The text was updated successfully, but these errors were encountered: