feat(Dropdown): add disabled state to dropdown component (#276)

* feat(Dropdown): add disabled state to dropdown component

* refactor(Dropdown): simplify sass and disable cursor

Author: ryanomackey

src/components/dropdown/_dropdown.scss

@@ -111,4 +111,9 @@
       }
     }
   }
+
+  .bx--dropdown--disabled {
+    opacity: .5;
+    cursor: not-allowed;
+  }
 }

src/components/dropdown/dropdown.js

@@ -74,8 +74,14 @@ class Dropdown extends mixin(createComponent, initComponentBySearch, trackBlur)
    * @param {Event} [event] The event triggering this method.
    */
   _toggle(event) {
-    if (([13, 32, 40].indexOf(event.which) >= 0 && !event.target.matches(this.options.selectorItem))
-    || event.which === 27 || event.type === 'click') {
+    const isDisabled = this.element.classList.contains('bx--dropdown--disabled');
+
+    if (isDisabled) {
+      return;
+    }
+
+    if (([13, 32, 40].indexOf(event.which) >= 0 && !event.target.matches(this.options.selectorItem)) ||
+    event.which === 27 || event.type === 'click') {
       const isOpen = this.element.classList.contains('bx--dropdown--open');
       const isOfSelf = this.element.contains(event.target);
       const actions = {

tests/spec/dropdown_spec.js

@@ -138,6 +138,12 @@ describe('Dropdown', function () {
       expect(stubFocus, 'Focus requested').not.to.have.been.called;
     });
 
+    it('Should not open when the disabled class is applied', function () {
+      element.classList.add('bx--dropdown--disabled');
+      element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      expect(element.classList.contains('bx--dropdown--open'), 'Open state').to.be.false;
+    });
+
     afterEach(function () {
       if (stubFocus) {
         stubFocus.restore();