This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
remove radius from checkout submit button (use theme button style) #2390
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: -10 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
Aljullu
approved these changes
May 4, 2020
There was a problem hiding this comment.
cc @Aljullu @garymurray for feedback on this approach - defer to current theme for button radius, since it's safe and consistent to do so.
This approach makes sense to me. 👍
In my testing I noticed that Twenty Sixteen shows the original issue
Yeah... I see it adds a border-radius to <button> but not to .button.
|
I'm merging this - based on review and more consistency. @garymurray let me know if you have any feedback about this – we can adjust in a future PR if needed. |
|
Happy with this approach. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #2306
In Storefront, the checkout submit button had rounded corners, as opposed to square corners for cart submit and add coupon buttons.
This was because the Checkout block had css to set a border-radius for the checkout submit button - i.e. an "opinionated" style rule.
We need the blocks to work well in a range of themes. Many themes have a (valid) opinion for button styling. In this PR I've removed our opinionated border-radius to leave it up to the theme. This way the buttons in the checkout should look more consistent (same border radius) with other buttons on the site.
cc @Aljullu @garymurray for feedback on this approach - defer to current theme for button radius, since it's safe and consistent to do so.
Screenshots
Storefront – note square buttons throughout cart/checkout, consistent with other site buttons (e.g. my account):
Bistro (Storefront child theme) has rounded buttons:
How to test the changes in this Pull Request:
Note that this relies on the theme having sufficiently robust rules targeting all the varieties of buttons (
<button>or<a>tags with various classes).I tested in Storefront (2.5.6 RC), Bistro (Storefront child theme, Twenty Twenty, Twenty Sixteen and Twenty Sixteen. The buttons were consistent with eachother and the theme in all cases except Twenty Sixteen. (Note that there were other styling/typography/layout issues in Twenty/core themes - we should address those separately.)
In my testing I noticed that Twenty Sixteen shows the original issue – I'd view this as a theme issue (maybe worth reporting to Twenty Sixteen).