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
material-components · Aug 6, 2024 · 2d2e443 · 2d2e443
1 parent 7231e51
commit 2d2e443
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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,