Skip to content

Commit d3a95ab

Browse files
crisbetocrisbeto
authored
refactor(material/form-field): simplify structural styles (angular#29400)
Reworks the form field styles to make them smaller and easier to mainta.
1 parent fb86562 commit d3a95ab

10 files changed

+645
-88
lines changed

‎src/material/core/tokens/m2/mat/_form-field.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use 'sass:math';
22
@use 'sass:map';
3-
@use '@material/textfield' as mdc-textfield;
43
@use '../../token-utils';
54
@use '../../../style/sass-utils';
65
@use '../../../theming/theming';
@@ -114,14 +113,14 @@ $prefix: (mat, form-field);
114113
-5: 36px,
115114
);
116115
$height: map.get($size-scale, $density-scale);
117-
$hide-label: $height < mdc-textfield.$minimum-height-for-filled-label;
116+
$hide-label: $height < 52px;
118117

119118
// We computed the desired height of the form-field using the density configuration. The
120119
// spec only describes vertical spacing/alignment in non-dense mode. This means that we
121120
// cannot update the spacing to explicit numbers based on the density scale. Instead, we
122121
// determine the height reduction and equally subtract it from the default `top` and `bottom`
123122
// padding that is provided by the Material Design specification.
124-
$vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
123+
$vertical-deduction: math.div(56px - $height, 2);
125124

126125
// Note: these calculations are trivial enough that we could do them at runtime with `calc`
127126
// and the value of the `height` token. The problem is that because we need to hide the label

‎src/material/core/tokens/m2/mat/_paginator.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use 'sass:math';
22
@use 'sass:map';
3-
@use '@material/textfield' as mdc-textfield;
43
@use '../../token-utils';
54
@use '../../../theming/theming';
65
@use '../../../theming/inspection';
@@ -66,7 +65,7 @@ $prefix: (mat, paginator);
6665
// cannot update the spacing to explicit numbers based on the density scale. Instead, we
6766
// determine the height reduction and equally subtract it from the default `top` and `bottom`
6867
// padding that is provided by the Material Design specification.
69-
$form-field-vertical-deduction: math.div(mdc-textfield.$height - $form-field-height, 2);
68+
$form-field-vertical-deduction: math.div(56px - $form-field-height, 2);
7069
$form-field-vertical-padding: 16px - $form-field-vertical-deduction;
7170

7271
@return (

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ sass_library(
5757
"_form-field-native-select.scss",
5858
"_form-field-subscript.scss",
5959
"_mdc-text-field-density-overrides.scss",
60+
"_mdc-text-field-structure.scss",
6061
"_mdc-text-field-structure-overrides.scss",
6162
"_mdc-text-field-textarea-overrides.scss",
6263
"_user-agent-overrides.scss",

‎src/material/form-field/_form-field-subscript.scss

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@use '@material/textfield/variables' as mdc-textfield-variables;
2-
31
@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
42
@use '../core/style/vendor-prefixes';
53
@use '../core/tokens/token-utils';
@@ -18,7 +16,7 @@
1816
top: 0;
1917
left: 0;
2018
right: 0;
21-
padding: 0 mdc-textfield-variables.$padding-horizontal;
19+
padding: 0 16px;
2220
}
2321

2422
.mat-mdc-form-field-subscript-dynamic-size {

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@use '@material/textfield/filled-text-field-theme' as mdc-filled-text-field-theme;
2-
@use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme;
31
@use '../core/tokens/m2/mdc/filled-text-field' as tokens-mdc-filled-text-field;
42
@use '../core/tokens/m2/mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
53
@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
@@ -43,28 +41,28 @@
4341
}
4442
@else {
4543
@include sass-utils.current-selector-or-root() {
46-
@include mdc-filled-text-field-theme.theme(
47-
tokens-mdc-filled-text-field.get-color-tokens($theme));
48-
@include mdc-outlined-text-field-theme.theme(
49-
tokens-mdc-outlined-text-field.get-color-tokens($theme));
44+
@include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
45+
tokens-mdc-filled-text-field.get-color-tokens($theme));
46+
@include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
47+
tokens-mdc-outlined-text-field.get-color-tokens($theme));
5048
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
5149
tokens-mat-form-field.get-color-tokens($theme));
5250
}
5351

5452
.mat-mdc-form-field.mat-accent {
55-
@include mdc-filled-text-field-theme.theme(
56-
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
57-
@include mdc-outlined-text-field-theme.theme(
58-
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
53+
@include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
54+
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
55+
@include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
56+
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
5957
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
6058
tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent));
6159
}
6260

6361
.mat-mdc-form-field.mat-warn {
64-
@include mdc-filled-text-field-theme.theme(
65-
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
66-
@include mdc-outlined-text-field-theme.theme(
67-
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
62+
@include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
63+
tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
64+
@include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
65+
tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
6866
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
6967
tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn));
7068
}
@@ -79,10 +77,10 @@
7977
}
8078
@else {
8179
@include sass-utils.current-selector-or-root() {
82-
@include mdc-filled-text-field-theme.theme(
83-
tokens-mdc-filled-text-field.get-typography-tokens($theme));
84-
@include mdc-outlined-text-field-theme.theme(
85-
tokens-mdc-outlined-text-field.get-typography-tokens($theme));
80+
@include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
81+
tokens-mdc-filled-text-field.get-typography-tokens($theme));
82+
@include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
83+
tokens-mdc-outlined-text-field.get-typography-tokens($theme));
8684
@include token-utils.create-token-values(tokens-mat-form-field.$prefix,
8785
tokens-mat-form-field.get-typography-tokens($theme));
8886
}
@@ -152,7 +150,9 @@
152150
token-utils.get-tokens-for($tokens, tokens-mdc-outlined-text-field.$prefix, $options...);
153151
$mat-form-field-tokens:
154152
token-utils.get-tokens-for($tokens, tokens-mat-form-field.$prefix, $options...);
155-
@include mdc-filled-text-field-theme.theme($mdc-filled-text-field-tokens);
156-
@include mdc-outlined-text-field-theme.theme($mdc-outlined-text-field-tokens);
153+
@include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
154+
$mdc-filled-text-field-tokens);
155+
@include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
156+
$mdc-outlined-text-field-tokens);
157157
@include token-utils.create-token-values(tokens-mat-form-field.$prefix, $mat-form-field-tokens);
158158
}

‎src/material/form-field/_mdc-text-field-density-overrides.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '@material/textfield' as mdc-textfield;
21
@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
32
@use '../core/tokens/token-utils';
43

@@ -51,7 +50,8 @@
5150
.mdc-floating-label--float-above {
5251
// Needs to be in a string form to work around an internal check that incorrectly flags this
5352
// interpolation in `calc` as unnecessary. If we don't have it, Sass won't evaluate it.
54-
$translate: 'calc(#{mdc-textfield.get-outlined-label-position-y(var(#{$height}))} * -1)';
53+
$offset: 'calc(6.75px + var(#{$height}) / 2)';
54+
$translate: 'calc(#{$offset} * -1)';
5555
--mat-mdc-form-field-label-transform: translateY(#{$translate})
5656
scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
5757
transform: var(--mat-mdc-form-field-label-transform);

‎src/material/form-field/_mdc-text-field-structure-overrides.scss

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '@material/textfield/variables' as mdc-textfield-variables;
21
@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
32
@use '../core/tokens/token-utils';
43
@use '../core/style/vendor-prefixes';
@@ -101,8 +100,8 @@ $_enable-form-field-will-change-reset: true;
101100
[dir='rtl'] {
102101
// Undo the above padding removals which only apply in LTR languages.
103102
.mat-mdc-text-field-wrapper {
104-
padding-left: mdc-textfield-variables.$padding-horizontal;
105-
padding-right: mdc-textfield-variables.$padding-horizontal;
103+
padding-left: 16px;
104+
padding-right: 16px;
106105
}
107106
// ...and apply the correct padding resets for RTL languages.
108107
.mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
@@ -164,16 +163,6 @@ $_enable-form-field-will-change-reset: true;
164163
padding-top: 0;
165164
}
166165

167-
// Unset the baseline adjustment styles that are applied to the `.mdc-text-field` before
168-
// pseudo element. We control the vertical alignment of form field controls using infix
169-
// spacing since we support custom form-field controls. Those don't necessarily have an
170-
// explicit height that matches with the Material Design specification. If the height isn't
171-
// explicitly set to a specific value by MDC, the control will not align correctly vertically.
172-
// e.g. No vertical spacing to the bottom-line if the control is too large.
173-
.mat-mdc-text-field-wrapper::before {
174-
content: none;
175-
}
176-
177166
// This fixes an issue where the notch appears to be thicker than the rest of the outline when
178167
// zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
179168
// that arises from a combination of the fact that the notch contains text, while the leading

0 commit comments

Comments
 (0)