Skip to content

Commit 66cc16e

Browse files
mmalerbammalerba
committed
variant --> appearance
1 parent a9013a5 commit 66cc16e

12 files changed

+57
-57
lines changed

‎src/demo-app/input/input-demo.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -528,44 +528,44 @@ <h3>&lt;textarea&gt; with ngModel</h3>
528528
</mat-card>
529529

530530
<mat-card class="demo-card demo-basic">
531-
<mat-toolbar color="primary">Variants</mat-toolbar>
531+
<mat-toolbar color="primary">Appearance</mat-toolbar>
532532
<mat-card-content>
533-
<mat-form-field variant="legacy">
534-
<input matInput placeholder="example" [(ngModel)]="legacyVariant" required>
533+
<mat-form-field appearance="legacy">
534+
<input matInput placeholder="example" [(ngModel)]="legacyAppearance" required>
535535
<mat-error>This field is required</mat-error>
536536
<mat-hint>Please type something here</mat-hint>
537537
</mat-form-field>
538538

539-
<mat-form-field variant="standard">
540-
<input matInput placeholder="example" [(ngModel)]="standardVariant" required>
539+
<mat-form-field appearance="standard">
540+
<input matInput placeholder="example" [(ngModel)]="standardAppearance" required>
541541
<mat-error>This field is required</mat-error>
542542
<mat-hint>Please type something here</mat-hint>
543543
</mat-form-field>
544544

545-
<mat-form-field variant="box">
546-
<input matInput placeholder="example" [(ngModel)]="boxVariant" required>
545+
<mat-form-field appearance="box">
546+
<input matInput placeholder="example" [(ngModel)]="boxAppearance" required>
547547
<mat-error>This field is required</mat-error>
548548
<mat-hint>Please type something here</mat-hint>
549549
</mat-form-field>
550550

551551
<table style="width: 100%" cellspacing="0"><tr>
552552
<td>
553-
<mat-form-field variant="legacy" style="width: 100%">
554-
<input matInput placeholder="example" [(ngModel)]="legacyVariant" required>
553+
<mat-form-field appearance="legacy" style="width: 100%">
554+
<input matInput placeholder="example" [(ngModel)]="legacyAppearance" required>
555555
<mat-error>This field is required</mat-error>
556556
<mat-hint>Please type something here</mat-hint>
557557
</mat-form-field>
558558
</td>
559559
<td>
560-
<mat-form-field variant="standard" style="width: 100%">
561-
<input matInput placeholder="example" [(ngModel)]="standardVariant" required>
560+
<mat-form-field appearance="standard" style="width: 100%">
561+
<input matInput placeholder="example" [(ngModel)]="standardAppearance" required>
562562
<mat-error>This field is required</mat-error>
563563
<mat-hint>Please type something here</mat-hint>
564564
</mat-form-field>
565565
</td>
566566
<td>
567-
<mat-form-field variant="box" style="width: 100%">
568-
<input matInput placeholder="example" [(ngModel)]="boxVariant" required>
567+
<mat-form-field appearance="box" style="width: 100%">
568+
<input matInput placeholder="example" [(ngModel)]="boxAppearance" required>
569569
<mat-error>This field is required</mat-error>
570570
<mat-hint>Please type something here</mat-hint>
571571
</mat-form-field>

