Skip to content

Commit

Permalink
update package dependency and add default type attribute of button.
Browse files Browse the repository at this point in the history
  • Loading branch information
Vivian Hu committed Aug 2, 2018
1 parent 60e1c98 commit 23b26b0
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 5 deletions.
6 changes: 4 additions & 2 deletions src/lib/list/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand Down
33 changes: 30 additions & 3 deletions src/lib/list/list.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ describe('MatList', () => {
ListWithMultipleItems,
ListWithManyLines,
NavListWithOneAnchorItem,
ActionListWithOneItem
ActionListWithoutType,
ActionListWithType
],
});

Expand Down Expand Up @@ -146,13 +147,29 @@ describe('MatList', () => {
});

it('should create an action list', () => {
let fixture = TestBed.createComponent(ActionListWithOneItem);
let 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', () => {
let fixture = TestBed.createComponent(ActionListWithoutType);
fixture.detectChanges();

let 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', () => {
let fixture = TestBed.createComponent(ActionListWithType);
fixture.detectChanges();

let 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();
Expand Down Expand Up @@ -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>;
}

Expand Down
8 changes: 8 additions & 0 deletions src/lib/list/list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
let element: HTMLElement = this._getHostElement();
if (element.nodeName && element.nodeName.toLowerCase() === 'button'
&& !element.hasAttribute('type')) {
element.setAttribute('type', 'button');
}
}

ngAfterContentInit() {
Expand Down

0 comments on commit 23b26b0

Please sign in to comment.