Merge pull request #813 from trimble-oss/button-groups-in-style-guide

Added button groups guidelines

.cspell.json

@@ -1144,6 +1144,7 @@
     "valign",
     "Vasudevan",
     "vbscript",
+    "vbtn",
     "vehiclegroupid",
     "vehiclerestrictedcleanupgeometry",
     "Vellanki",
@@ -1187,6 +1188,7 @@
     "wiki",
     "windir",
     "windowsphone",
+    "Winsor",
     "winterhaven",
     "wireframes",
     "wireframing",

content/components/web/alerts/styles.md

@@ -94,7 +94,7 @@ document.addEventListener('DOMContentLoaded', function() {
       <i class="modus-icons notranslate flex-shrink-0 me-2" aria-hidden="true">help</i>
       <div>A basic secondary alert with a button</div>
       <div class="ms-auto">
-        <a href="#" class="btn btn-secondary">Button</a>
+        <a href="#" class="btn-text-primary">Button</a>
       </div>
     </div>
     <div class="alert alert-dark d-flex align-items-center" role="alert">

content/components/web/button-groups/_index.md

@@ -0,0 +1,97 @@
+---
+title: "Button Groups"
+layout: "single"
+description: "Button groups allow selection from a similar or related set of options."
+components: true
+componentsWeb: true
+images:
+  - "/img/components/headers/button-group.png"
+# bootstrapURL: "/components/button-group/"
+tags: [usage]
+aliases:
+  - "/components/web/button-group/"
+---
+
+## Overview
+
+A button group is used to organize related actions and allow selection and toggling. Buttons can be grouped in a single line or in a vertical column. They can be used within action bars (e.g. [Toolbar](/components/web/toolbar/)).
+
+<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+  <input type="radio" class="btn-check" name="btnRadioIcon" id="btnRadioIcon1" autocomplete="off" checked>
+  <label class="btn btn-outline-primary btn-icon-only" for="btnRadioIcon1">
+  <svg width="24" height="24" fill="currentColor">
+    <use xlink:href="/modus-solid-icons.svg#wifi" /></svg>
+  </label>
+  <input type="radio" class="btn-check" name="btnRadioIcon" id="btnRadioIcon2" autocomplete="off">
+  <label class="btn btn-outline-primary btn-icon-only" for="btnRadioIcon2">
+  <svg width="24" height="24" fill="currentColor">
+    <use xlink:href="/modus-solid-icons.svg#wifi-off" /></svg>
+  </label>
+  <input type="radio" class="btn-check" name="btnRadioIcon" id="btnRadioIcon3" autocomplete="off">
+  <label class="btn btn-outline-primary btn-icon-only" for="btnRadioIcon3">
+  <svg width="24" height="24" fill="currentColor">
+    <use xlink:href="/modus-solid-icons.svg#wifi-no-internet" /></svg>
+  </label>
+</div>
+
+<style>
+  .btn-group:not(.btn-group-sm):not(.btn-group-lg) label.btn-icon-only {
+    padding-top: 2px;
+    padding-right: .25rem!important;
+    padding-left: .25rem!important;
+  }
+</style>
+
+## Usage
+
+### Use when
+
+- Organizing similar functionality of 2-5 actions.
+- You need to show the selected action or states with contextual relationships.
+- Grouping related actions or states.
+- Stepping through linear content (e.g. Wizards).
+
+### Don’t use when
+
+- Actions represented by buttons are not related.
+- Mixing destructive and non-destructive actions.
+- Button labels do not appropriately describe the actions within one or two words. Instead use Links.
+- You need to navigate through content on the page. Instead, use [Tabs](/components/web/tabs/).
+- You have more than 5 options so as not to overwhelm the user with too many choices.
+
+## Types
+
+Button groups support two layout directions: **horizontal** and **vertical**
+
+### Horizontal Button Group
+
+<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+  <input type="radio" class="btn-check" name="btnRadio" id="btnRadio1" autocomplete="off" checked>
+  <label class="btn btn-outline-primary" for="btnRadio1">Radio 1</label>
+
+  <input type="radio" class="btn-check" name="btnRadio" id="btnRadio2" autocomplete="off">
+  <label class="btn btn-outline-primary" for="btnRadio2">Radio 2</label>
+
+  <input type="radio" class="btn-check" name="btnRadio" id="btnRadio3" autocomplete="off">
+  <label class="btn btn-outline-primary" for="btnRadio3">Radio 3</label>
+</div>
+<br><br>
+
+### Vertical Button Group
+
+<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
+  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
+  <label class="btn btn-outline-primary" for="vbtn-radio1">Radio 1</label>
+  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
+  <label class="btn btn-outline-primary" for="vbtn-radio2">Radio 2</label>
+  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
+  <label class="btn btn-outline-primary" for="vbtn-radio3">Radio 3</label>
+</div>
+
+{{< whats-changed-table >}}
+
+| Date       | Version | Notes                | Contributors                             |
+| ---------- | ------- | -------------------- | ---------------------------------------- |
+| 02/14/2024 | 1.0.0   | New component added. | E. Gunther, E. Nowak, C. Oliff, C.Winsor |
+
+{{</ whats-changed-table >}}

content/components/web/button-group/accessibility.md → content/components/web/button-groups/accessibility.md

@@ -1,19 +1,20 @@
 ---
-title: "Button group"
+title: "Button Groups"
 layout: "single"
-description: "Group a series of buttons together on a single line."
+description: "Button groups allow selection from a similar or related set of options."
 components: true
 componentsWeb: true
 images:
   - "/img/components/headers/button-group.png"
 # bootstrapURL: "/components/button-group/"
 component: button-group
 tags: [accessibility]
-hidden: true
-private: true
 ---
 
 ## Accessibility
 
 - 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.
 - Use `aria-label` or `aria-labelledby` to label them.
+- Use the `<button type="button">` element. Don’t use `<a>` or `<span>` because screen readers won’t recognize it as a usable button.
+- Make sure all the buttons within the button group are focusable and part of a linear tabbing sequence.
+- When using an icon-only button group, each button must have a [Tooltip](/components/web/tooltips/).

content/components/web/button-group/styles.md → content/components/web/button-groups/styles.md

@@ -1,19 +1,52 @@
 ---
-title: "Button Group"
+title: "Button Groups"
 layout: "single"
-description: "Group a series of buttons together on a single line."
+description: "Button groups allow selection from a similar or related set of options."
 components: true
 componentsWeb: true
 images:
   - "/img/components/headers/button-group.png"
 # bootstrapURL: "/components/button-group/"
 tags: [styles]
 disableAnatomy: true
-popoverCSSInspector: true
-hidden: true
-private: true
 ---
 
+## Specifications
+
+- Button groups are consistent with the Modus button sizes and support primary and secondary options for both outline and solid states:
+
+  - Small (24 px)
+  - Default (32 px)
+  - Large (48 px)
+    <br><br>
+
+- Always use Buttons with consistent style and avoid combining Text Buttons with Icon Buttons within the same Button Group. There are 4 allowed variations:
+
+  - Icon Only
+  - Label Only
+  - Icon on Left + Label
+  - Label + Icon on Right
+
+### Colors
+
+The Button Groups utilize the same colors as the **Primary** and **Secondary** [Buttons](/components/web/buttons/styles/), both **Outline** and **Solid**.
+
+### Behavior
+
+- **Default:** The default interaction for the Button Group has no state. If a button is clicked, it emits an event but does not remain active. An example scenario may be an action bar or tool menu where the button press opens a dialog or an action that can be applied multiple times (e.g. clearing formatting or printing). This type allows a button to individually maintain its active state so some buttons stay active after click.
+
+- **Single Select:** The Button Group functions as a toggle. It marks a button as active on click clearing the active state of any other buttons. The common example would be text orientation, where you can pick only one option from: left aligned, center aligned, or right aligned.
+
+- **Multiple Select:** More than one button within the Button Group can be selected. A button becomes active on click but does not clear the others allowing multiple buttons to be visibly active at the same time. The common example would be text formatting; where you can pick bold, italic, underline, etc. and each can be applied at the same time.
+
+### Editorial
+
+- All buttons in the Modus Design System employ **sentence case**.
+- Buttons within the Button Group may use labels that are verbs representing an action (e.g. Copy, Paste, Edit, Print) or nouns representing a state (e.g. Bold, Italic, Underline).
+- Strive for short button labels that clearly describe the user’s choice.
+- Try to limit button labels to **three words or less**. Using one or two words, if possible, is ideal.
+- When writing button labels, you can remove most prepositions and articles (e.g. a, an, the).
+
 <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
   <input type="radio" class="btn-check" name="btnRadioLg" id="btnRadioLg1" autocomplete="off" checked>
   <label class="btn btn-outline-primary" for="btnRadioLg1">Radio 1</label>
@@ -23,7 +56,8 @@ private: true
 
   <input type="radio" class="btn-check" name="btnRadioLg" id="btnRadioLg3" autocomplete="off">
   <label class="btn btn-outline-primary" for="btnRadioLg3">Radio 3</label>
-</div><br><br>
+</div>
+<br><br>
 <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
   <input type="radio" class="btn-check" name="btnRadio" id="btnRadio1" autocomplete="off" checked>
   <label class="btn btn-outline-primary" for="btnRadio1">Radio 1</label>
@@ -74,15 +108,18 @@ Combine sets of button groups into button toolbars for more complex components.
 <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
   <input type="radio" class="btn-check" name="btnRadioIcon" id="btnRadioIcon1" autocomplete="off" checked>
   <label class="btn btn-outline-primary btn-icon-only" for="btnRadioIcon1"><svg width="24" height="24" fill="currentColor">
-          <use xlink:href="/modus-solid-icons.svg#wifi" /></svg></label>
+    <use xlink:href="/modus-solid-icons.svg#wifi" /></svg>
+  </label>
 
   <input type="radio" class="btn-check" name="btnRadioIcon" id="btnRadioIcon2" autocomplete="off">
   <label class="btn btn-outline-primary btn-icon-only" for="btnRadioIcon2"><svg width="24" height="24" fill="currentColor">
-          <use xlink:href="/modus-solid-icons.svg#wifi-off" /></svg></label>
+    <use xlink:href="/modus-solid-icons.svg#wifi-off" /></svg>
+  </label>
 
   <input type="radio" class="btn-check" name="btnRadioIcon" id="btnRadioIcon3" autocomplete="off">
   <label class="btn btn-outline-primary btn-icon-only" for="btnRadioIcon3"><svg width="24" height="24" fill="currentColor">
-          <use xlink:href="/modus-solid-icons.svg#wifi-no-internet" /></svg></label>
+    <use xlink:href="/modus-solid-icons.svg#wifi-no-internet" /></svg>
+  </label>
 </div>
 
 <style>

data/menu.yml

@@ -32,6 +32,7 @@
     - title: Autocomplete
     - title: Badges
     - title: Breadcrumbs
+    - title: Button Groups
     - title: Buttons
     - title: Cards
     - title: Checkboxes

hugo.yml

@@ -91,6 +91,8 @@ menu:
       url: /components/web/badges/
     - name: Breadcrumbs
       url: /components/web/breadcrumbs/
+    - name: Button Groups
+      url: /components/web/button-groups/
     - name: Buttons
       url: /components/web/buttons/
     - name: Cards