fix(fab-speed-dial): opens when trigger button is disabled

- when the trigger is clicked, verify that the trigger button isn't disabled
  before toggling the open state
- style the disabled speed dial trigger fab button using the current theme
  to support both light and dark themes
- fix issue where the disabled background (mostly transparent)
  allowed opaque `md-fab-action-item`s to fade through
- disabled fab buttons now have no `box-shadow` which is consistent
  with Angular Material
- fix basic usage demo to not have a black hover/focus background
  as that doesn't work at all on dark theme and was confusing in light theme
- add test for when the click occurs on the `md-icon` instead of the `md-button`
- remove duplicate `$button-fab-width` variable

Fixes #9467

Author: Splaktar

src/components/button/button.scss

@@ -145,6 +145,10 @@ button.md-button::-moz-focus-inner {
     &.ng-hide, &.ng-leave {
       transition: none;
     }
+
+    &[disabled] {
+      box-shadow: none;
+    }
   }
 
   &:not([disabled]) {

src/components/fabSpeedDial/demoBasicUsage/style.scss

@@ -1,20 +1,14 @@
 .text-capitalize {
   text-transform: capitalize;
 }
-
-.md-fab:hover, .md-fab.md-focused {
-  background-color: #000 !important;
-}
-
 p.note {
   font-size: 1.2rem;
 }
-
 .lock-size {
   min-width: 300px;
   min-height: 300px;
   width: 300px;
   height: 300px;
   margin-left: auto;
   margin-right: auto;
-}
+}

src/components/fabSpeedDial/fabController.js

