refactor(textfield)!: remove container-height token

PiperOrigin-RevId: 501699310
material-components · Jan 13, 2023 · 1d81416 · 1d81416
1 parent 31391eb
commit 1d81416
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 19 deletions.
diff --git a/autocomplete/lib/_filled-autocomplete.scss b/autocomplete/lib/_filled-autocomplete.scss
@@ -13,7 +13,7 @@
 @use '../../menusurface/menu-surface';
 @use '../../sass/theme';
 @use '../../textfield/filled-text-field';
-@use '../../tokens/v0_150' as tokens;
+@use '../../tokens';
 @use './shared';
 
 $custom-property-prefix: 'filled-autocomplete';
@@ -53,7 +53,6 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
         active-indicator-height: var(--_text-field-active-indicator-height),
         caret-color: var(--_text-field-caret-color),
         container-color: var(--_text-field-container-color),
-        container-height: var(--_text-field-container-height),
         disabled-active-indicator-color:
           var(--_text-field-disabled-active-indicator-color),
         disabled-active-indicator-height:

diff --git a/autocomplete/lib/_outlined-autocomplete.scss b/autocomplete/lib/_outlined-autocomplete.scss
@@ -13,7 +13,7 @@
 @use '../../menusurface/menu-surface';
 @use '../../sass/theme';
 @use '../../textfield/outlined-text-field';
-@use '../../tokens/v0_150' as tokens;
+@use '../../tokens';
 @use './shared';
 
 $custom-property-prefix: 'outlined-autocomplete';
