Fix proportions of icon only rounded buttons to be perfect circles #3839
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
…cles Currently, creating a button with only a single icon inside it results in a perfect square icon button, but doing the same with the is-rounded modifer doesn't result in a perfect circle because extra padding is added for rounded buttons. This adds an extra selector to move that extra padding case to happen only in the cases where a single icon isn't the sole child of the button. This means that circular icon buttons can now be created, but adding any other content to the button still results in the exact same proportions as before. Since this makes use of the :has() selector which has only recently gained good browser support, the whole rule is behind an @supports for :has() so that older browsers will fall back to the same logic as before.
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.
This is an improvement / bugfix.
Currently, creating a button with only a single icon inside it results in a perfect square icon button, but doing the same with the
is-roundedmodifier doesn't result in a perfect circle because extra padding is added for rounded buttons.Submitting as improvement / bugfix because I think it depends on how you look at it — to me the icon-only buttons should be perfect circles, but this is really a small enhancement with a minor impact to make that specific scenario true. My gut feel says the icons appearing as circles would be the expected / preferred result when adding the
is-roundedmodifier.Proposed solution
Add an extra selector to move the extra padding case to happen only in the cases where a single icon isn't the sole child of the button.
This means that circular icon buttons can now be created, but adding any other content to the button still results in the exact same proportions as before.
As maybe an optional thing I put the
:has()selector behind behind an@supportsrule to more gracefully handle older browsers that don't support it (falling back to the same logic as before). But it has recently gained good browser support too and I see some instances of it starting to turn up in Bulma already — so unsure wether the progressive enhancement is necessary!Tradeoffs
Adds a bit more duplicated css having the feature detection in there. But on the flipside browsers drop the whole rule set if
:has()isn't supported so it feels good to have given the recency of browser support coverage.Adds a bit more complexity to the button ruleset overall.
I don't see too many other drawbacks unless people are currently relying on the oval shaped icon buttons — seems unlikely but it could be a thing?
Testing Done
Checked all existing buttons in the docs locally, and added the
is-roundedmodifier to as many variations as I could find or think of, making sure that anything more than a single icon as the only child still results in the same padding behaviour as before.Before:
After:
Changelog updated?
No.