Skip to content

Commit 7acbf1f

Browse files
crisbetocrisbeto
authored
Switch form field and select examples to MDC (#25374)
* docs(material/form-field): switch examples to use MDC Switches the form field examples to use the MDC implementation of the form field and fixes some visual issues that came up as a result. * docs(material/select): switch examples to use MDC Switches the select examples to use MDC and fixes a minor visual issue.
1 parent 083f437 commit 7acbf1f

File tree

20 files changed

+111
-170
lines changed

20 files changed

+111
-170
lines changed

‎src/components-examples/material/form-field/BUILD.bazel

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ ng_module(
1717
"//src/cdk/testing/testbed",
1818
"//src/material/button",
1919
"//src/material/checkbox",
20+
"//src/material/form-field",
21+
"//src/material/form-field/testing",
2022
"//src/material/icon",
21-
"//src/material/legacy-form-field",
22-
"//src/material/legacy-form-field/testing",
23-
"//src/material/legacy-input",
24-
"//src/material/legacy-input/testing",
25-
"//src/material/legacy-select",
23+
"//src/material/input",
24+
"//src/material/input/testing",
2625
"//src/material/radio",
26+
"//src/material/select",
2727
"@npm//@angular/forms",
2828
"@npm//@angular/platform-browser",
2929
"@npm//@angular/platform-browser-dynamic",
@@ -47,10 +47,10 @@ ng_test_library(
4747
":form-field",
4848
"//src/cdk/testing",
4949
"//src/cdk/testing/testbed",
50-
"//src/material/legacy-form-field",
51-
"//src/material/legacy-form-field/testing",
52-
"//src/material/legacy-input",
53-
"//src/material/legacy-input/testing",
50+
"//src/material/form-field",
51+
"//src/material/form-field/testing",
52+
"//src/material/input",
53+
"//src/material/input/testing",
5454
"@npm//@angular/forms",
5555
"@npm//@angular/platform-browser",
5656
"@npm//@angular/platform-browser-dynamic",

‎src/components-examples/material/form-field/form-field-appearance/form-field-appearance-example.html

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
<p>
2-
<mat-form-field appearance="legacy">
3-
<mat-label>Legacy form field</mat-label>
4-
<input matInput placeholder="Placeholder">
5-
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
6-
<mat-hint>Hint</mat-hint>
7-
</mat-form-field>
8-
</p>
9-
<p>
10-
<mat-form-field appearance="standard">
11-
<mat-label>Standard form field</mat-label>
12-
<input matInput placeholder="Placeholder">
13-
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
14-
<mat-hint>Hint</mat-hint>
15-
</mat-form-field>
16-
</p>
171
<p>
182
<mat-form-field appearance="fill">
193
<mat-label>Fill form field</mat-label>

‎src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,7 @@ import {
1919
NgControl,
2020
Validators,
2121
} from '@angular/forms';
22-
import {
23-
MAT_FORM_FIELD,
24-
MatLegacyFormField,
25-
MatLegacyFormFieldControl,
26-
} from '@angular/material/legacy-form-field';
22+
import {MAT_FORM_FIELD, MatFormField, MatFormFieldControl} from '@angular/material/form-field';
2723
import {Subject} from 'rxjs';
2824

2925
/** @title Form field with custom telephone number input control. */
@@ -47,15 +43,13 @@ export class MyTel {
4743
selector: 'example-tel-input',
4844
templateUrl: 'example-tel-input-example.html',
4945
styleUrls: ['example-tel-input-example.css'],
50-
providers: [{provide: MatLegacyFormFieldControl, useExisting: MyTelInput}],
46+
providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}],
5147
host: {
5248
'[class.example-floating]': 'shouldLabelFloat',
5349
'[id]': 'id',
5450
},
5551
})
56-
export class MyTelInput
57-
implements ControlValueAccessor, MatLegacyFormFieldControl<MyTel>, OnDestroy
58-
{
52+
export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
5953
static nextId = 0;
6054
@ViewChild('area') areaInput: HTMLInputElement;
6155
@ViewChild('exchange') exchangeInput: HTMLInputElement;
@@ -143,7 +137,7 @@ export class MyTelInput
143137
private _formBuilder: FormBuilder,
144138
private _focusMonitor: FocusMonitor,
145139
private _elementRef: ElementRef<HTMLElement>,
146-
@Optional() @Inject(MAT_FORM_FIELD) public _formField: MatLegacyFormField,
140+
@Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,
147141
@Optional() @Self() public ngControl: NgControl,
148142
) {
149143
if (this.ngControl != null) {

‎src/components-examples/material/form-field/form-field-error/form-field-error-example.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.example-container .mat-form-field + .mat-form-field {
1+
.example-container mat-form-field + mat-form-field {
22
margin-left: 8px;
33
}

‎src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
11
import {ComponentFixture, TestBed} from '@angular/core/testing';
22
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
3-
import {MatLegacyFormFieldHarness} from '@angular/material/legacy-form-field/testing';
3+
import {MatFormFieldHarness} from '@angular/material/form-field/testing';
44
import {HarnessLoader} from '@angular/cdk/testing';
5-
import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
5+
import {MatFormFieldModule} from '@angular/material/form-field';
66
import {FormFieldHarnessExample} from './form-field-harness-example';
7-
import {MatLegacyInputModule} from '@angular/material/legacy-input';
7+
import {MatInputModule} from '@angular/material/input';
88
import {ReactiveFormsModule} from '@angular/forms';
99
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
10-
import {MatLegacyInputHarness} from '@angular/material/legacy-input/testing';
10+
import {MatInputHarness} from '@angular/material/input/testing';
1111

1212
describe('FormFieldHarnessExample', () => {
1313
let fixture: ComponentFixture<FormFieldHarnessExample>;
1414
let loader: HarnessLoader;
1515

1616
beforeEach(async () => {
1717
await TestBed.configureTestingModule({
18-
imports: [
19-
MatLegacyFormFieldModule,
20-
MatLegacyInputModule,
21-
ReactiveFormsModule,
22-
NoopAnimationsModule,
23-
],
18+
imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, NoopAnimationsModule],
2419
declarations: [FormFieldHarnessExample],
2520
}).compileComponents();
2621
fixture = TestBed.createComponent(FormFieldHarnessExample);
@@ -29,28 +24,28 @@ describe('FormFieldHarnessExample', () => {
2924
});
3025

3126
it('should be able to load harnesses', async () => {
32-
const formFields = await loader.getAllHarnesses(MatLegacyFormFieldHarness);
27+
const formFields = await loader.getAllHarnesses(MatFormFieldHarness);
3328
expect(formFields.length).toBe(1);
3429
});
3530

3631
it('should be able to get control of form-field', async () => {
37-
const formField = await loader.getHarness(MatLegacyFormFieldHarness);
38-
expect((await formField.getControl()) instanceof MatLegacyInputHarness).toBe(true);
32+
const formField = await loader.getHarness(MatFormFieldHarness);
33+
expect((await formField.getControl()) instanceof MatInputHarness).toBe(true);
3934
});
4035

4136
it('should be able to get error messages and hints of form-field', async () => {
42-
const formField = await loader.getHarness(MatLegacyFormFieldHarness);
37+
const formField = await loader.getHarness(MatFormFieldHarness);
4338
expect(await formField.getTextErrors()).toEqual([]);
4439
expect(await formField.getTextHints()).toEqual(['Hint']);
4540

4641
fixture.componentInstance.requiredControl.setValue('');
47-
await ((await formField.getControl()) as MatLegacyInputHarness)?.blur();
42+
await ((await formField.getControl()) as MatInputHarness)?.blur();
4843
expect(await formField.getTextErrors()).toEqual(['Error']);
4944
expect(await formField.getTextHints()).toEqual([]);
5045
});
5146

5247
it('should be able to check if form field is invalid', async () => {
53-
const formField = await loader.getHarness(MatLegacyFormFieldHarness);
48+
const formField = await loader.getHarness(MatFormFieldHarness);
5449
expect(await formField.isControlValid()).toBe(true);
5550

5651
fixture.componentInstance.requiredControl.setValue('');

‎src/components-examples/material/form-field/form-field-hint/form-field-hint-example.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.example-container .mat-form-field + .mat-form-field {
1+
.example-container mat-form-field + mat-form-field {
22
margin-left: 8px;
33
}

‎src/components-examples/material/form-field/form-field-label/form-field-label-example.css

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
.example-container .mat-form-field + .mat-form-field {
1+
.example-container mat-form-field + mat-form-field {
22
margin-left: 8px;
33
}
44

5-
.example-container .mat-form-field {
5+
.example-container mat-form-field {
66
width: 220px;
77
}
88

@@ -11,9 +11,14 @@
1111
}
1212

1313
.example-container form > * {
14-
margin: 5px 0;
14+
margin: 12px 0;
1515
}
1616

1717
.example-container .mat-radio-button {
1818
margin: 0 12px;
1919
}
20+
21+
.example-form-fields {
22+
display: flex;
23+
align-items: flex-start;
24+
}

‎src/components-examples/material/form-field/form-field-label/form-field-label-example.html

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,27 @@
99
</mat-radio-group>
1010
</div>
1111

12-
<mat-form-field appearance="fill"
13-
[hideRequiredMarker]="hideRequiredControl.value"
14-
[floatLabel]="getFloatLabelValue()">
15-
<input matInput placeholder="Simple placeholder" required>
16-
</mat-form-field>
12+
<div class="example-form-fields">
13+
<mat-form-field appearance="fill"
14+
[hideRequiredMarker]="hideRequiredControl.value"
15+
[floatLabel]="getFloatLabelValue()">
16+
<input matInput placeholder="Simple placeholder" required>
17+
</mat-form-field>
1718

18-
<mat-form-field appearance="fill" [floatLabel]="getFloatLabelValue()">
19-
<mat-label>Both a label and a placeholder</mat-label>
20-
<input matInput placeholder="Simple placeholder">
21-
</mat-form-field>
19+
<mat-form-field appearance="fill" [floatLabel]="getFloatLabelValue()">
20+
<mat-label>Both a label and a placeholder</mat-label>
21+
<input matInput placeholder="Simple placeholder">
22+
</mat-form-field>
2223

23-
<mat-form-field appearance="fill"
24-
[hideRequiredMarker]="hideRequiredControl.value"
25-
[floatLabel]="getFloatLabelValue()">
26-
<mat-select required>
27-
<mat-option>-- None --</mat-option>
28-
<mat-option value="option">Option</mat-option>
29-
</mat-select>
30-
<mat-label><mat-icon>favorite</mat-icon> <b> Fancy</b> <i> label</i></mat-label>
31-
</mat-form-field>
24+
<mat-form-field appearance="fill"
25+
[hideRequiredMarker]="hideRequiredControl.value"
26+
[floatLabel]="getFloatLabelValue()">
27+
<mat-select required>
28+
<mat-option>-- None --</mat-option>
29+
<mat-option value="option">Option</mat-option>
30+
</mat-select>
31+
<mat-label><mat-icon>favorite</mat-icon> <b> Fancy</b> <i> label</i></mat-label>
32+
</mat-form-field>
33+
</div>
3234
</form>
3335
</div>

‎src/components-examples/material/form-field/form-field-label/form-field-label-example.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Component} from '@angular/core';
22
import {FormBuilder, FormControl} from '@angular/forms';
3-
import {FloatLabelType} from '@angular/material/legacy-form-field';
3+
import {FloatLabelType} from '@angular/material/form-field';
44

55
/** @title Form field with label */
66
@Component({

‎src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.example-container .mat-form-field + .mat-form-field {
1+
.example-container mat-form-field + mat-form-field {
22
margin-left: 8px;
33
}
44

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<mat-form-field appearance="fill" floatLabel="always">
1111
<mat-label>Amount</mat-label>
1212
<input matInput type="number" class="example-right-align" placeholder="0">
13-
<span matPrefix>$&nbsp;</span>
14-
<span matSuffix>.00</span>
13+
<span matTextPrefix>$&nbsp;</span>
14+
<span matTextSuffix>.00</span>
1515
</mat-form-field>
1616
</div>

‎src/components-examples/material/form-field/form-field-theming/form-field-theming-example.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.example-container .mat-form-field + .mat-form-field {
1+
.example-container mat-form-field + mat-form-field {
22
margin-left: 8px;
33
}

‎src/components-examples/material/form-field/form-field-theming/form-field-theming-example.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
2-
<mat-form-field appearance="fill" [color]="colorControl.value">
2+
<mat-form-field appearance="fill" [color]="options.value.color">
33
<mat-label>Color</mat-label>
4-
<mat-select [formControl]="colorControl">
4+
<mat-select formControlName="color">
55
<mat-option value="primary">Primary</mat-option>
66
<mat-option value="accent">Accent</mat-option>
77
<mat-option value="warn">Warn</mat-option>
88
</mat-select>
99
</mat-form-field>
1010

11-
<mat-form-field appearance="fill" [color]="colorControl.value">
11+
<mat-form-field appearance="fill" [color]="options.value.color">
1212
<mat-label>Font size</mat-label>
13-
<input matInput type="number" placeholder="Ex. 12" [formControl]="fontSizeControl" min="10">
14-
<span matSuffix>px</span>
15-
<mat-error *ngIf="fontSizeControl.invalid">Min size: 10px</mat-error>
13+
<input matInput type="number" placeholder="Ex. 12" formControlName="fontSize" min="10">
14+
<span matTextSuffix>px</span>
15+
<mat-error *ngIf="options.get('fontSize')?.invalid">Min size: 10px</mat-error>
1616
</mat-form-field>
1717
</form>

‎src/components-examples/material/form-field/form-field-theming/form-field-theming-example.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {Component} from '@angular/core';
2-
import {FormBuilder, FormControl, Validators} from '@angular/forms';
2+
import {NonNullableFormBuilder, Validators} from '@angular/forms';
3+
import {ThemePalette} from '@angular/material/core';
34

45
/** @title Form field theming */
56
@Component({
@@ -8,16 +9,14 @@ import {FormBuilder, FormControl, Validators} from '@angular/forms';
89
styleUrls: ['form-field-theming-example.css'],
910
})
1011
export class FormFieldThemingExample {
11-
colorControl = new FormControl('primary');
12-
fontSizeControl = new FormControl(16, Validators.min(10));
1312
options = this._formBuilder.group({
14-
color: this.colorControl,
15-
fontSize: this.fontSizeControl,
13+
color: this._formBuilder.control('primary' as ThemePalette),
14+
fontSize: this._formBuilder.control(16, Validators.min(10)),
1615
});
1716

18-
constructor(private _formBuilder: FormBuilder) {}
17+
constructor(private _formBuilder: NonNullableFormBuilder) {}
1918

2019
getFontSize() {
21-
return Math.max(10, this.fontSizeControl.value || 0);
20+
return Math.max(10, this.options.value.fontSize || 0);
2221
}
2322
}

‎src/components-examples/material/form-field/index.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import {NgModule} from '@angular/core';
33
import {ReactiveFormsModule} from '@angular/forms';
44
import {MatButtonModule} from '@angular/material/button';
55
import {MatCheckboxModule} from '@angular/material/checkbox';
6-
import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
6+
import {MatFormFieldModule} from '@angular/material/form-field';
77
import {MatIconModule} from '@angular/material/icon';
8-
import {MatLegacyInputModule} from '@angular/material/legacy-input';
8+
import {MatInputModule} from '@angular/material/input';
99
import {MatRadioModule} from '@angular/material/radio';
10-
import {MatLegacySelectModule} from '@angular/material/legacy-select';
10+
import {MatSelectModule} from '@angular/material/select';
1111
import {FormFieldAppearanceExample} from './form-field-appearance/form-field-appearance-example';
1212
import {
1313
FormFieldCustomControlExample,
@@ -51,11 +51,11 @@ const EXAMPLES = [
5151
CommonModule,
5252
MatButtonModule,
5353
MatCheckboxModule,
54-
MatLegacyFormFieldModule,
54+
MatFormFieldModule,
5555
MatIconModule,
56-
MatLegacyInputModule,
56+
MatInputModule,
5757
MatRadioModule,
58-
MatLegacySelectModule,
58+
MatSelectModule,
5959
ReactiveFormsModule,
6060
],
6161
declarations: [...EXAMPLES, MyTelInput],

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ ng_module(
1616
"//src/cdk/testing",
1717
"//src/cdk/testing/testbed",
1818
"//src/material/checkbox",
19-
"//src/material/legacy-form-field",
20-
"//src/material/legacy-input",
21-
"//src/material/legacy-select",
22-
"//src/material/legacy-select/testing",
19+
"//src/material/form-field",
20+
"//src/material/input",
21+
"//src/material/select",
22+
"//src/material/select/testing",
2323
"@npm//@angular/forms",
2424
"@npm//@angular/platform-browser",
2525
"@npm//@angular/platform-browser-dynamic",
@@ -43,8 +43,8 @@ ng_test_library(
4343
":select",
4444
"//src/cdk/testing",
4545
"//src/cdk/testing/testbed",
46-
"//src/material/legacy-select",
47-
"//src/material/legacy-select/testing",
46+
"//src/material/select",
47+
"//src/material/select/testing",
4848
"@npm//@angular/platform-browser",
4949
"@npm//@angular/platform-browser-dynamic",
5050
],

0 commit comments

Comments
 (0)