feat: add wrapperClass arg to DenaliSelect (denali-design#64)

ayeswarya · Jan 28, 2021 · 0db6f06 · 0db6f06
1 parent 36b5e2e
commit 0db6f06
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
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.sizeClass}} {{this.isInverseClass}}">
+<div class="input has-arrow {{this.sizeClass}} {{this.isInverseClass}} {{this.wrapperClass}}">
   <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,11 +4,14 @@
  */
 import Component from '@glimmer/component';
 import { arg } from 'ember-arg-types';
-import { func, boolean, array, any, oneOf } from 'prop-types';
+import { func, boolean, string, array, any, oneOf } from 'prop-types';
 import { action } from '@ember/object';
 import { SIZES } from './denali-select-enums';
 
 export default class DenaliSelectComponent extends Component {
+  @arg(string)
+  wrapperClass;
+
   @arg(oneOf(SIZES))
   size;
 

diff --git a/stories/select.stories.js b/stories/select.stories.js
@@ -36,6 +36,7 @@ export const Playground = () => ({
       @selectedOption={{selectedItem}}
       @disabledOptions={{disabledItems}}
       @size={{size}}
+      @wrapperClass={{wrapperClass}}
       @isInverse={{isInverse}}
       @onChange={{queue onChange (fn (mut selectedItem))}}
       class={{class}}
@@ -47,6 +48,7 @@ export const Playground = () => ({
     size: select('size', allSizes, allSizes[0], argument),
     isInverse: boolean('isInverse', false, argument),
     class: text('class', '', attribute),
+    wrapperClass: text('wrapperClass', '', argument),
     items: array('items', ['Ember', 'Denali', 'Select'], ',', example),
     selectedItem: text('selectedItem', 'Denali', example),
     disabledItems: array('disabledItems', ['Select'], ',', example),

diff --git a/tests/integration/components/denali-select-test.js b/tests/integration/components/denali-select-test.js
@@ -89,11 +89,30 @@ module('Integration | Component | denali-select', function (hooks) {
     );
   });
 
+  test('it supports wrapperClass', async function (assert) {
+    this.set('options', opts);
+    await render(hbs`
+      <DenaliSelect
+        @options={{this.options}}
+        @wrapperClass={{this.wrapperClass}}
+        as |option|
+      >
+        {{option.text}}
+      </DenaliSelect>
+    `);
+
+    const wrapperClass = 'wrapperClass';
+    assert.dom('.input').doesNotHaveClass(wrapperClass, 'DenaliSelect wrapper does not have a size class by default');
+
+    this.set('wrapperClass', wrapperClass);
+    assert.dom('.input').hasClass(wrapperClass, 'DenaliSelect wrapper has the provided wrapper class');
+  });
+
   test('it supports sizes', async function (assert) {
     this.set('options', opts);
     await render(hbs`
-      <DenaliSelect 
-        @options={{this.options}} 
+      <DenaliSelect
+        @options={{this.options}}
         @size={{this.size}}
         as |option|
       >