Skip to content

Commit ac72068

Browse files
mmalerbammalerba
committed
address feedback
1 parent fdf9ce4 commit ac72068

File tree

5 files changed

+53
-63
lines changed

5 files changed

+53
-63
lines changed

‎src/components-examples/material/list/list-sections/list-sections-example.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<mat-list>
2-
<h3 mat-subheader>Folders</h3>
2+
<div mat-subheader>Folders</div>
33
<mat-list-item *ngFor="let folder of folders">
44
<mat-icon mat-list-icon>folder</mat-icon>
5-
<h4 mat-line>{{folder.name}}</h4>
6-
<p mat-line> {{folder.updated | date}} </p>
5+
<div mat-line>{{folder.name}}</div>
6+
<div mat-line> {{folder.updated | date}} </div>
77
</mat-list-item>
88
<mat-divider></mat-divider>
9-
<h3 mat-subheader>Notes</h3>
9+
<div mat-subheader>Notes</div>
1010
<mat-list-item *ngFor="let note of notes">
1111
<mat-icon mat-list-icon>note</mat-icon>
12-
<h4 mat-line>{{note.name}}</h4>
13-
<p mat-line> {{note.updated | date}} </p>
12+
<div mat-line>{{note.name}}</div>
13+
<div mat-line> {{note.updated | date}} </div>
1414
</mat-list-item>
1515
</mat-list>

‎src/dev-app/list/list-demo.html

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,63 +8,63 @@ <h1>mat-list demo</h1>
88
<h2>Normal lists</h2>
99

1010
<mat-list>
11-
<h3 mat-subheader>Items</h3>
11+
<div mat-subheader>Items</div>
1212
<mat-list-item *ngFor="let item of items">
1313
{{item}}
1414
</mat-list-item>
1515
</mat-list>
1616

1717
<mat-list>
1818
<mat-list-item *ngFor="let contact of contacts">
19-
<h3 mat-line>{{contact.name}}</h3>
20-
<p mat-line *ngIf="thirdLine">extra line</p>
21-
<p mat-line class="demo-secondary-text">{{contact.headline}}</p>
19+
<div mat-line>{{contact.name}}</div>
20+
<div mat-line *ngIf="thirdLine">extra line</div>
21+
<div mat-line class="demo-secondary-text">{{contact.headline}}</div>
2222
</mat-list-item>
2323
</mat-list>
2424

2525
<mat-list>
26-
<h3 mat-subheader>Today</h3>
26+
<div mat-subheader>Today</div>
2727
<mat-list-item *ngFor="let message of messages; last as last">
2828
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
29-
<h4 mat-line>{{message.from}}</h4>
30-
<p mat-line>
29+
<div mat-line>{{message.from}}</div>
30+
<div mat-line>
3131
<span>{{message.subject}} -- </span>
3232
<span class="demo-secondary-text">{{message.message}}</span>
33-
</p>
33+
</div>
3434
<mat-divider inset *ngIf="!last"></mat-divider>
3535
</mat-list-item>
3636
<mat-divider></mat-divider>
3737
<mat-list-item *ngFor="let message of messages">
38-
<h4 mat-line>{{message.from}}</h4>
39-
<p mat-line> {{message.subject}} </p>
40-
<p mat-line class="demo-secondary-text">{{message.message}} </p>
38+
<div mat-line>{{message.from}}</div>
39+
<div mat-line> {{message.subject}} </div>
40+
<div mat-line class="demo-secondary-text">{{message.message}} </div>
4141
</mat-list-item>
4242
</mat-list>
4343
</div>
4444

4545
<div>
4646
<h2>Dense lists</h2>
4747
<mat-list dense>
48-
<h3 mat-subheader>Items</h3>
48+
<div mat-subheader>Items</div>
4949
<mat-list-item *ngFor="let item of items">
5050
{{item}}
5151
</mat-list-item>
5252
</mat-list>
5353

5454
<mat-list dense>
5555
<mat-list-item *ngFor="let contact of contacts">
56-
<h3 mat-line>{{contact.name}}</h3>
57-
<p mat-line class="demo-secondary-text">{{contact.headline}}</p>
56+
<div mat-line>{{contact.name}}</div>
57+
<div mat-line class="demo-secondary-text">{{contact.headline}}</div>
5858
</mat-list-item>
5959
</mat-list>
6060

6161
<mat-list dense>
62-
<h3 mat-subheader>Today</h3>
62+
<div mat-subheader>Today</div>
6363
<mat-list-item *ngFor="let message of messages">
6464
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
65-
<h4 mat-line>{{message.from}}</h4>
66-
<p mat-line> {{message.subject}} </p>
67-
<p mat-line class="demo-secondary-text">{{message.message}} </p>
65+
<div mat-line>{{message.from}}</div>
66+
<div mat-line> {{message.subject}} </div>
67+
<div mat-line class="demo-secondary-text">{{message.message}} </div>
6868
</mat-list-item>
6969
</mat-list>
7070
</div>
@@ -122,7 +122,7 @@ <h2>Selection list</h2>
122122
[disabled]="selectionListDisabled"
123123
[disableRipple]="selectionListRippleDisabled"
124124
color="primary">
125-
<h3 mat-subheader>Groceries</h3>
125+
<div mat-subheader>Groceries</div>
126126

127127
<mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
128128
<mat-list-option selected value="oranges">Oranges</mat-list-option>
@@ -131,7 +131,7 @@ <h3 mat-subheader>Groceries</h3>
131131
</mat-selection-list>
132132

133133
<mat-selection-list [disableRipple]="selectionListRippleDisabled">
134-
<h3 mat-subheader>Dogs</h3>
134+
<div mat-subheader>Dogs</div>
135135

136136
<mat-list-option checkboxPosition="before">
137137
<img matListAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
@@ -170,7 +170,7 @@ <h2>Single Selection list</h2>
170170
[(ngModel)]="favoriteOptions"
171171
[multiple]="false"
172172
color="primary">
173-
<h3 mat-subheader>Favorite Grocery</h3>
173+
<div mat-subheader>Favorite Grocery</div>
174174

175175
<mat-list-option value="bananas">Bananas</mat-list-option>
176176
<mat-list-option selected value="oranges">Oranges</mat-list-option>

‎src/dev-app/mdc-list/mdc-list-demo.html

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,63 +8,63 @@ <h1>mat-list demo</h1>
88
<h2>Normal lists</h2>
99

1010
<mat-list>
11-
<h3 mat-subheader>Items</h3>
11+
<div mat-subheader>Items</div>
1212
<mat-list-item *ngFor="let item of items">
1313
{{item}}
1414
</mat-list-item>
1515
</mat-list>
1616

1717
<mat-list>
1818
<mat-list-item *ngFor="let contact of contacts">
19-
<h3 mat-line>{{contact.name}}</h3>
20-
<p mat-line *ngIf="thirdLine">extra line</p>
21-
<p mat-line>{{contact.headline}}</p>
19+
<div mat-line>{{contact.name}}</div>
20+
<div mat-line *ngIf="thirdLine">extra line</div>
21+
<div mat-line>{{contact.headline}}</div>
2222
</mat-list-item>
2323
</mat-list>
2424

2525
<mat-list>
26-
<h3 mat-subheader>Today</h3>
26+
<div mat-subheader>Today</div>
2727
<mat-list-item *ngFor="let message of messages; last as last">
2828
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
29-
<h4 mat-line>{{message.from}}</h4>
30-
<p mat-line>
29+
<div mat-line>{{message.from}}</div>
30+
<div mat-line>
3131
<span>{{message.subject}} -- </span>
3232
<span>{{message.message}}</span>
33-
</p>
33+
</div>
3434
<mat-divider inset *ngIf="!last"></mat-divider>
3535
</mat-list-item>
3636
<mat-divider></mat-divider>
3737
<mat-list-item *ngFor="let message of messages">
38-
<h4 mat-line>{{message.from}}</h4>
39-
<p mat-line>{{message.subject}}</p>
40-
<p mat-line>{{message.message}}</p>
38+
<div mat-line>{{message.from}}</div>
39+
<div mat-line>{{message.subject}}</div>
40+
<div mat-line>{{message.message}}</div>
4141
</mat-list-item>
4242
</mat-list>
4343
</div>
4444

4545
<div>
4646
<h2>Dense lists</h2>
4747
<mat-list dense>
48-
<h3 mat-subheader>Items</h3>
48+
<div mat-subheader>Items</div>
4949
<mat-list-item *ngFor="let item of items">
5050
{{item}}
5151
</mat-list-item>
5252
</mat-list>
5353

5454
<mat-list dense>
5555
<mat-list-item *ngFor="let contact of contacts">
56-
<h3 mat-line>{{contact.name}}</h3>
57-
<p mat-line>{{contact.headline}}</p>
56+
<div mat-line>{{contact.name}}</div>
57+
<div mat-line>{{contact.headline}}</div>
5858
</mat-list-item>
5959
</mat-list>
6060

6161
<mat-list dense>
62-
<h3 mat-subheader>Today</h3>
62+
<div mat-subheader>Today</div>
6363
<mat-list-item *ngFor="let message of messages">
6464
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
65-
<h4 mat-line>{{message.from}}</h4>
66-
<p mat-line> {{message.subject}} </p>
67-
<p mat-line>{{message.message}} </p>
65+
<div mat-line>{{message.from}}</div>
66+
<div mat-line> {{message.subject}} </div>
67+
<div mat-line>{{message.message}} </div>
6868
</mat-list-item>
6969
</mat-list>
7070
</div>

‎src/material-experimental/mdc-list/list-base.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@ export class MatListItemBase implements AfterContentInit, OnDestroy {
2121
constructor(protected _element: ElementRef, protected _ngZone: NgZone) {}
2222

2323
ngAfterContentInit() {
24+
this._monitorLines();
25+
}
26+
27+
/**
28+
* Subscribes to changes in `MatLine` content children and annotates them appropriately when they
29+
* change.
30+
*/
31+
private _monitorLines() {
2432
this._ngZone.runOutsideAngular(() => {
2533
this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
2634
.subscribe((lines: QueryList<ElementRef<Element>>) => {

‎src/material-experimental/mdc-list/list.scss

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,6 @@
1010
display: block;
1111
}
1212

13-
// While MDC expects only span elements under mdc-list-item__text, we have historically supported
14-
// using other elements (e.g. h1, h2, etc). This resets some common properties that might cause
15-
// problems.
16-
// TODO(mmalerba): Do we actually want to do this? We could switch to expecting spans like MDC and
17-
// let people reset as necessary instead.
18-
.mat-mdc-list-base .mdc-list-item__text > *,
19-
.mat-mdc-list-base .mdc-list-item__text > * {
20-
padding: 0;
21-
}
22-
23-
// .mdc-list-item__secondary-text adds its own font settings, so only reset if it doesn't have that
24-
// class
25-
.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__secondary-text),
26-
.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__secondary-text) {
27-
font-size: inherit;
28-
font-weight: normal;
29-
}
30-
3113
// .mdc-list-item__primary-text adds its own margin settings, so only reset if it doesn't have that
3214
// class
3315
.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__primary-text),

0 commit comments

Comments
 (0)