docs(button-group): Add documentation for data-text

Addresses [https://stackoverflow.atlassian.net/browse/STACKS-588](https://stackoverflow.atlassian.net/browse/STACKS-588)
StackExchange · May 1, 2024 · 6100a87 · 6100a87
1 parent 34326eb
commit 6100a87
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 24 deletions.
diff --git a/docs/_data/button-groups.json b/docs/_data/button-groups.json
@@ -5,5 +5,29 @@
       "applies": "N/A",
       "description": "Base button group style."
     }
+  ],
+  "button-attributes": [
+    {
+      "title": "Accessibility",
+      "description": "When used as navigation or a filter, button groups should include the <code class=\"stacks-code\">aria-current</code> attribute with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values\">appropriate value</a>.",
+      "attributes": [
+        {
+          "attribute": "aria-current=\"[value]\"",
+          "applies": ".s-btn.is-selected",
+          "description": "When using a button group for navigation or filtering, include the <code class=\"stacks-code\">aria-current</code> attribute with the <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values\">appropriate value</a> to the selected button. Most commonly used values are <code class=\"stacks-code\">page</code>, <code class=\"stacks-code\">step</code>, and <code class=\"stacks-code\">true</code>."
+        }
+      ]
+    },
+    {
+      "title": "Preventing layout shift",
+      "description": "Horizontal layout shift may occur when changing which button is selected within a button group. We recommend including the <code class=\"stacks-code\">data-text</code> attribute on each button text element with the value duplicating the text of the button to prevent the layout shift. See below for examples.",
+      "attributes": [
+        {
+          "attribute": "data-text=\"[value]\"",
+          "applies": ".s-btn",
+          "description": "Prevents layout shift when changing selected button. Value should be the text of the button."
+        }
+      ]
+    }
   ]
 }
diff --git a/docs/product/components/button-groups.html b/docs/product/components/button-groups.html
@@ -27,33 +27,35 @@
             </tbody>
         </table>
     </div>
-</section>
 
+    {% header "h2", "Button attributes" %}
 
-{% header "h2", "Accessibility" %}
-<p class="stacks-copy">
-    When used as navigation or a filter, button groups should include the <code class="stacks-code">aria-current</code> attribute with the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values">appropriate value</a>.
-</p>
+    {% for item in button-groups.button-attributes %}
+        {% header "h3", item.title %}
 
-<section class="stacks-section">
-    <div class="overflow-x-auto mb32" tabindex="0">
-        <table class="wmn4 s-table s-table__bx-simple">
-            <thead>
-                <tr>
-                    <th scope="col" class="s-table--cell3">Item</th>
-                    <th scope="col" class="s-table--cell3">Applied to</th>
-                    <th scope="col">Description</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td><code class="stacks-code">aria-current="[value]"</code></td>
-                    <td><code class="stacks-code">.s-btn.is-selected</code></td>
-                    <td>When using a button group for navigation or filtering, include the <code class="stacks-code">aria-current</code> attribute with the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values">appropriate value</a> to the selected button. Most commonly used values are <code class="stacks-code">page</code>, <code class="stacks-code">step</code>, and <code class="stacks-code">true</code>.</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
+        <p class="stacks-copy">{{item.description}}</p>
+
+        <div class="overflow-x-auto mb32" tabindex="0">
+            <table class="wmn4 s-table s-table__bx-simple">
+                <thead>
+                    <tr>
+                        <th scope="col" class="s-table--cell3">Item</th>
+                        <th scope="col" class="s-table--cell3">Applied to</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for attribute in item.attributes %}
+                        <tr>
+                            <th scope="row"><code class="stacks-code">{{ attribute.attribute }}</code></th>
+                            <td><code class="stacks-code">{{ attribute.applies }}</td>
+                            <td class="p8">{{ attribute.description }}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    {% endfor %}
 </section>
 
 <section class="stacks-section">