From 447886da2e5c648837704a3fc7a4552b5ba6e80a Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Tue, 11 Jul 2023 10:07:31 -0700 Subject: [PATCH] fix(textfield)!: rename container-padding-horizontal token BREAKING CHANGE: Rename `--md-*-field-container-padding-horizontal` to `--md-*-field-leading-space` and `--md-*-field-trailing-space` PiperOrigin-RevId: 547222914 --- catalog/stories/components/knob-ui-components.ts | 3 ++- field/lib/_filled-field.scss | 4 ++-- field/lib/_outlined-field.scss | 6 +++--- textfield/lib/_filled-text-field.scss | 9 ++++++--- textfield/lib/_outlined-text-field.scss | 9 ++++++--- tokens/_md-comp-filled-field.scss | 6 ++++-- tokens/_md-comp-outlined-field.scss | 6 ++++-- 7 files changed, 27 insertions(+), 16 deletions(-) diff --git a/catalog/stories/components/knob-ui-components.ts b/catalog/stories/components/knob-ui-components.ts index d281189d88..6d645961f9 100644 --- a/catalog/stories/components/knob-ui-components.ts +++ b/catalog/stories/components/knob-ui-components.ts @@ -237,7 +237,8 @@ interface TextInputOptions { const sharedTextFieldStyles: StyleInfo = { 'margin-inline-end': '16px', - '--md-filled-field-container-padding-horizontal': '8px', + '--md-filled-field-leading-space': '8px', + '--md-filled-field-trailing-space': '8px', '--md-filled-field-container-padding-vertical': '4px', 'width': '150px', 'min-width': '150px', diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss index 1c4b47afef..48ae65b6e2 100644 --- a/field/lib/_filled-field.scss +++ b/field/lib/_filled-field.scss @@ -126,11 +126,11 @@ $_md-sys-motion: tokens.md-sys-motion-values(); } .field:not(.with-start) .start { - padding-inline-start: var(--_container-padding-horizontal); + padding-inline-start: var(--_leading-space); } .field:not(.with-end) .end { - padding-inline-end: var(--_container-padding-horizontal); + padding-inline-end: var(--_trailing-space); } .field:not(.no-label) .container { diff --git a/field/lib/_outlined-field.scss b/field/lib/_outlined-field.scss index cb74a819b0..88e28b56f2 100644 --- a/field/lib/_outlined-field.scss +++ b/field/lib/_outlined-field.scss @@ -148,7 +148,7 @@ $_md-sys-motion: tokens.md-sys-motion-values(); display: flex; margin-inline-start: calc(-1 * var(--_outline-label-padding)); margin-inline-end: var(--_outline-label-padding); - max-width: calc(100% - 2 * var(--_container-padding-horizontal)); + max-width: calc(100% - var(--_leading-space) - var(--_trailing-space)); padding: 0 var(--_outline-label-padding); position: relative; } @@ -230,13 +230,13 @@ $_md-sys-motion: tokens.md-sys-motion-values(); .outline-start, .field:not(.with-start) .start { padding-inline-start: max( - var(--_container-padding-horizontal), + var(--_leading-space), $shape-start + var(--_outline-label-padding) ); } .field:not(.with-end) .end { - padding-inline-end: max(var(--_container-padding-horizontal), $shape-end); + padding-inline-end: max(var(--_trailing-space), $shape-end); } .outline-start::before, diff --git a/textfield/lib/_filled-text-field.scss b/textfield/lib/_filled-text-field.scss index f04826431e..e4f2805e32 100644 --- a/textfield/lib/_filled-text-field.scss +++ b/textfield/lib/_filled-text-field.scss @@ -21,7 +21,8 @@ 'container-shape-start-end', 'container-shape-end-end', 'container-shape-end-start', - 'container-padding-horizontal', + 'leading-space', + 'trailing-space', 'container-padding-vertical', 'input-text-prefix-trailing-space', 'input-text-suffix-leading-space', @@ -49,7 +50,8 @@ // Add missing tokens $tokens: map.merge( ( - 'container-padding-horizontal': 16px, + 'leading-space': 16px, + 'trailing-space': 16px, 'container-padding-vertical': 16px, 'input-text-prefix-trailing-space': 2px, 'input-text-suffix-leading-space': 2px, @@ -93,7 +95,6 @@ 'active-indicator-color': var(--_active-indicator-color), 'active-indicator-height': var(--_active-indicator-height), 'container-color': var(--_container-color), - 'container-padding-horizontal': var(--_container-padding-horizontal), 'container-padding-vertical': var(--_container-padding-vertical), 'container-shape-end-end': var(--_container-shape-end-end), 'container-shape-end-start': var(--_container-shape-end-start), @@ -173,9 +174,11 @@ 'label-text-populated-size': var(--_label-text-populated-size), 'label-text-type': var(--_label-text-type), 'leading-content-color': var(--_leading-icon-color), + 'leading-space': var(--_leading-space), 'supporting-text-color': var(--_supporting-text-color), 'supporting-text-type': var(--_supporting-text-type), 'trailing-content-color': var(--_trailing-icon-color), + 'trailing-space': var(--_trailing-space), 'with-label-container-padding-vertical': var(--_with-label-container-padding-vertical) // go/keep-sorted end ) diff --git a/textfield/lib/_outlined-text-field.scss b/textfield/lib/_outlined-text-field.scss index 514c322089..98a6a43a96 100644 --- a/textfield/lib/_outlined-text-field.scss +++ b/textfield/lib/_outlined-text-field.scss @@ -20,7 +20,8 @@ 'container-shape-start-end', 'container-shape-end-end', 'container-shape-end-start', - 'container-padding-horizontal', + 'leading-space', + 'trailing-space', 'container-padding-vertical', 'input-text-prefix-trailing-space', 'input-text-suffix-leading-space', @@ -44,7 +45,8 @@ // Add missing tokens $tokens: map.merge( ( - 'container-padding-horizontal': 16px, + 'leading-space': 16px, + 'trailing-space': 16px, 'container-padding-vertical': 16px, 'input-text-prefix-trailing-space': 2px, 'input-text-suffix-leading-space': 2px, @@ -81,7 +83,6 @@ @include outlined-field.theme( ( // go/keep-sorted start - 'container-padding-horizontal': var(--_container-padding-horizontal), 'container-padding-vertical': var(--_container-padding-vertical), 'container-shape-end-end': var(--_container-shape-end-end), 'container-shape-end-start': var(--_container-shape-end-start), @@ -149,11 +150,13 @@ 'label-text-populated-size': var(--_label-text-populated-size), 'label-text-type': var(--_label-text-type), 'leading-content-color': var(--_leading-icon-color), + 'leading-space': var(--_leading-space), 'outline-color': var(--_outline-color), 'outline-width': var(--_outline-width), 'supporting-text-color': var(--_supporting-text-color), 'supporting-text-type': var(--_supporting-text-type), 'trailing-content-color': var(--_trailing-icon-color), + 'trailing-space': var(--_trailing-space), // go/keep-sorted end ) ); diff --git a/tokens/_md-comp-filled-field.scss b/tokens/_md-comp-filled-field.scss index a37e98b73a..c747d882b2 100644 --- a/tokens/_md-comp-filled-field.scss +++ b/tokens/_md-comp-filled-field.scss @@ -20,7 +20,6 @@ $supported-tokens: ( 'active-indicator-color', 'active-indicator-height', 'container-color', - 'container-padding-horizontal', 'container-padding-vertical', 'container-shape', 'content-color', @@ -81,12 +80,14 @@ $supported-tokens: ( 'label-text-populated-size', 'label-text-type', 'leading-content-color', + 'leading-space', 'supporting-text-color', 'supporting-text-leading-space', 'supporting-text-top-space', 'supporting-text-trailing-space', 'supporting-text-type', 'trailing-content-color', + 'trailing-space', 'with-label-container-padding-vertical', // go/keep-sorted end ); @@ -109,7 +110,6 @@ $_default: ( 'active-indicator-color': map.get($text-field, 'active-indicator-color'), 'active-indicator-height': map.get($text-field, 'active-indicator-height'), 'container-color': map.get($text-field, 'container-color'), - 'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px), 'container-padding-vertical': if($exclude-hardcoded-values, null, 16px), 'container-shape': map.get($text-field, 'container-shape'), 'content-color': map.get($text-field, 'input-text-color'), @@ -214,12 +214,14 @@ $_default: ( map.get($text-field, 'label-text-populated-size'), 'label-text-type': map.get($text-field, 'label-text-type'), 'leading-content-color': map.get($text-field, 'leading-icon-color'), + 'leading-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-color': map.get($text-field, 'supporting-text-color'), 'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px), 'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-type': map.get($text-field, 'supporting-text-type'), 'trailing-content-color': map.get($text-field, 'trailing-icon-color'), + 'trailing-space': if($exclude-hardcoded-values, null, 16px), 'with-label-container-padding-vertical': if($exclude-hardcoded-values, null, 8px), // go/keep-sorted end diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss index 35a1a85139..5077efc330 100644 --- a/tokens/_md-comp-outlined-field.scss +++ b/tokens/_md-comp-outlined-field.scss @@ -17,7 +17,6 @@ $supported-tokens: ( // go/keep-sorted start - 'container-padding-horizontal', 'container-padding-vertical', 'container-shape', 'content-color', @@ -73,6 +72,7 @@ $supported-tokens: ( 'label-text-populated-size', 'label-text-type', 'leading-content-color', + 'leading-space', 'outline-color', 'outline-label-padding', 'outline-width', @@ -82,6 +82,7 @@ $supported-tokens: ( 'supporting-text-trailing-space', 'supporting-text-type', 'trailing-content-color', + 'trailing-space', // go/keep-sorted end ); @@ -100,7 +101,6 @@ $_default: ( $tokens: ( // go/keep-sorted start - 'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px), 'container-padding-vertical': if($exclude-hardcoded-values, null, 16px), 'container-shape': map.get($text-field, 'container-shape'), 'content-color': map.get($text-field, 'input-text-color'), @@ -188,6 +188,7 @@ $_default: ( map.get($text-field, 'label-text-populated-size'), 'label-text-type': map.get($text-field, 'label-text-type'), 'leading-content-color': map.get($text-field, 'leading-icon-color'), + 'leading-space': if($exclude-hardcoded-values, null, 16px), 'outline-color': map.get($text-field, 'outline-color'), 'outline-label-padding': if($exclude-hardcoded-values, null, 4px), 'outline-width': map.get($text-field, 'outline-width'), @@ -197,6 +198,7 @@ $_default: ( 'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px), 'supporting-text-type': map.get($text-field, 'supporting-text-type'), 'trailing-content-color': map.get($text-field, 'trailing-icon-color'), + 'trailing-space': if($exclude-hardcoded-values, null, 16px), // go/keep-sorted end );