Skip to content

Commit ce136a9

Browse files
mmalerbammalerba
committed
fix(material-experimental/mdc-list): properly render leading and trailing icons on list items (#19201)
1 parent 87b8edb commit ce136a9

File tree

9 files changed

+75
-53
lines changed

9 files changed

+75
-53
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"test": "node ./scripts/run-component-tests.js",
2222
"test-local": "yarn -s test --local",
2323
"test-firefox": "yarn -s test --firefox",
24-
"lint": "yarn -s tslint && yarn -s bazel:format-lint && yarn -s ownerslint",
24+
"lint": "yarn -s tslint && yarn -s stylelint && yarn -s bazel:format-lint && yarn -s ownerslint",
2525
"e2e": "bazel test //src/... --test_tag_filters=e2e",
2626
"deploy-dev-app": "node ./scripts/deploy-dev-app.js",
2727
"breaking-changes": "ts-node --project scripts scripts/breaking-changes.ts",

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ <h2>Normal lists</h2>
4040
<div mat-line class="demo-secondary-text">{{message.message}} </div>
4141
</mat-list-item>
4242
</mat-list>
43+
44+
<mat-list>
45+
<mat-list-item *ngFor="let link of links">
46+
<span mat-line>{{ link.name }}</span>
47+
<button mat-icon-button (click)="infoClicked=!infoClicked">
48+
<mat-icon>info</mat-icon>
49+
</button>
50+
</mat-list-item>
51+
</mat-list>
4352
</div>
4453

4554
<div>
@@ -67,6 +76,15 @@ <h2>Dense lists</h2>
6776
<div mat-line class="demo-secondary-text">{{message.message}} </div>
6877
</mat-list-item>
6978
</mat-list>
79+
80+
<mat-list dense>
81+
<mat-list-item *ngFor="let link of links">
82+
<span mat-line>{{ link.name }}</span>
83+
<button mat-icon-button (click)="infoClicked=!infoClicked">
84+
<mat-icon class="material-icons">info</mat-icon>
85+
</button>
86+
</mat-list-item>
87+
</mat-list>
7088
</div>
7189
<div>
7290
<h2>Nav lists</h2>
@@ -78,30 +96,12 @@ <h2>Nav lists</h2>
7896
<div *ngIf="infoClicked">
7997
More info!
8098
</div>
81-
<mat-nav-list>
82-
<mat-list-item *ngFor="let link of links">
83-
<a mat-line href="http://www.google.com">{{ link.name }}</a>
84-
<button mat-icon-button (click)="infoClicked=!infoClicked">
85-
<mat-icon>info</mat-icon>
86-
</button>
87-
</mat-list-item>
88-
</mat-nav-list>
8999
<mat-nav-list>
90100
<a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
91101
<mat-icon mat-list-icon>folder</mat-icon>
92102
<span mat-line>{{ link.name }}</span>
93-
<span mat-line class="demo-secondary-text"> Description </span>
94-
<mat-divider inset *ngIf="!last"></mat-divider>
95103
</a>
96104
</mat-nav-list>
97-
<mat-nav-list dense>
98-
<mat-list-item *ngFor="let link of links">
99-
<a mat-line href="http://www.google.com">{{ link.name }}</a>
100-
<button mat-icon-button (click)="infoClicked=!infoClicked">
101-
<mat-icon class="material-icons">info</mat-icon>
102-
</button>
103-
</mat-list-item>
104-
</mat-nav-list>
105105
</div>
106106

107107
<div>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@
1111
margin-top: 20px;
1212
}
1313

14-
.mat-icon {
14+
.mat-icon-button {
1515
color: rgba(0, 0, 0, 0.12);
1616
}
1717

1818
.mat-list-icon {
19-
color: white;
20-
background: rgba(0, 0, 0, 0.3);
19+
color: rgba(0, 0, 0, 0.38);
2120
}
2221
}
2322

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ <h2>Normal lists</h2>
4040
<div mat-line>{{message.message}}</div>
4141
</mat-list-item>
4242
</mat-list>
43+
44+
<mat-list>
45+
<mat-list-item *ngFor="let link of links">
46+
<span mat-line>{{ link.name }}</span>
47+
<button mat-icon-button (click)="infoClicked=!infoClicked">
48+
<mat-icon>info</mat-icon>
49+
</button>
50+
</mat-list-item>
51+
</mat-list>
4352
</div>
4453

4554
<div>
@@ -63,8 +72,17 @@ <h2>Dense lists</h2>
6372
<mat-list-item *ngFor="let message of messages">
6473
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
6574
<div mat-line>{{message.from}}</div>
66-
<div mat-line> {{message.subject}} </div>
67-
<div mat-line>{{message.message}} </div>
75+
<div mat-line>{{message.subject}}</div>
76+
<div mat-line>{{message.message}}</div>
77+
</mat-list-item>
78+
</mat-list>
79+
80+
<mat-list dense>
81+
<mat-list-item *ngFor="let link of links">
82+
<span mat-line>{{ link.name }}</span>
83+
<button mat-icon-button (click)="infoClicked=!infoClicked">
84+
<mat-icon class="material-icons">info</mat-icon>
85+
</button>
6886
</mat-list-item>
6987
</mat-list>
7088
</div>
@@ -78,30 +96,12 @@ <h2>Nav lists</h2>
7896
<div *ngIf="infoClicked">
7997
More info!
8098
</div>
81-
<mat-nav-list>
82-
<mat-list-item *ngFor="let link of links">
83-
<a mat-line href="http://www.google.com">{{ link.name }}</a>
84-
<button mat-icon-button (click)="infoClicked=!infoClicked">
85-
<mat-icon>info</mat-icon>
86-
</button>
87-
</mat-list-item>
88-
</mat-nav-list>
8999
<mat-nav-list>
90100
<a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
91101
<mat-icon mat-list-icon>folder</mat-icon>
92102
<span mat-line>{{ link.name }}</span>
93-
<span mat-line> Description </span>
94-
<mat-divider inset *ngIf="!last"></mat-divider>
95103
</a>
96104
</mat-nav-list>
97-
<mat-nav-list dense>
98-
<mat-list-item *ngFor="let link of links">
99-
<a mat-line href="http://www.google.com">{{ link.name }}</a>
100-
<button mat-icon-button (click)="infoClicked=!infoClicked">
101-
<mat-icon class="material-icons">info</mat-icon>
102-
</button>
103-
</mat-list-item>
104-
</mat-nav-list>
105105
</div>
106106

107107
<div>

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,9 @@
1212
margin-top: 20px;
1313
}
1414

15-
.mat-icon {
15+
.mat-mdc-icon-button {
1616
color: rgba(0, 0, 0, 0.12);
1717
}
18-
19-
.mat-mdc-list-icon {
20-
color: white;
21-
background: rgba(0, 0, 0, 0.3);
22-
}
2318
}
2419

2520
.demo-secondary-text {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@import '@material/ripple/variables.import';
33
@import '../mdc-helpers/mdc-helpers';
44

5+
// TODO: implement mat-list[dense] once density system is in master
6+
57
@mixin mat-mdc-list-theme($theme) {
68
$is-dark-theme: map-get($theme, is-dark);
79
$state-opacities:

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

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,27 @@ import {RippleConfig, RippleRenderer, RippleTarget, setLines} from '@angular/mat
2020
import {Subscription} from 'rxjs';
2121
import {startWith} from 'rxjs/operators';
2222

23+
function toggleClass(el: Element, className: string, on: boolean) {
24+
if (on) {
25+
el.classList.add(className);
26+
} else {
27+
el.classList.remove(className);
28+
}
29+
}
30+
2331
@Directive()
24-
export class MatListBase {
32+
/** @docs-private */
33+
export abstract class MatListBase {
2534
// @HostBinding is used in the class as it is expected to be extended. Since @Component decorator
2635
// metadata is not inherited by child classes, instead the host binding data is defined in a way
2736
// that can be inherited.
2837
// tslint:disable-next-line:no-host-decorator-in-concrete
2938
@HostBinding('class.mdc-list--non-interactive')
30-
_isNonInteractive: boolean;
39+
_isNonInteractive: boolean = false;
3140
}
3241

3342
@Directive()
43+
/** @docs-private */
3444
export abstract class MatListItemBase implements AfterContentInit, OnDestroy, RippleTarget {
3545
lines: QueryList<ElementRef<Element>>;
3646

@@ -67,8 +77,9 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
6777
this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
6878
.subscribe((lines: QueryList<ElementRef<Element>>) => {
6979
lines.forEach((line: ElementRef<Element>, index: number) => {
70-
line.nativeElement.classList.toggle('mdc-list-item__primary-text', index === 0);
71-
line.nativeElement.classList.toggle('mdc-list-item__secondary-text', index !== 0);
80+
toggleClass(line.nativeElement,
81+
'mdc-list-item__primary-text', index === 0 && lines.length > 1);
82+
toggleClass(line.nativeElement, 'mdc-list-item__secondary-text', index !== 0);
7283
});
7384
setLines(lines, this._element, 'mat-mdc');
7485
}));

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
11
<ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
2-
<span class="mdc-list-item__text"><ng-content></ng-content></span>
2+
3+
<!-- If lines were explicitly given, use those as the text. -->
4+
<ng-container *ngIf="lines.length">
5+
<span class="mdc-list-item__text"><ng-content select="[mat-line],[matLine]"></ng-content></span>
6+
</ng-container>
7+
8+
<!--
9+
If lines were not explicitly given, assume the remaining content is the text, otherwise assume it
10+
is an action that belongs in the "meta" section.
11+
-->
12+
<span [class.mdc-list-item__text]="!lines.length" [class.mdc-list-item__meta]="lines.length">
13+
<ng-content></ng-content>
14+
</span>
15+
316
<ng-content select="mat-divider"></ng-content>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9+
import {CommonModule} from '@angular/common';
910
import {NgModule} from '@angular/core';
1011
import {MatLineModule, MatRippleModule} from '@angular/material/core';
1112
import {MatDividerModule} from '@angular/material/divider';
@@ -22,6 +23,7 @@ import {MatListOption, MatSelectionList} from './selection-list';
2223

2324
@NgModule({
2425
imports: [
26+
CommonModule,
2527
MatLineModule,
2628
MatRippleModule,
2729
],

0 commit comments

Comments
 (0)