Skip to content

Commit 871a500

Browse files
devversionmmalerba
devversion
authored and
mmalerba
committedDec 17, 2021
feat(material-experimental/mdc-list): rework API to support secondary text with wrapping
Reworks the API to support secondary text with wrapping into the third line. The overall API changes are made to ease the integration with the MDC-list foundation/component. https://docs.google.com/document/d/15yC_W2-NuNvVqHgA1zjpE8V28-Y5XRpdFOMdLjMbWAo/edit
·
20.0.0-next.413.2.0-next.1
1 parent 2cc0640 commit 871a500

21 files changed

+571
-311
lines changed
 

‎scripts/check-mdc-exports-config.ts

+12
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,18 @@ export const config = {
55
// Exclude them from this check since they aren't part of the public API.
66
skippedSymbols: [/^_/],
77
skippedExports: {
8+
'mdc-core': [
9+
// The line directive is not used by the MDC-based list and therefore does
10+
// not need to be re-exposed.
11+
'MatLine',
12+
'MatLineModule',
13+
],
14+
'mdc-list': [
15+
// These classes are docs-private and have actual public classes in the
16+
// MDC-based list, such as `MatListItemIcon` or `MatListItemAvatar`.
17+
'MatListAvatarCssMatStyler',
18+
'MatListIconCssMatStyler',
19+
],
820
'mdc-chips': [
921
// These components haven't been implemented for MDC due to a different accessibility pattern.
1022
'MatChipListChange',

‎scripts/check-mdc-tests-config.ts

+5-7
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,11 @@ export const config = {
100100
'should not change focus when pressing HOME with a modifier key',
101101
'should not change focus when pressing END with a modifier key',
102102

103-
// MDC does not support the common CTRL + A keyboard shortcut.
104-
// Tracked with: https://github.com/material-components/material-components-web/issues/6366
105-
'should select all items using ctrl + a',
106-
'should not select disabled items when pressing ctrl + a',
107-
'should select all items using ctrl + a if some items are selected',
108-
'should deselect all with ctrl + a if all options are selected',
109-
'should dispatch the selectionChange event when selecting via ctrl + a',
103+
// The indirect descendant test scenario never worked (even in the non-MDC list) and
104+
// therefore this test has been removed.
105+
'should pick up indirect descendant lines',
106+
// MDC-based list does not support more than three lines.
107+
'should apply a particular class to lists with more than 3 lines',
110108
],
111109
'mdc-progress-bar': [
112110
// These tests are verifying implementation details that are not relevant for MDC.

‎scripts/check-mdc-tests.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ function getTestNames(files: string[]): string[] {
9191
if (
9292
ts.isCallExpression(node) &&
9393
ts.isIdentifier(node.expression) &&
94-
node.expression.text === 'it'
94+
(node.expression.text === 'it' || node.expression.text === 'xit')
9595
) {
9696
// Note that this is a little naive since it'll take the literal text of the test
9797
// name expression which could include things like string concatenation. It's fine

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

+68-35
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11

22
<h1>mat-list demo</h1>
33

4-
<button mat-raised-button (click)="thirdLine=!thirdLine">Show third line</button>
4+
<button mat-raised-button (click)="thirdLine = !thirdLine">Show third line</button>
5+
<button mat-raised-button (click)="showBoxes = !showBoxes">Show item boxes</button>
6+
7+
<div class="demo-list" [class.demo-show-boxes]="showBoxes">
58

6-
<div class="demo-list">
79
<div>
810
<h2>Normal lists</h2>
911

@@ -16,35 +18,35 @@ <h2>Normal lists</h2>
1618

1719
<mat-list>
1820
<mat-list-item *ngFor="let contact of contacts">
19-
<div mat-line>{{contact.name}}</div>
20-
<div mat-line *ngIf="thirdLine">extra line</div>
21-
<div mat-line>{{contact.headline}}</div>
21+
<div matListItemTitle>{{contact.name}}</div>
22+
<div matListItemLine *ngIf="thirdLine">extra line</div>
23+
<div matListItemLine>{{contact.headline}}</div>
2224
</mat-list-item>
2325
</mat-list>
2426

2527
<mat-list>
2628
<div mat-subheader>Today</div>
2729
<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-
<div mat-line>{{message.from}}</div>
30-
<div mat-line>
30+
<img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
31+
<div matListItemTitle>{{message.from}}</div>
32+
<div matListItemLine>
3133
<span>{{message.subject}} -- </span>
3234
<span>{{message.message}}</span>
3335
</div>
3436
<mat-divider inset *ngIf="!last"></mat-divider>
3537
</mat-list-item>
3638
<mat-divider></mat-divider>
3739
<mat-list-item *ngFor="let message of messages">
38-
<div mat-line>{{message.from}}</div>
39-
<div mat-line>{{message.subject}}</div>
40-
<div mat-line>{{message.message}}</div>
40+
<div matListItemTitle>{{message.from}}</div>
41+
<div matListItemLine>{{message.subject}}</div>
42+
<div matListItemLine>{{message.message}}</div>
4143
</mat-list-item>
4244
</mat-list>
4345

4446
<mat-list>
4547
<mat-list-item *ngFor="let link of links">
46-
<span mat-line>{{ link.name }}</span>
47-
<button mat-icon-button (click)="infoClicked=!infoClicked">
48+
<span matListItemTitle>{{ link.name }}</span>
49+
<button matListItemMeta mat-icon-button (click)="infoClicked=!infoClicked">
4850
<mat-icon>info</mat-icon>
4951
</button>
5052
</mat-list-item>
@@ -62,25 +64,25 @@ <h2>Dense lists</h2>
6264

6365
<mat-list dense>
6466
<mat-list-item *ngFor="let contact of contacts">
65-
<div mat-line>{{contact.name}}</div>
66-
<div mat-line>{{contact.headline}}</div>
67+
<div matListItemTitle>{{contact.name}}</div>
68+
<div matListItemLine>{{contact.headline}}</div>
6769
</mat-list-item>
6870
</mat-list>
6971

7072
<mat-list dense>
7173
<div mat-subheader>Today</div>
7274
<mat-list-item *ngFor="let message of messages">
73-
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
74-
<div mat-line>{{message.from}}</div>
75-
<div mat-line>{{message.subject}}</div>
76-
<div mat-line>{{message.message}}</div>
75+
<img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
76+
<div matListItemTitle>{{message.from}}</div>
77+
<div matListItemLine>{{message.subject}}</div>
78+
<div matListItemLine>{{message.message}}</div>
7779
</mat-list-item>
7880
</mat-list>
7981

8082
<mat-list dense>
8183
<mat-list-item *ngFor="let link of links">
82-
<span mat-line>{{ link.name }}</span>
83-
<button mat-icon-button (click)="infoClicked=!infoClicked">
84+
<span matListItemTitle>{{ link.name }}</span>
85+
<button matListItemMeta mat-icon-button (click)="infoClicked=!infoClicked">
8486
<mat-icon class="material-icons">info</mat-icon>
8587
</button>
8688
</mat-list-item>
@@ -98,8 +100,8 @@ <h2>Nav lists</h2>
98100
</div>
99101
<mat-nav-list>
100102
<a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
101-
<mat-icon mat-list-icon>folder</mat-icon>
102-
<span mat-line>{{ link.name }}</span>
103+
<mat-icon matListItemIcon>folder</mat-icon>
104+
<span matListItemTitle>{{ link.name }}</span>
103105
</a>
104106
</mat-nav-list>
105107
</div>
@@ -134,13 +136,13 @@ <h2>Selection list</h2>
134136
<div mat-subheader>Dogs</div>
135137

136138
<mat-list-option checkboxPosition="before">
137-
<img matListAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
138-
<span matLine>Shiba Inu</span>
139+
<img matListItemAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
140+
<span matListItemTitle>Shiba Inu</span>
139141
</mat-list-option>
140142

141143
<mat-list-option checkboxPosition="after">
142-
<img matListAvatar src="https://material.angular.io/assets/img/examples/shiba2.jpg">
143-
<span matLine>Other Shiba Inu</span>
144+
<img matListItemAvatar src="https://material.angular.io/assets/img/examples/shiba2.jpg">
145+
<span matListItemTitle>Other Shiba Inu</span>
144146
</mat-list-option>
145147
</mat-selection-list>
146148

@@ -183,21 +185,52 @@ <h2>Single Selection list</h2>
183185
<p>Selected: {{favoriteOptions | json}}</p>
184186
</div>
185187

188+
<div>
189+
<h2>Line scenarios</h2>
190+
191+
<mat-list>
192+
<mat-list-item>Title</mat-list-item>
193+
<mat-list-item lines="2">
194+
<span matListItemTitle>Title</span>
195+
<span>This is unscoped text content that is supposed to not wrap. The list has only
196+
acquired two lines and therefore there is no space for wrapping.</span>
197+
</mat-list-item>
198+
<mat-list-item lines="3">
199+
<span matListItemTitle>Title</span>
200+
<span>This is unscoped text content that is supposed to wrap to the third line.
201+
The list item acquire spaces for three lines and text should have an ellipsis in the
202+
third line upon text overflow.</span>
203+
</mat-list-item>
204+
<mat-list-item>
205+
<span matListItemTitle>Title</span>
206+
<span>This is unscoped text content that is supposed to not wrap. The list has only
207+
acquired two lines (automatically) and therefore there is no space for wrapping.</span>
208+
</mat-list-item>
209+
<mat-list-item>
210+
<span matListItemTitle>Title</span>
211+
<span matListItemLine>Secondary line</span>
212+
<span matListItemLine>Tertiary line</span>
213+
</mat-list-item>
214+
</mat-list>
215+
216+
<button mat-raised-button (click)="showBoxes = !showBoxes">Show item boxes</button>
217+
</div>
218+
186219
<div>
187220
<h2>Line alignment</h2>
188221

189222
<mat-list>
190223
<mat-list-item *ngFor="let link of links">
191-
<span mat-line>{{ link.name }}</span>
192-
<span>Not in an <i>matLine</i></span>
224+
<span matListItemTitle>{{ link.name }}</span>
225+
<span>Unscoped content</span>
193226
</mat-list-item>
194227
</mat-list>
195228

196229
<mat-selection-list>
197230
<mat-list-option value="first">First</mat-list-option>
198231
<mat-list-option value="second">
199-
<span matLine>Second</span>
200-
<span>Not in an <i>matLine</i></span>
232+
<span matListItemTitle>Second</span>
233+
<span>Unscoped content</span>
201234
</mat-list-option>
202235
</mat-selection-list>
203236
</div>
@@ -207,19 +240,19 @@ <h2>Icon alignment in selection list</h2>
207240

208241
<mat-selection-list>
209242
<mat-list-option value="bananas" [checkboxPosition]="checkboxPosition">
210-
<mat-icon matListIcon>info</mat-icon>
243+
<mat-icon matListItemIcon>info</mat-icon>
211244
Bananas
212245
</mat-list-option>
213246
<mat-list-option value="oranges" [checkboxPosition]="checkboxPosition">
214-
<mat-icon matListIcon #ok>info</mat-icon>
247+
<mat-icon matListItemIcon #ok>info</mat-icon>
215248
Oranges
216249
</mat-list-option>
217250
<mat-list-option value="cake" [checkboxPosition]="checkboxPosition">
218-
<mat-icon matListIcon>info</mat-icon>
251+
<mat-icon matListItemIcon>info</mat-icon>
219252
Cake
220253
</mat-list-option>
221254
<mat-list-option value="fries" [checkboxPosition]="checkboxPosition">
222-
<mat-icon matListIcon>info</mat-icon>
255+
<mat-icon matListItemIcon>info</mat-icon>
223256
Fries
224257
</mat-list-option>
225258
</mat-selection-list>

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

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
.mat-mdc-icon-button {
1616
color: rgba(0, 0, 0, 0.12);
1717
}
18+
19+
&.demo-show-boxes .mat-mdc-list-item {
20+
border: 1px solid grey;
21+
}
1822
}
1923

2024
.demo-secondary-text {

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ export class MdcListDemo {
2727

2828
messages: {from: string; subject: string; message: string; image: string}[] = [
2929
{
30-
from: 'Nancy',
30+
from: 'John',
3131
subject: 'Brunch?',
3232
message: 'Did you want to go on Sunday? I was thinking that might work.',
33-
image: 'https://angular.io/generated/images/bios/cindygreenekaplan.jpg',
33+
image: 'https://angular.io/generated/images/bios/devversion.jpg',
3434
},
3535
{
3636
from: 'Mary',
@@ -49,6 +49,7 @@ export class MdcListDemo {
4949
links: {name: string}[] = [{name: 'Inbox'}, {name: 'Outbox'}, {name: 'Spam'}, {name: 'Trash'}];
5050

5151
thirdLine = false;
52+
showBoxes = false;
5253
infoClicked = false;
5354
selectionListDisabled = false;
5455
selectionListRippleDisabled = false;

‎src/material-experimental/mdc-core/public-api.ts

-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ export {
2929
MatCommonModule,
3030
MatDateFormats,
3131
MATERIAL_SANITY_CHECKS,
32-
MatLine,
33-
MatLineModule,
3432
MatNativeDateModule,
3533
MatPseudoCheckbox,
3634
MatPseudoCheckboxModule,

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

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ ng_module(
2626
deps = [
2727
"//src:dev_mode_types",
2828
"//src/cdk/collections",
29+
"//src/cdk/observers",
2930
"//src/material-experimental/mdc-core",
3031
"//src/material/divider",
3132
"//src/material/list",

0 commit comments

Comments
 (0)
Please sign in to comment.