feat(list): support md-no-focus class

* Refactors `md-no-focus-style` attribute into the `md-no-focus` class.
* Adds support for `md-no-focus` class forwarding for the list item.
* Add documentation for `md-menu` as proxy item
* Enhance tests for `md-menu` inside of `md-list-item`

BREAKING CHANGE: `md-no-focus-style` attribute on `md-button` is now a
class (`.md-no-focus`)

Closes #8691.

Closes #8734

Author: devversion

src/components/button/button.js

@@ -53,8 +53,30 @@ function MdAnchorDirective($mdTheming) {
  * the FAB button background is filled with the accent color [by default]. The primary color palette may be used with
  * the `md-primary` class.
  *
+ * Developers can also change the color palette of the button, by using the following classes
+ * - `md-primary`
+ * - `md-accent`
+ * - `md-warn`
+ *
+ * See for example
+ *
+ * <hljs lang="html">
+ *   <md-button class="md-primary">Primary Button</md-button>
+ * </hljs>
+ *
+ * Button can be also raised, which means that they will use the current color palette to fill the button.
+ *
+ * <hljs lang="html">
+ *   <md-button class="md-accent md-raised">Raised and Accent Button</md-button>
+ * </hljs>
+ *
+ * It is also possible to disable the focus effect on the button, by using the following markup.
+ *
+ * <hljs lang="html">
+ *   <md-button class="md-no-focus">No Focus Style</md-button>
+ * </hljs>
+ *
  * @param {boolean=} md-no-ink If present, disable ripple ink effects.
- * @param {boolean=} md-no-focus-style If present, disable focus style on button
  * @param {expression=} ng-disabled En/Disable based on the expression
  * @param {string=} md-ripple-size Overrides the default ripple size logic. Options: `full`, `partial`, `auto`
  * @param {string=} aria-label Adds alternative text to button for accessibility, useful for icon buttons.
@@ -138,7 +160,7 @@ function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
       }
     });
 
-    if (!angular.isDefined(attr.mdNoFocusStyle)) {
+    if (!element.hasClass('md-no-focus')) {
       // restrict focus styles to the keyboard
       scope.mouseActive = false;
       element.on('mousedown', function() {
@@ -156,6 +178,7 @@ function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
         element.removeClass('md-focused');
       });
     }
+
   }
 
 }

src/components/button/button.spec.js

@@ -75,6 +75,15 @@ describe('md-button', function() {
     expect(button[0]).not.toHaveClass('md-focused');
   }));
 
