fix(divider): Fix stlying for md-divider inside md-list-item.

When an `md-divider` was used inside of a `md-list-item` with an
`<md-button>`, the divider would improperly show up at the bottom
of the list, instead of the bottom of each list item.

Fix by making the list item's position relative.

Also, we automatically apply special styling when we detect an
`<md-button>` inside of the list item because we assume that it
wraps all of the elements. If you simply wanted to use a secondary
`<md-button>` or other clickable button inside a list, we would
incorrectly apply this styling.

Fix by automatically excluding `md-secondary` buttons and providing
an additional `md-exclude` class that can be added to buttons.

Fixes #3021. Closes #5058.

src/components/divider/demoBasicUsage/index.html

@@ -14,6 +14,7 @@ <h3>{{item.what}}</h3>
  <h4>{{item.who}}</h4>
  <p>{{item.notes}}</p>
  </div>
+ <md-button class="md-secondary">Respond</md-button>
  <md-divider ng-if="!$last"></md-divider>
  </md-list-item>
  </md-list>

src/components/list/list.js

@@ -75,6 +75,10 @@ function mdListDirective($mdTheming) {
  * </md-list>
  * </hljs>
  *
+ * _**Note:** We automatically apply special styling when the inner contents are wrapped inside
+ * of a `<md-button>` tag. This styling is automatically ignored for `class="md-secondary"` buttons
+ * and you can include a class of `class="md-exclude"` if you need to use a non-secondary button
+ * that is inside the list, but does not wrap the contents._
  */
 function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
  var proxiedTypes = ['md-checkbox', 'md-switch'];
@@ -98,7 +102,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
  }
  if (hasProxiedElement) {
  wrapIn('div');
- } else if (!tEl[0].querySelector('md-button')) {
+ } else if (!tEl[0].querySelector('md-button:not(.md-secondary):not(.md-exclude)')) {
  tEl.addClass('md-no-proxy');
  }
  } else {

src/components/list/list.scss

@@ -39,6 +39,9 @@ md-list {
 }
 
 md-list-item {
+ // Ensure nested dividers are properly positioned
+ position: relative;
+
  &.md-proxy-focus.md-focused .md-no-style {
  transition: background-color 0.15s linear;
  }

src/components/list/list.spec.js

@@ -132,4 +132,15 @@ describe('mdListItem directive', function() {
  expect(listItem.hasClass('md-no-proxy')).toBeFalsy();
  });
 
+ it('should not detect secondary or excluded md-buttons', function() {
+ var listItem = setup(
+ '<md-list-item>' +
+ ' <div>Content Here</div>' +
+ ' <md-button class="md-secondary" ng-click="sayHello()">Hello</md-button>' +
+ ' <md-button class="md-exclude" ng-click="sayHello()">Hello</md-button>' +
+ '</md-list-item>'
+ );
+ expect(listItem.hasClass('md-no-proxy')).toBeTruthy();
+ });
+
 });