Skip to content

Commit 2de9656

Browse files
mmalerbammalerba
committed
variant --> appearance
1 parent 614f319 commit 2de9656

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;

0 commit comments

Comments
 (0)