From c1991c4c894c48fe77abe09a2791f97dc77d438f Mon Sep 17 00:00:00 2001 From: Material Web Team Date: Tue, 20 Aug 2024 08:51:51 -0700 Subject: [PATCH] feat(textfield,field): add leading/trailing icon spacing tokens PiperOrigin-RevId: 665383710 --- field/internal/_content.scss | 12 ++++-------- testing/tokens.ts | 4 ++++ textfield/internal/_filled-text-field.scss | 5 +++++ textfield/internal/_icon.scss | 11 +++++++++-- textfield/internal/_outlined-text-field.scss | 5 +++++ tokens/_md-comp-filled-field.scss | 8 ++++++++ tokens/_md-comp-filled-text-field.scss | 8 ++++++++ tokens/_md-comp-outlined-field.scss | 8 ++++++++ tokens/_md-comp-outlined-text-field.scss | 8 ++++++++ 9 files changed, 59 insertions(+), 10 deletions(-) diff --git a/field/internal/_content.scss b/field/internal/_content.scss index c462c2cdfa..c3fe0ac3ce 100644 --- 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-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 { diff --git a/testing/tokens.ts b/testing/tokens.ts index 5e1fb8cd27..07b7cb611a 100644 --- a/testing/tokens.ts +++ b/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', diff --git a/textfield/internal/_filled-text-field.scss b/textfield/internal/_filled-text-field.scss index e0788146ba..0c8eee145b 100644 --- a/textfield/internal/_filled-text-field.scss +++ b/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 ) ); diff --git a/textfield/internal/_icon.scss b/textfield/internal/_icon.scss index 5de4258c61..1eb4bbcd1a 100644 --- a/textfield/internal/_icon.scss +++ b/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); diff --git a/textfield/internal/_outlined-text-field.scss b/textfield/internal/_outlined-text-field.scss index 822202c253..b8b12204fe 100644 --- a/textfield/internal/_outlined-text-field.scss +++ b/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 ) ); diff --git a/tokens/_md-comp-filled-field.scss b/tokens/_md-comp-filled-field.scss index f0eb57476d..88d4950006 100644 --- a/tokens/_md-comp-filled-field.scss +++ b/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 ); diff --git a/tokens/_md-comp-filled-text-field.scss b/tokens/_md-comp-filled-text-field.scss index fa53710066..a9f16e1463 100644 --- a/tokens/_md-comp-filled-text-field.scss +++ b/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), ) ); diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss index 026c474fba..a74440439d 100644 --- a/tokens/_md-comp-outlined-field.scss +++ b/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 ); diff --git a/tokens/_md-comp-outlined-text-field.scss b/tokens/_md-comp-outlined-text-field.scss index 9489b70efd..1e47a46416 100644 --- a/tokens/_md-comp-outlined-text-field.scss +++ b/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), ) );