Skip to content

Commit bb2dca5

Browse files
committed
alias mat-input-* classes with mat-form-field-* classes
1 parent b607297 commit bb2dca5

File tree

14 files changed

+199
-199
lines changed

14 files changed

+199
-199
lines changed
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.mat-input-container {
1+
.mat-form-field {
22
width: 250px;
33
}

src/demo-app/autocomplete/autocomplete-demo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
margin: 24px;
88
}
99

10-
.mat-input-container {
10+
.mat-form-field {
1111
margin-top: 16px;
1212
}
1313
}

src/demo-app/tabs/tabs-demo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ tabs-demo .mat-card {
4343
margin-top: 8px;
4444
}
4545

46-
.mat-input-container {
46+
.mat-form-field {
4747
width: 100px;
4848
}
4949

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -517,7 +517,7 @@ describe('MdAutocomplete', () => {
517517

518518
it('should disable input in view when disabled programmatically', () => {
519519
const inputUnderline =
520-
fixture.debugElement.query(By.css('.mat-input-underline')).nativeElement;
520+
fixture.debugElement.query(By.css('.mat-form-field-underline')).nativeElement;
521521

522522
expect(input.disabled)
523523
.toBe(false, `Expected input to start out enabled in view.`);
@@ -1319,10 +1319,10 @@ describe('MdAutocomplete', () => {
13191319
fixture.detectChanges();
13201320

13211321
const input = fixture.nativeElement.querySelector('input');
1322-
const placeholder = fixture.nativeElement.querySelector('.mat-input-placeholder');
1322+
const placeholder = fixture.nativeElement.querySelector('.mat-form-field-placeholder');
13231323

13241324
expect(input.value).toBe('California');
1325-
expect(placeholder.classList).not.toContain('mat-empty');
1325+
expect(placeholder.classList).not.toContain('mat-form-field-empty');
13261326
}));
13271327

13281328
});

src/lib/chips/chips.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ $mat-chips-chip-margin: 8px;
3232
}
3333
}
3434

35-
.mat-input-prefix & {
35+
.mat-form-field-prefix & {
3636
&:last-child {
3737
margin-right: $mat-chips-chip-margin;
3838
}
@@ -76,7 +76,7 @@ $mat-chips-chip-margin: 8px;
7676
}
7777
}
7878

