From 63552cc390ce173080260fb6e8d64644243cb735 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 16 Dec 2025 11:19:22 -0800 Subject: [PATCH] Fix up button group with latest buttons (#41933) --- scss/buttons/_button-group.scss | 46 +++--- scss/buttons/_button.scss | 3 +- .../content/docs/components/button-group.mdx | 135 ++++++++++-------- site/src/scss/_component-examples.scss | 8 -- 4 files changed, 93 insertions(+), 99 deletions(-) diff --git a/scss/buttons/_button-group.scss b/scss/buttons/_button-group.scss index 07cc64efb9..b1b0f22a44 100644 --- a/scss/buttons/_button-group.scss +++ b/scss/buttons/_button-group.scss @@ -12,8 +12,7 @@ display: inline-flex; vertical-align: middle; // match .btn alignment given font-size hack above - > .btn, - > .btn-check { + > [class*="btn-"] { position: relative; flex: 1 1 auto; } @@ -22,10 +21,10 @@ // the borders properly > .btn-check:has(input:checked), > .btn-check:has(input:focus), - > .btn:hover, - > .btn:focus, - > .btn:active, - > .btn.active { + > [class*="btn-"]:hover, + > [class*="btn-"]:focus, + > [class*="btn-"]:active, + > [class*="btn-"].active { z-index: 1; } } @@ -34,6 +33,7 @@ .btn-toolbar { display: flex; flex-wrap: wrap; + gap: .5rem; justify-content: flex-start; .input-group { @@ -45,24 +45,20 @@ @include border-radius($btn-border-radius); // Prevent double borders when buttons are next to each other - > .btn:not(:first-child), - > .btn-check:not(:first-child), + > [class*="btn-"]:not(:first-child), > .btn-group:not(:first-child) { margin-inline-start: calc(-1 * #{$btn-border-width}); } // Reset rounded corners - > .btn:not(:last-child):not(.dropdown-toggle), - > .btn-check:not(:last-child), - > .btn.dropdown-toggle-split:first-child, - > .btn-group:not(:last-child) > .btn { + > [class*="btn-"]:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > [class*="btn-"] { @include border-end-radius(0); } // The left radius should be 0 if the button is not the first child - > .btn:not(:first-child), - > .btn-check:not(:first-child), - > .btn-group:not(:first-child) > .btn { + > [class*="btn-"]:not(:first-child), + > .btn-group:not(:first-child) > [class*="btn-"] { @include border-start-radius(0); } } @@ -71,8 +67,8 @@ // // Remix the default button sizing classes into new ones for easier manipulation. - .btn-group-sm > .btn { @extend .btn-sm; } - .btn-group-lg > .btn { @extend .btn-lg; } + // .btn-group-sm > [class*="btn-"] { @extend .btn-sm; } + // .btn-group-lg > [class*="btn-"] { @extend .btn-lg; } // @@ -123,29 +119,25 @@ align-items: flex-start; justify-content: center; - > .btn, - > .btn-check, + > [class*="btn-"], > .btn-group { width: 100%; } - > .btn:not(:first-child), - > .btn-check:not(:first-child), + > [class*="btn-"]:not(:first-child), > .btn-group:not(:first-child) { margin-top: calc(-1 * #{$btn-border-width}); } // Reset rounded corners - > .btn:not(:last-child):not(.dropdown-toggle), - > .btn-check:not(:last-child), - > .btn-group:not(:last-child) > .btn { + > [class*="btn-"]:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > [class*="btn-"] { @include border-bottom-radius(0); } // The top radius should be 0 if the button is not the first child - > .btn:not(:first-child), - > .btn-check:not(:first-child), - > .btn-group:not(:first-child) > .btn { + > [class*="btn-"]:not(:first-child), + > .btn-group:not(:first-child) > [class*="btn-"] { @include border-top-radius(0); } } diff --git a/scss/buttons/_button.scss b/scss/buttons/_button.scss index 2515dda2b7..b60b7cf826 100644 --- a/scss/buttons/_button.scss +++ b/scss/buttons/_button.scss @@ -332,7 +332,8 @@ $btn-variant-selectors: () !default; // Generate button size classes from the $button-sizes map // Skip "md" as it's the default size for .btn @each $size, $properties in $button-sizes { - .btn-#{$size} { + .btn-#{$size}, + .btn-group-#{$size} > [class*="btn-"] { --#{$prefix}btn-min-height: #{map.get($properties, "min-height")}; --#{$prefix}btn-padding-y: #{map.get($properties, "padding-y")}; --#{$prefix}btn-padding-x: #{map.get($properties, "padding-x")}; diff --git a/site/src/content/docs/components/button-group.mdx b/site/src/content/docs/components/button-group.mdx index 635b186b09..5af5809676 100644 --- a/site/src/content/docs/components/button-group.mdx +++ b/site/src/content/docs/components/button-group.mdx @@ -6,12 +6,12 @@ toc: true ## Basic example -Wrap a series of buttons with `.btn` in `.btn-group`. +Wrap a series of buttons in `.btn-group`. - - - + + + `} /> @@ -21,30 +21,32 @@ Button groups require an appropriate `role` attribute and explicit label to ensu These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]([[docsref:/components/navs-tabs]]). - Active link - Link - Link + Active link + Link + Link `} /> -## Mixed styles +## Mixed variants - - - + + + `} /> -## Outlined styles +## Outline buttons - - - + + + `} /> -## Checkbox and radio button groups +## Toggle buttons -Combine button-like checkbox and radio toggle buttons into a seamless looking button group. +### Checkbox + +Checkbox toggle buttons can be grouped together. Any or all of the buttons can be checked. `} /> +### Radio + +By design, radio toggle button groups can only have one button checked at a time. +