Skip to content

Commit dd239dd

Browse files
mmalerbammalerba
authored
fix(material-experimental/mdc-list): fix styles for normal lists (#18632)
* fix(material-experimental/mdc-list): fix styles for normal lists Fixes up various styles for the lists under the "normal lists" section of the demo. There are still some issues around the avatars and dividers on the last list * fix avatars and dividers * fix lint and api * address feedback
1 parent ddc9fd6 commit dd239dd

File tree

12 files changed

+216
-63
lines changed

12 files changed

+216
-63
lines changed

‎.stylelintrc.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,9 @@
8787
"selector-max-id": 0,
8888
"no-missing-end-of-source-newline": true,
8989
"no-eol-whitespace": true,
90-
"max-line-length": 100,
90+
"max-line-length": [100, {
91+
"ignorePattern": "/https?://.*/"
92+
}],
9193
"linebreaks": "unix",
9294
"selector-class-pattern": ["^_?(mat-|cdk-|example-|demo-|ng-|mdc-|map-)", {
9395
"resolveNestedSelectors": true

‎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: 20 additions & 20 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>{{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>
32-
<span class="demo-secondary-text">{{message.message}}</span>
33-
</p>
32+
<span>{{message.message}}</span>
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>{{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>{{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>{{message.message}} </div>
6868
</mat-list-item>
6969
</mat-list>
7070
</div>
@@ -90,7 +90,7 @@ <h2>Nav lists</h2>
9090
<a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
9191
<mat-icon mat-list-icon>folder</mat-icon>
9292
<span mat-line>{{ link.name }}</span>
93-
<span mat-line class="demo-secondary-text"> Description </span>
93+
<span mat-line> Description </span>
9494
<mat-divider inset *ngIf="!last"></mat-divider>
9595
</a>
9696
</mat-nav-list>

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,42 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9+
import {AfterContentInit, ElementRef, NgZone, OnDestroy, QueryList} from '@angular/core';
10+
import {setLines} from '@angular/material/core';
11+
import {Subscription} from 'rxjs';
12+
import {startWith} from 'rxjs/operators';
13+
914
export class MatListBase {}
1015

11-
export class MatListItemBase {}
16+
export class MatListItemBase implements AfterContentInit, OnDestroy {
17+
lines: QueryList<ElementRef<Element>>;
18+
19+
private _subscriptions = new Subscription();
20+
21+
constructor(protected _element: ElementRef, protected _ngZone: NgZone) {}
22+
23+
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() {
32+
this._ngZone.runOutsideAngular(() => {
33+
this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
34+
.subscribe((lines: QueryList<ElementRef<Element>>) => {
35+
lines.forEach((line: ElementRef<Element>, index: number) => {
36+
line.nativeElement.classList.toggle('mdc-list-item__primary-text', index === 0);
37+
line.nativeElement.classList.toggle('mdc-list-item__secondary-text', index !== 0);
38+
});
39+
setLines(lines, this._element, 'mat-mdc');
40+
}));
41+
});
42+
}
43+
44+
ngOnDestroy() {
45+
this._subscriptions.unsubscribe();
46+
}
47+
}

‎src/material-experimental/mdc-list/list-item.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
<ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
12
<span class="mdc-list-item__text"><ng-content></ng-content></span>
3+
<ng-content select="mat-divider"></ng-content>

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import '@material/list/mixins.import';
2+
@import '@material/list/variables.import';
23
@import '../mdc-helpers/mdc-helpers';
34

45
@include mdc-list-without-ripple($query: $mat-base-styles-query);
@@ -8,3 +9,75 @@
89
.mat-mdc-list-base {
910
display: block;
1011
}
12+
13+
// .mdc-list-item__primary-text adds its own margin settings, so only reset if it doesn't have that
14+
// class
15+
.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__primary-text),
16+
.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__primary-text) {
17+
margin: 0;
18+
19+
// Fixes the gap between the 2nd & 3rd lines.
20+
&.mdc-list-item__secondary-text {
21+
margin-top: -3px;
22+
}
23+
}
24+
25+
26+
// MDC does have 2-line support, but it's a per-list setting, whereas ours applies to individual
27+
// items. Therefore, we need to add our own styles.
28+
.mat-mdc-2-line {
29+
height: 72px;
30+
31+
.mdc-list-item__text {
32+
align-self: flex-start;
33+
}
34+
}
35+
36+
// MDC does not support more than 2 lines, so we need to add our own styles.
37+
.mat-mdc-3-line {
38+
height: 88px;
39+
40+
.mdc-list-item__text {
41+
align-self: flex-start;
42+
}
43+
}
44+
45+
// MDC supports avatars, but it's a per-list setting, whereas ours applies to individual
46+
// items. Therefore, we need to add our own styles.
47+
.mat-mdc-list-avatar {
48+
// Styles here come from `$mdc-list-graphic-size_`:
49+
// https://github.com/material-components/material-components-web/blob/3ca8c4c45a3d2a654ef3cb8fc7525bcde37badf0/packages/mdc-list/_mixins.scss#L538
50+
$size: 40px;
51+
$margin-value: 72px - $mdc-list-side-padding - $size;
52+
53+
margin-left: 0;
54+
margin-right: $margin-value;
55+
width: $size;
56+
height: $size;
57+
border-radius: 50%;
58+
59+
// `.mdc-list-item` added for extra specificity to override MDC's built in styles.
60+
[dir='rtl'] .mdc-list-item & {
61+
margin-left: $margin-value;
62+
margin-right: 0;
63+
}
64+
}
65+
66+
// MDC doesn't have list dividers, so we use mat-divider and style appropriately.
67+
.mat-mdc-list-item,
68+
.mat-mdc-list-option {
69+
.mat-divider-inset {
70+
position: absolute;
71+
left: 0;
72+
right: 0;
73+
bottom: 0;
74+
}
75+
76+
.mat-mdc-list-avatar ~ .mat-divider-inset {
77+
margin-left: 72px;
78+
79+
[dir='rtl'] & {
80+
margin-right: 72px;
81+
}
82+
}
83+
}

0 commit comments

Comments
 (0)