feat(list): add new '<mat-action-list>'

An action-list is a list where each list item is a native '<button>' element, meant to be used in cases where each list item has a single action with no sub-action, navigation or selection.

Author: Vivian Hu

src/lib/list/list.md

@@ -44,13 +44,15 @@ element in an `<mat-list-item>`.
 
 ### Action lists
 
-Use `mat-action-list` tags for action lists (i.e. lists that have button tags).
+Use the `<mat-action-list>` element when each item in the list performs some _action_. Each item
+in an action list is a `<button>` element.
 
 Simple action lists can use the `mat-list-item` attribute on button tag elements directly:
 
 ```html
 <mat-action-list>
-  <button mat-list-item *ngFor="let link of links"> {{link.name}} </button>
+  <button mat-list-item (click)="save()"> Save </button>
+  <button mat-list-item (click)="undo()"> Undo </button>
 </mat-action-list>
 ```
 

src/lib/list/list.spec.ts

@@ -20,7 +20,8 @@ describe('MatList', () => {
         ListWithMultipleItems,
         ListWithManyLines,
         NavListWithOneAnchorItem,
-        ActionListWithOneItem
+        ActionListWithoutType,
+        ActionListWithType
       ],
     });
 
@@ -146,13 +147,29 @@ describe('MatList', () => {
   });
 
   it('should create an action list', () => {
-    let fixture = TestBed.createComponent(ActionListWithOneItem);
+    const fixture = TestBed.createComponent(ActionListWithoutType);
     fixture.detectChanges();
 
     const items = fixture.componentInstance.listItems;
     expect(items.length).toBeGreaterThan(0);
   });
 
+  it('should set default type attribute to button for action list', () => {
+    const fixture = TestBed.createComponent(ActionListWithoutType);
+    fixture.detectChanges();
+
+    const listItemEl = fixture.debugElement.query(By.css('.mat-list-item'));
+    expect(listItemEl.nativeElement.getAttribute('type')).toBe('button');
+  });
+
+  it('should not change type attribute if it is already specified', () => {
+    const fixture = TestBed.createComponent(ActionListWithType);
+    fixture.detectChanges();
+
+    const listItemEl = fixture.debugElement.query(By.css('.mat-list-item'));
+    expect(listItemEl.nativeElement.getAttribute('type')).toBe('submit');
+  });
+
   it('should allow disabling ripples for the whole nav-list', () => {
     let fixture = TestBed.createComponent(NavListWithOneAnchorItem);
     fixture.detectChanges();
@@ -210,7 +227,17 @@ class NavListWithOneAnchorItem extends BaseTestList {
       Paprika
     </button>
   </mat-action-list>`})
-class ActionListWithOneItem extends BaseTestList {
+class ActionListWithoutType extends BaseTestList {
+  @ViewChildren(MatListItem) listItems: QueryList<MatListItem>;
+}
+
+@Component({template: `
+  <mat-action-list>
+    <button mat-list-item type="submit">
+      Paprika
+    </button>
+  </mat-action-list>`})
+class ActionListWithType extends BaseTestList {
   @ViewChildren(MatListItem) listItems: QueryList<MatListItem>;
 }
 

src/lib/list/list.ts

@@ -119,6 +119,14 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
               @Optional() private _navList: MatNavList) {
     super();
     this._isNavList = !!_navList;
+
+    // If no type attributed is specified for <button>, set it to "button".
+    // If a type attribute is already specified, do nothing.
+    const element = this._getHostElement();
+    if (element.nodeName && element.nodeName.toLowerCase() === 'button'
+        && !element.hasAttribute('type')) {
+      element.setAttribute('type', 'button');
+    }
   }
 
   ngAfterContentInit() {