fix: button can now use @isfull arg on all sizes (#45)

* fix: button can now use @isfull arg on all sizes * fix: denali button tests * fix: use existing class name getter setup
denali-design · Oct 6, 2020 · a20c37a · a20c37a
1 parent 4eebe67
commit a20c37a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 4 deletions.
diff --git a/addon/components/denali-button-enums.js b/addon/components/denali-button-enums.js
@@ -4,5 +4,5 @@
  */
 
 export const STYLES = ['solid', 'outline', 'ghost', 'text', 'danger'];
-export const SIZES = ['default', 'small', 'medium', 'large', 'full'];
+export const SIZES = ['default', 'small', 'medium', 'large'];
 export const TYPES = ['button', 'submit', 'reset'];
diff --git a/addon/components/denali-button.hbs b/addon/components/denali-button.hbs
@@ -1,6 +1,6 @@
 {{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
 <button
-  class="button {{this.isActiveClass}} {{this.styleClass}} {{this.sizeClass}} {{this.isInverseClass}} {{this.hasIconClass}} {{this.hasLoaderClass}}"
+  class="button {{this.isActiveClass}} {{this.styleClass}} {{this.sizeClass}} {{this.isInverseClass}} {{this.hasIconClass}} {{this.hasLoaderClass}} {{this.isFullClass}}"
   type={{this.type}}
   ...attributes
 >

diff --git a/addon/components/denali-button.js b/addon/components/denali-button.js
@@ -17,6 +17,9 @@ export default class DenaliButtonComponent extends Component {
   @arg(oneOf(SIZES))
   size;
 
+  @arg(boolean)
+  isFull = false;
+
   @arg(boolean)
   isInverse = false;
 
@@ -37,6 +40,10 @@ export default class DenaliButtonComponent extends Component {
     return this.isActive ? 'is-active' : undefined;
   }
 
+  get isFullClass() {
+    return this.isFull ? 'is-full' : undefined;
+  }
+
   get styleClass() {
     return `is-${this.style}`;
   }

diff --git a/stories/button.stories.js b/stories/button.stories.js
@@ -25,6 +25,7 @@ export const Playground = () => ({
       @isActive={{isActive}}
       @isInverse={{isInverse}}
       @size={{size}}
+      @isFull={{isFull}}
       @style={{style}}
       @type={{type}}
       disabled={{disabled}}
@@ -39,6 +40,7 @@ export const Playground = () => ({
     isInverse: boolean('isInverse', false, argument),
     onClick: action('onClick'),
     size: select('size', SIZES, SIZES[0], argument),
+    isFull: boolean('isFull', false, argument),
     style: select('style', STYLES, STYLES[0], argument),
     type: select('type', TYPES, TYPES[0], argument),
     class: text('class', '', attribute),

diff --git a/tests/integration/components/denali-button-test.js b/tests/integration/components/denali-button-test.js
@@ -117,9 +117,34 @@ module('Integration | Component | denali-button', function (hooks) {
 
     this.set('size', 'large');
     assert.dom('.button').hasClass('is-large', 'DenaliButton has a large size when `@size` arg is set to large');
+  });
+
+  test('it supports isFull', async function (assert) {
+    await render(hbs`
+      <DenaliButton @size={{this.size}} @isFull={{this.isFull}}>
+        Inner Content
+      </DenaliButton>
+    `);
+
+    assert.dom('.button').exists('DenaliButton can render without a size set');
+    assert
+      .dom('.button')
+      .doesNotHaveClass('is-full', 'DenaliButton does not have a full size when `@isFull` arg is undefined');
 
-    this.set('size', 'full');
-    assert.dom('.button').hasClass('is-full', 'DenaliButton has a full size when `@size` arg is set to full');
+    this.set('isFull', true);
+    assert.dom('.button').hasClass('is-full', 'DenaliButton has a full size when `@isFull` arg is set to true');
+
+    this.set('size', 'small');
+    assert.dom('.button').hasClass('is-small', 'DenaliButton has a small size when `@size` arg is set to small');
+    assert
+      .dom('.button')
+      .hasClass('is-full', 'DenaliButton has a full size when `@isFull` arg is set to true and size is set to small');
+
+    this.set('isFull', false);
+    assert.dom('.button').hasClass('is-small', 'DenaliButton has a small size when `@size` arg is set to small');
+    assert
+      .dom('.button')
+      .doesNotHaveClass('is-full', 'DenaliButton does not have a full size when `@isFull` arg is set to false');
   });
 
   test('it supports icons', async function (assert) {