Merge pull request #2207 from uswds/jm-enhancement-button-icons

USWDS-Site - Changelog: Add entry for Button icon alignment
uswds · Feb 29, 2024 · fc0d9a9 · fc0d9a9
2 parents c0578e8 + d90140e
commit fc0d9a9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/_data/changelogs/component-button.yml b/_data/changelogs/component-button.yml
@@ -2,6 +2,21 @@ title: Button
 type: component
 changelogURL:
 items:
+  - date: NNNN-NN-NN
+    summary: Added a new setting to adjust the gap between the button's text and icon.
+    summaryAdditional: Gap between elements can be adjusted using the `$theme-button-icon-gap` setting.
+    affectsStyles: true
+    affectsSettings: true
+    githubPr: 5398
+    githubRepo: uswds
+    versionUswds: 3.8.0
+  - date: NNNN-NN-NN
+    summary: Improved the vertical alignment of `usa-icon` when placed inside of `usa-button`.
+    affectsStyles: true
+    affectsSettings: true
+    githubPr: 5398
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2024-01-17
     summary: Added WCAG compliance tag and accessibility test status section.
     affectsGuidance: true

diff --git a/_data/changelogs/docs-settings.yml b/_data/changelogs/docs-settings.yml
@@ -2,6 +2,14 @@ title: Settings
 type: utility
 changelogURL:
 items:
+  - date: NNNN-NN-NN
+    summary: Added button icon gap setting.
+    summaryAdditional: You can now customize the size of the gap between a button's text and icon with `$theme-button-icon-gap`.
+    affectsStyles: true
+    affectsSettings: true
+    githubPr: 5398
+    githubRepo: uswds
+    versionUswds: 3.8.0
   - date: 2023-12-08
     summary: Fixed a bug that prevented `$theme-max-header-width` from accepting a value of "none".
     affectsStyles: true

diff --git a/_data/settings/components/button.yml b/_data/settings/components/button.yml
@@ -1,14 +1,19 @@
 name: Button
 contents:
+  - name: Border radius
+    description: Button border radius for rounded corners.
+    var: $theme-button-border-radius
+    default: '"md"'
+    type: units
   - name: Font family
     description: Font family of the button.
     var: $theme-button-font-family
     default: '"ui"'
     type: family
-  - name: Border radius
-    description: Button border radius for rounded corners.
-    var: $theme-button-border-radius
-    default: '"md"'
+  - name: Icon gap
+    description: Size of the gap between the button's text and icon.
+    var: $theme-button-icon-gap
+    default: 1
     type: units
   - name: Small width
     description: Width of small buttons. Used to define the size of the header search button and small language selector button.