@@ -58,7 +58,6 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
     @include outlined-text-field.theme(
       (
         caret-color: var(--_text-field-caret-color),
-        container-height: var(--_text-field-container-height),
         disabled-input-text-color: var(--_text-field-disabled-input-text-color),
         disabled-input-text-opacity:
           var(--_text-field-disabled-input-text-opacity),

diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss
@@ -46,8 +46,6 @@ $_animation-duration: 150ms;
     // If bottom corner radii are set, prevent the active indicator from
     // overflowing.
     overflow: hidden;
-    padding-top: var(--_container-padding-vertical);
-    padding-bottom: var(--_container-padding-vertical);
     // Needed for negative z-index below to place background and state layer
     // behind content.
     z-index: 0;
@@ -148,6 +146,11 @@ $_animation-duration: 150ms;
   }
 
   .md3-field:not(.md3-field--no-label) {
+    .md3-field__container {
+      padding-bottom: var(--_with-label-container-padding-vertical);
+      padding-top: var(--_with-label-container-padding-vertical);
+    }
+
     .md3-field__middle {
       padding-top: var(--_label-text-populated-line-height);
     }

diff --git a/field/lib/_md-comp-filled-field.scss b/field/lib/_md-comp-filled-field.scss
@@ -4,7 +4,7 @@
 //
 
 @use 'sass:map';
-@use '../../tokens/v0_150' as tokens;
+@use '../../tokens';
 
 $_default-deps: (
   md-sys-color: tokens.md-sys-color-values-light(),
@@ -50,7 +50,7 @@ $_default-deps: (
     $values,
     (
       container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
-      container-padding-vertical: if($exclude-hardcoded-values, null, 8px),
+      container-padding-vertical: if($exclude-hardcoded-values, null, 16px),
       content-color: map.get($text-field-values, input-text-color),
       disabled-content-color:
         map.get($text-field-values, disabled-input-text-color),
@@ -65,6 +65,8 @@ $_default-deps: (
       hover-content-color: map.get($text-field-values, hover-input-text-color),
       supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
       supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
+      with-label-container-padding-vertical:
+        if($exclude-hardcoded-values, null, 8px),
     )
   );
 

diff --git a/field/lib/_md-comp-outlined-field.scss b/field/lib/_md-comp-outlined-field.scss
@@ -4,7 +4,7 @@
 //
 
 @use 'sass:map';
-@use '../../tokens/v0_150' as tokens;
+@use '../../tokens';
 
 $_default-deps: (
   md-sys-color: tokens.md-sys-color-values-light(),
@@ -50,7 +50,7 @@ $_default-deps: (
     $values,
     (
       container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
-      container-padding-vertical: if($exclude-hardcoded-values, null, 8px),
+      container-padding-vertical: if($exclude-hardcoded-values, null, 16px),
       content-color: map.get($text-field-values, input-text-color),
       disabled-content-color:
         map.get($text-field-values, disabled-input-text-color),

diff --git a/field/lib/_shared.scss b/field/lib/_shared.scss
@@ -34,6 +34,8 @@
     display: flex;
     flex: 1;
     flex-basis: var(--_container-height);
+    padding-top: var(--_container-padding-vertical);
+    padding-bottom: var(--_container-padding-vertical);
     position: relative;
   }
 

diff --git a/switch/lib/_handle.scss b/switch/lib/_handle.scss
@@ -30,8 +30,8 @@
     border-start-end-radius: var(--_handle-shape-start-end);
     border-end-end-radius: var(--_handle-shape-end-end);
     border-end-start-radius: var(--_handle-shape-end-start);
-    height: var(--_handle-height);
-    width: var(--_handle-width);
+    height: 20px;
+    width: 20px;
     background-color: var(--_selected-handle-color);
 
     // TODO(b/230484095): Use token instead of hard coded values

diff --git a/switch/lib/_switch.scss b/switch/lib/_switch.scss
@@ -17,7 +17,7 @@
 @use '../../sass/theme';
 @use '../../sass/touch-target';
 @use '../../sass/var';
-@use '../../tokens/v0_150' as tokens;
+@use '../../tokens';
 
 @use './track';
 @use './handle';

diff --git a/textfield/lib/_filled-text-field.scss b/textfield/lib/_filled-text-field.scss
@@ -8,7 +8,7 @@
 @use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
-@use '../../tokens/v0_150' as tokens;
+@use '../../tokens';
 @use './shared';
 
 @mixin theme($tokens) {
@@ -36,9 +36,10 @@
   $tokens: map.merge(
     (
       container-padding-horizontal: 16px,
-      container-padding-vertical: 8px,
+      container-padding-vertical: 16px,
       input-text-prefix-padding: 2px,
       input-text-suffix-padding: 2px,
+      with-label-container-padding-vertical: 8px,
     ),
     $tokens
   );
@@ -56,7 +57,6 @@
         active-indicator-color: var(--_active-indicator-color),
         active-indicator-height: var(--_active-indicator-height),
         container-color: var(--_container-color),
-        container-height: var(--_container-height),
         container-padding-horizontal: var(--_container-padding-horizontal),
         container-padding-vertical: var(--_container-padding-vertical),
         container-shape-start-start: var(--_container-shape-start-start),
@@ -141,6 +141,8 @@
         supporting-text-weight: var(--_supporting-text-weight),
         trailing-icon-color: var(--_trailing-icon-color),
         trailing-icon-size: var(--_trailing-icon-size),
+        with-label-container-padding-vertical:
+          var(--_with-label-container-padding-vertical),
       )
     );
   }

diff --git a/textfield/lib/_outlined-text-field.scss b/textfield/lib/_outlined-text-field.scss
@@ -8,7 +8,7 @@
 @use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
-@use '../../tokens/v0_150' as tokens;
+@use '../../tokens';
 @use './shared';
 
 @mixin theme($tokens) {
@@ -37,7 +37,7 @@
   $tokens: map.merge(
     (
       container-padding-horizontal: 16px,
-      container-padding-vertical: 8px,
+      container-padding-vertical: 16px,
       input-text-prefix-padding: 2px,
       input-text-suffix-padding: 2px,
       outline-label-padding: 4px,
@@ -55,7 +55,8 @@
 
     @include outlined-field.theme(
       (
-        container-height: var(--_container-height),
+        container-padding-horizontal: var(--_container-padding-horizontal),
+        container-padding-vertical: var(--_container-padding-vertical),
         container-shape-start-start: var(--_container-shape-start-start),
         container-shape-start-end: var(--_container-shape-start-end),
         container-shape-end-end: var(--_container-shape-end-end),