From 86aba33dea126463fe51498196b844f2f41c807b Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Tue, 11 Jul 2023 13:21:25 -0700 Subject: [PATCH] fix(textfield)!: rename container-padding-vertical tokens BREAKING CHANGE: Rename `--md-*-field-container-padding-vertical` to `--md-*-field-top-space` and `--md-*-field-bottom-space`. Rename `--md-filled-*-field-with-label-container-padding-vertical` to `--md-filled-*-field-with-label-top-space` and `--md-filled-*-field-with-label-bottom-space` PiperOrigin-RevId: 547278912 --- .../stories/components/knob-ui-components.ts | 3 ++- field/lib/_filled-field.scss | 4 ++-- field/lib/_shared.scss | 4 ++-- textfield/lib/_filled-text-field.scss | 19 +++++++++++++------ textfield/lib/_outlined-text-field.scss | 9 ++++++--- tokens/_md-comp-filled-field.scss | 13 ++++++++----- tokens/_md-comp-filled-text-field.scss | 3 ++- tokens/_md-comp-outlined-field.scss | 6 ++++-- tokens/_md-comp-outlined-text-field.scss | 3 ++- 9 files changed, 41 insertions(+), 23 deletions(-) diff --git a/catalog/stories/components/knob-ui-components.ts b/catalog/stories/components/knob-ui-components.ts index 6d645961f9..7a6a55a1ac 100644 --- a/catalog/stories/components/knob-ui-components.ts +++ b/catalog/stories/components/knob-ui-components.ts @@ -239,7 +239,8 @@ const sharedTextFieldStyles: StyleInfo = { 'margin-inline-end': '16px', '--md-filled-field-leading-space': '8px', '--md-filled-field-trailing-space': '8px', - '--md-filled-field-container-padding-vertical': '4px', + '--md-filled-field-top-space': '4px', + '--md-filled-field-bottom-space': '4px', 'width': '150px', 'min-width': '150px', }; diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss index 48ae65b6e2..b47764797d 100644 --- a/field/lib/_filled-field.scss +++ b/field/lib/_filled-field.scss @@ -134,8 +134,8 @@ $_md-sys-motion: tokens.md-sys-motion-values(); } .field:not(.no-label) .container { - padding-bottom: var(--_with-label-container-padding-vertical); - padding-top: var(--_with-label-container-padding-vertical); + padding-bottom: var(--_with-label-bottom-space); + padding-top: var(--_with-label-top-space); } .field:not(.no-label) .middle { diff --git a/field/lib/_shared.scss b/field/lib/_shared.scss index 4ec8802797..c0514ae831 100644 --- a/field/lib/_shared.scss +++ b/field/lib/_shared.scss @@ -46,8 +46,8 @@ flex: 1; min-width: min-content; overflow: hidden; - padding-top: var(--_container-padding-vertical); - padding-bottom: var(--_container-padding-vertical); + padding-top: var(--_top-space); + padding-bottom: var(--_bottom-space); position: relative; } diff --git a/textfield/lib/_filled-text-field.scss b/textfield/lib/_filled-text-field.scss index e4f2805e32..c927ffb9db 100644 --- a/textfield/lib/_filled-text-field.scss +++ b/textfield/lib/_filled-text-field.scss @@ -23,7 +23,10 @@ 'container-shape-end-start', 'leading-space', 'trailing-space', - 'container-padding-vertical', + 'top-space', + 'bottom-space', + 'with-label-top-space', + 'with-label-bottom-space', 'input-text-prefix-trailing-space', 'input-text-suffix-leading-space', 'focus-caret-color' @@ -52,10 +55,12 @@ ( 'leading-space': 16px, 'trailing-space': 16px, - 'container-padding-vertical': 16px, + 'top-space': 16px, + 'bottom-space': 16px, 'input-text-prefix-trailing-space': 2px, 'input-text-suffix-leading-space': 2px, - 'with-label-container-padding-vertical': 8px, + 'with-label-top-space': 8px, + 'with-label-bottom-space': 8px, // TODO(b/270705687): remove when focus-caret-color token added 'focus-caret-color': map.get(tokens.md-sys-color-values-light(), 'primary'), @@ -94,8 +99,8 @@ // go/keep-sorted start 'active-indicator-color': var(--_active-indicator-color), 'active-indicator-height': var(--_active-indicator-height), + 'bottom-space': var(--_bottom-space), 'container-color': var(--_container-color), - '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), 'container-shape-start-end': var(--_container-shape-start-end), @@ -177,10 +182,12 @@ 'leading-space': var(--_leading-space), 'supporting-text-color': var(--_supporting-text-color), 'supporting-text-type': var(--_supporting-text-type), + 'top-space': var(--_top-space), '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 + 'with-label-bottom-space': var(--_with-label-bottom-space), + 'with-label-top-space': var(--_with-label-top-space), + // go/keep-sorted end ) ); } diff --git a/textfield/lib/_outlined-text-field.scss b/textfield/lib/_outlined-text-field.scss index 98a6a43a96..377d8d5b63 100644 --- a/textfield/lib/_outlined-text-field.scss +++ b/textfield/lib/_outlined-text-field.scss @@ -22,7 +22,8 @@ 'container-shape-end-start', 'leading-space', 'trailing-space', - 'container-padding-vertical', + 'top-space', + 'bottom-space', 'input-text-prefix-trailing-space', 'input-text-suffix-leading-space', 'focus-caret-color' @@ -47,7 +48,8 @@ ( 'leading-space': 16px, 'trailing-space': 16px, - 'container-padding-vertical': 16px, + 'top-space': 16px, + 'bottom-space': 16px, 'input-text-prefix-trailing-space': 2px, 'input-text-suffix-leading-space': 2px, // TODO(b/270705687): remove when focus-caret-color token added @@ -83,7 +85,7 @@ @include outlined-field.theme( ( // go/keep-sorted start - 'container-padding-vertical': var(--_container-padding-vertical), + 'bottom-space': var(--_bottom-space), 'container-shape-end-end': var(--_container-shape-end-end), 'container-shape-end-start': var(--_container-shape-end-start), 'container-shape-start-end': var(--_container-shape-start-end), @@ -155,6 +157,7 @@ 'outline-width': var(--_outline-width), 'supporting-text-color': var(--_supporting-text-color), 'supporting-text-type': var(--_supporting-text-type), + 'top-space': var(--_top-space), '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 c747d882b2..04ba70df50 100644 --- a/tokens/_md-comp-filled-field.scss +++ b/tokens/_md-comp-filled-field.scss @@ -19,8 +19,8 @@ $supported-tokens: ( // go/keep-sorted start 'active-indicator-color', 'active-indicator-height', + 'bottom-space', 'container-color', - 'container-padding-vertical', 'container-shape', 'content-color', 'content-type', @@ -86,9 +86,11 @@ $supported-tokens: ( 'supporting-text-top-space', 'supporting-text-trailing-space', 'supporting-text-type', + 'top-space', 'trailing-content-color', 'trailing-space', - 'with-label-container-padding-vertical', + 'with-label-bottom-space', + 'with-label-top-space', // go/keep-sorted end ); @@ -109,8 +111,8 @@ $_default: ( // go/keep-sorted start 'active-indicator-color': map.get($text-field, 'active-indicator-color'), 'active-indicator-height': map.get($text-field, 'active-indicator-height'), + 'bottom-space': if($exclude-hardcoded-values, null, 16px), 'container-color': map.get($text-field, 'container-color'), - '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'), 'content-type': map.get($text-field, 'input-text-type'), @@ -220,10 +222,11 @@ $_default: ( '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'), + '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-label-container-padding-vertical': - if($exclude-hardcoded-values, null, 8px), + 'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px), + 'with-label-top-space': if($exclude-hardcoded-values, null, 8px), // go/keep-sorted end ); diff --git a/tokens/_md-comp-filled-text-field.scss b/tokens/_md-comp-filled-text-field.scss index a122dc8bc3..a1254e26d2 100644 --- a/tokens/_md-comp-filled-text-field.scss +++ b/tokens/_md-comp-filled-text-field.scss @@ -88,7 +88,8 @@ $supported-tokens: ( 'supporting-text-color', 'supporting-text-type', 'trailing-icon-color', - 'trailing-icon-size' // go/keep-sorted end + 'trailing-icon-size', + // go/keep-sorted end ); $unsupported-tokens: ( diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss index 5077efc330..394f5742c7 100644 --- a/tokens/_md-comp-outlined-field.scss +++ b/tokens/_md-comp-outlined-field.scss @@ -17,7 +17,7 @@ $supported-tokens: ( // go/keep-sorted start - 'container-padding-vertical', + 'bottom-space', 'container-shape', 'content-color', 'content-type', @@ -81,6 +81,7 @@ $supported-tokens: ( 'supporting-text-top-space', 'supporting-text-trailing-space', 'supporting-text-type', + 'top-space', 'trailing-content-color', 'trailing-space', // go/keep-sorted end @@ -101,7 +102,7 @@ $_default: ( $tokens: ( // go/keep-sorted start - 'container-padding-vertical': if($exclude-hardcoded-values, null, 16px), + 'bottom-space': if($exclude-hardcoded-values, null, 16px), 'container-shape': map.get($text-field, 'container-shape'), 'content-color': map.get($text-field, 'input-text-color'), 'content-type': map.get($text-field, 'input-text-type'), @@ -197,6 +198,7 @@ $_default: ( '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'), + '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), // go/keep-sorted end diff --git a/tokens/_md-comp-outlined-text-field.scss b/tokens/_md-comp-outlined-text-field.scss index cc2cd73700..0e8f105305 100644 --- a/tokens/_md-comp-outlined-text-field.scss +++ b/tokens/_md-comp-outlined-text-field.scss @@ -100,7 +100,8 @@ $unsupported-tokens: ( 'supporting-text-line-height', 'supporting-text-size', 'supporting-text-tracking', - 'supporting-text-weight' // go/keep-sorted end + 'supporting-text-weight', + // go/keep-sorted end ); $_default: (