@@ -5,16 +5,16 @@
     .controller('MdFabController', MdFabController);
 
   function MdFabController($scope, $element, $animate, $mdUtil, $mdConstant, $timeout) {
-    var vm = this;
+    var ctrl = this;
     var initialAnimationAttempts = 0;
 
     // NOTE: We use async eval(s) below to avoid conflicts with any existing digest loops
 
-    vm.open = function() {
+    ctrl.open = function() {
       $scope.$evalAsync("vm.isOpen = true");
     };
 
-    vm.close = function() {
+    ctrl.close = function() {
       // Async eval to avoid conflicts with existing digest loops
       $scope.$evalAsync("vm.isOpen = false");
 
@@ -23,15 +23,16 @@
     };
 
     // Toggle the open/close state when the trigger is clicked
-    vm.toggle = function() {
+    ctrl.toggle = function() {
       $scope.$evalAsync("vm.isOpen = !vm.isOpen");
     };
 
     /*
      * AngularJS Lifecycle hook for newer AngularJS versions.
-     * Bindings are not guaranteed to have been assigned in the controller, but they are in the $onInit hook.
+     * Bindings are not guaranteed to have been assigned in the controller, but they are in the
+     * $onInit hook.
      */
-    vm.$onInit = function() {
+    ctrl.$onInit = function() {
       setupDefaults();
       setupListeners();
       setupWatchers();
@@ -47,10 +48,10 @@
 
     function setupDefaults() {
       // Set the default direction to 'down' if none is specified
-      vm.direction = vm.direction || 'down';
+      ctrl.direction = ctrl.direction || 'down';
 
       // Set the default to be closed
-      vm.isOpen = vm.isOpen || false;
+      ctrl.isOpen = ctrl.isOpen || false;
 
       // Start the keyboard interaction at the first action
       resetActionIndex();
@@ -82,6 +83,10 @@
     }
 
     var closeTimeout;
+
+    /**
+     * @param {MouseEvent} event
+     */
     function parseEvents(event) {
       // If the event is a click, just handle it
       if (event.type == 'click') {
@@ -91,7 +96,7 @@
       // If we focusout, set a timeout to close the element
       if (event.type == 'focusout' && !closeTimeout) {
         closeTimeout = $timeout(function() {
-          vm.close();
+          ctrl.close();
         }, 100, false);
       }
 
@@ -103,7 +108,7 @@
     }
 
     function resetActionIndex() {
-      vm.currentActionIndex = -1;
+      ctrl.currentActionIndex = -1;
     }
 
     function setupWatchers() {
@@ -179,8 +184,8 @@
       });
 
       // TODO: On desktop, we should be able to reset the indexes so you cannot tab through, but
-      // this breaks accessibility, especially on mobile, since you have no arrow keys to press
-      // resetActionTabIndexes();
+      //   this breaks accessibility, especially on mobile, since you have no arrow keys to press
+      //   resetActionTabIndexes();
     }
 
     function disableKeyboard() {
@@ -194,14 +199,14 @@
         var closestActions = $mdUtil.getClosest(event.target, 'md-fab-actions');
 
         if (!closestTrigger && !closestActions) {
-          vm.close();
+          ctrl.close();
         }
       }
     }
 
     function keyPressed(event) {
       switch (event.which) {
-        case $mdConstant.KEY_CODE.ESCAPE: vm.close(); event.preventDefault(); return false;
+        case $mdConstant.KEY_CODE.ESCAPE: ctrl.close(); event.preventDefault(); return false;
         case $mdConstant.KEY_CODE.LEFT_ARROW: doKeyLeft(event); return false;
         case $mdConstant.KEY_CODE.UP_ARROW: doKeyUp(event); return false;
         case $mdConstant.KEY_CODE.RIGHT_ARROW: doKeyRight(event); return false;
@@ -221,12 +226,12 @@
       var actions = resetActionTabIndexes();
 
       // Increment/decrement the counter with restrictions
-      vm.currentActionIndex = vm.currentActionIndex + direction;
-      vm.currentActionIndex = Math.min(actions.length - 1, vm.currentActionIndex);
-      vm.currentActionIndex = Math.max(0, vm.currentActionIndex);
+      ctrl.currentActionIndex = ctrl.currentActionIndex + direction;
+      ctrl.currentActionIndex = Math.min(actions.length - 1, ctrl.currentActionIndex);
+      ctrl.currentActionIndex = Math.max(0, ctrl.currentActionIndex);
 
       // Focus the element
-      var focusElement =  angular.element(actions[vm.currentActionIndex]).children()[0];
+      var focusElement =  angular.element(actions[ctrl.currentActionIndex]).children()[0];
       angular.element(focusElement).attr('tabindex', 0);
       focusElement.focus();
 
@@ -248,52 +253,76 @@
     }
 
     function doKeyLeft(event) {
-      if (vm.direction === 'left') {
+      if (ctrl.direction === 'left') {
         doActionNext(event);
       } else {
         doActionPrev(event);
       }
     }
 
     function doKeyUp(event) {
-      if (vm.direction === 'down') {
+      if (ctrl.direction === 'down') {
         doActionPrev(event);
       } else {
         doActionNext(event);
       }
     }
 
     function doKeyRight(event) {
-      if (vm.direction === 'left') {
+      if (ctrl.direction === 'left') {
         doActionPrev(event);
       } else {
         doActionNext(event);
       }
     }
 
     function doKeyDown(event) {
-      if (vm.direction === 'up') {
+      if (ctrl.direction === 'up') {
         doActionPrev(event);
       } else {
         doActionNext(event);
       }
     }
 
-    function isTrigger(element) {
+    /**
+     * @param {Node} element
+     * @returns {Node|null}
+     */
+    function getClosestButton(element) {
+      return $mdUtil.getClosest(element, 'button') || $mdUtil.getClosest(element, 'md-button');
+    }
+
+    /**
+     * @param {Node} element
+     * @returns {Node|null}
+     */
+    function getClosestTrigger(element) {
       return $mdUtil.getClosest(element, 'md-fab-trigger');
     }
 
-    function isAction(element) {
+    /**
+     * @param {Node} element
+     * @returns {Node|null}
+     */
+    function getClosestAction(element) {
       return $mdUtil.getClosest(element, 'md-fab-actions');
     }
 
+    /**
+     * @param {MouseEvent} event
+     */
     function handleItemClick(event) {
-      if (isTrigger(event.target)) {
-        vm.toggle();
+      var closestButton = event.target ? getClosestButton(event.target) : null;
+
+      // Check that the button in the trigger is not disabled
+      if (closestButton && !closestButton.disabled) {
+        if (getClosestTrigger(event.target)) {
+          ctrl.toggle();
+        }
       }
 
-      if (isAction(event.target)) {
-        vm.close();
+      if (getClosestAction(event.target)) {
+        ctrl.close();
       }
     }
 

src/components/fabSpeedDial/fabSpeedDial-theme.scss

@@ -0,0 +1,5 @@
+md-fab-speed-dial.md-THEME_NAME-theme {
+  md-fab-trigger .md-fab.md-button[disabled] {
+    background-color: '{{foreground-4}}';
+  }
+}

src/components/fabSpeedDial/fabSpeedDial.js

@@ -145,7 +145,7 @@
 
         styles.transform = styles.webkitTransform = '';
         styles.transitionDelay = '';
-        styles.opacity = 1;
+        styles.opacity = ctrl.isOpen ? 1 : 0;
 
         // Make the items closest to the trigger have the highest z-index
         styles.zIndex = (items.length - index) + startZIndex;

src/components/fabSpeedDial/fabSpeedDial.spec.js

@@ -53,7 +53,7 @@ describe('<md-fab-speed-dial> directive', function() {
     build(
      '<md-fab-speed-dial>' +
       '  <md-fab-trigger>' +
-      '    <md-button></md-button>' +
+      '    <md-button class="md-fab"></md-button>' +
       '  </md-fab-trigger>' +
       '</md-fab-speed-dial>'
     );
@@ -78,6 +78,35 @@ describe('<md-fab-speed-dial> directive', function() {
     expect(controller.isOpen).toBe(false);
   }));
 
+  it('toggles the menu when the trigger icon is clicked', inject(function() {
+    build(
+      '<md-fab-speed-dial>' +
+      '  <md-fab-trigger>' +
+      '    <md-button class="md-fab"><md-icon md-svg-src="img/icons/menu.svg"></md-icon></md-button>' +
+      '  </md-fab-trigger>' +
+      '</md-fab-speed-dial>'
+    );
+
+    // Click to open
+    var clickEvent = {
+      type: 'click',
+      target: element.find('md-icon')
+    };
+    element.triggerHandler(clickEvent);
+    pageScope.$digest();
+
+    expect(controller.isOpen).toBe(true);
+
+    // Make sure to flush the timeout that ignores other events
+    $timeout.flush();
+
+    // Click to close
+    element.triggerHandler(clickEvent);
+    pageScope.$digest();
+
+    expect(controller.isOpen).toBe(false);
+  }));
+
 
   it('closes the menu when an action is clicked', inject(function() {
     build(

src/components/fabToolbar/fabToolbar.scss

@@ -1,4 +1,3 @@
-$button-fab-width: rem(5.600) !default;
 $icon-button-margin: rem(0.600) !default;
 
 md-fab-toolbar {
@@ -105,7 +104,7 @@ md-fab-toolbar {
   }
 
   /*
-   * Hover styling
+   * Open styling
    */
   &.md-is-open {
     md-fab-trigger > button {

src/core/util/util.js

@@ -622,8 +622,9 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
       });
     },
 
-    /*
-     * getClosest replicates jQuery.closest() to walk up the DOM tree until it finds a matching nodeName
+    /**
+     * getClosest replicates jQuery.closest() to walk up the DOM tree until it finds a matching
+     * nodeName.
      *
      * @param {Node} el Element to start walking the DOM from
      * @param {string|function} validateWith If a string is passed, it will be evaluated against