Skip to content

Commit e5db56f

Browse files
committed
fix(material-experimental/mdc-form-field): tweak styles to work with MDC
typography
1 parent 8f22f5e commit e5db56f

File tree

8 files changed

+50
-51
lines changed

8 files changed

+50
-51
lines changed

src/dev-app/mdc-input/mdc-input-demo.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -315,8 +315,8 @@ <h4>Textarea</h4>
315315
<mat-form-field style="margin-bottom: 4em">
316316
<mat-label>Enter text to count</mat-label>
317317
<textarea matInput #longHint></textarea>
318-
<mat-hint>
319-
Enter some text to count how many characters are in it. The character count is shown on
318+
<mat-hint>Enter
319+
some text to count how many characters are in it. The character count is shown on
320320
the right.
321321
</mat-hint>
322322
<mat-hint align="end" style="white-space: nowrap" aria-live="polite">

src/material-experimental/mdc-form-field/_form-field-sizing.scss

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,7 @@ $mat-form-field-hint-min-space: 1em !default;
2020
// inputs. We take the explicit numbers provided by the Material Design specification.
2121
// https://material.io/components/text-fields/#specs
2222

23-
// Dimensions in the spec assume that an input box does not need to account for larger
24-
// characters. In browsers though, inputs always add additional vertical spacing to account
25-
// for such potential characters. This means that all determined spacing from the spec needs
26-
// to account for the input offset. The offset is based on the default font size used in the
27-
// spec images. i.e. the input box for a 16dp input is 1px larger on top and bottom.
28-
// Related information: https://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced.
29-
$mat-form-field-input-box-vertical-offset: 1px;
23+
$mat-form-field-height: 56px;
3024

3125
// Vertical spacing of the text-field if there is a label. MDC hard-codes the spacing into
3226
// their styles, but their spacing variables would not work for our form-field structure anyway.
@@ -36,11 +30,11 @@ $mat-form-field-input-box-vertical-offset: 1px;
3630
// spacing as provided by the Material Design specification. The outlined dimensions in the
3731
// spec section do not match with the text fields shown in the overview or the ones implemented
3832
// by MDC. Note that we need to account for the input box offset. See above for more context.
39-
$mat-form-field-with-label-input-padding-top: 28px - $mat-form-field-input-box-vertical-offset;
40-
$mat-form-field-with-label-input-padding-bottom: 12px - $mat-form-field-input-box-vertical-offset;
33+
$mat-form-field-with-label-input-padding-top: 24px;
34+
$mat-form-field-with-label-input-padding-bottom: 8px;
4135

4236
// Vertical spacing of the text-field if there is no label. We manually measure the
4337
// spacing in the specs. See comment above for padding for text fields with label. The
4438
// same reasoning applies to the padding for text fields without label.
45-
$mat-form-field-no-label-padding-bottom: 20px - $mat-form-field-input-box-vertical-offset;
46-
$mat-form-field-no-label-padding-top: 20px - $mat-form-field-input-box-vertical-offset;
39+
$mat-form-field-no-label-padding-bottom: 16px;
40+
$mat-form-field-no-label-padding-top: 16px;

src/material-experimental/mdc-form-field/_form-field-subscript.scss

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,35 @@
88
.mat-mdc-form-field-subscript-wrapper {
99
box-sizing: border-box;
1010
width: 100%;
11-
// prevents multi-line errors from overlapping the control.
12-
overflow: hidden;
11+
position: relative;
12+
}
13+
14+
// The horizontal padding between the edge of the text box and the start of the subscript text.
15+
$subscript-horizontal-padding: 16px;
16+
17+
.mat-mdc-form-field-hint-wrapper,
18+
.mat-mdc-form-field-error-wrapper {
19+
position: absolute;
20+
top: 0;
21+
left: 0;
22+
right: 0;
23+
padding: 0 $subscript-horizontal-padding;
24+
}
25+
26+
.mat-mdc-form-field-bottom-align::before {
27+
content: '';
28+
display: inline-block;
29+
height: 16px;
1330
}
1431

1532
// Scale down icons in the subscript to be the same size as the text.
16-
.mat-mdc-form-field-subscript-wrapper .mat-icon {
17-
width: 1em;
18-
height: 1em;
19-
font-size: inherit;
20-
vertical-align: baseline;
33+
.mat-mdc-form-field-subscript-wrapper,
34+
.mat-mdc-form-field label {
35+
.mat-icon {
36+
width: 1em;
37+
height: 1em;
38+
font-size: inherit;
39+
}
2140
}
2241

2342
// Clears the floats on the hints. This is necessary for the hint animation to work.
@@ -47,29 +66,11 @@
4766
// helper text in our MDC based form field
4867
@mixin mat-mdc-private-form-field-subscript-typography($config-or-theme) {
4968
$config: mat-get-typography-config($config-or-theme);
50-
// The unit-less line-height from the font config.
51-
$line-height: mat-line-height($config, input);
52-
// The amount to scale the font for the subscript.
53-
$subscript-font-scale: 0.75;
54-
// Font size to use for the subscript text.
55-
$subscript-font-size: $subscript-font-scale * 100%;
56-
// The space between the bottom of the text-field area and the subscript. Mocks in the spec show
57-
// half of the text size, but this margin is applied to an element with the subscript text font
58-
// size, so we need to divide by the scale factor to make it half of the original text size.
59-
$subscript-margin-top: 0.5em / $subscript-font-scale;
60-
// The minimum height applied to the subscript to reserve space for subscript text. This is a
61-
// combination of the subscript's margin and line-height, but we need to multiply by the
62-
// subscript font scale factor since the subscript has a reduced font size.
63-
$subscript-min-height: ($subscript-margin-top + $line-height) * $subscript-font-scale;
64-
// The horizontal padding between the edge of the text box and the start of the subscript text.
65-
$subscript-horizontal-padding: 16px;
6669

6770
// The subscript wrapper has a minimum height to avoid that the form-field
6871
// jumps when hints or errors are displayed.
69-
.mat-mdc-form-field-subscript-wrapper {
70-
min-height: $subscript-min-height;
71-
font-size: $subscript-font-size;
72-
margin-top: $subscript-margin-top;
73-
padding: 0 $subscript-horizontal-padding;
72+
.mat-mdc-form-field-subscript-wrapper,
73+
.mat-mdc-form-field-bottom-align::before {
74+
@include mdc-typography(caption, $query: $mat-typography-styles-query);
7475
}
7576
}

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,18 @@
99
@mixin mat-mdc-private-text-field-structure-overrides() {
1010
// Unset the border set by MDC. We move the border (which serves as the Material Design
1111
// text-field bottom line) into its own element. This is necessary because we want the
12-
// bottom-line to span across the whole form-field (including prefixes and suffixes). Also
13-
// we ensure that font styles are inherited for input elements. We do this because inputs by
14-
// default have explicit font styles from the user agent, and we set the desired font styles
15-
// in the parent `mat-form-field` element (for better custom form-field control support).
12+
// bottom-line to span across the whole form-field (including prefixes and suffixes).
1613
.mat-mdc-input-element {
17-
font: inherit;
1814
border: none;
1915
}
2016

17+
// In order to ensure proper alignment of the floating label, we reset its line-height.
18+
// The line-height is not important as the element is absolutely positioned and only has one line
19+
// of text.
20+
.mat-mdc-form-field .mdc-floating-label {
21+
line-height: normal;
22+
}
23+
2124
// Reset the height that MDC sets on native input elements. We cannot rely on their
2225
// fixed height as we handle vertical spacing differently. MDC sets a fixed height for
2326
// inputs and modifies the baseline so that the textfield matches the spec. This does

src/material-experimental/mdc-form-field/directives/error.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const MAT_ERROR = new InjectionToken<MatError>('MatError');
2121
@Directive({
2222
selector: 'mat-error',
2323
host: {
24-
'class': 'mat-mdc-form-field-error',
24+
'class': 'mat-mdc-form-field-error mat-mdc-form-field-bottom-align',
2525
'role': 'alert',
2626
'[id]': 'id',
2727
},

src/material-experimental/mdc-form-field/directives/hint.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ let nextUniqueId = 0;
1414
@Directive({
1515
selector: 'mat-hint',
1616
host: {
17-
'class': 'mat-mdc-form-field-hint',
17+
'class': 'mat-mdc-form-field-hint mat-mdc-form-field-bottom-align',
1818
'[class.mat-mdc-form-field-hint-end]': 'align === "end"',
1919
'[id]': 'id',
2020
// Remove align attribute to prevent it from interfering with layout.

src/material-experimental/mdc-form-field/form-field.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,10 @@
6464
<div matFormFieldLineRipple *ngIf="!_hasOutline()"></div>
6565
</div>
6666

67-
<div class="mat-mdc-form-field-subscript-wrapper"
67+
<div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
6868
[ngSwitch]="_getDisplayedMessages()">
69-
<div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">
69+
<div class="mat-mdc-form-field-error-wrapper" *ngSwitchCase="'error'"
70+
[@transitionMessages]="_subscriptAnimationState">
7071
<ng-content select="mat-error"></ng-content>
7172
</div>
7273

src/material/form-field/form-field-animations.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const matFormFieldAnimations: {
2626
// TODO(mmalerba): Use angular animations for label animation as well.
2727
state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
2828
transition('void => enter', [
29-
style({ opacity: 0, transform: 'translateY(-100%)' }),
29+
style({ opacity: 0, transform: 'translateY(-5px)' }),
3030
animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'),
3131
]),
3232
])

0 commit comments

Comments
 (0)