79-
.mat-input-prefix .mat-chip-list-wrapper {
79+
.mat-form-field-prefix .mat-chip-list-wrapper {
8080
margin-bottom: $mat-chips-chip-margin;
8181
}
8282

src/lib/core/compatibility/compatibility.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export const MAT_ELEMENTS_SELECTOR = `
7575
mat-hint,
7676
mat-icon,
7777
mat-input-container,
78+
mat-form-field,
7879
mat-list,
7980
mat-list-item,
8081
mat-menu,
@@ -151,6 +152,7 @@ export const MD_ELEMENTS_SELECTOR = `
151152
md-hint,
152153
md-icon,
153154
md-input-container,
155+
md-form-field,
154156
md-list,
155157
md-list-item,
156158
md-menu,

src/lib/datepicker/datepicker.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,7 @@ describe('MdDatepicker', () => {
596596

597597
it('should attach popup to input-container underline', () => {
598598
let attachToRef = testComponent.datepickerInput.getPopupConnectionElementRef();
599-
expect(attachToRef.nativeElement.classList.contains('mat-input-underline'))
599+
expect(attachToRef.nativeElement.classList.contains('mat-form-field-underline'))
600600
.toBe(true, 'popup should be attached to input-container underline');
601601
});
602602
});

src/lib/input/_input-theme.scss

Lines changed: 60 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -13,96 +13,94 @@
1313
$is-dark-theme: map-get($theme, is-dark);
1414

1515
// Placeholder colors. Required is used for the `*` star shown in the placeholder.
16-
$input-placeholder-color: mat-color($foreground, secondary-text);
17-
$input-floating-placeholder-color: mat-color($primary);
18-
$input-required-placeholder-color: mat-color($accent);
16+
$form-field-placeholder-color: mat-color($foreground, secondary-text);
17+
$form-field-floating-placeholder-color: mat-color($primary);
18+
$form-field-required-placeholder-color: mat-color($accent);
1919

2020
// Underline colors.
21-
$input-underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
22-
$input-underline-color-accent: mat-color($accent);
23-
$input-underline-color-warn: mat-color($warn);
24-
$input-underline-focused-color: mat-color($primary);
21+
$form-field-underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
22+
$form-field-underline-color-accent: mat-color($accent);
23+
$form-field-underline-color-warn: mat-color($warn);
24+
$form-field-underline-focused-color: mat-color($primary);
2525

26-
.mat-input-placeholder {
27-
color: $input-placeholder-color;
26+
.mat-form-field-placeholder {
27+
color: $form-field-placeholder-color;
2828
}
2929

3030
.mat-hint {
3131
color: mat-color($foreground, secondary-text);
3232
}
3333

34-
// :focus is applied to the input, but we apply mat-focused to the other elements
35-
// that need to listen to it.
36-
.mat-focused .mat-input-placeholder {
37-
color: $input-floating-placeholder-color;
34+
.mat-focused .mat-form-field-placeholder {
35+
color: $form-field-floating-placeholder-color;
3836

3937
&.mat-accent {
40-
color: $input-underline-color-accent;
38+
color: $form-field-underline-color-accent;
4139
}
4240

4341
&.mat-warn {
44-
color: $input-underline-color-warn;
42+
color: $form-field-underline-color-warn;
4543
}
4644
}
4745

4846
.mat-input-element:disabled {
4947
color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.42));
5048
}
5149

52-
// See _mat-input-placeholder-floating mixin in input-container.scss
53-
input.mat-input-element:-webkit-autofill + .mat-input-placeholder,
54-
.mat-focused .mat-input-placeholder.mat-float {
55-
.mat-placeholder-required {
56-
color: $input-required-placeholder-color;
50+
// See _mat-form-field-placeholder-floating mixin in form-field.scss
51+
input.mat-input-element:-webkit-autofill + .mat-form-field-placeholder,
52+
.mat-focused .mat-form-field-placeholder.mat-form-field-float {
53+
.mat-form-field-required-marker {
54+
color: $form-field-required-placeholder-color;
5755
}
5856
}
5957

60-
.mat-input-underline {
61-
background-color: $input-underline-color;
58+
.mat-form-field-underline {
59+
background-color: $form-field-underline-color;
6260

6361
&.mat-disabled {
64-
@include mat-control-disabled-underline($input-underline-color);
62+
@include mat-control-disabled-underline($form-field-underline-color);
6563
}
6664
}
6765

68-
.mat-input-ripple {
69-
background-color: $input-underline-focused-color;
66+
.mat-form-field-ripple {
67+
background-color: $form-field-underline-focused-color;
7068

7169
&.mat-accent {
72-
background-color: $input-underline-color-accent;
70+
background-color: $form-field-underline-color-accent;
7371
}
7472

7573
&.mat-warn {
76-
background-color: $input-underline-color-warn;
74+
background-color: $form-field-underline-color-warn;
7775
}
7876
}
7977

80-
// Styling for the error state of the input container. Note that while the same can be
78+
// Styling for the error state of the form field. Note that while the same can be
8179
// achieved with the ng-* classes, we use this approach in order to ensure that the same
8280
// logic is used to style the error state and to show the error messages.
83-
.mat-input-invalid {
84-
.mat-input-placeholder {
85-
color: $input-underline-color-warn;
81+
.mat-form-field-invalid {
82+
.mat-form-field-placeholder {
83+
color: $form-field-underline-color-warn;
8684

8785
&.mat-accent,
88-
&.mat-float .mat-placeholder-required {
89-
color: $input-underline-color-warn;
86+
&.mat-form-field-float .mat-form-field-required-marker {
87+
color: $form-field-underline-color-warn;
9088
}
9189
}
9290

93-
.mat-input-ripple {
94-
background-color: $input-underline-color-warn;
91+
.mat-form-field-ripple {
92+
background-color: $form-field-underline-color-warn;
9593
}
9694
}
9795

98-
.mat-input-error {
99-
color: $input-underline-color-warn;
96+
.mat-error {
97+
color: $form-field-underline-color-warn;
10098
}
10199
}
102100

103-
// Applies a floating placeholder above the input itself.
104-
@mixin _mat-input-placeholder-floating($font-scale, $infix-padding, $infix-margin-top) {
105-
// We use perspecitve to fix the text blurriness as described here:
101+
// Applies a floating placeholder above the form field control itself.
102+
@mixin _mat-form-field-placeholder-floating($font-scale, $infix-padding, $infix-margin-top) {
103+
// We use perspective to fix the text blurriness as described here:
106104
// http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
107105
// This results in a small jitter after the label floats on Firefox, which the
108106
// translateZ fixes.
@@ -132,36 +130,36 @@
132130
// The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
133131
// of the text itself, not the edge of the line; therefore we subtract off the line spacing.
134132
$infix-padding: 0.5em - $line-spacing;
135-
// The margin applied to the input-infix to reserve space for the floating label.
133+
// The margin applied to the form-field-infix to reserve space for the floating label.
136134
$infix-margin-top: 1em * $line-height * $subscript-font-scale;
137135
// Font size to use for the label and subscript text.
138136
$subscript-font-size: $subscript-font-scale * 100%;
139137
// Font size to use for the for the prefix and suffix icons.
140138
$prefix-suffix-icon-font-size: $prefix-suffix-icon-font-scale * 100%;
141-
// The space between the bottom of the input table and the subscript container. Mocks show half of
142-
// the text size, but this margin is applied to an element with the subscript text font size, so
143-
// we need to divide by the scale factor to make it half of the original text size. We again need
144-
// to subtract off the line spacing since the mocks measure to the edge of the text, not the edge
145-
// of the line.
139+
// The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
140+
// Mocks show half of the text size, but this margin is applied to an element with the subscript
141+
// text font size, so we need to divide by the scale factor to make it half of the original text
142+
// size. We again need to subtract off the line spacing since the mocks measure to the edge of the
143+
// text, not the edge of the line.
146144
$subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2);
147-
// The padding applied to the input-wrapper to reserve space for the subscript, since it's
145+
// The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
148146
// absolutely positioned. This is a combination of the subscript's margin and line-height, but we
149147
// need to multiply by the subscript font scale factor since the wrapper has a larger font size.
150148
$wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
151149

152-
.mat-input-container {
150+
.mat-form-field {
153151
font-family: mat-font-family($config);
154152
font-size: inherit;
155153
font-weight: mat-font-weight($config, input);
156154
line-height: mat-line-height($config, input);
157155
}
158156

159-
.mat-input-wrapper {
157+
.mat-form-field-wrapper {
160158
padding-bottom: $wrapper-padding-bottom;
161159
}
162160

163-
.mat-input-prefix,
164-
.mat-input-suffix {
161+
.mat-form-field-prefix,
162+
.mat-form-field-suffix {
165163
// Allow icons in a prefix or suffix to adapt to the correct size.
166164
.mat-icon {
167165
font-size: $prefix-suffix-icon-font-size;
@@ -180,15 +178,15 @@
180178
}
181179
}
182180

183-
.mat-input-infix {
181+
.mat-form-field-infix {
184182
padding: $infix-padding 0;
185183
// Throws off the baseline if we do it as a real margin, so we do it as a border instead.
186184
border-top: $infix-margin-top solid transparent;
187185
}
188186

189187
.mat-input-element {
190-
&:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float {
191-
@include _mat-input-placeholder-floating($subscript-font-scale,
188+
&:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float {
189+
@include _mat-form-field-placeholder-floating($subscript-font-scale,
192190
$infix-padding, $infix-margin-top);
193191
}
194192
}
@@ -199,28 +197,29 @@
199197
margin-top: -$line-spacing * 1em;
200198
}
201199

202-
.mat-input-placeholder-wrapper {
200+
.mat-form-field-placeholder-wrapper {
203201
top: -$infix-margin-top;
204202
padding-top: $infix-margin-top;
205203
}
206204

207-
.mat-input-placeholder {
205+
.mat-form-field-placeholder {
208206
top: $infix-margin-top + $infix-padding;
209207

210-
// Show the placeholder above the input when it's not empty, or focused.
211-
&.mat-float:not(.mat-empty), .mat-focused &.mat-float {
212-
@include _mat-input-placeholder-floating($subscript-font-scale,
208+
// Show the placeholder above the control when it's not empty, or focused.
209+
&.mat-form-field-float:not(.mat-form-field-empty),
210+
.mat-focused &.mat-form-field-float {
211+
@include _mat-form-field-placeholder-floating($subscript-font-scale,
213212
$infix-padding, $infix-margin-top);
214213
}
215214
}
216215

217-
.mat-input-underline {
216+
.mat-form-field-underline {
218217
// We want the underline to start at the end of the content box, not the padding box,
219218
// so we move it up by the padding amount.
220219
bottom: $wrapper-padding-bottom;
221220
}
222221

223-
.mat-input-subscript-wrapper {
222+
.mat-form-field-subscript-wrapper {
224223
font-size: $subscript-font-size;
225224
margin-top: $subscript-margin-top;
226225

src/lib/input/input-container.html

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,56 @@
1-
<div class="mat-input-wrapper">
2-
<div class="mat-input-flex" #connectionContainer>
3-
<div class="mat-input-prefix" *ngIf="_prefixChildren.length">
1+
<div class="mat-input-wrapper mat-form-field-wrapper">
2+
<div class="mat-input-flex mat-form-field-flex" #connectionContainer>
3+
<div class="mat-input-prefix mat-form-field-prefix" *ngIf="_prefixChildren.length">
44
<ng-content select="[mdPrefix], [matPrefix]"></ng-content>
55
</div>
66

7-
<div class="mat-input-infix">
7+
<div class="mat-input-infix mat-form-field-infix">
88
<ng-content></ng-content>
99

10-
<span class="mat-input-placeholder-wrapper">
11-
<label class="mat-input-placeholder"
10+
<span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper">
11+
<label class="mat-input-placeholder mat-form-field-placeholder"
1212
[attr.for]="_control.getId()"
1313
[class.mat-empty]="_control.isEmpty() && !_shouldAlwaysFloat"
14+
[class.mat-form-field-empty]="_control.isEmpty() && !_shouldAlwaysFloat"
1415
[class.mat-float]="_canPlaceholderFloat"
16+
[class.mat-form-field-float]="_canPlaceholderFloat"
1517
[class.mat-accent]="color == 'accent'"
1618
[class.mat-warn]="color == 'warn'"
1719
*ngIf="_hasPlaceholder()">
1820
<ng-content select="md-placeholder, mat-placeholder"></ng-content>
1921
{{_control.getPlaceholder()}}
2022
<span
21-
class="mat-placeholder-required"
23+
class="mat-placeholder-required mat-form-field-required-marker"
2224
aria-hidden="true"
2325
*ngIf="!hideRequiredMarker && _control.isRequired()">*</span>
2426
</label>
2527
</span>
2628
</div>
2729

28-
<div class="mat-input-suffix" *ngIf="_suffixChildren.length">
30+
<div class="mat-input-suffix mat-form-field-suffix" *ngIf="_suffixChildren.length">
2931
<ng-content select="[mdSuffix], [matSuffix]"></ng-content>
3032
</div>
3133
</div>
3234

33-
<div class="mat-input-underline" #underline
35+
<div class="mat-input-underline mat-form-field-underline" #underline
3436
[class.mat-disabled]="_control.isDisabled()">
35-
<span class="mat-input-ripple"
37+
<span class="mat-input-ripple mat-form-field-ripple"
3638
[class.mat-accent]="color == 'accent'"
3739
[class.mat-warn]="color == 'warn'"></span>
3840
</div>
3941

40-
<div class="mat-input-subscript-wrapper" [ngSwitch]="_getDisplayedMessages()">
42+
<div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"
43+
[ngSwitch]="_getDisplayedMessages()">
4144
<div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">
4245
<ng-content select="md-error, mat-error"></ng-content>
4346
</div>
4447

45-
<div class="mat-input-hint-wrapper" *ngSwitchCase="'hint'"
48+
<div class="mat-input-hint-wrapper mat-form-field-hint-wrapper" *ngSwitchCase="'hint'"
4649
[@transitionMessages]="_subscriptAnimationState">
50+
<!-- TODO(mmalerba): use an actual <mat-hint> once all selectors are switched to mat-* -->
4751
<div *ngIf="hintLabel" [id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
4852
<ng-content select="md-hint:not([align='end']), mat-hint:not([align='end'])"></ng-content>
49-
<div class="mat-input-hint-spacer"></div>
53+
<div class="mat-input-hint-spacer mat-form-field-hint-spacer"></div>
5054
<ng-content select="md-hint[align='end'], mat-hint[align='end']"></ng-content>
5155
</div>
5256
</div>

0 commit comments

Comments
 (0)