Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix proportions of icon only rounded buttons to be perfect circles #3839

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

bluefantail
Copy link
Contributor

@bluefantail bluefantail commented Jun 12, 2024

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-rounded modifier 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-rounded modifier.

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 @supports rule 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-rounded modifier 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:

image

After:

image

Changelog updated?

No.

…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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant