Skip to content

Commit 4258513

Browse files
crisbetocrisbeto
committed
build: switch select demo app to MDC
Switches the `mat-select` demo app to use MDC and fixes that the docs were using some legacy components.
1 parent 7859dbb commit 4258513

File tree

15 files changed

+280
-280
lines changed

15 files changed

+280
-280
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@
200200
/src/dev-app/mdc-progress-bar/** @crisbeto
201201
/src/dev-app/mdc-progress-spinner/** @mmalerba
202202
/src/dev-app/mdc-radio/** @mmalerba
203-
/src/dev-app/mdc-select/** @crisbeto
203+
/src/dev-app/legacy-select/** @crisbeto
204204
/src/dev-app/mdc-snack-bar/** @andrewseguin
205205
/src/dev-app/mdc-snack-bar/** @andrewseguin
206206
/src/dev-app/mdc-slide-toggle/** @crisbeto

‎src/components-examples/material/select/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ ng_module(
1515
deps = [
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
18+
"//src/material/checkbox",
1819
"//src/material/form-field",
1920
"//src/material/input",
20-
"//src/material/legacy-checkbox",
2121
"//src/material/select",
2222
"//src/material/select/testing",
2323
"@npm//@angular/forms",

‎src/components-examples/material/select/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import {CommonModule} from '@angular/common';
22
import {NgModule} from '@angular/core';
33
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
4-
import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
4+
import {MatCheckboxModule} from '@angular/material/checkbox';
55
import {MatInputModule} from '@angular/material/input';
6+
import {MatFormFieldModule} from '@angular/material/form-field';
67
import {MatSelectModule} from '@angular/material/select';
78
import {SelectCustomTriggerExample} from './select-custom-trigger/select-custom-trigger-example';
89
import {SelectDisabledExample} from './select-disabled/select-disabled-example';
@@ -19,7 +20,6 @@ import {SelectValueBindingExample} from './select-value-binding/select-value-bin
1920
import {SelectReactiveFormExample} from './select-reactive-form/select-reactive-form-example';
2021
import {SelectInitialValueExample} from './select-initial-value/select-initial-value-example';
2122
import {SelectHarnessExample} from './select-harness/select-harness-example';
22-
import {MatFormFieldModule} from '@angular/material/form-field';
2323

2424
export {
2525
SelectCustomTriggerExample,
@@ -61,7 +61,7 @@ const EXAMPLES = [
6161
imports: [
6262
CommonModule,
6363
FormsModule,
64-
MatLegacyCheckboxModule,
64+
MatCheckboxModule,
6565
MatInputModule,
6666
MatSelectModule,
6767
ReactiveFormsModule,

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ ng_module(
4949
"//src/dev-app/layout",
5050
"//src/dev-app/legacy-input",
5151
"//src/dev-app/legacy-paginator",
52+
"//src/dev-app/legacy-select",
5253
"//src/dev-app/legacy-table",
5354
"//src/dev-app/legacy-tooltip",
5455
"//src/dev-app/list",
@@ -64,7 +65,6 @@ ng_module(
6465
"//src/dev-app/mdc-progress-bar",
6566
"//src/dev-app/mdc-progress-spinner",
6667
"//src/dev-app/mdc-radio",
67-
"//src/dev-app/mdc-select",
6868
"//src/dev-app/mdc-slide-toggle",
6969
"//src/dev-app/mdc-slider",
7070
"//src/dev-app/mdc-snack-bar",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,10 @@ export class DevAppLayout {
115115
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
116116
{name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
117117
{name: 'MDC Tabs', route: '/mdc-tabs'},
118-
{name: 'MDC Select', route: '/mdc-select'},
119118
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
120119
{name: 'MDC Slider', route: '/mdc-slider'},
121120
{name: 'MDC Snack Bar', route: '/mdc-snack-bar'},
121+
{name: 'Legacy Select', route: '/legacy-select'},
122122
{name: 'Legacy Tooltip', route: '/legacy-tooltip'},
123123
{name: 'Legacy Table', route: '/legacy-table'},
124124
{name: 'Legacy Paginator', route: '/legacy-paginator'},

‎src/dev-app/legacy-select/BUILD.bazel

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "legacy-select",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"legacy-select-demo.html",
10+
":legacy_select_demo_scss",
11+
],
12+
deps = [
13+
"//src/material/icon",
14+
"//src/material/legacy-button",
15+
"//src/material/legacy-card",
16+
"//src/material/legacy-dialog",
17+
"//src/material/legacy-form-field",
18+
"//src/material/legacy-input",
19+
"//src/material/legacy-select",
20+
"@npm//@angular/forms",
21+
],
22+
)
23+
24+
sass_binary(
25+
name = "legacy_select_demo_scss",
26+
src = "legacy-select-demo.scss",
27+
)

‎src/dev-app/mdc-select/mdc-select-demo.html renamed to ‎src/dev-app/legacy-select/legacy-select-demo.html

Lines changed: 136 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,52 @@
66
<mat-card>
77
<mat-card-subtitle>ngModel</mat-card-subtitle>
88

9-
<mat-card-content>
10-
<mat-form-field [floatLabel]="floatLabel" [color]="drinksTheme"
11-
[class.demo-drinks-width-large]="drinksWidth === '400px'">
12-
<mat-label>Drink</mat-label>
13-
<mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
14-
[disabled]="drinksDisabled" #drinkControl="ngModel">
15-
<mat-option>None</mat-option>
16-
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
17-
{{ drink.viewValue }}
18-
</mat-option>
19-
</mat-select>
20-
<mat-icon matPrefix class="demo-drink-icon">local_drink</mat-icon>
21-
<mat-hint>Pick a drink!</mat-hint>
22-
<mat-error>You must make a selection</mat-error>
23-
</mat-form-field>
24-
<p> Value: {{ currentDrink }} </p>
25-
<p> Touched: {{ drinkControl.touched }} </p>
26-
<p> Dirty: {{ drinkControl.dirty }} </p>
27-
<p> Status: {{ drinkControl.control?.status }} </p>
28-
<p>
29-
<label for="floating-label">Floating label:</label>
30-
<select [(ngModel)]="floatLabel" id="floating-label">
31-
<option value="auto">Auto</option>
32-
<option value="always">Always</option>
33-
<option value="never">Never</option>
34-
</select>
35-
</p>
36-
<p>
37-
<label for="drinks-width">Width:</label>
38-
<select [(ngModel)]="drinksWidth" id="drinks-width">
39-
<option value="default">Default</option>
40-
<option value="400px">400px</option>
41-
</select>
42-
</p>
43-
<p>
44-
<label for="drinks-theme">Theme:</label>
45-
<select [(ngModel)]="drinksTheme" id="drinks-theme">
46-
<option *ngFor="let theme of availableThemes" [value]="theme.value">
47-
{{theme.name}}
48-
</option>
49-
</select>
50-
</p>
9+
<mat-form-field [floatLabel]="floatLabel" [color]="drinksTheme"
10+
[class.demo-drinks-width-large]="drinksWidth === '400px'">
11+
<mat-label>Drink</mat-label>
12+
<mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
13+
[disabled]="drinksDisabled" #drinkControl="ngModel">
14+
<mat-option>None</mat-option>
15+
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
16+
{{ drink.viewValue }}
17+
</mat-option>
18+
</mat-select>
19+
<mat-icon matPrefix class="demo-drink-icon">local_drink</mat-icon>
20+
<mat-hint>Pick a drink!</mat-hint>
21+
<mat-error>You must make a selection</mat-error>
22+
</mat-form-field>
23+
<p> Value: {{ currentDrink }} </p>
24+
<p> Touched: {{ drinkControl.touched }} </p>
25+
<p> Dirty: {{ drinkControl.dirty }} </p>
26+
<p> Status: {{ drinkControl.control?.status }} </p>
27+
<p>
28+
<label for="floating-placeholder">Floating placeholder:</label>
29+
<select [(ngModel)]="floatLabel" id="floating-placeholder">
30+
<option value="auto">Auto</option>
31+
<option value="always">Always</option>
32+
<option value="never">Never</option>
33+
</select>
34+
</p>
35+
<p>
36+
<label for="drinks-width">Width:</label>
37+
<select [(ngModel)]="drinksWidth" id="drinks-width">
38+
<option value="default">Default</option>
39+
<option value="400px">400px</option>
40+
</select>
41+
</p>
42+
<p>
43+
<label for="drinks-theme">Theme:</label>
44+
<select [(ngModel)]="drinksTheme" id="drinks-theme">
45+
<option *ngFor="let theme of availableThemes" [value]="theme.value">
46+
{{theme.name}}
47+
</option>
48+
</select>
49+
</p>
5150

52-
<button mat-button (click)="currentDrink='water-2'">SET VALUE</button>
53-
<button mat-button (click)="drinksRequired=!drinksRequired">TOGGLE REQUIRED</button>
54-
<button mat-button (click)="drinksDisabled=!drinksDisabled">TOGGLE DISABLED</button>
55-
<button mat-button (click)="drinkControl.reset()">RESET</button>
56-
</mat-card-content>
51+
<button mat-button (click)="currentDrink='water-2'">SET VALUE</button>
52+
<button mat-button (click)="drinksRequired=!drinksRequired">TOGGLE REQUIRED</button>
53+
<button mat-button (click)="drinksDisabled=!drinksDisabled">TOGGLE DISABLED</button>
54+
<button mat-button (click)="drinkControl.reset()">RESET</button>
5755
</mat-card>
5856

5957
<mat-card>
@@ -89,22 +87,20 @@
8987
<mat-card>
9088
<mat-card-subtitle>Without Angular forms</mat-card-subtitle>
9189

92-
<mat-card-content>
93-
<mat-form-field>
94-
<mat-label>Digimon</mat-label>
95-
<mat-select [(value)]="currentDigimon">
96-
<mat-option>None</mat-option>
97-
<mat-option *ngFor="let creature of digimon" [value]="creature.value">
98-
{{ creature.viewValue }}
99-
</mat-option>
100-
</mat-select>
101-
</mat-form-field>
90+
<mat-form-field>
91+
<mat-label>Digimon</mat-label>
92+
<mat-select [(value)]="currentDigimon">
93+
<mat-option>None</mat-option>
94+
<mat-option *ngFor="let creature of digimon" [value]="creature.value">
95+
{{ creature.viewValue }}
96+
</mat-option>
97+
</mat-select>
98+
</mat-form-field>
10299

103-
<p>Value: {{ currentDigimon }}</p>
100+
<p>Value: {{ currentDigimon }}</p>
104101

105-
<button mat-button (click)="currentDigimon='pajiramon-3'">SET VALUE</button>
106-
<button mat-button (click)="currentDigimon=''">RESET</button>
107-
</mat-card-content>
102+
<button mat-button (click)="currentDigimon='pajiramon-3'">SET VALUE</button>
103+
<button mat-button (click)="currentDigimon=''">RESET</button>
108104
</mat-card>
109105

110106
<mat-card>
@@ -159,6 +155,30 @@
159155
<mat-card>
160156
<mat-card-subtitle>Appearance comparison</mat-card-subtitle>
161157
<mat-card-content>
158+
<p>
159+
<mat-form-field>
160+
<mat-label>Legacy</mat-label>
161+
<mat-select [(value)]="currentAppearanceValue">
162+
<mat-option>None</mat-option>
163+
<mat-option *ngFor="let creature of digimon" [value]="creature.value">
164+
{{ creature.viewValue }}
165+
</mat-option>
166+
</mat-select>
167+
</mat-form-field>
168+
</p>
169+
170+
<p>
171+
<mat-form-field appearance="standard">
172+
<mat-label>Standard</mat-label>
173+
<mat-select [(value)]="currentAppearanceValue">
174+
<mat-option>None</mat-option>
175+
<mat-option *ngFor="let creature of digimon" [value]="creature.value">
176+
{{ creature.viewValue }}
177+
</mat-option>
178+
</mat-select>
179+
</mat-form-field>
180+
</p>
181+
162182
<p>
163183
<mat-form-field appearance="fill">
164184
<mat-label>Fill</mat-label>
@@ -226,6 +246,33 @@
226246
</mat-card>
227247
</div>
228248

249+
<mat-card>
250+
<mat-card-subtitle>MatSelect inside a dialog</mat-card-subtitle>
251+
<mat-card-content>
252+
253+
<button (click)="openDialogWithSelectInside(dialogTemplate)">Open dialog</button>
254+
255+
<ng-template #dialogTemplate>
256+
<mat-form-field>
257+
<mat-label>Your name</mat-label>
258+
<input matInput>
259+
</mat-form-field>
260+
261+
<mat-form-field>
262+
<mat-label>Select a topping</mat-label>
263+
<mat-select>
264+
<mat-option value="cheese">Cheese</mat-option>
265+
<mat-option value="onion">Onion</mat-option>
266+
<mat-option value="pepper">Pepper</mat-option>
267+
</mat-select>
268+
</mat-form-field>
269+
270+
<button>Done</button>
271+
</ng-template>
272+
273+
</mat-card-content>
274+
</mat-card>
275+
229276
</div>
230277

231278
<mat-card class="demo-card demo-basic">
@@ -290,6 +337,24 @@ <h4>Floating label</h4>
290337
</select>
291338
</mat-form-field>
292339
<h4>Looks</h4>
340+
<mat-form-field appearance="legacy">
341+
<mat-label>Legacy</mat-label>
342+
<select matNativeControl required>
343+
<option value="volvo">Volvo</option>
344+
<option value="saab">Saab</option>
345+
<option value="mercedes">Mercedes</option>
346+
<option value="audi">Audi</option>
347+
</select>
348+
</mat-form-field>
349+
<mat-form-field appearance="standard">
350+
<mat-label>Standard</mat-label>
351+
<select matNativeControl required>
352+
<option value="volvo">Volvo</option>
353+
<option value="saab">Saab</option>
354+
<option value="mercedes">Mercedes</option>
355+
<option value="audi">Audi</option>
356+
</select>
357+
</mat-form-field>
293358
<mat-form-field appearance="fill">
294359
<mat-label>Fill</mat-label>
295360
<select matNativeControl required>
@@ -323,6 +388,16 @@ <h4>Option group</h4>
323388
</optgroup>
324389
</select>
325390
</mat-form-field>
391+
<h4>Place holder</h4>
392+
<mat-form-field class="demo-full-width">
393+
<select matNativeControl placeholder="place holder">
394+
<option value="" disabled selected></option>
395+
<option value="volvo">Volvo</option>
396+
<option value="saab" disabled>Saab</option>
397+
<option value="mercedes">Mercedes</option>
398+
<option value="audi">Audi</option>
399+
</select>
400+
</mat-form-field>
326401
<h4>Error message, hint, form sumbit</h4>
327402
<mat-form-field class="demo-full-width">
328403
<mat-label>Select your car (required)</mat-label>

‎src/dev-app/mdc-select/mdc-select-demo.scss renamed to ‎src/dev-app/legacy-select/legacy-select-demo.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
display: flex;
33
flex-flow: row wrap;
44

5-
.mat-mdc-card {
5+
.mat-card {
66
width: 450px;
77
margin: 24px 24px 0 0;
8-
display: block;
98

109
[dir='rtl'] :host & {
1110
margin: 24px 0 0 24px;

0 commit comments

Comments
 (0)