Skip to content

Commit cbbccaf

Browse files
Splaktarjelbourn
Splaktar
authored and
jelbourn
committed
docs(examples): all examples should use mat-form-field's fill appearance by default (#18252)
- stop using the soon to be deprecated legacy appearance by default - fix issues where labels were specified in the `placeholder` attribute - instead of a `mat-label` Relates to #14792 (cherry picked from commit 0e30214)
1 parent f0d3a6b commit cbbccaf

File tree

67 files changed

+302
-164
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+302
-164
lines changed

‎src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field class="example-full-width">
2-
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
2+
<mat-label>Choose a date</mat-label>
3+
<input matInput [matDatepicker]="picker">
34
<mat-datepicker-toggle matSuffix [for]="picker">
45
<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
56
</mat-datepicker-toggle>

‎src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field class="example-full-width">
2-
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
2+
<mat-label>Choose a date</mat-label>
3+
<input matInput [matDatepicker]="picker">
34
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
45
<mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
56
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
<p>
22
<mat-form-field>
3-
<input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
3+
<mat-label>Completely disabled</mat-label>
4+
<input matInput [matDatepicker]="dp1" disabled>
45
<mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
56
<mat-datepicker #dp1></mat-datepicker>
67
</mat-form-field>
78
</p>
89

910
<p>
1011
<mat-form-field>
11-
<input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
12+
<mat-label>Popup disabled</mat-label>
13+
<input matInput [matDatepicker]="dp2">
1214
<mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
1315
<mat-datepicker #dp2></mat-datepicker>
1416
</mat-form-field>
1517
</p>
1618

1719
<p>
1820
<mat-form-field>
19-
<input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
21+
<mat-label>Input disabled</mat-label>
22+
<input matInput [matDatepicker]="dp3" disabled>
2023
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
2124
<mat-datepicker #dp3 disabled="false"></mat-datepicker>
2225
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field>
2-
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
2+
<mat-label>Input & change events</mat-label>
3+
<input matInput [matDatepicker]="picker"
34
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
45
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
56
<mat-datepicker #picker></mat-datepicker>

‎src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field class="example-full-width">
2-
<input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
2+
<mat-label>Choose a date</mat-label>
3+
<input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
34
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
45
<mat-datepicker #picker></mat-datepicker>
56
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field>
2-
<input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
2+
<mat-label>Verbose datepicker</mat-label>
3+
<input matInput [matDatepicker]="dp" [formControl]="date">
34
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
45
<mat-datepicker #dp></mat-datepicker>
56
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field>
2-
<input matInput [matDatepicker]="dp" placeholder="Different locale">
2+
<mat-label>Different locale</mat-label>
3+
<input matInput [matDatepicker]="dp">
34
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
45
<mat-datepicker #dp></mat-datepicker>
56
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field class="example-full-width">
2-
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
2+
<mat-label>Choose a date</mat-label>
3+
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker">
34
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
45
<mat-datepicker #picker></mat-datepicker>
56
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field>
2-
<input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
2+
<mat-label>Moment.js datepicker</mat-label>
3+
<input matInput [matDatepicker]="dp" [formControl]="date">
34
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
45
<mat-datepicker #dp></mat-datepicker>
56
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field>
2-
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
2+
<mat-label>Choose a date</mat-label>
3+
<input matInput [matDatepicker]="picker">
34
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
45
<mat-datepicker #picker></mat-datepicker>
56
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field>
2-
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
2+
<mat-label>Choose a date</mat-label>
3+
<input matInput [matDatepicker]="picker">
34
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
45
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
56
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field class="example-full-width">
2-
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
2+
<mat-label>Choose a date</mat-label>
3+
<input matInput [matDatepicker]="picker">
34
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
45
<mat-datepicker touchUi #picker></mat-datepicker>
56
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
<mat-form-field>
2-
<input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
2+
<mat-label>Angular forms</mat-label>
3+
<input matInput [matDatepicker]="picker1" [formControl]="date">
34
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
45
<mat-datepicker #picker1></mat-datepicker>
56
</mat-form-field>
67

78
<mat-form-field>
8-
<input matInput [matDatepicker]="picker2" placeholder="Angular forms (w/ deserialization)"
9+
<mat-label>Angular forms (w/ deserialization)</mat-label>
10+
<input matInput [matDatepicker]="picker2"
911
[formControl]="serializedDate">
1012
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
1113
<mat-datepicker #picker2></mat-datepicker>
1214
</mat-form-field>
1315

1416
<mat-form-field>
15-
<input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
17+
<mat-label>Value binding</mat-label>
18+
<input matInput [matDatepicker]="picker3" [value]="date.value">
1619
<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
1720
<mat-datepicker #picker3></mat-datepicker>
1821
</mat-form-field>

‎src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field>
2-
<input matInput [matDatepicker]="dp" placeholder="Month and Year" [formControl]="date">
2+
<mat-label>Month and Year</mat-label>
3+
<input matInput [matDatepicker]="dp" [formControl]="date">
34
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
45
<mat-datepicker #dp
56
startView="multi-year"

‎src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ <h1 mat-dialog-title>Hi {{data.name}}</h1>
22
<div mat-dialog-content>
33
<p>What's your favorite animal?</p>
44
<mat-form-field>
5+
<mat-label>Favorite Animal</mat-label>
56
<input matInput [(ngModel)]="data.animal">
67
</mat-form-field>
78
</div>

‎src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<ol>
22
<li>
33
<mat-form-field>
4-
<input matInput [(ngModel)]="name" placeholder="What's your name?">
4+
<mat-label>What's your name?</mat-label>
5+
<input matInput [(ngModel)]="name">
56
</mat-form-field>
67
</li>
78
<li>

‎src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,7 @@
1111
justify-content: space-between;
1212
align-items: center;
1313
}
14+
15+
.example-headers-align .mat-form-field + .mat-form-field {
16+
margin-left: 8px;
17+
}

‎src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@
1515
</mat-expansion-panel-header>
1616

1717
<mat-form-field>
18-
<input matInput placeholder="First name">
18+
<mat-label>First name</mat-label>
19+
<input matInput>
1920
</mat-form-field>
2021

2122
<mat-form-field>
22-
<input matInput type="number" min="1" placeholder="Age">
23+
<mat-label>Age</mat-label>
24+
<input matInput type="number" min="1">
2325
</mat-form-field>
2426

2527
</mat-expansion-panel>
@@ -36,7 +38,8 @@
3638
</mat-expansion-panel-header>
3739

3840
<mat-form-field>
39-
<input matInput placeholder="Country">
41+
<mat-label>Country</mat-label>
42+
<input matInput>
4043
</mat-form-field>
4144
</mat-expansion-panel>
4245

@@ -52,7 +55,8 @@
5255
</mat-expansion-panel-header>
5356

5457
<mat-form-field>
55-
<input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
58+
<mat-label>Date</mat-label>
59+
<input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
5660
</mat-form-field>
5761
<mat-datepicker #picker></mat-datepicker>
5862
</mat-expansion-panel>

‎src/components-examples/material/expansion/expansion-overview/expansion-overview-example.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
/** No CSS for this example */
1+
.mat-form-field + .mat-form-field {
2+
margin-left: 8px;
3+
}

‎src/components-examples/material/expansion/expansion-overview/expansion-overview-example.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@
1010
</mat-expansion-panel-header>
1111

1212
<mat-form-field>
13-
<input matInput placeholder="First name">
13+
<mat-label>First name</mat-label>
14+
<input matInput>
1415
</mat-form-field>
1516

1617
<mat-form-field>
17-
<input matInput placeholder="Age">
18+
<mat-label>Age</mat-label>
19+
<input matInput type="number" min="1">
1820
</mat-form-field>
1921
</mat-expansion-panel>
2022
<mat-expansion-panel (opened)="panelOpenState = true"

‎src/components-examples/material/expansion/expansion-steps/expansion-steps-example.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
align-items: center;
99
}
1010

11-
mat-form-field {
12-
margin-right: 12px;
11+
.example-headers-align .mat-form-field + .mat-form-field {
12+
margin-left: 8px;
1313
}

‎src/components-examples/material/expansion/expansion-steps/expansion-steps-example.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,13 @@
1111
</mat-expansion-panel-header>
1212

1313
<mat-form-field>
14-
<input matInput placeholder="First name">
14+
<mat-label>First name</mat-label>
15+
<input matInput>
1516
</mat-form-field>
1617

1718
<mat-form-field>
18-
<input matInput type="number" min="1" placeholder="Age">
19+
<mat-label>Age</mat-label>
20+
<input matInput type="number" min="1">
1921
</mat-form-field>
2022

2123
<mat-action-row>
@@ -35,7 +37,8 @@
3537
</mat-expansion-panel-header>
3638

3739
<mat-form-field>
38-
<input matInput placeholder="Country">
40+
<mat-label>Country</mat-label>
41+
<input matInput>
3942
</mat-form-field>
4043

4144
<mat-action-row>
@@ -56,7 +59,8 @@
5659
</mat-expansion-panel-header>
5760

5861
<mat-form-field>
59-
<input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
62+
<mat-label>Date</mat-label>
63+
<input matInput [matDatepicker]="picker" (focus)="picker.open()" readonly>
6064
</mat-form-field>
6165
<mat-datepicker #picker></mat-datepicker>
6266

‎src/components-examples/material/input/input-clearable/input-clearable-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<mat-form-field class="example-form-field">
2-
<input matInput type="text" placeholder="Clearable input" [(ngModel)]="value">
2+
<mat-label>Clearable input</mat-label>
3+
<input matInput type="text" [(ngModel)]="value">
34
<button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
45
<mat-icon>close</mat-icon>
56
</button>

‎src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<form class="example-form">
22
<mat-form-field class="example-full-width">
3-
<input matInput placeholder="Email" [formControl]="emailFormControl"
4-
[errorStateMatcher]="matcher">
3+
<mat-label>Email</mat-label>
4+
<input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
5+
placeholder="Ex. [email protected]">
56
<mat-hint>Errors appear instantly!</mat-hint>
67
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
78
Please enter a valid email address

‎src/components-examples/material/input/input-errors/input-errors-example.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<form class="example-form">
22
<mat-form-field class="example-full-width">
3-
<input matInput placeholder="Email" [formControl]="emailFormControl">
3+
<mat-label>Email</mat-label>
4+
<input matInput [formControl]="emailFormControl" placeholder="Ex. [email protected]">
45
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
56
Please enter a valid email address
67
</mat-error>

‎src/components-examples/material/input/input-form/input-form-example.html

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,43 @@
11
<form class="example-form">
22
<mat-form-field class="example-full-width">
3-
<input matInput placeholder="Company (disabled)" disabled value="Google">
3+
<mat-label>Company (disabled)</mat-label>
4+
<input matInput disabled value="Google">
45
</mat-form-field>
56

67
<table class="example-full-width" cellspacing="0"><tr>
78
<td><mat-form-field class="example-full-width">
8-
<input matInput placeholder="First name">
9+
<mat-label>First name</mat-label>
10+
<input matInput>
911
</mat-form-field></td>
1012
<td><mat-form-field class="example-full-width">
11-
<input matInput placeholder="Long Last Name That Will Be Truncated">
13+
<mat-label>Long Last Name That Will Be Truncated</mat-label>
14+
<input matInput>
1215
</mat-form-field></td>
1316
</tr></table>
1417

1518
<p>
1619
<mat-form-field class="example-full-width">
17-
<textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
20+
<mat-label>Address</mat-label>
21+
<textarea matInput placeholder="Ex. 100 Main St">1600 Amphitheatre Pkwy</textarea>
1822
</mat-form-field>
1923
<mat-form-field class="example-full-width">
20-
<textarea matInput placeholder="Address 2"></textarea>
24+
<mat-label>Address 2</mat-label>
25+
<textarea matInput></textarea>
2126
</mat-form-field>
2227
</p>
2328

2429
<table class="example-full-width" cellspacing="0"><tr>
2530
<td><mat-form-field class="example-full-width">
26-
<input matInput placeholder="City">
31+
<mat-label>City</mat-label>
32+
<input matInput placeholder="Ex. San Francisco">
2733
</mat-form-field></td>
2834
<td><mat-form-field class="example-full-width">
29-
<input matInput placeholder="State">
35+
<mat-label>State</mat-label>
36+
<input matInput placeholder="Ex. California">
3037
</mat-form-field></td>
3138
<td><mat-form-field class="example-full-width">
32-
<input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
39+
<mat-label>Postal Code</mat-label>
40+
<input matInput #postalCode maxlength="5" placeholder="Ex. 94105" value="94043">
3341
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
3442
</mat-form-field></td>
3543
</tr></table>

‎src/components-examples/material/input/input-hint/input-hint-example.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<form class="example-form">
2-
32
<mat-form-field class="example-full-width">
4-
<input matInput #message maxlength="256" placeholder="Message">
3+
<mat-label>Message</mat-label>
4+
<input matInput #message maxlength="256" placeholder="Ex. I need help with...">
55
<mat-hint align="start"><strong>Don't disclose personal info</strong> </mat-hint>
66
<mat-hint align="end">{{message.value.length}} / 256</mat-hint>
77
</mat-form-field>
8-
98
</form>

‎src/components-examples/material/input/input-overview/input-overview-example.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<form class="example-form">
22
<mat-form-field class="example-full-width">
3-
<input matInput placeholder="Favorite food" value="Sushi">
3+
<mat-label>Favorite food</mat-label>
4+
<input matInput placeholder="Ex. Pizza" value="Sushi">
45
</mat-form-field>
56

67
<mat-form-field class="example-full-width">
7-
<textarea matInput placeholder="Leave a comment"></textarea>
8+
<mat-label>Leave a comment</mat-label>
9+
<textarea matInput placeholder="Ex. It makes me feel..."></textarea>
810
</mat-form-field>
911
</form>

‎src/components-examples/material/input/input-prefix-suffix/input-prefix-suffix-example.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<form class="example-form">
2-
32
<mat-form-field class="example-full-width">
3+
<mat-label>Telephone</mat-label>
44
<span matPrefix>+1 &nbsp;</span>
5-
<input type="tel" matInput placeholder="Telephone">
5+
<input type="tel" matInput placeholder="555-555-1234">
66
<mat-icon matSuffix>mode_edit</mat-icon>
77
</mat-form-field>
8-
98
</form>

0 commit comments

Comments
 (0)