RadioControl: Fix shrinking radio controls #61476
Merged
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
tyxla
added
[Type] Bug
tyxla
requested review from
fullofcaffeine,
jsnajdr,
jameskoster,
jorgefilipecosta and
a team
|
Size Change: +49 B (0%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
As a sidenote, it might be nice to follow-up to fix the alignment when labels wrap so the first line is centrally aligned with the radio: 
Additionally we can probably increase the gap between rows too, it's a bit tight at the moment. |
|
No objections to both - feel free to work on a follow-up PR, I'm happy to help with the reviews. They do seem a bit packed right now (especially when you have a focused radio control):
|
sirreal
added a commit
that referenced
this pull request
May 8, 2024
Squashed commit of the following: commit 40c0fd7 Author: Jon Surrell <sirreal@users.noreply.github.com> Date: Wed May 8 18:55:56 2024 +0200 Patch react-autosize-textarea for updated types commit 69cf754 Author: Jon Surrell <sirreal@users.noreply.github.com> Date: Wed May 8 18:48:37 2024 +0200 upgrade framer-motion commit b383044 Author: Jon Surrell <sirreal@users.noreply.github.com> Date: Wed May 8 18:34:44 2024 +0200 Upgrade @use-gesture/react commit fdf93ae Author: Jon Surrell <sirreal@users.noreply.github.com> Date: Wed May 8 18:32:11 2024 +0200 Go bonkers on the global vars commit cc43b8c Author: Jon Surrell <sirreal@users.noreply.github.com> Date: Wed May 8 16:46:39 2024 +0200 Fix the process problem commit 548145e Author: Jon Surrell <sirreal@users.noreply.github.com> Date: Wed May 8 13:33:23 2024 +0200 No more skipLibCheck commit 1eb7644 Author: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Date: Wed May 8 16:33:10 2024 +0100 build: Suggest workaround if `tsc --build` fails (#61501) Following the merge of #60796, developers may face build issues that require package types to be rebuilt. The problem is that `tsc --build` fails somewhat silently -- or rather, there is some output, but it's not clear in the console which stage of the `build:package-types` command failed, and hence what the workaround should be. This commit alleviates the issue by logging a helpful message in the console if `tsc --build` fails: tsc failed. Try cleaning up first: `npm run clean:package-types` commit 14ecb1d Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed May 8 09:49:20 2024 -0400 Bump actions/checkout from 4.1.4 to 4.1.5 in the github-actions group (#61449) Bumps the github-actions group with 1 update: [actions/checkout](https://github.com/actions/checkout). Updates `actions/checkout` from 4.1.4 to 4.1.5 - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](actions/checkout@0ad4b8f...44c2b7a) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-patch dependency-group: github-actions ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: desrosj <desrosj@git.wordpress.org> commit e899475 Author: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Date: Wed May 8 16:48:50 2024 +0300 RadioControl: Fix shrinking radio controls (#61476) Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> commit 839c17d Author: Riad Benguella <benguella@gmail.com> Date: Wed May 8 14:39:34 2024 +0100 Editor: Unify Header component. (#61273) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> commit 2c2f899 Author: Ella <4710635+ellatrix@users.noreply.github.com> Date: Wed May 8 20:30:44 2024 +0900 Revert "useBlockSync: remove isControlled effect" (#61480) Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
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.
What?
This PR alters the radio control radio buttons to be fixed width and height so they don't shrink and skew disproportionally when used in flex context.
Why?
This PR resolves an issue with radio buttons shrinking at certain smaller widths, as reported in #61357 (comment)
How?
We're essentially adding
min-widthandmax-widthas we want the actual radio button to remain constant width.@jameskoster suggested using
flex-shrink, but with radio buttons, we really want to keep a constant width instead.Testing Instructions
RadioControlin storybook, try adding a width to the parent container (100px) and verify the radio buttons don't shrink anymore and remain constant width at all viewport sizes.Testing Instructions for Keyboard
None
Screenshots or screencast
Before (including the
widthI'm setting):After:
