feat(datepicker, select, textfield): Support customizing label size o…

…n these components.

PiperOrigin-RevId: 572010047

packages/mdc-notched-outline/_mixins.scss

@@ -24,4 +24,5 @@
 @forward './notched-outline' show core-styles, base_;
 @forward './notched-outline-theme' show color, stroke-width, notch-offset,
   shape-radius, floating-label-float-position,
-  floating-label-float-position-absolute, notch-max-width;
+  floating-label-float-position-absolute, notch-max-width,
+  floating-label-float-font-size;

packages/mdc-notched-outline/_notched-outline-theme.scss

@@ -263,6 +263,7 @@ $label-adjust-absolute: 2.5px !default;
 /// @param {Number} $positionY Absolute Y-axis position in `px`.
 /// @param {Number} $positionX Absolute X-axis position in `px`. Defaults to `0`.
 /// @param {Number} $scale Defaults to `.75`.
+/// @param {Number} $font-size Defaults to `1rem`.
 ///
 /// @todo Replace mixin `mdc-notched-outline-floating-label-float-position` with this mixin when floating label is
 ///     center aligned in all the places.
@@ -288,12 +289,6 @@ $label-adjust-absolute: 2.5px !default;
     $query: $query
   );
 
-  .mdc-floating-label--float-above {
-    @include feature-targeting.targets($feat-structure) {
-      font-size: calc($scale * $font-size);
-    }
-  }
-
   // Two selectors to ensure we select the appropriate class when applied from this component or a parent component.
   &.mdc-notched-outline--upgraded,
   .mdc-notched-outline--upgraded {
@@ -303,10 +298,56 @@ $label-adjust-absolute: 2.5px !default;
       $scale,
       $query: $query
     );
+  }
+
+  @include floating-label-float-font-size(
+    $scale: $scale,
+    $font-size: $font-size,
+    $query: $query
+  );
+}
+
+///
+/// Sets floating label font size in notched outline when label is afloat.
+///
+/// @param {Number} $scale Defaults to `.75`.
+/// @param {Number} $font-size Defaults to `1rem`.
+///
+@mixin floating-label-float-font-size(
+  $scale: 0.75,
+  $font-size: 1rem,
+  $query: feature-targeting.all()
+) {
+  $font-size-value: if(
+    custom-properties.is-custom-prop($font-size),
+    custom-properties.get-declaration-value($font-size),
+    $font-size
+  );
+  // Check if $font-size-value is null. This mixin is typically called from a
+  // component's `theme-styles` mixin, meaning the $font-size value will be
+  // passed in via a call to map.get(...). When the value is missing from the
+  // theme map, a `null` value will be passed in -- which does NOT result in
+  // the default 1rem value we've set in the mixin definition being used. Due
+  // to our call to `calc()` in this mixin, $font-size values of `null` results
+  // in BUILD errors. To avoid having to perform null checks in all the mixin
+  // calls that eventually lead down to this one, we just do a null check in
+  // this mixin.
+  $font-size-value: if($font-size-value, $font-size-value, 1rem);
+
+  $feat-structure: feature-targeting.create-target($query, structure);
+  .mdc-floating-label--float-above {
+    @include feature-targeting.targets($feat-structure) {
+      font-size: calc($scale * $font-size-value);
+    }
+  }
 
+  // Two selectors to ensure we select the appropriate class when applied from
+  // this component or a parent component.
+  &.mdc-notched-outline--upgraded,
+  .mdc-notched-outline--upgraded {
     .mdc-floating-label--float-above {
       @include feature-targeting.targets($feat-structure) {
-        font-size: $font-size;
+        font-size: $font-size-value;
       }
     }
   }

packages/mdc-select/_select-outlined-theme.scss

@@ -168,11 +168,13 @@ $custom-property-prefix: 'outlined-select';
 
   @if map.get($theme, text-field-container-height) {
     @include select-theme.outlined-height(
-      map.get($theme, text-field-container-height)
+      map.get($theme, text-field-container-height),
+      $label-font-size: map.get($theme, text-field-label-text-size)
     );
     &.mdc-select--with-leading-icon {
       @include select-theme.outlined-with-leading-icon-height(
-        map.get($theme, text-field-container-height)
+        map.get($theme, text-field-container-height),
+        $label-font-size: map.get($theme, text-field-label-text-size)
       );
     }
   }

packages/mdc-select/_select-theme.scss

@@ -448,6 +448,14 @@ $error-color: error !default;
   .mdc-floating-label {
     @include typography.theme-styles($typography-theme);
   }
+
+  @if map.get($typography-theme, 'size') {
+    &.mdc-select--outlined .mdc-select__anchor {
+      @include notched-outline-mixins.floating-label-float-font-size(
+        $font-size: map.get($typography-theme, 'size')
+      );
+    }
+  }
 }
 
 @mixin _error-outline-color($color) {
@@ -1258,10 +1266,12 @@ $error-color: error !default;
 /// @param {Number} $new-height
 /// @param {String} $keyframe-suffix - Optional suffix to use for generated
 ///     floating label keyframes
+/// @param {Number} $label-font-size - Defaults to 1rem.
 ///
 @mixin outlined-height(
   $new-height,
   $keyframe-suffix: null,
+  $label-font-size: 1rem,
   $query: feature-targeting.all()
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
@@ -1279,6 +1289,7 @@ $error-color: error !default;
     // Floating label position
     @include notched-outline-mixins.floating-label-float-position-absolute(
       $positionY,
+      $font-size: $label-font-size,
       $query: $query
     );
 
@@ -1323,10 +1334,12 @@ $error-color: error !default;
 /// @param {Number} $new-height
 /// @param {String} $keyframe-suffix - Optional suffix to use for generated
 ///     floating label keyframes
+/// @param {Number} $label-font-size - Font size for floating label. Defaults to 1rem.
 ///
 @mixin outlined-with-leading-icon-height(
   $new-height,
   $keyframe-suffix: null,
+  $label-font-size: 1rem,
   $query: feature-targeting.all()
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
@@ -1342,13 +1355,15 @@ $error-color: error !default;
         $new-height,
         select-icon-theme.$dense-icon-size,
         $keyframe-suffix,
+        $label-font-size,
         $query: $query
       );
     } @else {
       @include outlined-with-leading-icon-floating-label-position-animation(
         $new-height,
         select-icon-theme.$icon-size,
         $keyframe-suffix,
+        $label-font-size,
         $query: $query
       );
     }
@@ -1514,11 +1529,13 @@ $error-color: error !default;
 /// outlined select with leaing icon.
 /// @param {number} $icon-size - The size of the leading icon.
 /// @param {string} $keyframe-suffix - The suffix for the newly generated keyframes.
+/// @param {number} $font-size - The size of the label font. Defaults to 1rem.
 ///
 @mixin outlined-with-leading-icon-floating-label-position-animation(
   $height,
   $icon-size,
   $keyframe-suffix: select-outlined-leading-icon-#{$height},
+  $font-size: 1rem,
   $query: feature-targeting.all()
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
@@ -1541,6 +1558,7 @@ $error-color: error !default;
   @include notched-outline-mixins.floating-label-float-position-absolute(
     $float-position-y,
     $float-position-x,
+    $font-size: $font-size,
     $query: $query
   );
 

packages/mdc-textfield/_outlined-text-field-theme.scss

@@ -33,6 +33,7 @@
 @use '@material/tokens/resolvers';
 @use './text-field-theme';
 @use './mixins';
+@use './variables';
 
 $custom-property-prefix: 'outlined-text-field';
 
@@ -188,6 +189,15 @@ $light-theme: (
       }
     }
   }
+
+  @if map.get($theme, label-text-size) {
+    &.mdc-text-field--textarea.mdc-text-field--outlined {
+      @include notched-outline-mixins.floating-label-float-font-size(
+        $font-size: map.get($theme, label-text-size)
+      );
+    }
+  }
+
   @if map.get($theme, container-shape) {
     @include mixins.outline-shape-radius(map.get($theme, container-shape));
   }

packages/mdc-textfield/_text-field.scss

@@ -374,15 +374,24 @@ $_density-config: map.merge(
 ///
 /// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
 ///     `-3`, `-2`, `-1`, `0`. Default is `0`.
+/// @param {Number} $label-font-size - Font-size for the textfield's floating label. If the label size is being customized, it is necessary to specify this value to ensure that the notched outline does not cut-off the label when floated, see b/302340517 for more info. Defaults to 1rem.
 ///
-@mixin outlined-density($density-scale, $query: feature-targeting.all()) {
+@mixin outlined-density(
+  $density-scale,
+  $label-font-size: 1rem,
+  $query: feature-targeting.all()
+) {
   $height: density-functions.prop-value(
     $density-config: $_density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
 
-  @include outlined-height($height, $query: $query);
+  @include outlined-height(
+    $height,
+    $label-font-size: $label-font-size,
+    $query: $query
+  );
   // TODO(b/151839219): resize icons and adjust label position
   // @if $density-scale < 0 {
   //   @include icon-mixins.size(icon-variables.$dense-icon-size);
@@ -394,9 +403,11 @@ $_density-config: map.merge(
 ///
 /// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
 ///     `-3`, `-2`, `-1`, `0`. Default is `0`.
+/// @param {Number} $label-font-size - Font-size for the textfield's floating label. It is necessary tto specify this value to ensure that the notched outline does not cut-off the label when floated, see b/302340517 for more info.
 ///
 @mixin outlined-with-leading-icon-density(
   $density-scale,
+  $label-font-size: 1rem,
   $query: feature-targeting.all()
 ) {
   $height: density-functions.prop-value(
@@ -405,7 +416,11 @@ $_density-config: map.merge(
     $property-name: height,
   );
 
-  @include outlined-with-leading-icon-height($height, $query: $query);
+  @include outlined-with-leading-icon-height(
+    $height,
+    $label-font-size: $label-font-size,
+    $query: $query
+  );
   // TODO(b/151839219): resize icons and adjust label position
   // @if $density-scale < 0 {
   //   @include icon-mixins.size(icon-variables.$dense-icon-size);
@@ -680,12 +695,13 @@ $_density-config: map.merge(
 /// @param {Number} $height
 /// @param {String} $keyframe-suffix - Optional suffix to use for generated
 ///     floating label keyframes
+/// @param {Number} label-font-size - font size for the floating label. Defaults to 1rem.
 /// @access public
 ///
 @mixin outlined-height(
   $height,
   $keyframe-suffix: text-field-outlined-#{$height},
-  $font-size: 1rem,
+  $label-font-size: 1rem,
   $query: feature-targeting.all()
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
@@ -694,7 +710,7 @@ $_density-config: map.merge(
   // Floating label position
   @include notched-outline-mixins.floating-label-float-position-absolute(
     $positionY,
-    $font-size: $font-size,
+    $font-size: $label-font-size,
     $query: $query
   );
 
@@ -722,12 +738,13 @@ $_density-config: map.merge(
 /// @param {Number} $height
 /// @param {String} $keyframe-suffix - Optional suffix to use for generated
 ///     floating label keyframes
+/// @param {Number} $label-font-size - Font-size for the textfield's floating label. It is necessary tto specify this value to ensure that the notched outline does not cut-off the label when floated, see b/302340517 for more info.
 /// @access public
 ///
 @mixin outlined-with-leading-icon-height(
   $height,
   $keyframe-suffix: null,
-  $font-size: 1rem,
+  $label-font-size: 1rem,
   $query: feature-targeting.all()
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
@@ -739,7 +756,7 @@ $_density-config: map.merge(
     @include _outlined-with-leading-icon-floating-label-position-animation(
       $height,
       $keyframe-suffix,
-      $font-size,
+      $label-font-size,
       $query
     );
   }