This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Add universal border radius for form elements and components #11193
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
mikejolley
added
status: needs review
type: enhancement
woocommercebot
requested review from
a team and
alexflorisca
and removed request for
a team
Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
|
Size Change: -8.6 kB (-1%) Total Size: 1.48 MB
ℹ️ View Unchanged
|
nielslange
reviewed
Oct 11, 2023
There was a problem hiding this comment.
Thanks for working on this, @mikejolley. The majority of elements and components look good. That said, I noticed that the checkboxes are still using the old border radius. The corresponding SCSS code is located in
This leads to this result:
|
I also wonder if we should apply the border radios to the country dropdown box: 
The corresponding SCSS code is located on woocommerce-blocks/assets/js/base/components/combobox/style.scss Lines 64 to 80 in 6bb21dc If we'd apply the following code border-bottom-left-radius: $universal-border-radius;
border-bottom-right-radius: $universal-border-radius;the country dropdown box would look like this: |
|
@nielslange Ill add those changes once the other styling PRs merge because they'll conflict. |
alexflorisca
approved these changes
Oct 11, 2023
github-actions
bot
added
status: ready to merge
and removed
status: needs review
labels
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.
What
Adds a variable for a shared border radius property to make components more consistent across blocks. This is also now applied to the payment and shipping selector areas. I've replaced all radii of around 4px with this variable.
Fixes #11147
Why
Prevents the need to manual set border radius when working on new components and creates consistency.
Testing Instructions
Since this is visual I don't think it needs to be tested by global step.
Please consider any edge cases this change may have, and also other areas of the product this may impact.
Screenshots or screencast
WooCommerce Visibility
Required:
Checklist
Required:
[type]label or a[skip-changelog]label.Conditional:
[skip-changelog]label is not present).Changelog