fix(textfield)!: rename container-padding-horizontal token

BREAKING CHANGE: Rename `--md-*-field-container-padding-horizontal` to `--md-*-field-leading-space` and `--md-*-field-trailing-space`

PiperOrigin-RevId: 547222914

catalog/stories/components/knob-ui-components.ts

@@ -237,7 +237,8 @@ interface TextInputOptions<T> {
 
 const sharedTextFieldStyles: StyleInfo = {
   'margin-inline-end': '16px',
-  '--md-filled-field-container-padding-horizontal': '8px',
+  '--md-filled-field-leading-space': '8px',
+  '--md-filled-field-trailing-space': '8px',
   '--md-filled-field-container-padding-vertical': '4px',
   'width': '150px',
   'min-width': '150px',

field/lib/_filled-field.scss

@@ -126,11 +126,11 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   }
 
   .field:not(.with-start) .start {
-    padding-inline-start: var(--_container-padding-horizontal);
+    padding-inline-start: var(--_leading-space);
   }
 
   .field:not(.with-end) .end {
-    padding-inline-end: var(--_container-padding-horizontal);
+    padding-inline-end: var(--_trailing-space);
   }
 
   .field:not(.no-label) .container {

field/lib/_outlined-field.scss

@@ -148,7 +148,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     display: flex;
     margin-inline-start: calc(-1 * var(--_outline-label-padding));
     margin-inline-end: var(--_outline-label-padding);
-    max-width: calc(100% - 2 * var(--_container-padding-horizontal));
+    max-width: calc(100% - var(--_leading-space) - var(--_trailing-space));
     padding: 0 var(--_outline-label-padding);
     position: relative;
   }
@@ -230,13 +230,13 @@ $_md-sys-motion: tokens.md-sys-motion-values();
   .outline-start,
   .field:not(.with-start) .start {
     padding-inline-start: max(
-      var(--_container-padding-horizontal),
+      var(--_leading-space),
       $shape-start + var(--_outline-label-padding)
     );
   }
 
   .field:not(.with-end) .end {
-    padding-inline-end: max(var(--_container-padding-horizontal), $shape-end);
+    padding-inline-end: max(var(--_trailing-space), $shape-end);
   }
 
   .outline-start::before,

textfield/lib/_filled-text-field.scss

@@ -21,7 +21,8 @@
       'container-shape-start-end',
       'container-shape-end-end',
       'container-shape-end-start',
-      'container-padding-horizontal',
+      'leading-space',
+      'trailing-space',
       'container-padding-vertical',
       'input-text-prefix-trailing-space',
       'input-text-suffix-leading-space',
@@ -49,7 +50,8 @@
   // Add missing tokens
   $tokens: map.merge(
     (
-      'container-padding-horizontal': 16px,
+      'leading-space': 16px,
+      'trailing-space': 16px,
       'container-padding-vertical': 16px,
       'input-text-prefix-trailing-space': 2px,
       'input-text-suffix-leading-space': 2px,
@@ -93,7 +95,6 @@
         'active-indicator-color': var(--_active-indicator-color),
         'active-indicator-height': var(--_active-indicator-height),
         'container-color': var(--_container-color),
-        'container-padding-horizontal': var(--_container-padding-horizontal),
         '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),
@@ -173,9 +174,11 @@
         'label-text-populated-size': var(--_label-text-populated-size),
         'label-text-type': var(--_label-text-type),
         'leading-content-color': var(--_leading-icon-color),
+        'leading-space': var(--_leading-space),
         'supporting-text-color': var(--_supporting-text-color),
         'supporting-text-type': var(--_supporting-text-type),
         '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
       )

textfield/lib/_outlined-text-field.scss

@@ -20,7 +20,8 @@
       'container-shape-start-end',
       'container-shape-end-end',
       'container-shape-end-start',
-      'container-padding-horizontal',
+      'leading-space',
+      'trailing-space',
       'container-padding-vertical',
       'input-text-prefix-trailing-space',
       'input-text-suffix-leading-space',
@@ -44,7 +45,8 @@
   // Add missing tokens
   $tokens: map.merge(
     (
-      'container-padding-horizontal': 16px,
+      'leading-space': 16px,
+      'trailing-space': 16px,
       'container-padding-vertical': 16px,
       'input-text-prefix-trailing-space': 2px,
       'input-text-suffix-leading-space': 2px,
@@ -81,7 +83,6 @@
     @include outlined-field.theme(
       (
         // go/keep-sorted start
-        'container-padding-horizontal': var(--_container-padding-horizontal),
         '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),
@@ -149,11 +150,13 @@
         'label-text-populated-size': var(--_label-text-populated-size),
         'label-text-type': var(--_label-text-type),
         'leading-content-color': var(--_leading-icon-color),
+        'leading-space': var(--_leading-space),
         'outline-color': var(--_outline-color),
         'outline-width': var(--_outline-width),
         'supporting-text-color': var(--_supporting-text-color),
         'supporting-text-type': var(--_supporting-text-type),
         'trailing-content-color': var(--_trailing-icon-color),
+        'trailing-space': var(--_trailing-space),
         // go/keep-sorted end
       )
     );

tokens/_md-comp-filled-field.scss

@@ -20,7 +20,6 @@ $supported-tokens: (
   'active-indicator-color',
   'active-indicator-height',
   'container-color',
-  'container-padding-horizontal',
   'container-padding-vertical',
   'container-shape',
   'content-color',
@@ -81,12 +80,14 @@ $supported-tokens: (
   'label-text-populated-size',
   'label-text-type',
   'leading-content-color',
+  'leading-space',
   'supporting-text-color',
   'supporting-text-leading-space',
   'supporting-text-top-space',
   'supporting-text-trailing-space',
   'supporting-text-type',
   'trailing-content-color',
+  'trailing-space',
   'with-label-container-padding-vertical',
   // go/keep-sorted end
 );
@@ -109,7 +110,6 @@ $_default: (
     'active-indicator-color': map.get($text-field, 'active-indicator-color'),
     'active-indicator-height': map.get($text-field, 'active-indicator-height'),
     'container-color': map.get($text-field, 'container-color'),
-    'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px),
     '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'),
@@ -214,12 +214,14 @@ $_default: (
       map.get($text-field, 'label-text-populated-size'),
     'label-text-type': map.get($text-field, 'label-text-type'),
     'leading-content-color': map.get($text-field, 'leading-icon-color'),
+    'leading-space': if($exclude-hardcoded-values, null, 16px),
     'supporting-text-color': map.get($text-field, 'supporting-text-color'),
     'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px),
     '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'),
     '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),
     // go/keep-sorted end

tokens/_md-comp-outlined-field.scss

@@ -17,7 +17,6 @@
 
 $supported-tokens: (
   // go/keep-sorted start
-  'container-padding-horizontal',
   'container-padding-vertical',
   'container-shape',
   'content-color',
@@ -73,6 +72,7 @@ $supported-tokens: (
   'label-text-populated-size',
   'label-text-type',
   'leading-content-color',
+  'leading-space',
   'outline-color',
   'outline-label-padding',
   'outline-width',
@@ -82,6 +82,7 @@ $supported-tokens: (
   'supporting-text-trailing-space',
   'supporting-text-type',
   'trailing-content-color',
+  'trailing-space',
   // go/keep-sorted end
 );
 
@@ -100,7 +101,6 @@ $_default: (
 
   $tokens: (
     // go/keep-sorted start
-    'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px),
     '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'),
@@ -188,6 +188,7 @@ $_default: (
       map.get($text-field, 'label-text-populated-size'),
     'label-text-type': map.get($text-field, 'label-text-type'),
     'leading-content-color': map.get($text-field, 'leading-icon-color'),
+    'leading-space': if($exclude-hardcoded-values, null, 16px),
     'outline-color': map.get($text-field, 'outline-color'),
     'outline-label-padding': if($exclude-hardcoded-values, null, 4px),
     'outline-width': map.get($text-field, 'outline-width'),
@@ -197,6 +198,7 @@ $_default: (
     'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px),
     'supporting-text-type': map.get($text-field, 'supporting-text-type'),
     'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
+    'trailing-space': if($exclude-hardcoded-values, null, 16px),
     // go/keep-sorted end
   );