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/dev-app/theme.scss b/src/dev-app/theme.scss index 2c5cddd6ad40..4d72afaf51dd 100644 --- a/src/dev-app/theme.scss +++ b/src/dev-app/theme.scss @@ -19,7 +19,7 @@ // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!** @include mat-core(); -@include angular-material-mdc-typography(); +@include angular-material-mdc-typography(mat-mdc-typography-config()); @include mat-popover-edit-typography(mat-typography-config()); // Include base styles for strong focus indicators. diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index fa9366abded6..2994f60606b3 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -2,6 +2,7 @@ @import '@material/list/variables.import'; @import '@material/theme/functions.import'; @import '@material/theme/mixins.import'; +@import '@material/typography/mixins.import'; @import '../../mdc-helpers/mdc-helpers'; @import '../../../material/core/theming/theming'; @@ -43,6 +44,14 @@ @mixin mat-mdc-option-typography($config-or-theme) { $config: mat-get-typography-config($config-or-theme); + + @include mat-using-mdc-typography($config) { + // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct + // level. Class is repeated for increased specificity. + .mat-mdc-option { + @include mdc-typography(body1, $query: $mat-typography-styles-query); + } + } } @mixin mat-mdc-option-density($config-or-theme) { 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..b99097f836ec 100644 --- a/src/material-experimental/mdc-form-field/_form-field-sizing.scss +++ b/src/material-experimental/mdc-form-field/_form-field-sizing.scss @@ -36,11 +36,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-input-box-vertical-offset; +$mat-form-field-with-label-input-padding-bottom: 8px - $mat-form-field-input-box-vertical-offset; // 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-input-box-vertical-offset; +$mat-form-field-no-label-padding-top: 16px - $mat-form-field-input-box-vertical-offset; 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..34fd506b4daf 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,34 @@ .mat-mdc-form-field-subscript-wrapper { box-sizing: border-box; width: 100%; - // prevents multi-line errors from overlapping the control. - overflow: hidden; + position: relative; + } + + .mat-mdc-form-field-hint-wrapper, + .mat-mdc-form-field-error-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + } + + .mat-mdc-form-field-bottom-align { + line-height: normal; + } + + .mat-mdc-form-field-bottom-align::before { + content: '\200B'; + vertical-align: bottom; } // 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 +65,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/_form-field-theme.scss b/src/material-experimental/mdc-form-field/_form-field-theme.scss index b2a68e944224..32589e1b4ddf 100644 --- a/src/material-experimental/mdc-form-field/_form-field-theme.scss +++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss @@ -4,6 +4,7 @@ @import '@material/theme/variables.import'; @import '@material/textfield/mixins.import'; @import '@material/textfield/variables.import'; +@import '@material/typography/mixins.import'; @import '../mdc-helpers/mdc-helpers'; @import 'form-field-density'; @import 'form-field-subscript'; @@ -22,8 +23,8 @@ .mdc-text-field--focused { @include mdc-text-field-focused_($query); - } + .mdc-text-field--invalid { @include mdc-text-field-invalid_($query); } @@ -67,8 +68,13 @@ @include mdc-line-ripple-core-styles($query: $mat-typography-styles-query); @include mat-mdc-private-form-field-subscript-typography($config); - .mat-mdc-form-field { - @include mat-typography-level-to-styles($config, input); + // MDC uses the `subtitle1` level for the input label and value, but the spec shows `body1` as + // the correct level. + .mat-mdc-input-element, + .mat-mdc-form-field label, + .mat-mdc-form-field-prefix, + .mat-mdc-form-field-suffix { + @include mdc-typography(body1, $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-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss index 82ac85c258c3..48f43ad81962 100644 --- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss +++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss @@ -18,7 +18,8 @@ $mat-theme-styles-query: color; $mat-typography-styles-query: typography; // Mappings between Angular Material and MDC's typography levels. -$mat-typography-level-mappings: ( +// TODO: delete once all MDC components have migrated to using the 2018 mappings. +$mat-typography-2014-level-mappings: ( mdc-to-mat: ( headline1: display-4, headline2: display-3, @@ -51,9 +52,45 @@ $mat-typography-level-mappings: ( ) ); +// Mappings between Angular Material and MDC's typography levels. +$mat-typography-2018-level-mappings: ( + mdc-to-mat: ( + headline1: headline-1, + headline2: headline-2, + headline3: headline-3, + headline4: headline-4, + headline5: headline-5, + headline6: headline-6, + subtitle1: subtitle-1, + subtitle2: subtitle-2, + body1: body-1, + body2: body-2, + caption: caption, + button: button, + overline: overline + ), + mat-to-mdc: ( + headline-1: headline1, + headline-2: headline2, + headline-3: headline3, + headline-4: headline4, + headline-5: headline5, + headline-6: headline6, + subtitle-1: subtitle1, + subtitle-2: subtitle2, + body-1: body1, + body-2: body2, + caption: caption, + button: button, + overline: overline + ) +); + // Converts an Angular Material typography level config to an MDC one. @function mat-typography-level-config-to-mdc($mat-config, $mat-level) { - $mdc-level: map-get(map-get($mat-typography-level-mappings, mat-to-mdc), $mat-level); + $mappings: if(mat-private-typography-is-2018-config($mat-config), + $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings); + $mdc-level: map-get(map-get($mappings, mat-to-mdc), $mat-level); @return map-merge( if($mdc-level, @@ -81,7 +118,10 @@ $mat-typography-level-mappings: ( @function mat-typography-config-to-mdc($mat-config: mat-typography-config()) { $mdc-config: (); - @each $mdc-level, $mat-level in map-get($mat-typography-level-mappings, mdc-to-mat) { + $mappings: if(mat-private-typography-is-2018-config($mat-config), + $mat-typography-2018-level-mappings, $mat-typography-2014-level-mappings); + + @each $mdc-level, $mat-level in map-get($mappings, mdc-to-mat) { $mdc-config: map-merge( $mdc-config, ($mdc-level: mat-typography-level-config-to-mdc($mat-config, $mat-level))); @@ -92,23 +132,14 @@ $mat-typography-level-mappings: ( // Converts an MDC typography level config to an Angular Material one. @function mat-typography-config-level-from-mdc($mdc-level) { - @return mat-typography-level( - map-get($mdc-typography-styles, font-size), - map-get($mdc-typography-styles, line-height), - map-get($mdc-typography-styles, font-weight), - map-get($mdc-typography-styles, font-family), - map-get($mdc-typography-styles, letter-spacing)); -} - -// Converts an MDC typography config to an Angular Material one. -@function mat-typography-config-from-mdc() { - $mat-config: (); + $mdc-level-config: map-get($mdc-typography-styles, $mdc-level); - @each $mat-level, $mdc-level in map-get($mat-typography-level-mappings, mat-to-mdc) { - $mat-config: map-merge($mat-config, mat-typography-config-from-mdc($mdc-level)); - } - - @return $mat-config; + @return mat-typography-level( + map-get($mdc-level-config, font-size), + map-get($mdc-level-config, line-height), + map-get($mdc-level-config, font-weight), + map-get($mdc-level-config, font-family), + map-get($mdc-level-config, letter-spacing)); } // Configures MDC's global variables to reflect the given theme, applies the given styles, diff --git a/src/material-experimental/mdc-menu/_menu-theme.scss b/src/material-experimental/mdc-menu/_menu-theme.scss index 66b306fa53e6..8e8c40d83b01 100644 --- a/src/material-experimental/mdc-menu/_menu-theme.scss +++ b/src/material-experimental/mdc-menu/_menu-theme.scss @@ -4,6 +4,7 @@ @import '@material/list/variables.import'; @import '@material/theme/functions.import'; @import '@material/theme/mixins.import'; +@import '@material/typography/mixins.import'; @import '../mdc-helpers/mdc-helpers'; @mixin mat-mdc-menu-color($config-or-theme) { @@ -47,10 +48,16 @@ @include mat-using-mdc-typography($config) { @include mdc-menu-surface-core-styles($mat-typography-styles-query); - .mat-mdc-menu-content, .mat-mdc-menu-item { + .mat-mdc-menu-content { // Note that we include this private mixin, because the public // one adds a bunch of styles that we aren't using for the menu. @include mdc-list-base_($mat-typography-styles-query); + + // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct + // level. + .mat-mdc-menu-item { + @include mdc-typography(body1, $query: $mat-typography-styles-query); + } } } } diff --git a/src/material-experimental/mdc-select/_select-theme.scss b/src/material-experimental/mdc-select/_select-theme.scss index 4555d7126911..9e0530afd1af 100644 --- a/src/material-experimental/mdc-select/_select-theme.scss +++ b/src/material-experimental/mdc-select/_select-theme.scss @@ -2,6 +2,7 @@ @import '@material/list/mixins.import'; @import '@material/theme/variables.import'; @import '@material/select/variables.import'; +@import '@material/typography/mixins.import'; @import '../mdc-helpers/mdc-helpers'; // Gets the color to use for some text that is highlighted while a select has focus. @@ -89,6 +90,10 @@ // a bunch of styles that we aren't using for the select panel. @include mdc-list-base_($mat-typography-styles-query); } + + .mat-mdc-select-value { + @include mdc-typography(body1, $query: $mat-typography-styles-query); + } } } diff --git a/src/material-experimental/mdc-typography/_all-typography.scss b/src/material-experimental/mdc-typography/_all-typography.scss index b29ac61cf38a..83f673bbf469 100644 --- a/src/material-experimental/mdc-typography/_all-typography.scss +++ b/src/material-experimental/mdc-typography/_all-typography.scss @@ -1,5 +1,52 @@ +@import '@material/typography/variables.import'; @import '../mdc-theming/all-theme'; +@function mat-mdc-typography-config( + $font-family: $mdc-typography-font-family, + $headline-1: mat-typography-config-level-from-mdc(headline1), + $headline-2: mat-typography-config-level-from-mdc(headline2), + $headline-3: mat-typography-config-level-from-mdc(headline3), + $headline-4: mat-typography-config-level-from-mdc(headline4), + $headline-5: mat-typography-config-level-from-mdc(headline5), + $headline-6: mat-typography-config-level-from-mdc(headline6), + $subtitle-1: mat-typography-config-level-from-mdc(subtitle1), + $subtitle-2: mat-typography-config-level-from-mdc(subtitle2), + $body-1: mat-typography-config-level-from-mdc(body1), + $body-2: mat-typography-config-level-from-mdc(body2), + $caption: mat-typography-config-level-from-mdc(caption), + $button: mat-typography-config-level-from-mdc(button), + $overline: mat-typography-config-level-from-mdc(overline), +) { + // Declare an initial map with all of the levels. + $config: ( + headline-1: $headline-1, + headline-2: $headline-2, + headline-3: $headline-3, + headline-4: $headline-4, + headline-5: $headline-5, + headline-6: $headline-6, + subtitle-1: $subtitle-1, + subtitle-2: $subtitle-2, + body-1: $body-1, + body-2: $body-2, + caption: $caption, + button: $button, + overline: $overline, + ); + + // Loop through the levels and set the `font-family` of the ones that don't have one to the base. + // Note that Sass can't modify maps in place, which means that we need to merge and re-assign. + @each $key, $level in $config { + @if map-get($level, font-family) == null { + $new-level: map-merge($level, (font-family: $font-family)); + $config: map-merge($config, ($key: $new-level)); + } + } + + // Add the base font family to the config. + @return map-merge($config, (font-family: $font-family)); +} + @mixin angular-material-mdc-typography($config-or-theme: null) { $config: if(mat-private-is-theme-object($config-or-theme), mat-get-typography-config($config-or-theme), $config-or-theme); 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)'), ]), ])