Button group dividers (#42284)

* Add optional dividers to btn groups

* Add another example, add active state

* Vertical support

* bump bw

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 7d1e7bd3f1905c95ce3dd090ec3252ed40f42a3f..4b0a5ce0b3954cda370bef06fa8bbe95063b781c 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "47.75 kB"
+      "maxSize": "48.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",

diff --git a/scss/buttons/_button-group.scss b/scss/buttons/_button-group.scss
index 7f3da8fdb76ae11b2cc8afe6e8323eee9a3dd936..0a86f95e4e263dbe2090eab1bf972fa03dc242cf 100644 (file)
--- a/scss/buttons/_button-group.scss
+++ b/scss/buttons/_button-group.scss
@@ -29,6 +29,44 @@
     }
   }
 
+  .btn-group-divider {
+    > [class*="btn-"] + [class*="btn-"] {
+      &::before {
+        position: absolute;
+        // top: 25%;
+        // bottom: 25%;
+        // left: calc(var(--btn-border-width) * -1);
+        z-index: 3;
+        // width: var(--btn-border-width);
+        content: "";
+        background-color: var(--btn-color);
+        opacity: .25;
+      }
+    }
+  }
+
+  .btn-group:where(.btn-group-divider) {
+    > [class*="btn-"] + [class*="btn-"] {
+      &::before {
+        top: 25%;
+        bottom: 25%;
+        left: calc(var(--btn-border-width) * -1);
+        width: var(--btn-border-width);
+      }
+    }
+  }
+
+  .btn-group-vertical:where(.btn-group-divider) {
+    > [class*="btn-"] + [class*="btn-"] {
+      &::before {
+        top: calc(var(--btn-border-width) * -1);
+        right: var(--btn-padding-x);
+        left: var(--btn-padding-x);
+        height: var(--btn-border-width);
+      }
+    }
+  }
+
   // Optional: Group multiple button groups together for a toolbar
   .btn-toolbar {
     display: flex;

diff --git a/site/src/content/docs/components/button-group.mdx b/site/src/content/docs/components/button-group.mdx
index 56ffb190e2303f364d7aef19a522eb8746a1c94e..5ee578dce939ad27bd055258427da9e05d602288 100644 (file)
--- a/site/src/content/docs/components/button-group.mdx
+++ b/site/src/content/docs/components/button-group.mdx
@@ -7,7 +7,7 @@ deps:
   - title: Buttons
 ---
 
-## Basic example
+## Examples
 
 Wrap a series of buttons in `.btn-group`.
 
@@ -21,6 +21,8 @@ Wrap a series of buttons in `.btn-group`.
 Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them.
 </Callout>
 
+### With links
+
 These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]([[docsref:/components/nav]]).
 
 <Example code={`<div class="btn-group">
@@ -29,7 +31,45 @@ These classes can also be added to groups of links, as an alternative to the [`.
     <a href="#" class="btn-solid theme-primary">Link</a>
   </div>`} />
 
-## Mixed variants
+### Dividers
+
+Add a divider between buttons by adding the `.btn-group-divider` class to the `.btn-group`. Most useful when used with buttons that have the same theme color and a solid fill.
+
+<Example class="d-flex gap-2" code={`<div class="btn-group btn-group-divider" role="group" aria-label="Basic example">
+    <button type="button" class="btn-solid theme-primary">Left</button>
+    <button type="button" class="btn-solid theme-primary active">Active</button>
+    <button type="button" class="btn-solid theme-primary">Right</button>
+  </div>
+
+  <div class="btn-group btn-group-divider" role="group" aria-label="Basic example">
+    <button type="button" class="btn-solid theme-secondary">Left</button>
+    <button type="button" class="btn-solid theme-secondary">Right</button>
+  </div>`} />
+
+Works with vertical button groups, too.
+
+<Example class="d-flex align-items-start gap-2" code={`<div class="btn-group-vertical btn-group-divider" role="group" aria-label="Basic example">
+    <button type="button" class="btn-solid theme-primary">Left</button>
+    <button type="button" class="btn-solid theme-primary active">Active</button>
+    <button type="button" class="btn-solid theme-primary">Right</button>
+  </div>
+
+  <div class="btn-group-vertical btn-group-divider" role="group" aria-label="Basic example">
+    <button type="button" class="btn-solid theme-secondary">Left</button>
+    <button type="button" class="btn-solid theme-secondary">Right</button>
+  </div>`} />
+
+## Theme variants
+
+Ue the `.theme-{color}` classes to apply a theme color to a set of buttons.
+
+<Example code={`<div class="btn-group" role="group" aria-label="Accent theme example">
+    <button type="button" class="btn-solid theme-accent">Left</button>
+    <button type="button" class="btn-solid theme-accent">Middle</button>
+    <button type="button" class="btn-solid theme-accent">Right</button>
+  </div>`} />
+
+You can mix and match button variants in a button group.
 
 <Example code={`<div class="btn-group" role="group" aria-label="Basic mixed styles example">
     <button type="button" class="btn-solid theme-danger">Left</button>
@@ -37,14 +77,28 @@ These classes can also be added to groups of links, as an alternative to the [`.
     <button type="button" class="btn-solid theme-success">Right</button>
   </div>`} />
 
-## Outline buttons
+## Style variants
+
+All button styles are supported in button groups. Mix and match with the `.btn-group-divider` class to add dividers between some styles or just use the button borders in others.
 
-<Example code={`<div class="btn-group" role="group" aria-label="Basic outlined example">
+<Example code={`<div class="btn-group btn-group-divider" role="group" aria-label="Solid example">
+    <button type="button" class="btn-solid theme-primary">Left</button>
+    <button type="button" class="btn-solid theme-primary">Middle</button>
+    <button type="button" class="btn-solid theme-primary">Right</button>
+  </div>`} />
+
+<Example code={`<div class="btn-group" role="group" aria-label="Outlined example">
     <button type="button" class="btn-outline theme-primary">Left</button>
     <button type="button" class="btn-outline theme-primary">Middle</button>
     <button type="button" class="btn-outline theme-primary">Right</button>
   </div>`} />
 
+<Example code={`<div class="btn-group btn-group-divider" role="group" aria-label="Subtle example">
+    <button type="button" class="btn-subtle theme-primary">Left</button>
+    <button type="button" class="btn-subtle theme-primary">Middle</button>
+    <button type="button" class="btn-subtle theme-primary">Right</button>
+  </div>`} />
+
 ## Toggle buttons
 
 ### Checkbox