diff --git a/package.json b/package.json
index 1891710bf442..7157ad2eef2f 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"test": "node ./scripts/run-component-tests.js",
"test-local": "yarn -s test --local",
"test-firefox": "yarn -s test --firefox",
- "lint": "yarn -s tslint && yarn -s bazel:format-lint && yarn -s ownerslint",
+ "lint": "yarn -s tslint && yarn -s stylelint && yarn -s bazel:format-lint && yarn -s ownerslint",
"e2e": "bazel test //src/... --test_tag_filters=e2e",
"deploy-dev-app": "node ./scripts/deploy-dev-app.js",
"breaking-changes": "ts-node --project scripts scripts/breaking-changes.ts",
diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html
index b238517189eb..9c6ece8217c8 100644
--- a/src/dev-app/list/list-demo.html
+++ b/src/dev-app/list/list-demo.html
@@ -40,6 +40,15 @@
Normal lists
{{message.message}}
+
+
+
+ {{ link.name }}
+
+
+
@@ -67,6 +76,15 @@
Dense lists
{{message.message}}
+
+
+
+ {{ link.name }}
+
+
+
diff --git a/src/dev-app/list/list-demo.scss b/src/dev-app/list/list-demo.scss
index f7e802dbb110..20897e2b364a 100644
--- a/src/dev-app/list/list-demo.scss
+++ b/src/dev-app/list/list-demo.scss
@@ -11,13 +11,12 @@
margin-top: 20px;
}
- .mat-icon {
+ .mat-icon-button {
color: rgba(0, 0, 0, 0.12);
}
.mat-list-icon {
- color: white;
- background: rgba(0, 0, 0, 0.3);
+ color: rgba(0, 0, 0, 0.38);
}
}
diff --git a/src/dev-app/mdc-list/mdc-list-demo.html b/src/dev-app/mdc-list/mdc-list-demo.html
index 83cbb5ed2020..268f0c511118 100644
--- a/src/dev-app/mdc-list/mdc-list-demo.html
+++ b/src/dev-app/mdc-list/mdc-list-demo.html
@@ -40,6 +40,15 @@
Normal lists
{{message.message}}
+
+
+
+ {{ link.name }}
+
+
+
@@ -63,8 +72,17 @@
Dense lists
{{message.from}}
- {{message.subject}}
- {{message.message}}
+ {{message.subject}}
+ {{message.message}}
+
+
+
+
+
+ {{ link.name }}
+
@@ -78,30 +96,12 @@ Nav lists
More info!
-
-
- {{ link.name }}
-
-
-
folder
{{ link.name }}
- Description
-
-
-
- {{ link.name }}
-
-
-
diff --git a/src/dev-app/mdc-list/mdc-list-demo.scss b/src/dev-app/mdc-list/mdc-list-demo.scss
index fc16b362cfc1..3f5fd9822baf 100644
--- a/src/dev-app/mdc-list/mdc-list-demo.scss
+++ b/src/dev-app/mdc-list/mdc-list-demo.scss
@@ -12,14 +12,9 @@
margin-top: 20px;
}
- .mat-icon {
+ .mat-mdc-icon-button {
color: rgba(0, 0, 0, 0.12);
}
-
- .mat-mdc-list-icon {
- color: white;
- background: rgba(0, 0, 0, 0.3);
- }
}
.demo-secondary-text {
diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss
index 0e88d6030ed5..deb0c5290d60 100644
--- a/src/material-experimental/mdc-list/_list-theme.scss
+++ b/src/material-experimental/mdc-list/_list-theme.scss
@@ -2,6 +2,8 @@
@import '@material/ripple/variables.import';
@import '../mdc-helpers/mdc-helpers';
+// TODO: implement mat-list[dense] once density system is in master
+
@mixin mat-mdc-list-theme($theme) {
$is-dark-theme: map-get($theme, is-dark);
$state-opacities:
diff --git a/src/material-experimental/mdc-list/list-base.ts b/src/material-experimental/mdc-list/list-base.ts
index 853f7a8aeb17..494aca3e4866 100644
--- a/src/material-experimental/mdc-list/list-base.ts
+++ b/src/material-experimental/mdc-list/list-base.ts
@@ -20,17 +20,27 @@ import {RippleConfig, RippleRenderer, RippleTarget, setLines} from '@angular/mat
import {Subscription} from 'rxjs';
import {startWith} from 'rxjs/operators';
+function toggleClass(el: Element, className: string, on: boolean) {
+ if (on) {
+ el.classList.add(className);
+ } else {
+ el.classList.remove(className);
+ }
+}
+
@Directive()
-export class MatListBase {
+/** @docs-private */
+export abstract class MatListBase {
// @HostBinding is used in the class as it is expected to be extended. Since @Component decorator
// metadata is not inherited by child classes, instead the host binding data is defined in a way
// that can be inherited.
// tslint:disable-next-line:no-host-decorator-in-concrete
@HostBinding('class.mdc-list--non-interactive')
- _isNonInteractive: boolean;
+ _isNonInteractive: boolean = false;
}
@Directive()
+/** @docs-private */
export abstract class MatListItemBase implements AfterContentInit, OnDestroy, RippleTarget {
lines: QueryList>;
@@ -67,8 +77,9 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
.subscribe((lines: QueryList>) => {
lines.forEach((line: ElementRef, index: number) => {
- line.nativeElement.classList.toggle('mdc-list-item__primary-text', index === 0);
- line.nativeElement.classList.toggle('mdc-list-item__secondary-text', index !== 0);
+ toggleClass(line.nativeElement,
+ 'mdc-list-item__primary-text', index === 0 && lines.length > 1);
+ toggleClass(line.nativeElement, 'mdc-list-item__secondary-text', index !== 0);
});
setLines(lines, this._element, 'mat-mdc');
}));
diff --git a/src/material-experimental/mdc-list/list-item.html b/src/material-experimental/mdc-list/list-item.html
index fbaeab2cecaa..5112a1e98d35 100644
--- a/src/material-experimental/mdc-list/list-item.html
+++ b/src/material-experimental/mdc-list/list-item.html
@@ -1,3 +1,16 @@
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/material-experimental/mdc-list/module.ts b/src/material-experimental/mdc-list/module.ts
index 18084a3389ff..cc11d2eb53dc 100644
--- a/src/material-experimental/mdc-list/module.ts
+++ b/src/material-experimental/mdc-list/module.ts
@@ -6,6 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
+import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {MatLineModule, MatRippleModule} from '@angular/material/core';
import {MatDividerModule} from '@angular/material/divider';
@@ -22,6 +23,7 @@ import {MatListOption, MatSelectionList} from './selection-list';
@NgModule({
imports: [
+ CommonModule,
MatLineModule,
MatRippleModule,
],