LG-4226: Add explicit flexible width button modifier

CHANGELOG.md

@@ -14,7 +14,10 @@
   - Before: Hover and active colors are both `primary-darker`.
   - After: Hover is `primary-dark`, and active is `primary-darker`.
 - Improved support for "Unstyled" button variant ([see documentation](https://design.login.gov/components/buttons/))
-- Add two new wide-width button variants `usa-button--wide` and `usa-button--full-width`.
+- Add three new button variants to control width:
+  - `usa-button--wide` displays a button at a wider (minimum) width at larger viewport displays.
+  - `usa-button--flexible-width` displays a button at flexible width regardless of viewport size, and overrides default mobile appearance of full-width buttons.
+  - `usa-button--full-width` displays a button at full width regardless of viewport size, and overrides default desktop appearance of flexible-width buttons.
 
 ### Bug Fixes
 

docs/_components/buttons.md

@@ -137,6 +137,16 @@ Default button width for desktop viewports.
 
 <button class="usa-button usa-button--big">Default</button>
 
+Use `usa-button--flexible-width` to set flexible width buttons for mobile.
+
+```html
+<button class="usa-button usa-button--flexible-width">
+```
+
+<button class="usa-button usa-button--flexible-width">Default</button>
+
+<button class="usa-button usa-button--flexible-width usa-button--big">Default</button>
+
 ### Minimum width
 
 Use `usa-button--wide` to set a minimum button width for desktop viewports.

src/scss/components/_buttons.scss

@@ -126,6 +126,10 @@
   }
 }
 
+.usa-button--flexible-width {
+  width: auto;
+}
+
 .usa-button--wide {
   @include at-media('mobile-lg') {
     min-width: 14rem;