feat: providing auto width for buttons (#898)

* feat: providing auto width for buttons

* Update _buttons.md

* Update button.hbs

* Update 10-button-width.hbs

Author: mfranzke

source/_patterns/01-elements/buttons/10-button-width.hbs

@@ -0,0 +1,6 @@
+{{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}}
+<p>
+	{{> elements-button variant='brand-primary' value='(Default) Auto width'}}
+	<!-- [html-validate-disable-next no-inline-style -- we're doing inline-styling for simplification here] -->
+	<span style="width: 500px;display:inline-block;">{{> elements-button variant='brand-primary' value='Width full' width='full' }}</span>
+</p>

source/_patterns/01-elements/buttons/_buttons.md

@@ -25,6 +25,18 @@ Extend one of the size SCSS placeholders in case that you don't want the default
 
 You could set the different button sizes via the `data-size` attribute, the default is "regular" and in that case is optional.
 
+### Width
+
+Regularly, our buttons shouldn't increase to it's horizontally available space, but only the one determined by it's included textual content.
+
+#### SCSS (recommended)
+
+Extend the width SCSS placeholders in case that you don't want the default (`auto`): `%width-Full`
+
+#### HTML attribute
+
+You could set the button width to increase to it's full available space via the `data-width="full"` attribute, the default is `auto` and in that case is optional.
+
 ## Usability
 
 > Buttons should be used in situations where users might need to:

source/_patterns/01-elements/buttons/button.hbs

@@ -7,6 +7,7 @@
 	{{#if disabled }} disabled{{/if }}
 	{{#if icon}} data-icon="{{ icon }}"{{/if}}
 	{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
-	{{#if label}} aria-label="{{ label }}"{{/if }}>
+	{{#if label}} aria-label="{{ label }}"{{/if }}
+	{{#if width }} data-width="{{ width }}"{{/if }}>
 	{{{ value }}}
 </button>

source/_patterns/01-elements/buttons/button.scss

@@ -216,4 +216,13 @@
 	&:disabled {
 		color: unquote($button---color + "80");
 	}
+
+	// width
+	&%width-Full {
+		inline-size: 100%;
+	}
+
+	&[data-width="full"] {
+		@extend %width-Full;
+	}
 }