Retain rounded corners on segmented buttons. Fixes #782 #783
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.
Fixes: Segmented button with single item loses rounded corners
This PR addresses issue #782.
Problem:
When a
.rvt-button-segmentedgroup contains only a single button, the button incorrectly loses its rounded corners. This is due to the:first-childand:last-childCSS selectors unintentionally removing allborder-radiuswhen 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.njkfile, for testing or demonstration of this fix, alongside other common implementations of the segmented button.