feat: support more sizes in DenaliSelect

BREAKING CHANGE: `isSmall` arg has been replaced with `size` arg to support more sizes
denali-design · Jan 25, 2021 · 36b5e2e · 36b5e2e
1 parent a3c7dbb
commit 36b5e2e
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 17 deletions.
diff --git a/addon/components/denali-select-enums.js b/addon/components/denali-select-enums.js
@@ -0,0 +1,5 @@
+/**
+ * Copyright 2021, Verizon Media
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+export const SIZES = ['small', 'medium', 'large'];
diff --git a/addon/components/denali-select.hbs b/addon/components/denali-select.hbs
@@ -1,5 +1,5 @@
 {{!-- Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. --}}
-<div class="input has-arrow {{this.isSmallClass}} {{this.isInverseClass}}">
+<div class="input has-arrow {{this.sizeClass}} {{this.isInverseClass}}">
   <select {{on "change" this.onSelect}} ...attributes>
     {{#each this.options as |opt|}}
       <option

diff --git a/addon/components/denali-select.js b/addon/components/denali-select.js
@@ -4,12 +4,13 @@
  */
 import Component from '@glimmer/component';
 import { arg } from 'ember-arg-types';
-import { func, boolean, array, any } from 'prop-types';
+import { func, boolean, array, any, oneOf } from 'prop-types';
 import { action } from '@ember/object';
+import { SIZES } from './denali-select-enums';
 
 export default class DenaliSelectComponent extends Component {
-  @arg(boolean)
-  isSmall = false;
+  @arg(oneOf(SIZES))
+  size;
 
   @arg(boolean)
   isInverse = false;
@@ -31,8 +32,8 @@ export default class DenaliSelectComponent extends Component {
     this.onChange(this.options[e.target.selectedIndex]);
   }
 
-  get isSmallClass() {
-    return this.isSmall ? 'is-small' : undefined;
+  get sizeClass() {
+    return this.size ? `is-${this.size}` : undefined;
   }
 
   get isInverseClass() {

diff --git a/stories/select.stories.js b/stories/select.stories.js
@@ -1,7 +1,8 @@
 import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, array, boolean, text } from '@storybook/addon-knobs';
+import { withKnobs, array, boolean, select, text } from '@storybook/addon-knobs';
 import { argument, attribute, example } from './knob-categories';
+import { SIZES } from '../addon/components/denali-select-enums';
 
 export default {
   title: 'DenaliSelect',
@@ -26,13 +27,15 @@ export const Default = () => ({
   },
 });
 
+const allSizes = [undefined, ...SIZES];
+
 export const Playground = () => ({
   template: hbs`
     <DenaliSelect
       @options={{items}}
       @selectedOption={{selectedItem}}
       @disabledOptions={{disabledItems}}
-      @isSmall={{isSmall}}
+      @size={{size}}
       @isInverse={{isInverse}}
       @onChange={{queue onChange (fn (mut selectedItem))}}
       class={{class}}
@@ -41,7 +44,7 @@ export const Playground = () => ({
     </DenaliSelect>
   `,
   context: {
-    isSmall: boolean('isSmall', false, argument),
+    size: select('size', allSizes, allSizes[0], argument),
     isInverse: boolean('isInverse', false, argument),
     class: text('class', '', attribute),
     items: array('items', ['Ember', 'Denali', 'Select'], ',', example),

diff --git a/tests/integration/components/denali-select-test.js b/tests/integration/components/denali-select-test.js
@@ -89,20 +89,30 @@ module('Integration | Component | denali-select', function (hooks) {
     );
   });
 
-  test('it supports small size', async function (assert) {
-    assert.expect(2);
-
+  test('it supports sizes', async function (assert) {
+    this.set('options', opts);
     await render(hbs`
-      <DenaliSelect @options={{this.options}} @isSmall={{this.isSmall}} as |option|>
+      <DenaliSelect 
+        @options={{this.options}} 
+        @size={{this.size}}
+        as |option|
+      >
         {{option.text}}
       </DenaliSelect>
     `);
 
-    this.set('options', opts);
-    assert.dom('div.input').doesNotHaveClass('is-small', 'DenaliSelect does not have small styling by default');
+    assert
+      .dom('.input')
+      .doesNotHaveClass(/is-small|is-medium|is-large/, 'DenaliSelect wrapper does not have a size class by default');
+
+    this.set('size', 'small');
+    assert.dom('.input').hasClass('is-small', 'DenaliSelect wrapper has the appropriate class for small');
+
+    this.set('size', 'medium');
+    assert.dom('.input').hasClass('is-medium', 'DenaliSelect wrapper has the appropriate class for medium');
 
-    this.set('isSmall', 'true');
-    assert.dom('div.input').hasClass('is-small', 'DenaliSelect has a small size when `@isSmall` arg is set to true');
+    this.set('size', 'large');
+    assert.dom('.input').hasClass('is-large', 'DenaliSelect wrapper has the appropriate class for large');
   });
 
   test('it supports inverse colors', async function (assert) {