Skip to content

Commit a099a6c

Browse files
mmalerbammalerba
committed
fix(form-field): rename box to fill and tweak the styles a bit (#9636)
* make some tweaks to the box appearance * rename 'box' appearance to 'fill'
1 parent 7a70bb7 commit a099a6c

File tree

11 files changed

+125
-116
lines changed

11 files changed

+125
-116
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -581,9 +581,9 @@ <h3>&lt;textarea&gt; with ngModel</h3>
581581
<mat-hint>Please type something here</mat-hint>
582582
</mat-form-field>
583583

584-
<mat-form-field appearance="box">
585-
<mat-label>Box appearance</mat-label>
586-
<input matInput [(ngModel)]="boxAppearance" required>
584+
<mat-form-field appearance="fill">
585+
<mat-label>Fill appearance</mat-label>
586+
<input matInput [(ngModel)]="fillAppearance" required>
587587
<mat-error>This field is required</mat-error>
588588
<mat-hint>Please type something here</mat-hint>
589589
</mat-form-field>
@@ -606,9 +606,9 @@ <h3>&lt;textarea&gt; with ngModel</h3>
606606
</mat-form-field>
607607
</td>
608608
<td>
609-
<mat-form-field appearance="box" style="width: 100%">
610-
<mat-label>Box appearance</mat-label>
611-
<input matInput [(ngModel)]="boxAppearance" required>
609+
<mat-form-field appearance="fill" style="width: 100%">
610+
<mat-label>Fill appearance</mat-label>
611+
<input matInput [(ngModel)]="fillAppearance" required>
612612
<mat-error>This field is required</mat-error>
613613
<mat-hint>Please type something here</mat-hint>
614614
</mat-form-field>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export class InputDemo {
5454

5555
legacyAppearance: string;
5656
standardAppearance: string;
57-
boxAppearance: string;
57+
fillAppearance: string;
5858

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

‎src/lib/form-field/BUILD.bazel‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ ng_module(
99
module_name = "@angular/material/form-field",
1010
assets = [
1111
":form_field_css",
12-
":form_field_box_css",
12+
":form_field_fill_css",
1313
":form_field_legacy_css",
1414
":form_field_standard_css",
1515
"//src/lib/input:input_css"
@@ -29,8 +29,8 @@ sass_binary(
2929
)
3030

3131
sass_binary(
32-
name = "form_field_box_scss",
33-
src = "form-field-box.scss",
32+
name = "form_field_fill_scss",
33+
src = "form-field-fill.scss",
3434
deps = ["//src/lib/core:core_scss_lib"],
3535
)
3636

@@ -56,10 +56,10 @@ genrule(
5656
)
5757

5858
genrule(
59-
name = "form_field_box_css",
60-
srcs = [":form_field_box_scss"],
61-
outs = ["form-field-box.css"],
62-
cmd = "cat $(locations :form_field_box_scss) > $@",
59+
name = "form_field_fill_css",
60+
srcs = [":form_field_fill_scss"],
61+
outs = ["form-field-fill.css"],
62+
cmd = "cat $(locations :form_field_fill_scss) > $@",
6363
)
6464

6565
genrule(

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

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

66

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

9-
@mixin mat-form-field-box-theme($theme) {
9+
@mixin mat-form-field-fill-theme($theme) {
1010
$foreground: map-get($theme, foreground);
1111
$is-dark-theme: map-get($theme, is-dark);
1212

13-
$box-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.06));
14-
$box-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.03));
15-
$underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
13+
$fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));
14+
$fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));
15+
$underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
16+
$label-disabled-color: mat-color($foreground, disabled-text);
1617

17-
.mat-form-field-appearance-box {
18+
.mat-form-field-appearance-fill {
1819
.mat-form-field-flex {
19-
background-color: $box-background;
20+
background-color: $fill-background;
2021
}
2122

2223
&.mat-form-field-disabled .mat-form-field-flex {
23-
background-color: $box-disabled-background;
24+
background-color: $fill-disabled-background;
2425
}
2526

2627
.mat-form-field-underline::before {
2728
background-color: $underline-color;
2829
}
2930

30-
&.mat-form-field-disabled .mat-form-field-underline::before {
31-
background-color: transparent;
31+
&.mat-form-field-disabled {
32+
.mat-form-field-label {
33+
color: $label-disabled-color;
34+
}
35+
36+
.mat-form-field-underline::before {
37+
background-color: transparent;
38+
}
3239
}
3340
}
3441
}
@@ -37,46 +44,55 @@
3744
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
3845
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
3946
// an unknown pseudo-class it will discard the entire rule set.
40-
$mat-form-field-box-dedupe: 0;
47+
$mat-form-field-fill-dedupe: 0;
4148

4249
// Applies a floating label above the form field control itself.
43-
@mixin _mat-form-field-box-label-floating($font-scale, $infix-padding, $infix-margin-top) {
44-
transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-box-dedupe)
50+
@mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {
51+
transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-fill-dedupe)
4552
scale($font-scale);
46-
width: 100% / $font-scale + $mat-form-field-box-dedupe;
53+
width: 100% / $font-scale + $mat-form-field-fill-dedupe;
4754

48-
$mat-form-field-box-dedupe: $mat-form-field-box-dedupe + 0.00001 !global;
55+
$mat-form-field-fill-dedupe: $mat-form-field-fill-dedupe + 0.00001 !global;
4956
}
5057

51-
@mixin mat-form-field-box-typography($config) {
58+
@mixin mat-form-field-fill-typography($config) {
5259
// The unit-less line-height from the font config.
5360
$line-height: mat-line-height($config, input);
5461
// The amount to scale the font for the floating label and subscript.
5562
$subscript-font-scale: 0.75;
5663
// The padding on the infix. Mocks show half of the text size.
57-
$infix-padding: 0.5em;
64+
$infix-padding-top: 0.25em;
65+
$infix-padding-bottom: 0.75em;
5866
// The margin applied to the form-field-infix to reserve space for the floating label.
5967
$infix-margin-top: 1em * $line-height * $subscript-font-scale;
60-
// The amount we offset the label in the box appearance.
61-
$box-appearance-label-offset: -0.5em * $line-height;
68+
// The amount we offset the label in the fill appearance.
69+
$fill-appearance-label-offset: -0.5em * $line-height;
70+
71+
.mat-form-field-appearance-fill {
72+
.mat-form-field-infix {
73+
padding: $infix-padding-top 0 $infix-padding-bottom 0;
74+
}
75+
76+
.mat-form-field-label {
77+
margin-top: $fill-appearance-label-offset;
78+
}
6279

63-
.mat-form-field-appearance-box {
6480
.mat-form-field-label {
65-
margin-top: $box-appearance-label-offset;
81+
top: $infix-margin-top + $infix-padding-top;
6682
}
6783

6884
&.mat-form-field-can-float {
6985
&.mat-form-field-should-float .mat-form-field-label,
7086
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
7187
@include _mat-form-field-label-floating(
72-
$subscript-font-scale, $infix-padding + $box-appearance-label-offset,
88+
$subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
7389
$infix-margin-top);
7490
}
7591

7692
.mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
7793
.mat-form-field-label {
7894
@include _mat-form-field-label-floating(
79-
$subscript-font-scale, $infix-padding + $box-appearance-label-offset,
95+
$subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
8096
$infix-margin-top);
8197
}
8298

@@ -85,7 +101,7 @@ $mat-form-field-box-dedupe: 0;
85101
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
86102
.mat-form-field-label {
87103
@include _mat-form-field-label-floating(
88-
$subscript-font-scale, $infix-padding + $box-appearance-label-offset,
104+
$subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
89105
$infix-margin-top);
90106
}
91107
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import '../core/theming/theming';
33
@import '../core/style/form-common';
44
@import '../core/typography/typography-utils';
5-
@import 'form-field-box-theme.scss';
5+
@import 'form-field-fill-theme.scss';
66
@import 'form-field-legacy-theme.scss';
77
@import 'form-field-standard-theme.scss';
88

@@ -18,7 +18,7 @@
1818
$is-dark-theme: map-get($theme, is-dark);
1919

2020
// Label colors. Required is used for the `*` star shown in the label.
21-
$label-color: mat-color($foreground, secondary-text);
21+
$label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));
2222
$focused-label-color: mat-color($primary);
2323
$required-label-color: mat-color($accent);
2424

@@ -33,7 +33,7 @@
3333
}
3434

3535
.mat-hint {
36-
color: mat-color($foreground, secondary-text);
36+
color: $label-color;
3737
}
3838

3939
.mat-focused .mat-form-field-label {
@@ -94,7 +94,7 @@
9494

9595
@include mat-form-field-legacy-theme($theme);
9696
@include mat-form-field-standard-theme($theme);
97-
@include mat-form-field-box-theme($theme);
97+
@include mat-form-field-fill-theme($theme);
9898
}
9999

100100
// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
@@ -221,5 +221,5 @@ $mat-form-field-dedupe: 0;
221221

222222
@include mat-form-field-legacy-typography($config);
223223
@include mat-form-field-standard-typography($config);
224-
@include mat-form-field-box-typography($config);
224+
@include mat-form-field-fill-typography($config);
225225
}

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

Lines changed: 0 additions & 63 deletions
This file was deleted.

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@import '../core/style/variables';
2+
@import '../core/style/vendor-prefixes';
3+
4+
5+
// Styles that only apply to the fill appearance of the form-field.
6+
7+
// The border radius for the form field fill box.
8+
$mat-form-field-fill-border-radius: 4px !default;
9+
// The height of the underline at the bottom of the form field fill box.
10+
$mat-form-field-fill-underline-height: 1px !default;
11+
// The height of the underline ripple at the bottom of the form field fill box.
12+
$mat-form-field-fill-underline-ripple-height: 2px !default;
13+
// The horizontal padding between the edge of the form field fill box and the start of the text.
14+
$mat-form-field-fill-side-padding: 0.75em !default;
15+
// The vertical padding between the edge of the form field fill box and the start of the text as
16+
// well as between the floating label and the value.
17+
$mat-form-field-fill-line-spacing: 0.75em !default;
18+
// The scale of the subscript and floating label text w.r.t the value text.
19+
$mat-form-field-fill-subscript-font-scale: 0.75 !default;
20+
// The horizontal padding between the edge of the subscript box and the start of the subscript text.
21+
$mat-form-field-fill-subscript-padding:
22+
$mat-form-field-fill-side-padding / $mat-form-field-fill-subscript-font-scale;
23+
24+
25+
.mat-form-field-appearance-fill {
26+
.mat-form-field-flex {
27+
border-radius: $mat-form-field-fill-border-radius $mat-form-field-fill-border-radius 0 0;
28+
padding: $mat-form-field-fill-line-spacing $mat-form-field-fill-side-padding 0
29+
$mat-form-field-fill-side-padding;
30+
}
31+
32+
.mat-form-field-underline::before {
33+
content: '';
34+
display: block;
35+
position: absolute;
36+
bottom: 0;
37+
height: $mat-form-field-fill-underline-height;
38+
width: 100%;
39+
}
40+
41+
.mat-form-field-ripple {
42+
bottom: 0;
43+
height: $mat-form-field-fill-underline-ripple-height;
44+
}
45+
46+
// Note that we need this specific of a selector because we don't want
47+
// the hover effect to show when the user hovers over the hints.
48+
&:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
49+
.mat-form-field-ripple {
50+
opacity: 1;
51+
transform: none;
52+
transition: opacity 600ms $swift-ease-out-timing-function;
53+
}
54+
}
55+
56+
.mat-form-field-subscript-wrapper {
57+
padding: 0 $mat-form-field-fill-subscript-padding;
58+
}
59+
}

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,8 @@
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 appearance underline).
10-
$mat-form-field-standard-underline-margin-bottom: 1px !default;
119
// The padding between the top of the form field and the label text (used to align the standard
12-
// form field with the box appearance).
10+
// form field with the fill appearance).
1311
$mat-form-field-standard-padding-top: 0.5em !default;
1412

1513

@@ -22,11 +20,10 @@ $mat-form-field-standard-padding-top: 0.5em !default;
2220
// The ripple is the blue animation coming on top of it.
2321
.mat-form-field-underline {
2422
height: $mat-form-field-standard-underline-height;
25-
margin-bottom: $mat-form-field-standard-underline-margin-bottom;
2623
}
2724

2825
.mat-form-field-ripple {
29-
top: 0;
26+
bottom: 0;
3027
height: $mat-form-field-standard-underline-height * 2;
3128
}
3229

0 commit comments

Comments
 (0)