diff --git a/src/dev-app/mdc-input/mdc-input-demo.html b/src/dev-app/mdc-input/mdc-input-demo.html index f571548420e6..313f13761adf 100644 --- a/src/dev-app/mdc-input/mdc-input-demo.html +++ b/src/dev-app/mdc-input/mdc-input-demo.html @@ -315,8 +315,8 @@

Textarea

Enter text to count - - Enter some text to count how many characters are in it. The character count is shown on + Enter + some text to count how many characters are in it. The character count is shown on the right. diff --git a/src/material-experimental/mdc-form-field/_form-field-sizing.scss b/src/material-experimental/mdc-form-field/_form-field-sizing.scss index bed3f44a3756..857d68610aaa 100644 --- a/src/material-experimental/mdc-form-field/_form-field-sizing.scss +++ b/src/material-experimental/mdc-form-field/_form-field-sizing.scss @@ -20,13 +20,7 @@ $mat-form-field-hint-min-space: 1em !default; // inputs. We take the explicit numbers provided by the Material Design specification. // https://material.io/components/text-fields/#specs -// Dimensions in the spec assume that an input box does not need to account for larger -// characters. In browsers though, inputs always add additional vertical spacing to account -// for such potential characters. This means that all determined spacing from the spec needs -// to account for the input offset. The offset is based on the default font size used in the -// spec images. i.e. the input box for a 16dp input is 1px larger on top and bottom. -// Related information: https://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced. -$mat-form-field-input-box-vertical-offset: 1px; +$mat-form-field-height: 56px; // Vertical spacing of the text-field if there is a label. MDC hard-codes the spacing into // 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; // spacing as provided by the Material Design specification. The outlined dimensions in the // spec section do not match with the text fields shown in the overview or the ones implemented // by MDC. Note that we need to account for the input box offset. See above for more context. -$mat-form-field-with-label-input-padding-top: 28px - $mat-form-field-input-box-vertical-offset; -$mat-form-field-with-label-input-padding-bottom: 12px - $mat-form-field-input-box-vertical-offset; +$mat-form-field-with-label-input-padding-top: 24px; +$mat-form-field-with-label-input-padding-bottom: 8px; // Vertical spacing of the text-field if there is no label. We manually measure the // spacing in the specs. See comment above for padding for text fields with label. The // same reasoning applies to the padding for text fields without label. -$mat-form-field-no-label-padding-bottom: 20px - $mat-form-field-input-box-vertical-offset; -$mat-form-field-no-label-padding-top: 20px - $mat-form-field-input-box-vertical-offset; +$mat-form-field-no-label-padding-bottom: 16px; +$mat-form-field-no-label-padding-top: 16px; diff --git a/src/material-experimental/mdc-form-field/_form-field-subscript.scss b/src/material-experimental/mdc-form-field/_form-field-subscript.scss index 23fe17bb2b59..da2c55d4e5c2 100644 --- a/src/material-experimental/mdc-form-field/_form-field-subscript.scss +++ b/src/material-experimental/mdc-form-field/_form-field-subscript.scss @@ -8,16 +8,35 @@ .mat-mdc-form-field-subscript-wrapper { box-sizing: border-box; width: 100%; - // prevents multi-line errors from overlapping the control. - overflow: hidden; + position: relative; + } + + // The horizontal padding between the edge of the text box and the start of the subscript text. + $subscript-horizontal-padding: 16px; + + .mat-mdc-form-field-hint-wrapper, + .mat-mdc-form-field-error-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + padding: 0 $subscript-horizontal-padding; + } + + .mat-mdc-form-field-bottom-align::before { + content: ''; + display: inline-block; + height: 16px; } // Scale down icons in the subscript to be the same size as the text. - .mat-mdc-form-field-subscript-wrapper .mat-icon { - width: 1em; - height: 1em; - font-size: inherit; - vertical-align: baseline; + .mat-mdc-form-field-subscript-wrapper, + .mat-mdc-form-field label { + .mat-icon { + width: 1em; + height: 1em; + font-size: inherit; + } } // Clears the floats on the hints. This is necessary for the hint animation to work. @@ -47,29 +66,11 @@ // helper text in our MDC based form field @mixin mat-mdc-private-form-field-subscript-typography($config-or-theme) { $config: mat-get-typography-config($config-or-theme); - // The unit-less line-height from the font config. - $line-height: mat-line-height($config, input); - // The amount to scale the font for the subscript. - $subscript-font-scale: 0.75; - // Font size to use for the subscript text. - $subscript-font-size: $subscript-font-scale * 100%; - // The space between the bottom of the text-field area and the subscript. Mocks in the spec show - // half of the text size, but this margin is applied to an element with the subscript text font - // size, so we need to divide by the scale factor to make it half of the original text size. - $subscript-margin-top: 0.5em / $subscript-font-scale; - // The minimum height applied to the subscript to reserve space for subscript text. This is a - // combination of the subscript's margin and line-height, but we need to multiply by the - // subscript font scale factor since the subscript has a reduced font size. - $subscript-min-height: ($subscript-margin-top + $line-height) * $subscript-font-scale; - // The horizontal padding between the edge of the text box and the start of the subscript text. - $subscript-horizontal-padding: 16px; // The subscript wrapper has a minimum height to avoid that the form-field // jumps when hints or errors are displayed. - .mat-mdc-form-field-subscript-wrapper { - min-height: $subscript-min-height; - font-size: $subscript-font-size; - margin-top: $subscript-margin-top; - padding: 0 $subscript-horizontal-padding; + .mat-mdc-form-field-subscript-wrapper, + .mat-mdc-form-field-bottom-align::before { + @include mdc-typography(caption, $query: $mat-typography-styles-query); } } diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss index 2d6f91da19a8..b8326d72af07 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss @@ -9,15 +9,18 @@ @mixin mat-mdc-private-text-field-structure-overrides() { // Unset the border set by MDC. We move the border (which serves as the Material Design // text-field bottom line) into its own element. This is necessary because we want the - // bottom-line to span across the whole form-field (including prefixes and suffixes). Also - // we ensure that font styles are inherited for input elements. We do this because inputs by - // default have explicit font styles from the user agent, and we set the desired font styles - // in the parent `mat-form-field` element (for better custom form-field control support). + // bottom-line to span across the whole form-field (including prefixes and suffixes). .mat-mdc-input-element { - font: inherit; border: none; } + // In order to ensure proper alignment of the floating label, we reset its line-height. + // The line-height is not important as the element is absolutely positioned and only has one line + // of text. + .mat-mdc-form-field .mdc-floating-label { + line-height: normal; + } + // Reset the height that MDC sets on native input elements. We cannot rely on their // fixed height as we handle vertical spacing differently. MDC sets a fixed height for // inputs and modifies the baseline so that the textfield matches the spec. This does diff --git a/src/material-experimental/mdc-form-field/directives/error.ts b/src/material-experimental/mdc-form-field/directives/error.ts index 61fdc55adcf5..fc65c1b9e30f 100644 --- a/src/material-experimental/mdc-form-field/directives/error.ts +++ b/src/material-experimental/mdc-form-field/directives/error.ts @@ -21,7 +21,7 @@ export const MAT_ERROR = new InjectionToken('MatError'); @Directive({ selector: 'mat-error', host: { - 'class': 'mat-mdc-form-field-error', + 'class': 'mat-mdc-form-field-error mat-mdc-form-field-bottom-align', 'role': 'alert', '[id]': 'id', }, diff --git a/src/material-experimental/mdc-form-field/directives/hint.ts b/src/material-experimental/mdc-form-field/directives/hint.ts index d8aa38c5617a..f11ba46cf29f 100644 --- a/src/material-experimental/mdc-form-field/directives/hint.ts +++ b/src/material-experimental/mdc-form-field/directives/hint.ts @@ -14,7 +14,7 @@ let nextUniqueId = 0; @Directive({ selector: 'mat-hint', host: { - 'class': 'mat-mdc-form-field-hint', + 'class': 'mat-mdc-form-field-hint mat-mdc-form-field-bottom-align', '[class.mat-mdc-form-field-hint-end]': 'align === "end"', '[id]': 'id', // Remove align attribute to prevent it from interfering with layout. diff --git a/src/material-experimental/mdc-form-field/form-field.html b/src/material-experimental/mdc-form-field/form-field.html index 61eb1aa73ff1..bb2d512011b9 100644 --- a/src/material-experimental/mdc-form-field/form-field.html +++ b/src/material-experimental/mdc-form-field/form-field.html @@ -64,9 +64,10 @@
-
-
+
diff --git a/src/material/form-field/form-field-animations.ts b/src/material/form-field/form-field-animations.ts index 51fb83fdebca..5e2fc96d9f94 100644 --- a/src/material/form-field/form-field-animations.ts +++ b/src/material/form-field/form-field-animations.ts @@ -26,7 +26,7 @@ export const matFormFieldAnimations: { // TODO(mmalerba): Use angular animations for label animation as well. state('enter', style({ opacity: 1, transform: 'translateY(0%)' })), transition('void => enter', [ - style({ opacity: 0, transform: 'translateY(-100%)' }), + style({ opacity: 0, transform: 'translateY(-5px)' }), animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'), ]), ])