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

PiperOrigin-RevId: 662251081
material-components · Aug 12, 2024 · 0d1ae58 · 0d1ae58
1 parent b8f362a
commit 0d1ae58
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/field/internal/_content.scss b/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-icon-leading-space)
+        var(--_with-leading-icon-trailing-space);
     }
 
     .with-end .end {
-      margin-inline-start: 4px;
+      margin-inline: var(--_with-trailing-icon-leading-space)
+        var(--_with-trailing-icon-trailing-space);
     }
 
     .middle {

diff --git a/tokens/_md-comp-filled-field.scss b/tokens/_md-comp-filled-field.scss
@@ -106,6 +106,10 @@ $supported-tokens: (
   'trailing-space',
   'with-label-bottom-space',
   'with-label-top-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -256,6 +260,12 @@ $_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-icon-leading-space': if($exclude-hardcoded-values, null, 12px),
+    'with-leading-icon-trailing-space':
+      if($exclude-hardcoded-values, null, 16px),
+    'with-trailing-icon-leading-space': if($exclude-hardcoded-values, null, 16px),
+    'with-trailing-icon-trailing-space':
+      if($exclude-hardcoded-values, null, 12px),
     // go/keep-sorted end
   );
 

diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss
@@ -99,6 +99,10 @@ $supported-tokens: (
   'top-space',
   'trailing-content-color',
   'trailing-space',
+  'with-leading-icon-leading-space',
+  'with-leading-icon-trailing-space',
+  'with-trailing-icon-leading-space',
+  'with-trailing-icon-trailing-space',
   // go/keep-sorted end
 );
 
@@ -231,6 +235,12 @@ $_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-icon-leading-space': if($exclude-hardcoded-values, null, 12px),
+    'with-leading-icon-trailing-space':
+      if($exclude-hardcoded-values, null, 16px),
+    'with-trailing-icon-leading-space': if($exclude-hardcoded-values, null, 16px),
+    'with-trailing-icon-trailing-space':
+      if($exclude-hardcoded-values, null, 12px),
     // go/keep-sorted end
   );