Skip to content

Commit 9343d08

Browse files
mmalerbammalerba
authored
demo(mdc-list): Add a demo page for the MDC-based list (#18604)
* 3.3. Add a demo page for the MDC-based list. * WIP: css * fix lint * update MDC to version with fix * fix some CSS styles
1 parent d191329 commit 9343d08

22 files changed

+837
-530
lines changed

‎.github/CODEOWNERS

+1
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@
164164
/src/dev-app/mdc-checkbox/** @mmalerba
165165
/src/dev-app/mdc-chips/** @mmalerba
166166
/src/dev-app/mdc-input/** @devversion @mmalerba
167+
/src/dev-app/mdc-list/** @mmalerba
167168
/src/dev-app/mdc-menu/** @crisbeto
168169
/src/dev-app/mdc-progress-bar/** @crisbeto
169170
/src/dev-app/mdc-radio/** @mmalerba

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"@types/youtube": "^0.0.38",
5656
"@webcomponents/custom-elements": "^1.1.0",
5757
"core-js": "^2.6.9",
58-
"material-components-web": "5.0.0",
58+
"material-components-web": "^6.0.0-canary.265ecbad5.0",
5959
"rxjs": "^6.5.3",
6060
"systemjs": "0.19.43",
6161
"tslib": "^1.10.0",

‎packages.bzl

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
44
ANGULAR_PACKAGE_VERSION = "^9.0.0 || ^10.0.0-0"
5-
MDC_PACKAGE_VERSION = "^4.0.0"
5+
MDC_PACKAGE_VERSION = "^6.0.0-canary.265ecbad5.0"
66
TSLIB_PACKAGE_VERSION = "^1.9.0"
77

88
VERSION_PLACEHOLDER_REPLACEMENTS = {

‎src/dev-app/BUILD.bazel

+1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ ng_module(
4848
"//src/dev-app/mdc-checkbox",
4949
"//src/dev-app/mdc-chips",
5050
"//src/dev-app/mdc-input",
51+
"//src/dev-app/mdc-list",
5152
"//src/dev-app/mdc-menu",
5253
"//src/dev-app/mdc-progress-bar",
5354
"//src/dev-app/mdc-radio",

‎src/dev-app/dev-app/dev-app-layout.ts

+1
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export class DevAppLayout {
7575
{name: 'MDC Checkbox', route: '/mdc-checkbox'},
7676
{name: 'MDC Chips', route: '/mdc-chips'},
7777
{name: 'MDC Input', route: '/mdc-input'},
78+
{name: 'MDC List', route: '/mdc-list'},
7879
{name: 'MDC Menu', route: '/mdc-menu'},
7980
{name: 'MDC Radio', route: '/mdc-radio'},
8081
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},

‎src/dev-app/dev-app/routes.ts

+1
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export const DEV_APP_ROUTES: Routes = [
6868
},
6969
{path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
7070
{path: 'mdc-input', loadChildren: 'mdc-input/mdc-input-demo-module#MdcInputDemoModule'},
71+
{path: 'mdc-list', loadChildren: 'mdc-list/mdc-list-demo-module#MdcListDemoModule'},
7172
{path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
7273
{path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
7374
{

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -162,11 +162,11 @@ <h3 mat-subheader>Dogs</h3>
162162
<button mat-raised-button (click)="groceries.deselectAll()">Deselect all</button>
163163
</p>
164164
</div>
165-
165+
166166
<div>
167167
<h2>Single Selection list</h2>
168168

169-
<mat-selection-list #favorite
169+
<mat-selection-list #favorite
170170
[(ngModel)]="favoriteOptions"
171171
[multiple]="false"
172172
color="primary">

‎src/dev-app/mdc-list/BUILD.bazel

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
4+
5+
ng_module(
6+
name = "mdc-list",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"mdc-list-demo.html",
10+
":mdc_list_demo_scss",
11+
],
12+
deps = [
13+
"//src/material-experimental/mdc-button",
14+
"//src/material-experimental/mdc-checkbox",
15+
"//src/material-experimental/mdc-list",
16+
"//src/material/icon",
17+
"@npm//@angular/router",
18+
],
19+
)
20+
21+
sass_binary(
22+
name = "mdc_list_demo_scss",
23+
src = "mdc-list-demo.scss",
24+
)

‎src/dev-app/mdc-list/mdc-list-demo-module.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {CommonModule} from '@angular/common';
10+
import {NgModule} from '@angular/core';
11+
import {FormsModule} from '@angular/forms';
12+
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
13+
import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
14+
import {MatListModule} from '@angular/material-experimental/mdc-list';
15+
import {MatIconModule} from '@angular/material/icon';
16+
import {RouterModule} from '@angular/router';
17+
import {MdcListDemo} from './mdc-list-demo';
18+
19+
@NgModule({
20+
imports: [
21+
CommonModule,
22+
FormsModule,
23+
MatButtonModule,
24+
MatCheckboxModule,
25+
MatIconModule,
26+
MatListModule,
27+
RouterModule.forChild([{path: '', component: MdcListDemo}]),
28+
],
29+
declarations: [MdcListDemo],
30+
})
31+
export class MdcListDemoModule {
32+
}

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

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
2+
<h1>mat-list demo</h1>
3+
4+
<button mat-raised-button (click)="thirdLine=!thirdLine">Show third line</button>
5+
6+
<div class="demo-list">
7+
<div>
8+
<h2>Normal lists</h2>
9+
10+
<mat-list>
11+
<h3 mat-subheader>Items</h3>
12+
<mat-list-item *ngFor="let item of items">
13+
{{item}}
14+
</mat-list-item>
15+
</mat-list>
16+
17+
<mat-list>
18+
<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>
22+
</mat-list-item>
23+
</mat-list>
24+
25+
<mat-list>
26+
<h3 mat-subheader>Today</h3>
27+
<mat-list-item *ngFor="let message of messages; last as last">
28+
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
29+
<h4 mat-line>{{message.from}}</h4>
30+
<p mat-line>
31+
<span>{{message.subject}} -- </span>
32+
<span class="demo-secondary-text">{{message.message}}</span>
33+
</p>
34+
<mat-divider inset *ngIf="!last"></mat-divider>
35+
</mat-list-item>
36+
<mat-divider></mat-divider>
37+
<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>
41+
</mat-list-item>
42+
</mat-list>
43+
</div>
44+
45+
<div>
46+
<h2>Dense lists</h2>
47+
<mat-list dense>
48+
<h3 mat-subheader>Items</h3>
49+
<mat-list-item *ngFor="let item of items">
50+
{{item}}
51+
</mat-list-item>
52+
</mat-list>
53+
54+
<mat-list dense>
55+
<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>
58+
</mat-list-item>
59+
</mat-list>
60+
61+
<mat-list dense>
62+
<h3 mat-subheader>Today</h3>
63+
<mat-list-item *ngFor="let message of messages">
64+
<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>
68+
</mat-list-item>
69+
</mat-list>
70+
</div>
71+
<div>
72+
<h2>Nav lists</h2>
73+
<mat-nav-list>
74+
<a mat-list-item *ngFor="let link of links" href="http://www.google.com">
75+
{{ link.name }}
76+
</a>
77+
</mat-nav-list>
78+
<div *ngIf="infoClicked">
79+
More info!
80+
</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>
89+
<mat-nav-list>
90+
<a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
91+
<mat-icon mat-list-icon>folder</mat-icon>
92+
<span mat-line>{{ link.name }}</span>
93+
<span mat-line class="demo-secondary-text"> Description </span>
94+
<mat-divider inset *ngIf="!last"></mat-divider>
95+
</a>
96+
</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>
105+
</div>
106+
107+
<div>
108+
<h2>Action list</h2>
109+
<mat-action-list>
110+
<button mat-list-item *ngFor="let link of links" (click)="alertItem(link.name)">
111+
{{link.name}}
112+
</button>
113+
</mat-action-list>
114+
</div>
115+
116+
<div>
117+
<h2>Selection list</h2>
118+
119+
TODO: Implement MDC-based selection list.
120+
</div>
121+
</div>

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

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.demo-list {
2+
display: flex;
3+
flex-flow: row wrap;
4+
5+
.mat-mdc-list-base {
6+
border: 1px solid rgba(0, 0, 0, 0.12);
7+
width: 350px;
8+
margin: 20px 20px 0 0;
9+
}
10+
11+
h2 {
12+
margin-top: 20px;
13+
}
14+
15+
.mat-icon {
16+
color: rgba(0, 0, 0, 0.12);
17+
}
18+
19+
.mat-mdc-list-icon {
20+
color: white;
21+
background: rgba(0, 0, 0, 0.3);
22+
}
23+
}
24+
25+
.demo-secondary-text {
26+
color: rgba(0, 0, 0, 0.54);
27+
}

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

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
11+
12+
@Component({
13+
selector: 'mdc-list-demo',
14+
templateUrl: 'mdc-list-demo.html',
15+
styleUrls: ['mdc-list-demo.css'],
16+
})
17+
export class MdcListDemo {
18+
items: string[] = [
19+
'Pepper',
20+
'Salt',
21+
'Paprika'
22+
];
23+
24+
contacts: {name: string, headline: string}[] = [
25+
{name: 'Nancy', headline: 'Software engineer'},
26+
{name: 'Mary', headline: 'TPM'},
27+
{name: 'Bobby', headline: 'UX designer'}
28+
];
29+
30+
messages: {from: string, subject: string, message: string, image: string}[] = [
31+
{
32+
from: 'Nancy',
33+
subject: 'Brunch?',
34+
message: 'Did you want to go on Sunday? I was thinking that might work.',
35+
image: 'https://angular.io/generated/images/bios/julie-ralph.jpg'
36+
},
37+
{
38+
from: 'Mary',
39+
subject: 'Summer BBQ',
40+
message: 'Wish I could come, but I have some prior obligations.',
41+
image: 'https://angular.io/generated/images/bios/juleskremer.jpg'
42+
},
43+
{
44+
from: 'Bobby',
45+
subject: 'Oui oui',
46+
message: 'Do you have Paris reservations for the 15th? I just booked!',
47+
image: 'https://angular.io/generated/images/bios/jelbourn.jpg'
48+
}
49+
];
50+
51+
links: {name: string}[] = [
52+
{name: 'Inbox'},
53+
{name: 'Outbox'},
54+
{name: 'Spam'},
55+
{name: 'Trash'}
56+
57+
];
58+
59+
thirdLine = false;
60+
infoClicked = false;
61+
selectionListDisabled = false;
62+
selectionListRippleDisabled = false;
63+
64+
selectedOptions: string[] = ['apples'];
65+
changeEventCount = 0;
66+
modelChangeEventCount = 0;
67+
68+
onSelectedOptionsChange(values: string[]) {
69+
this.selectedOptions = values;
70+
this.modelChangeEventCount++;
71+
}
72+
73+
favoriteOptions: string[] = [];
74+
75+
alertItem(msg: string) {
76+
alert(msg);
77+
}
78+
}

‎src/material-experimental/mdc-list/BUILD.bazel

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ ng_module(
2222
assets = [":list_scss"] + glob(["**/*.html"]),
2323
module_name = "@angular/material-experimental/mdc-list",
2424
deps = [
25+
"//src/material/divider",
2526
"@npm//@angular/core",
2627
"@npm//@angular/forms",
2728
"@npm//@material/list",

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

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
@import '@material/list/mixins.import';
2+
@import '../mdc-helpers/mdc-helpers';
3+
14
@mixin mat-list-theme-mdc($theme) {
5+
@include mat-using-mdc-theme($theme) {
6+
@include mdc-list-without-ripple($query: $mat-theme-styles-query);
7+
}
28
}
39

4-
@mixin mat-list-typography-mdc($config) {
10+
@mixin mat-list-typography-mdc($config: null) {
11+
@include mat-using-mdc-typography($config) {
12+
@include mdc-list-without-ripple($query: $mat-typography-styles-query);
13+
}
514
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import {MatListBase} from './list-base';
1212
@Component({
1313
selector: 'mat-action-list',
1414
exportAs: 'matActionList',
15-
templateUrl: 'list.html',
15+
template: '<ng-content></ng-content>',
1616
host: {
17-
'class': 'mat-mdc-action-list mat-mdc-list-base',
17+
'class': 'mat-mdc-action-list mat-mdc-list-base mdc-list',
1818
},
1919
styleUrls: ['list.css'],
2020
encapsulation: ViewEncapsulation.None,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
TODO: Implement.
1+
<span class="mdc-list-item__text"><ng-content></ng-content></span>

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

-1
This file was deleted.

0 commit comments

Comments
 (0)