‎src/demo-app/input/input-demo.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ export class InputDemo {
5252
delayedFormControl = new FormControl('');
5353
model = 'hello';
5454

55-
legacyVariant: string;
56-
standardVariant: string;
57-
boxVariant: string;
55+
legacyAppearance: string;
56+
standardAppearance: string;
57+
boxAppearance: string;
5858

5959
constructor() {
6060
setTimeout(() => this.delayedFormControl.setValue('hello'), 100);

‎src/lib/form-field/_form-field-box-theme.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@import '../core/typography/typography-utils';
55

66

7-
// Theme styles that only apply to the box variant of the form-field.
7+
// Theme styles that only apply to the box appearance of the form-field.
88

99
@mixin mat-form-field-box-theme($theme) {
1010
$foreground: map-get($theme, foreground);
@@ -14,7 +14,7 @@
1414
$box-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.03));
1515
$underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
1616

17-
.mat-form-field-variant-box {
17+
.mat-form-field-appearance-box {
1818
.mat-form-field-flex {
1919
background-color: $box-background;
2020
}
@@ -57,26 +57,26 @@ $mat-form-field-box-dedupe: 0;
5757
$infix-padding: 0.5em;
5858
// The margin applied to the form-field-infix to reserve space for the floating label.
5959
$infix-margin-top: 1em * $line-height * $subscript-font-scale;
60-
// The amount we offset the label in the box variant.
61-
$box-variant-label-offset: -0.5em * $line-height;
60+
// The amount we offset the label in the box appearance.
61+
$box-appearance-label-offset: -0.5em * $line-height;
6262

63-
.mat-form-field-variant-box {
63+
.mat-form-field-appearance-box {
6464
.mat-form-field-label {
65-
margin-top: $box-variant-label-offset;
65+
margin-top: $box-appearance-label-offset;
6666
}
6767

6868
&.mat-form-field-can-float {
6969
&.mat-form-field-should-float .mat-form-field-label,
7070
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
7171
@include _mat-form-field-label-floating(
72-
$subscript-font-scale, $infix-padding + $box-variant-label-offset,
72+
$subscript-font-scale, $infix-padding + $box-appearance-label-offset,
7373
$infix-margin-top);
7474
}
7575

7676
.mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
7777
.mat-form-field-label {
7878
@include _mat-form-field-label-floating(
79-
$subscript-font-scale, $infix-padding + $box-variant-label-offset,
79+
$subscript-font-scale, $infix-padding + $box-appearance-label-offset,
8080
$infix-margin-top);
8181
}
8282

@@ -85,7 +85,7 @@ $mat-form-field-box-dedupe: 0;
8585
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
8686
.mat-form-field-label {
8787
@include _mat-form-field-label-floating(
88-
$subscript-font-scale, $infix-padding + $box-variant-label-offset,
88+
$subscript-font-scale, $infix-padding + $box-appearance-label-offset,
8989
$infix-margin-top);
9090
}
9191
}

‎src/lib/form-field/_form-field-legacy-theme.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
@import '../core/typography/typography-utils';
55

66

7-
// Theme styles that only apply to the legacy variant of the form-field.
7+
// Theme styles that only apply to the legacy appearance of the form-field.
88

99
@mixin mat-form-field-legacy-theme($theme) {
1010
$foreground: map-get($theme, foreground);
1111
$is-dark-theme: map-get($theme, is-dark);
1212

1313
$underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
1414

15-
.mat-form-field-variant-legacy {
15+
.mat-form-field-appearance-legacy {
1616
.mat-form-field-underline {
1717
background-color: $underline-color;
1818
}
@@ -71,7 +71,7 @@ $mat-form-field-legacy-dedupe: 0;
7171
// need to multiply by the subscript font scale factor since the wrapper has a larger font size.
7272
$wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
7373

74-
.mat-form-field-variant-legacy {
74+
.mat-form-field-appearance-legacy {
7575
.mat-form-field-wrapper {
7676
padding-bottom: $wrapper-padding-bottom;
7777
}

‎src/lib/form-field/_form-field-standard-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
@import '../core/typography/typography-utils';
55

66

7-
// Theme styles that only apply to the standard variant of the form-field.
7+
// Theme styles that only apply to the standard appearance of the form-field.
88

99
@mixin mat-form-field-standard-theme($theme) {
1010
$foreground: map-get($theme, foreground);
1111
$is-dark-theme: map-get($theme, is-dark);
1212

1313
$underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
1414

15-
.mat-form-field-variant-standard {
15+
.mat-form-field-appearance-standard {
1616
.mat-form-field-underline {
1717
background-color: $underline-color;
1818
}

‎src/lib/form-field/_form-field-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@import 'form-field-standard-theme.scss';
88

99

10-
// Theme styles that apply to all variants of the form-field.
10+
// Theme styles that apply to all appearances of the form-field.
1111

1212
@mixin mat-form-field-theme($theme) {
1313
$primary: map-get($theme, primary);

‎src/lib/form-field/form-field-box.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import '../core/style/vendor-prefixes';
33

44

5-
// Styles that only apply to the box variant of the form-field.
5+
// Styles that only apply to the box appearance of the form-field.
66

77
// The border radius for the form field box.
88
$mat-form-field-box-border-radius: 4px !default;
@@ -14,13 +14,13 @@ $mat-form-field-box-side-padding: 1em !default;
1414
// between the floating label and the value.
1515
$mat-form-field-box-line-spacing: 0.5em !default;
1616
// The scale of the subscript and floating label text w.r.t the value text.
17-
$mat-form-field-box-subscript-font-scale: .75 !default;
17+
$mat-form-field-box-subscript-font-scale: 0.75 !default;
1818
// The horizontal padding between the edge of the subscript box and the start of the subscript text.
1919
$mat-form-field-box-subscript-padding:
2020
$mat-form-field-box-side-padding / $mat-form-field-box-subscript-font-scale;
2121

2222

23-
.mat-form-field-variant-box {
23+
.mat-form-field-appearance-box {
2424
.mat-form-field-flex {
2525
border-radius: $mat-form-field-box-border-radius;
2626
padding: $mat-form-field-box-line-spacing $mat-form-field-box-side-padding 0

‎src/lib/form-field/form-field-legacy.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
@import '../core/style/vendor-prefixes';
33

44

5-
// Styles that only apply to the legacy variant of the form-field.
5+
// Styles that only apply to the legacy appearance of the form-field.
66

77
// The height of the underline.
88
$mat-form-field-legacy-underline-height: 1px !default;
99

1010

11-
.mat-form-field-variant-legacy {
11+
.mat-form-field-appearance-legacy {
1212
.mat-form-field-label {
1313
transform: perspective(100px);
1414
-ms-transform: none;

‎src/lib/form-field/form-field-standard.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
@import '../core/style/vendor-prefixes';
33

44

5-
// Styles that only apply to the standard variant of the form-field.
5+
// Styles that only apply to the standard appearance of the form-field.
66

77
// The height of the underline.
88
$mat-form-field-standard-underline-height: 1px !default;
9-
// The bottom margin of the underline (used to push it up to align with box variant underline).
9+
// The bottom margin of the underline (used to push it up to align with box appearance underline).
1010
$mat-form-field-standard-underline-margin-bottom: 1px !default;
1111
// The padding between the top of the form field and the label text (used to align the standard
12-
// form field with the box variant).
13-
$mat-form-field-standard-padding-top: .5em !default;
12+
// form field with the box appearance).
13+
$mat-form-field-standard-padding-top: 0.5em !default;
1414

1515

16-
.mat-form-field-variant-standard {
16+
.mat-form-field-appearance-standard {
1717
.mat-form-field-flex {
1818
padding-top: $mat-form-field-standard-padding-top;
1919
}

‎src/lib/form-field/form-field.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import '../core/style/vendor-prefixes';
33

44

5-
// Styles that apply to all variants of the form-field.
5+
// Styles that apply to all appearances of the form-field.
66

77
// Min amount of space between start and end hint.
88
$mat-form-field-hint-min-space: 1em !default;

‎src/lib/form-field/form-field.ts

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ import {MatSuffix} from './suffix';
4646
let nextUniqueId = 0;
4747

4848

49-
export type MatFormFieldVariant = 'legacy' | 'standard' | 'box';
49+
export type MatFormFieldAppearance = 'legacy' | 'standard' | 'box';
5050

5151

5252
/** Container for form controls that applies Material Design styling and behavior. */
@@ -69,9 +69,9 @@ export type MatFormFieldVariant = 'legacy' | 'standard' | 'box';
6969
animations: [matFormFieldAnimations.transitionMessages],
7070
host: {
7171
'class': 'mat-input-container mat-form-field',
72-
'[class.mat-form-field-variant-standard]': 'variant == "standard"',
73-
'[class.mat-form-field-variant-box]': 'variant == "box"',
74-
'[class.mat-form-field-variant-legacy]': 'variant == "legacy"',
72+
'[class.mat-form-field-appearance-standard]': 'appearance == "standard"',
73+
'[class.mat-form-field-appearance-box]': 'appearance == "box"',
74+
'[class.mat-form-field-appearance-legacy]': 'appearance == "legacy"',
7575
'[class.mat-input-invalid]': '_control.errorState',
7676
'[class.mat-form-field-invalid]': '_control.errorState',
7777
'[class.mat-form-field-can-float]': '_canLabelFloat',
@@ -98,8 +98,8 @@ export type MatFormFieldVariant = 'legacy' | 'standard' | 'box';
9898
export class MatFormField implements AfterViewInit, AfterContentInit, AfterContentChecked {
9999
private _labelOptions: LabelOptions;
100100

101-
/** The form-field style variant. */
102-
@Input() variant: MatFormFieldVariant = 'legacy';
101+
/** The form-field appearance style. */
102+
@Input() appearance: MatFormFieldAppearance = 'legacy';
103103

104104
/** Color of the form field underline, based on the theme. */
105105
@Input() color: 'primary' | 'accent' | 'warn' = 'primary';
@@ -154,14 +154,14 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte
154154
/**
155155
* Whether the label should always float, never float or float as the user types.
156156
*
157-
* Note: only the legacy variant supports the `never` option. `never` was originally added as a
157+
* Note: only the legacy appearance supports the `never` option. `never` was originally added as a
158158
* way to make the floating label emulate the behavior of a standard input placeholder. However
159159
* the form field now supports both floating labels and placeholders. Therefore in the non-legacy
160-
* variants the `never` option has been disabled in favor of just using the placeholder.
160+
* appearances the `never` option has been disabled in favor of just using the placeholder.
161161
*/
162162
@Input()
163163
get floatLabel() {
164-
return this.variant !== 'legacy' && this._floatLabel === 'never' ? 'auto' : this._floatLabel;
164+
return this.appearance !== 'legacy' && this._floatLabel === 'never' ? 'auto' : this._floatLabel;
165165
}
166166
set floatLabel(value: FloatLabelType) {
167167
if (value !== this._floatLabel) {
@@ -256,14 +256,14 @@ export class MatFormField implements AfterViewInit, AfterContentInit, AfterConte
256256
}
257257

258258
_hideControlPlaceholder() {
259-
// In the legacy variant the placeholder is promoted to a label if no label is given.
260-
return this.variant === 'legacy' && !this._hasLabel() ||
259+
// In the legacy appearance the placeholder is promoted to a label if no label is given.
260+
return this.appearance === 'legacy' && !this._hasLabel() ||
261261
this._hasLabel() && !this._shouldLabelFloat();
262262
}
263263

264264
_hasFloatingLabel() {
265-
// In the legacy variant the placeholder is promoted to a label if no label is given.
266-
return this._hasLabel() || this.variant === 'legacy' && this._hasPlaceholder();
265+
// In the legacy appearance the placeholder is promoted to a label if no label is given.
266+
return this._hasLabel() || this.appearance === 'legacy' && this._hasPlaceholder();
267267
}
268268

269269
/** Determines whether to display hints or errors. */

‎src/lib/select/select.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
4646
display: table-cell;
4747
vertical-align: middle;
4848

49-
// When used in a box variant form-field the arrow should be centered in the box.
50-
.mat-form-field-variant-box & {
49+
// When used in a box appearance form-field the arrow should be centered in the box.
50+
.mat-form-field-appearance-box & {
5151
transform: translateY(-50%);
5252
}
5353
}

0 commit comments

Comments
 (0)