Use flexbox for button alignment

James Mejia · James Mejia · commit 03082ea89864 · 2023-09-11T08:42:45.000-05:00
Includes new setting $theme-button-column-gap, which takes units for the inner spacing.
diff --git a/packages/usa-button/src/styles/_usa-button.scss b/packages/usa-button/src/styles/_usa-button.scss
@@ -11,10 +11,12 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
   @include typeset($theme-button-font-family, null, 1);
   @include set-text-and-bg("primary", $context: $button-context);
   appearance: none;
+  align-items: center;
   border: 0;
   border-radius: radius($theme-button-border-radius);
   cursor: pointer;
-  display: inline-block;
+  column-gap: units($theme-button-column-gap);
+  display: inline-flex;
   font-weight: font-weight("bold");
   margin-right: units(1);
   padding: units(1.5) units(2.5);
@@ -52,11 +54,8 @@ $button-stroke: inset 0 0 0 units($theme-button-stroke-width);
     @include button-disabled;
   }
 
-  // @TODO: Use `:has()` selector once browser support improves.
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility
   .usa-icon {
-    margin-top: -0.1em; // Similar pattern to _usa-breadcrumb.scss:14.
-    vertical-align: middle;
+    flex-shrink: 0; // Avoid shrinking on small screens.
   }
 
   @media (forced-colors: active) {
diff --git a/packages/uswds-core/src/styles/settings/_settings-components.scss b/packages/uswds-core/src/styles/settings/_settings-components.scss
@@ -55,6 +55,7 @@ $theme-breadcrumb-separator-color: "base" !default;
 // Button
 $theme-button-font-family: "ui" !default;
 $theme-button-border-radius: "md" !default;
+$theme-button-column-gap: 1 !default;
 $theme-button-small-width: 6 !default;
 $theme-button-stroke-width: 2px !default;
 
