From 2d2e4431c4a7ae898a06fa95c25394a7e7f6b240 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Mon, 5 Aug 2024 20:47:02 -0700
Subject: [PATCH] feat(field): add tokens for spacing

add tokens for

- overflow-wrap
- white-space
- min width of leading and trailing content
- inline spacings for leading and trailing content

PiperOrigin-RevId: 659780386
---
 field/internal/_content.scss        | 20 +++++++++++++-------
 tokens/_md-comp-filled-field.scss   | 24 +++++++++++++++++++++++-
 tokens/_md-comp-outlined-field.scss | 25 ++++++++++++++++++++++++-
 3 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/field/internal/_content.scss b/field/internal/_content.scss
index c462c2cdfa..f9beb77990 100644
--- a/field/internal/_content.scss
+++ b/field/internal/_content.scss
@@ -47,18 +47,22 @@ $_enter-delay: $_label-duration - $_visible-duration;
       justify-content: center;
     }
 
-    // TODO(b/239188049): remove when layout tokens are ready
-    .with-start .start,
+    .with-start .start {
+      min-width: var(--_leading-content-min-width);
+    }
+
     .with-end .end {
-      min-width: 48px;
+      min-width: var(--_trailing-content-min-width);
     }
 
     .with-start .start {
-      margin-inline-end: 4px;
+      margin-inline: var(--_leading-content-leading-space)
+        var(--_leading-content-trailing-space);
     }
 
     .with-end .end {
-      margin-inline-start: 4px;
+      margin-inline: var(--_trailing-content-leading-space)
+        var(--_trailing-content-trailing-space);
     }
 
     .middle {
@@ -105,8 +109,10 @@ $_enter-delay: $_label-duration - $_visible-duration;
       font-weight: var(--_content-weight);
       width: 100%;
       // Reverting values before "all: unset"
-      overflow-wrap: revert; // Needed to break words in textarea
-      white-space: revert; // Needed for Firefox textarea
+      overflow-wrap: var(
+        --_content-overflow-wrap
+      ); // Needed to break words in textarea
+      white-space: var(--_content-white-space); // Needed for Firefox textarea
     }
 
     .content ::slotted(:not(textarea)) {
diff --git a/tokens/_md-comp-filled-field.scss b/tokens/_md-comp-filled-field.scss
index f0eb57476d..b7208054d8 100644
--- a/tokens/_md-comp-filled-field.scss
+++ b/tokens/_md-comp-filled-field.scss
@@ -31,8 +31,10 @@ $supported-tokens: (
   'content-color',
   'content-font',
   'content-line-height',
+  'content-overflow-wrap',
   'content-size',
   'content-weight',
+  'content-white-space',
   'disabled-active-indicator-color',
   'disabled-active-indicator-height',
   'disabled-active-indicator-opacity',
@@ -92,6 +94,9 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-content-color',
+  'leading-content-leading-space',
+  'leading-content-min-width',
+  'leading-content-trailing-space',
   'leading-space',
   'supporting-text-color',
   'supporting-text-font',
@@ -103,6 +108,9 @@ $supported-tokens: (
   'supporting-text-weight',
   'top-space',
   'trailing-content-color',
+  'trailing-content-leading-space',
+  'trailing-content-min-width',
+  'trailing-content-trailing-space',
   'trailing-space',
   'with-label-bottom-space',
   'with-label-top-space',
@@ -259,7 +267,21 @@ $_default: (
     // go/keep-sorted end
   );
 
-  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
+  $new-tokens: map.merge(
+    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
+    (
+      // go/keep-sorted start
+      'content-overflow-wrap': 'revert',
+      'content-white-space': 'revert',
+      'leading-content-leading-space': 0px,
+      'leading-content-min-width': 48px,
+      'leading-content-trailing-space': 4px,
+      'trailing-content-leading-space': 4px,
+      'trailing-content-min-width': 48px,
+      'trailing-content-trailing-space': 0px,
+      // go/keep-sorted end
+    )
+  );
   $tokens: validate.values(
     $tokens,
     $supported-tokens: $supported-tokens,
diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss
index 026c474fba..1c5015916d 100644
--- a/tokens/_md-comp-outlined-field.scss
+++ b/tokens/_md-comp-outlined-field.scss
@@ -28,8 +28,10 @@ $supported-tokens: (
   'content-color',
   'content-font',
   'content-line-height',
+  'content-overflow-wrap',
   'content-size',
   'content-weight',
+  'content-white-space',
   'disabled-content-color',
   'disabled-content-opacity',
   'disabled-label-text-color',
@@ -84,6 +86,9 @@ $supported-tokens: (
   'label-text-size',
   'label-text-weight',
   'leading-content-color',
+  'leading-content-leading-space',
+  'leading-content-min-width',
+  'leading-content-trailing-space',
   'leading-space',
   'outline-color',
   'outline-label-padding',
@@ -98,6 +103,9 @@ $supported-tokens: (
   'supporting-text-weight',
   'top-space',
   'trailing-content-color',
+  'trailing-content-leading-space',
+  'trailing-content-min-width',
+  'trailing-content-trailing-space',
   'trailing-space',
   // go/keep-sorted end
 );
@@ -234,7 +242,22 @@ $_default: (
     // go/keep-sorted end
   );
 
-  $new-tokens: shape.get-new-logical-shape-tokens($tokens, 'container-shape');
+  $new-tokens: map.merge(
+    shape.get-new-logical-shape-tokens($tokens, 'container-shape'),
+    (
+      // go/keep-sorted start
+      'content-overflow-wrap': 'revert',
+      'content-white-space': 'revert',
+      'leading-content-leading-space': 0px,
+      'leading-content-min-width': 48px,
+      'leading-content-trailing-space': 4px,
+      'trailing-content-leading-space': 4px,
+      'trailing-content-min-width': 48px,
+      'trailing-content-trailing-space': 0px,
+      // go/keep-sorted end
+    )
+  );
+
   $tokens: validate.values(
     $tokens,
     $supported-tokens: $supported-tokens,