+  it('should not set the focus state if focus is disabled', inject(function($compile, $rootScope) {
+    var button = $compile('<md-button class="md-no-focus">')($rootScope.$new());
+    $rootScope.$apply();
+
+    button.triggerHandler('focus');
+
+    expect(button).not.toHaveClass('md-focused');
+  }));
+
   describe('with href or ng-href', function() {
 
     it('should be anchor if href attr', inject(function($compile, $rootScope) {

src/components/list/list.js

@@ -113,6 +113,7 @@ function mdListDirective($mdTheming) {
  * Currently supported proxy items are
  * - `md-checkbox` (Toggle)
  * - `md-switch` (Toggle)
+ * - `md-menu` (Open)
  *
  * This means, when using a supported proxy item inside of `md-list-item`, the list item will
  * become clickable and executes the associated action of the proxy element on click.
@@ -135,6 +136,41 @@ function mdListDirective($mdTheming) {
  *
  * The recognized `md-switch` will toggle its state, when the user clicks on the `md-list-item`.
  *
+ * It is also possible to have a `md-menu` inside of a `md-list-item`.
+ * <hljs lang="html">
+ *   <md-list-item>
+ *     <p>Click anywhere to fire the secondary action</p>
+ *     <md-menu class="md-secondary">
+ *       <md-button class="md-icon-button">
+ *         <md-icon md-svg-icon="communication:message"></md-icon>
+ *       </md-button>
+ *       <md-menu-content width="4">
+ *         <md-menu-item>
+ *           <md-button>
+ *             Redial
+ *           </md-button>
+ *         </md-menu-item>
+ *         <md-menu-item>
+ *           <md-button>
+ *             Check voicemail
+ *           </md-button>
+ *         </md-menu-item>
+ *         <md-menu-divider></md-menu-divider>
+ *         <md-menu-item>
+ *           <md-button>
+ *             Notifications
+ *           </md-button>
+ *         </md-menu-item>
+ *       </md-menu-content>
+ *     </md-menu>
+ *   </md-list-item>
+ * </hljs>
+ *
+ * The menu will automatically open, when the users clicks on the `md-list-item`.<br/>
+ *
+ * If the developer didn't specify any position mode on the menu, the `md-list-item` will automatically detect the
+ * position mode and applies it to the `md-menu`.
+ *
  * ### Avatars
  * Sometimes you may want to have some avatars inside of the `md-list-item `.<br/>
  * You are able to create a optimized icon for the list item, by applying the `.md-avatar` class on the `<img>` element.
@@ -281,8 +317,16 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
           );
 
           buttonWrap[0].setAttribute('aria-label', tEl[0].textContent);
+
           copyAttributes(tEl[0], buttonWrap[0]);
 
+          // We allow developers to specify the `md-no-focus` class, to disable the focus style
+          // on the button executor. Once more classes should be forwarded, we should probably make the
+          // class forward more generic.
+          if (tEl.hasClass('md-no-focus')) {
+            buttonWrap.addClass('md-no-focus');
+          }
+
           // Append the button wrap before our list-item content, because it will overlay in relative.
           itemContainer.prepend(buttonWrap);
           itemContainer.children().eq(1).append(tEl.contents());

src/components/list/list.spec.js

@@ -230,6 +230,27 @@ describe('mdListItem directive', function() {
     expect(innerContent.firstElementChild.nodeName).toBe('P');
   });
 
+  it('should forward the md-no-focus class', function() {
+    var listItem = setup(
+      '<md-list-item ng-click="null" class="md-no-focus">' +
+        '<p>Clickable - Without Focus Style</p>' +
+      '</md-list-item>');
+
+    // List items, which are clickable always contain a button wrap at the top level.
+    var buttonWrap = listItem.children().eq(0);
+    expect(listItem).toHaveClass('_md-button-wrap');
+
+    // The button wrap should contain the button executor, the inner content and the
+    // secondary item container as children.
+    expect(buttonWrap.children().length).toBe(3);
+
+    var buttonExecutor = buttonWrap.children();
+
+    // The list item should forward the href and md-no-focus-style attribute.
+    expect(buttonExecutor.attr('ng-click')).toBeTruthy();
+    expect(buttonExecutor.hasClass('md-no-focus')).toBe(true);
+  });
+
   it('moves aria-label to primary action', function() {
     var listItem = setup('<md-list-item ng-click="sayHello()" aria-label="Hello"></md-list-item>');
 
@@ -328,12 +349,13 @@ describe('mdListItem directive', function() {
   });
 
   describe('with a md-menu', function() {
+
     it('should forward click events on the md-menu trigger button', function() {
       var template =
         '<md-list-item>' +
-        '<md-menu>' +
-        '<md-button ng-click="openMenu()"></md-button>' +
-        '</md-menu>' +
+          '<md-menu>' +
+            '<md-button ng-click="openMenu()"></md-button>' +
+        ' </md-menu>' +
         '</md-list-item>';
 
       var listItem = setup(template);
@@ -380,6 +402,38 @@ describe('mdListItem directive', function() {
 
       expect(mdMenu.attr('md-position-mode')).toBe('left target');
     });
+
+    it('should apply an aria-label if not specified', function() {
+      var template =
+        '<md-list-item>' +
+          '<span>Aria Label Menu</span>' +
+          '<md-menu>' +
+            '<md-button ng-click="openMenu()"></md-button>' +
+          '</md-menu>' +
+        '</md-list-item>';
+
+      var listItem = setup(template);
+
+      var mdMenuButton = listItem[0].querySelector('md-menu > md-button');
+
+      expect(mdMenuButton.getAttribute('aria-label')).toBe('Open List Menu');
+    });
+
+    it('should apply $mdMenuOpen to the button if not present', function() {
+      var template =
+        '<md-list-item>' +
+          '<span>Aria Label Menu</span>' +
+          '<md-menu>' +
+            '<md-button>Should Open the Menu</md-button>' +
+          '</md-menu>' +
+        '</md-list-item>';
+
+      var listItem = setup(template);
+
+      var mdMenuButton = listItem[0].querySelector('md-menu > md-button');
+
+      expect(mdMenuButton.getAttribute('ng-click')).toBe('$mdOpenMenu($event)');
+    });
   });
 
   describe('with a clickable item', function() {