feat(textfield,field): add leading/trailing icon spacing tokens

PiperOrigin-RevId: 665383710

Author: material-web-copybara

field/internal/_content.scss

@@ -47,18 +47,14 @@ $_enter-delay: $_label-duration - $_visible-duration;
       justify-content: center;
     }
 
-    // TODO(b/239188049): remove when layout tokens are ready
-    .with-start .start,
-    .with-end .end {
-      min-width: 48px;
-    }
-
     .with-start .start {
-      margin-inline-end: 4px;
+      margin-inline: var(--_with-leading-content-leading-space)
+        var(--_content-space);
     }
 
     .with-end .end {
-      margin-inline-start: 4px;
+      margin-inline: var(--_content-space)
+        var(--_with-trailing-content-trailing-space);
     }
 
     .middle {

testing/tokens.ts

@@ -180,11 +180,15 @@ const CSS_SHORTHAND_PROPERTIES = [
   'grid-template',
   'list-style',
   'margin',
+  'margin-block',
+  'margin-inline',
   'mask',
   'offset',
   'outline',
   'overflow',
   'padding',
+  'padding-block',
+  'padding-inline',
   'place-content',
   'place-items',
   'place-self',

textfield/internal/_filled-text-field.scss

@@ -55,6 +55,7 @@
         'content-font': var(--_input-text-font),
         'content-line-height': var(--_input-text-line-height),
         'content-size': var(--_input-text-size),
+        'content-space': var(--_icon-input-space),
         'content-weight': var(--_input-text-weight),
         'disabled-active-indicator-color':
           var(--_disabled-active-indicator-color),
@@ -142,6 +143,10 @@
         'trailing-space': var(--_trailing-space),
         'with-label-bottom-space': var(--_with-label-bottom-space),
         'with-label-top-space': var(--_with-label-top-space),
+        'with-leading-content-leading-space':
+          var(--_with-leading-icon-leading-space),
+        'with-trailing-content-trailing-space':
+          var(--_with-trailing-icon-trailing-space),
         // go/keep-sorted end
       )
     );

textfield/internal/_icon.scss

@@ -7,21 +7,28 @@
   .icon {
     color: currentColor;
     display: flex;
+    align-items: center;
+    justify-content: center;
     fill: currentColor;
+    position: relative;
   }
 
   .icon ::slotted(*) {
     // Remove excess whitespace below inline elements
     display: flex;
+    // Absolutely position the icons within their `icon-size` container. This
+    // supports icon buttons whose actual width and height is greater than the
+    // 24px `icon-size` due to their 40px ripple.
+    position: absolute;
   }
 
