Search Block: Add support for setting the border radius #25203
Closed
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
apeatling
added
Needs Design Feedback
|
Size Change: +202 B (0%) Total Size: 1.2 MB
ℹ️ View Unchanged
|
|
Nice. When the button is inside, could we adjust its border-radius so it's move visually balanced? When they have the same border-radii, you get this weirdness:
But, if we do some math and adjust the button radius, we can get a much nicer visual:
|
12 tasks
apeatling
force-pushed
the
add/search-block-border-radius
branch
from
36e0b65
to
8d35ba2
Compare
|
✅ Rebased |
aaronrobertshaw
requested changes
Sep 23, 2020
There was a problem hiding this comment.
This tests well for me.
There were just a couple of minor issues though. The PHPCS linting threw up a number of errors and warnings that need to be addressed. There was also a rogue " that can be deleted.
I took a stab at adjusting the border radii for the input and button when the button is positioned "inside". There is a PR here: #25553
Feel free to ignore it if there is a better approach. The one I took only uses a very simple formula, innerRadius = outerRadius - padding. It doesn't take into account possible varying border widths, paddings etc that could be overridden by the theme or global styles. Long story short, it's not a perfect solution but might be a start to build from.
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
|
Looks good @aaronrobertshaw, let's close this in favor of #25553 |
6 tasks
6 tasks
This was referenced Dec 7, 2020
6 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Part of: #22071
Description
Add support for setting the border radius on the search input field and search button in the search block. This is a single setting that will adjust the radius for both together.
How has this been tested?
Tested locally, all unit tests passing.
Testing Instructions
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: