fix(fabSpeedDial): support all ng-repeat variants, fix CSS height

* support data-ng-repeat and x-ng-repeat * change height from `initial` to `auto` to fix issue in Chrome * rename helper function in tests * fix fabActions and fabToolbar comments closes angular#3632, closes angular#3370, closes angular#3796. closes angular#4006.
kennethcachia · Sep 23, 2015 · fc9f6e3 · fc9f6e3
1 parent 728b40d
commit fc9f6e3
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 31 deletions.
diff --git a/src/components/fabActions/fabActions.js b/src/components/fabActions/fabActions.js
@@ -8,7 +8,7 @@
   /**
    * @ngdoc directive
    * @name mdFabActions
-   * @module material.components.fabSpeedDial
+   * @module material.components.fabActions
    *
    * @restrict E
    *
@@ -29,8 +29,14 @@
       compile: function(element, attributes) {
         var children = element.children();
 
-        // Support both ng-repat and static content
-        if (children.attr('ng-repeat')) {
+        var hasNgRepeat = false;
+
+        angular.forEach(['', 'data-', 'x-'], function(prefix) {
+          hasNgRepeat = hasNgRepeat || (children.attr(prefix + 'ng-repeat') ? true : false);
+        });
+
+        // Support both ng-repeat and static content
+        if (hasNgRepeat) {
           children.addClass('md-fab-action-item');
         } else {
           // Wrap every child in a new div and add a class that we can scale/fling independently

diff --git a/src/components/fabActions/fabActions.spec.js b/src/components/fabActions/fabActions.spec.js
@@ -4,7 +4,7 @@ describe('<md-fab-actions> directive', function() {
 
   var pageScope, element, controller;
 
-  function compileAndLink(template) {
+  function build(template) {
     inject(function($compile, $rootScope) {
       pageScope = $rootScope.$new();
       element = $compile(template)(pageScope);
@@ -15,7 +15,7 @@ describe('<md-fab-actions> directive', function() {
   }
 
   it('supports static children', inject(function() {
-    compileAndLink(
+    build(
       '<md-fab-speed-dial>' +
       '  <md-fab-actions>' +
       '    <md-button>1</md-button>' +
@@ -29,22 +29,24 @@ describe('<md-fab-actions> directive', function() {
     expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
   }));
 
-  it('supports actions created by ng-repeat', inject(function() {
-    compileAndLink(
-      '<md-fab-speed-dial ng-init="nums=[1,2,3]">' +
-      '  <md-fab-actions>' +
-      '    <div ng-repeat="i in nums"><md-button>{{i}}</md-button></div>' +
-      '  </md-fab-actions>' +
-      '</md-fab-speed-dial>'
-    );
-
-    expect(element.find("md-fab-actions").children().length).toBe(3);
-    expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
-
-    pageScope.$apply('nums=[1,2,3,4]');
-
-    expect(element.find("md-fab-actions").children().length).toBe(4);
-    expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
-  }));
+  angular.forEach(['ng-repeat', 'data-ng-repeat', 'x-ng-repeat'], function(attr) {
+    it('supports actions created by ' + attr, inject(function() {
+      build(
+        '<md-fab-speed-dial ng-init="nums=[1,2,3]">' +
+        '  <md-fab-actions>' +
+        '    <div ' + attr + '="i in nums"><md-button>{{i}}</md-button></div>' +
+        '  </md-fab-actions>' +
+        '</md-fab-speed-dial>'
+      );
+
+      expect(element.find("md-fab-actions").children().length).toBe(3);
+      expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
+
+      pageScope.$apply('nums=[1,2,3,4]');
+
+      expect(element.find("md-fab-actions").children().length).toBe(4);
+      expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
+    }));
+  });
 
 });
diff --git a/src/components/fabSpeedDial/fabSpeedDial.scss b/src/components/fabSpeedDial/fabSpeedDial.scss
@@ -18,7 +18,7 @@ md-fab-speed-dial {
     display: flex;
 
     // Set the height so that the z-index in the JS animation works
-    height: initial;
+    height: auto;
 
     .md-fab-action-item {
       visibility: hidden;

diff --git a/src/components/fabToolbar/fabToolbar.js b/src/components/fabToolbar/fabToolbar.js
@@ -28,7 +28,7 @@
    * @description
    *
    * The `<md-fab-toolbar>` directive is used present a toolbar of elements (usually `<md-button>`s)
-   * for quick access to common actions when a floating action button is activated (via hover or
+   * for quick access to common actions when a floating action button is activated (via click or
    * keyboard navigation).
    *
    * @usage
@@ -145,7 +145,6 @@
 
         // If we're open
         if (ctrl.isOpen) {
-
           // Set the width/height to take up the full toolbar width
           backgroundElement.style.width = scale + 'px';
           backgroundElement.style.height = scale + 'px';

diff --git a/src/components/fabToolbar/fabToolbar.scss b/src/components/fabToolbar/fabToolbar.scss
@@ -79,6 +79,7 @@ md-fab-toolbar {
 
   md-toolbar {
     background-color: transparent !important;
+    pointer-events: none;
     z-index: $z-index-fab + 3;
 
     .md-toolbar-tools {

diff --git a/src/components/fabToolbar/fabToolbar.spec.js b/src/components/fabToolbar/fabToolbar.spec.js
@@ -4,7 +4,7 @@ describe('<md-fab-toolbar> directive', function() {
 
   var pageScope, element, controller;
 
-  function compileAndLink(template) {
+  function build(template) {
     inject(function($compile, $rootScope) {
       pageScope = $rootScope.$new();
       element = $compile(template)(pageScope);
@@ -15,7 +15,7 @@ describe('<md-fab-toolbar> directive', function() {
   }
 
   it('disables tabbing to the trigger (go straight to first element instead)', inject(function() {
-    compileAndLink(
+    build(
       '<md-fab-toolbar><md-fab-trigger><button></button></md-fab-trigger></md-fab-toolbar>'
     );
 
@@ -24,7 +24,7 @@ describe('<md-fab-toolbar> directive', function() {
 
 
   it('opens when the toolbar elements are focused', inject(function() {
-    compileAndLink(
+    build(
       '<md-fab-toolbar><md-fab-trigger><a></a></md-fab-trigger>' +
       '<md-fab-actions><button></button></md-fab-actions></md-fab-toolbar>'
     );
@@ -34,7 +34,7 @@ describe('<md-fab-toolbar> directive', function() {
   }));
 
   it('closes when the toolbar elements are blurred', inject(function() {
-    compileAndLink(
+    build(
       '<md-fab-toolbar><md-fab-actions><button></button></md-fab-actions></md-fab-toolbar>'
     );
 
@@ -46,7 +46,7 @@ describe('<md-fab-toolbar> directive', function() {
   }));
 
   it('allows programmatic opening through the md-open attribute', inject(function() {
-    compileAndLink(
+    build(
       '<md-fab-toolbar md-open="isOpen"></md-fab-toolbar>'
     );
 
@@ -63,7 +63,7 @@ describe('<md-fab-toolbar> directive', function() {
   }));
 
   it('properly finishes the animation', inject(function(mdFabToolbarAnimation) {
-    compileAndLink(
+    build(
       '<md-fab-toolbar md-open="isOpen">' +
       '  <md-fab-trigger><button></button></md-fab-trigger>' +
       '  <md-fab-actions><button></button></md-fab-actions>' +