fix(textfield)!: rename container-padding-vertical tokens

BREAKING CHANGE: Rename `--md-*-field-container-padding-vertical` to `--md-*-field-top-space` and `--md-*-field-bottom-space`. Rename `--md-filled-*-field-with-label-container-padding-vertical` to `--md-filled-*-field-with-label-top-space` and `--md-filled-*-field-with-label-bottom-space` PiperOrigin-RevId: 547278912
material-components · Jul 11, 2023 · 86aba33 · 86aba33
1 parent 447886d
commit 86aba33
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 23 deletions.
diff --git a/catalog/stories/components/knob-ui-components.ts b/catalog/stories/components/knob-ui-components.ts
@@ -239,7 +239,8 @@ const sharedTextFieldStyles: StyleInfo = {
   'margin-inline-end': '16px',
   '--md-filled-field-leading-space': '8px',
   '--md-filled-field-trailing-space': '8px',
-  '--md-filled-field-container-padding-vertical': '4px',
+  '--md-filled-field-top-space': '4px',
+  '--md-filled-field-bottom-space': '4px',
   'width': '150px',
   'min-width': '150px',
 };

diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss
@@ -134,8 +134,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   }
 
   .field:not(.no-label) .container {
-    padding-bottom: var(--_with-label-container-padding-vertical);
-    padding-top: var(--_with-label-container-padding-vertical);
+    padding-bottom: var(--_with-label-bottom-space);
+    padding-top: var(--_with-label-top-space);
   }
 
   .field:not(.no-label) .middle {

diff --git a/field/lib/_shared.scss b/field/lib/_shared.scss
@@ -46,8 +46,8 @@
     flex: 1;
     min-width: min-content;
     overflow: hidden;
-    padding-top: var(--_container-padding-vertical);
-    padding-bottom: var(--_container-padding-vertical);
+    padding-top: var(--_top-space);
+    padding-bottom: var(--_bottom-space);
     position: relative;
   }
 

diff --git a/textfield/lib/_filled-text-field.scss b/textfield/lib/_filled-text-field.scss
@@ -23,7 +23,10 @@
       'container-shape-end-start',
       'leading-space',
       'trailing-space',
-      'container-padding-vertical',
+      'top-space',
+      'bottom-space',
+      'with-label-top-space',
+      'with-label-bottom-space',
       'input-text-prefix-trailing-space',
       'input-text-suffix-leading-space',
       'focus-caret-color'
@@ -52,10 +55,12 @@
     (
       'leading-space': 16px,
       'trailing-space': 16px,
-      'container-padding-vertical': 16px,
+      'top-space': 16px,
+      'bottom-space': 16px,
       'input-text-prefix-trailing-space': 2px,
       'input-text-suffix-leading-space': 2px,
-      'with-label-container-padding-vertical': 8px,
+      'with-label-top-space': 8px,
+      'with-label-bottom-space': 8px,
       // TODO(b/270705687): remove when focus-caret-color token added
       'focus-caret-color':
         map.get(tokens.md-sys-color-values-light(), 'primary'),
@@ -94,8 +99,8 @@
         // go/keep-sorted start
         'active-indicator-color': var(--_active-indicator-color),
         'active-indicator-height': var(--_active-indicator-height),
+        'bottom-space': var(--_bottom-space),
         'container-color': var(--_container-color),
-        'container-padding-vertical': var(--_container-padding-vertical),
         'container-shape-end-end': var(--_container-shape-end-end),
         'container-shape-end-start': var(--_container-shape-end-start),
         'container-shape-start-end': var(--_container-shape-start-end),
@@ -177,10 +182,12 @@
         'leading-space': var(--_leading-space),
         'supporting-text-color': var(--_supporting-text-color),
         'supporting-text-type': var(--_supporting-text-type),
+        'top-space': var(--_top-space),
         'trailing-content-color': var(--_trailing-icon-color),
         'trailing-space': var(--_trailing-space),
-        'with-label-container-padding-vertical':
-          var(--_with-label-container-padding-vertical) // go/keep-sorted end
+        'with-label-bottom-space': var(--_with-label-bottom-space),
+        'with-label-top-space': var(--_with-label-top-space),
+        // go/keep-sorted end
       )
     );
   }

diff --git a/textfield/lib/_outlined-text-field.scss b/textfield/lib/_outlined-text-field.scss
@@ -22,7 +22,8 @@
       'container-shape-end-start',
       'leading-space',
       'trailing-space',
-      'container-padding-vertical',
+      'top-space',
+      'bottom-space',
       'input-text-prefix-trailing-space',
       'input-text-suffix-leading-space',
       'focus-caret-color'
