Merge pull request #325 from appuniversum/feature/add-button-overflow

Add wrap property to a button
appuniversum · Sep 30, 2022 · 2fc6e2f · 2fc6e2f
2 parents 04a7466 + dec35e1
commit 2fc6e2f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/addon/components/au-button.hbs b/addon/components/au-button.hbs
@@ -1,5 +1,5 @@
 <button
-  class="au-c-button {{this.width}} {{this.size}} {{this.skin}} {{this.alert}} {{this.loading}} {{this.disabled}} {{if (and @icon @hideText) 'au-c-button--icon-only'}}" disabled={{@disabled}}
+  class="au-c-button {{this.width}} {{this.size}} {{this.skin}} {{this.alert}} {{this.loading}} {{this.disabled}} {{if (and @icon @hideText) 'au-c-button--icon-only'}} {{if @wrap 'au-c-button--wrap'}}" disabled={{@disabled}}
   type="button"
   ...attributes
 >

diff --git a/app/styles/ember-appuniversum/_c-button.scss b/app/styles/ember-appuniversum/_c-button.scss
@@ -399,6 +399,13 @@ $au-button-icon-only-width-large                : $au-button-height-large  !defa
   }
 }
 
+// Wrap text inside a button
+.au-c-button--wrap {
+  height: auto;
+  white-space: initial;
+  text-align: left;
+}
+
 // Block button
 .au-c-button--block {
   display: flex;

diff --git a/stories/5-components/Buttons/AuButton.stories.js b/stories/5-components/Buttons/AuButton.stories.js
@@ -31,6 +31,10 @@ export default {
       options: ['', 'block'],
       description: 'Defines the width of a button',
     },
+    wrap: {
+      control: 'boolean',
+      description: 'Wrap the text inside a button',
+    },
     alert: {
       control: 'boolean',
       description: 'Adds an alert state to the button',
@@ -62,6 +66,7 @@ const Template = (args) => ({
       @iconAlignment={{this.iconAlignment}}
       @hideText={{this.hideText}}
       @width={{this.width}}
+      @wrap={{this.wrap}}
       @alert={{this.alert}}
       @disabled={{this.disabled}}
       @loading={{this.loading}}
@@ -81,6 +86,7 @@ Primary.args = {
   iconAlignment: 'left',
   hideText: false,
   width: '',
+  wrap: '',
   alert: false,
   disabled: false,
   loading: false,
@@ -95,6 +101,7 @@ Secondary.args = {
   iconAlignment: 'left',
   hideText: false,
   width: '',
+  wrap: '',
   alert: false,
   disabled: false,
   loading: false,
@@ -109,6 +116,7 @@ PrimaryLink.args = {
   iconAlignment: 'left',
   hideText: false,
   width: '',
+  wrap: '',
   alert: false,
   disabled: false,
   loading: false,
@@ -123,6 +131,7 @@ SecondaryLink.args = {
   iconAlignment: 'left',
   hideText: false,
   width: '',
+  wrap: '',
   alert: false,
   disabled: false,
   loading: false,