-  [hasstart] .icon.leading {
+  [has-start] .icon.leading {
     font-size: var(--_leading-icon-size);
     height: var(--_leading-icon-size);
     width: var(--_leading-icon-size);
   }
 
-  [hasend] .icon.trailing {
+  [has-end] .icon.trailing {
     font-size: var(--_trailing-icon-size);
     height: var(--_trailing-icon-size);
     width: var(--_trailing-icon-size);

textfield/internal/_outlined-text-field.scss

@@ -47,6 +47,7 @@
         'content-font': var(--_input-text-font),
         'content-line-height': var(--_input-text-line-height),
         'content-size': var(--_input-text-size),
+        'content-space': var(--_icon-input-space),
         'content-weight': var(--_input-text-weight),
         'disabled-content-color': var(--_disabled-input-text-color),
         'disabled-content-opacity': var(--_disabled-input-text-opacity),
@@ -122,6 +123,10 @@
         'top-space': var(--_top-space),
         'trailing-content-color': var(--_trailing-icon-color),
         'trailing-space': var(--_trailing-space),
+        'with-leading-content-leading-space':
+          var(--_with-leading-icon-leading-space),
+        'with-trailing-content-trailing-space':
+          var(--_with-trailing-icon-trailing-space),
         // go/keep-sorted end
       )
     );

tokens/_md-comp-filled-field.scss

@@ -32,6 +32,7 @@ $supported-tokens: (
   'content-font',
   'content-line-height',
   'content-size',
+  'content-space',
   'content-weight',
   'disabled-active-indicator-color',
   'disabled-active-indicator-height',
@@ -106,6 +107,8 @@ $supported-tokens: (
   'trailing-space',
   'with-label-bottom-space',
   'with-label-top-space',
+  'with-leading-content-leading-space',
+  'with-trailing-content-trailing-space',
   // go/keep-sorted end
 );
 
@@ -137,6 +140,7 @@ $_default: (
     'content-font': map.get($text-field, 'input-text-font'),
     'content-line-height': map.get($text-field, 'input-text-line-height'),
     'content-size': map.get($text-field, 'input-text-size'),
+    'content-space': if($exclude-hardcoded-values, null, 16px),
     'content-weight': map.get($text-field, 'input-text-weight'),
     'disabled-active-indicator-color':
       map.get($text-field, 'disabled-active-indicator-color'),
@@ -256,6 +260,10 @@ $_default: (
     'trailing-space': if($exclude-hardcoded-values, null, 16px),
     'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px),
     'with-label-top-space': if($exclude-hardcoded-values, null, 8px),
+    'with-leading-content-leading-space':
+      if($exclude-hardcoded-values, null, 12px),
+    'with-trailing-content-trailing-space':
+      if($exclude-hardcoded-values, null, 12px),
     // go/keep-sorted end
   );
 

tokens/_md-comp-filled-text-field.scss

@@ -82,6 +82,7 @@ $supported-tokens: (
   'hover-state-layer-opacity',
   'hover-supporting-text-color',
   'hover-trailing-icon-color',
+  'icon-input-space',
   'input-text-color',
   'input-text-font',
   'input-text-line-height',
@@ -113,6 +114,8 @@ $supported-tokens: (
   'trailing-space',
   'with-label-bottom-space',
   'with-label-top-space',
+  'with-leading-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -143,6 +146,7 @@ $_default: (
   $new-tokens: map.merge(
     shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
     (
+      'icon-input-space': if($exclude-hardcoded-values, null, 16px),
       'leading-space': if($exclude-hardcoded-values, null, 16px),
       'trailing-space': if($exclude-hardcoded-values, null, 16px),
       'top-space': if($exclude-hardcoded-values, null, 16px),
@@ -155,6 +159,10 @@ $_default: (
       'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px),
       // TODO(b/270705687): remove when focus-caret-color token added
       'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 12px),
+      'with-trailing-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 12px),
     )
   );
 

tokens/_md-comp-outlined-field.scss

@@ -29,6 +29,7 @@ $supported-tokens: (
   'content-font',
   'content-line-height',
   'content-size',
+  'content-space',
   'content-weight',
   'disabled-content-color',
   'disabled-content-opacity',
@@ -99,6 +100,8 @@ $supported-tokens: (
   'top-space',
   'trailing-content-color',
   'trailing-space',
+  'with-leading-content-leading-space',
+  'with-trailing-content-trailing-space',
   // go/keep-sorted end
 );
 
@@ -127,6 +130,7 @@ $_default: (
     'content-font': map.get($text-field, 'input-text-font'),
     'content-line-height': map.get($text-field, 'input-text-line-height'),
     'content-size': map.get($text-field, 'input-text-size'),
+    'content-space': if($exclude-hardcoded-values, null, 16px),
     'content-weight': map.get($text-field, 'input-text-weight'),
     'disabled-content-color': map.get($text-field, 'disabled-input-text-color'),
     'disabled-content-opacity':
@@ -231,6 +235,10 @@ $_default: (
     '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-leading-content-leading-space':
+      if($exclude-hardcoded-values, null, 12px),
+    'with-trailing-content-trailing-space':
+      if($exclude-hardcoded-values, null, 12px),
     // go/keep-sorted end
   );
 

tokens/_md-comp-outlined-text-field.scss

@@ -72,6 +72,7 @@ $supported-tokens: (
   'hover-outline-width',
   'hover-supporting-text-color',
   'hover-trailing-icon-color',
+  'icon-input-space',
   'input-text-color',
   'input-text-font',
   'input-text-line-height',
@@ -103,6 +104,8 @@ $supported-tokens: (
   'trailing-icon-color',
   'trailing-icon-size',
   'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -132,6 +135,7 @@ $_default: (
   $new-tokens: map.merge(
     shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
     (
+      'icon-input-space': if($exclude-hardcoded-values, null, 16px),
       'leading-space': if($exclude-hardcoded-values, null, 16px),
       'trailing-space': if($exclude-hardcoded-values, null, 16px),
       'top-space': if($exclude-hardcoded-values, null, 16px),
@@ -142,6 +146,10 @@ $_default: (
         if($exclude-hardcoded-values, null, 2px),
       // TODO(b/270705687): remove when focus-caret-color token added
       'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'),
+      'with-leading-icon-leading-space':
+        if($exclude-hardcoded-values, null, 12px),
+      'with-trailing-icon-trailing-space':
+        if($exclude-hardcoded-values, null, 12px),
     )
   );