@@ -47,7 +48,8 @@
     (
       'leading-space': 16px,
       'trailing-space': 16px,
-      'container-padding-vertical': 16px,
+      'top-space': 16px,
+      'bottom-space': 16px,
       'input-text-prefix-trailing-space': 2px,
       'input-text-suffix-leading-space': 2px,
       // TODO(b/270705687): remove when focus-caret-color token added
@@ -83,7 +85,7 @@
     @include outlined-field.theme(
       (
         // go/keep-sorted start
-        'container-padding-vertical': var(--_container-padding-vertical),
+        'bottom-space': var(--_bottom-space),
         'container-shape-end-end': var(--_container-shape-end-end),
         'container-shape-end-start': var(--_container-shape-end-start),
         'container-shape-start-end': var(--_container-shape-start-end),
@@ -155,6 +157,7 @@
         'outline-width': var(--_outline-width),
         'supporting-text-color': var(--_supporting-text-color),
         'supporting-text-type': var(--_supporting-text-type),
+        'top-space': var(--_top-space),
         'trailing-content-color': var(--_trailing-icon-color),
         'trailing-space': var(--_trailing-space),
         // go/keep-sorted end

diff --git a/tokens/_md-comp-filled-field.scss b/tokens/_md-comp-filled-field.scss
@@ -19,8 +19,8 @@ $supported-tokens: (
   // go/keep-sorted start
   'active-indicator-color',
   'active-indicator-height',
+  'bottom-space',
   'container-color',
-  'container-padding-vertical',
   'container-shape',
   'content-color',
   'content-type',
@@ -86,9 +86,11 @@ $supported-tokens: (
   'supporting-text-top-space',
   'supporting-text-trailing-space',
   'supporting-text-type',
+  'top-space',
   'trailing-content-color',
   'trailing-space',
-  'with-label-container-padding-vertical',
+  'with-label-bottom-space',
+  'with-label-top-space',
   // go/keep-sorted end
 );
 
@@ -109,8 +111,8 @@ $_default: (
     // go/keep-sorted start
     'active-indicator-color': map.get($text-field, 'active-indicator-color'),
     'active-indicator-height': map.get($text-field, 'active-indicator-height'),
+    'bottom-space': if($exclude-hardcoded-values, null, 16px),
     'container-color': map.get($text-field, 'container-color'),
-    'container-padding-vertical': if($exclude-hardcoded-values, null, 16px),
     'container-shape': map.get($text-field, 'container-shape'),
     'content-color': map.get($text-field, 'input-text-color'),
     'content-type': map.get($text-field, 'input-text-type'),
@@ -220,10 +222,11 @@ $_default: (
     'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px),
     'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px),
     'supporting-text-type': map.get($text-field, 'supporting-text-type'),
+    'top-space': if($exclude-hardcoded-values, null, 16px),
     'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
     'trailing-space': if($exclude-hardcoded-values, null, 16px),
-    'with-label-container-padding-vertical':
-      if($exclude-hardcoded-values, null, 8px),
+    'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px),
+    'with-label-top-space': if($exclude-hardcoded-values, null, 8px),
     // go/keep-sorted end
   );
 

diff --git a/tokens/_md-comp-filled-text-field.scss b/tokens/_md-comp-filled-text-field.scss
@@ -88,7 +88,8 @@ $supported-tokens: (
   'supporting-text-color',
   'supporting-text-type',
   'trailing-icon-color',
-  'trailing-icon-size' // go/keep-sorted end
+  'trailing-icon-size',
+  // go/keep-sorted end
 );
 
 $unsupported-tokens: (

diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss
@@ -17,7 +17,7 @@
 
 $supported-tokens: (
   // go/keep-sorted start
-  'container-padding-vertical',
+  'bottom-space',
   'container-shape',
   'content-color',
   'content-type',
@@ -81,6 +81,7 @@ $supported-tokens: (
   'supporting-text-top-space',
   'supporting-text-trailing-space',
   'supporting-text-type',
+  'top-space',
   'trailing-content-color',
   'trailing-space',
   // go/keep-sorted end
@@ -101,7 +102,7 @@ $_default: (
 
   $tokens: (
     // go/keep-sorted start
-    'container-padding-vertical': if($exclude-hardcoded-values, null, 16px),
+    'bottom-space': if($exclude-hardcoded-values, null, 16px),
     'container-shape': map.get($text-field, 'container-shape'),
     'content-color': map.get($text-field, 'input-text-color'),
     'content-type': map.get($text-field, 'input-text-type'),
@@ -197,6 +198,7 @@ $_default: (
     'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px),
     'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px),
     'supporting-text-type': map.get($text-field, 'supporting-text-type'),
+    'top-space': if($exclude-hardcoded-values, null, 16px),
     'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
     'trailing-space': if($exclude-hardcoded-values, null, 16px),
     // go/keep-sorted end

diff --git a/tokens/_md-comp-outlined-text-field.scss b/tokens/_md-comp-outlined-text-field.scss
@@ -100,7 +100,8 @@ $unsupported-tokens: (
   'supporting-text-line-height',
   'supporting-text-size',
   'supporting-text-tracking',
-  'supporting-text-weight' // go/keep-sorted end
+  'supporting-text-weight',
+  // go/keep-sorted end
 );
 
 $_default: (