Skip to content

Conversation

@jameswilson
Copy link
Contributor

@jameswilson jameswilson commented Jun 4, 2025

Fixes: Segmented button with single item loses rounded corners

This PR addresses issue #782.

Problem:

When a .rvt-button-segmented group contains only a single button, the button incorrectly loses its rounded corners. This is due to the :first-child and :last-child CSS selectors unintentionally removing all border-radius when an element is both the first and last child.

Solution:

The CSS selectors have been updated to use :not(:first-child) and :not(:last-child). This ensures that if a button is the sole child within the segmented group, the specific rules for overriding corner radii are not applied, allowing the button to retain its default rounded corners. This resolves the issue with a pure CSS fix, avoiding the need for conditional server-side logic to manage button wrapping.

Additionally, this PR includes the button-segmented.njk file, for testing or demonstration of this fix, alongside other common implementations of the segmented button.

Screen Shot 2025-06-03 at 23 02 01

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