From bdc33d18a8669e5dbff2550b60091e2b6b6bd0f7 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 14 Nov 2023 11:52:12 -0500 Subject: [PATCH 1/2] fix(stepper): no longer touches InfieldButton classes --- components/infieldbutton/index.css | 15 ++++++++++++++- components/infieldbutton/metadata/mods.md | 3 +++ components/stepper/index.css | 22 ++++------------------ components/stepper/metadata/mods.md | 1 - 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index bccacc53346..aebc2d4c4ae 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -44,6 +44,8 @@ governing permissions and limitations under the License. --spectrum-neutral-content-color-key-focus ); + --spectrum-infield-button-fill-justify-content: center; + &:disabled { --mod-infield-button-background-color: var( --mod-infield-button-background-color-disabled, @@ -327,7 +329,10 @@ governing permissions and limitations under the License. /* center icon */ display: flex; align-items: center; - justify-content: center; + justify-content: var( + --mod-infield-button-fill-justify-content, + var(--spectrum-infield-button-fill-justify-content) + ); transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; } @@ -390,6 +395,14 @@ governing permissions and limitations under the License. --mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset) ); + border-end-end-radius: var( + --mod-infield-button-stacked-bottom-border-radius-end-end, + var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)) + ); + border-block-end-width: var( + --mod-infield-button-stacked-bottom-border-block-end-width, + var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)) + ); } } diff --git a/components/infieldbutton/metadata/mods.md b/components/infieldbutton/metadata/mods.md index 62953aedf50..f76ca098e60 100644 --- a/components/infieldbutton/metadata/mods.md +++ b/components/infieldbutton/metadata/mods.md @@ -21,6 +21,7 @@ | `--mod-infield-button-border-width` | | `--mod-infield-button-border-width-quiet` | | `--mod-infield-button-edge-to-fill` | +| `--mod-infield-button-fill-justify-content` | | `--mod-infield-button-fill-padding` | | `--mod-infield-button-height` | | `--mod-infield-button-icon-color` | @@ -33,6 +34,8 @@ | `--mod-infield-button-icon-color-key-focus-disabled` | | `--mod-infield-button-inner-edge-to-fill` | | `--mod-infield-button-stacked-border-radius-reset` | +| `--mod-infield-button-stacked-bottom-border-block-end-width` | +| `--mod-infield-button-stacked-bottom-border-radius-end-end` | | `--mod-infield-button-stacked-bottom-border-radius-end-start` | | `--mod-infield-button-stacked-fill-padding-inline` | | `--mod-infield-button-stacked-fill-padding-inner` | diff --git a/components/stepper/index.css b/components/stepper/index.css index cfcf9dde55f..d26cc237c1b 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -226,19 +226,13 @@ governing permissions and limitations under the License. } .spectrum-Stepper-button { + --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-stacked-bottom-border-radius-end-end: 0; + --mod-infield-button-stacked-bottom-border-radius-end-start: 0; + --mod-infield-button-fill-justify-content: flex-end; padding: 0; } - .spectrum-Stepper-button.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill { - border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - border-end-end-radius: 0; - border-end-start-radius: 0; - } - - .spectrum-Stepper-button .spectrum-InfieldButton-fill { - justify-content: flex-end; - } - .spectrum-Stepper-input, .spectrum-Stepper-buttons { background-color: transparent; @@ -307,14 +301,6 @@ governing permissions and limitations under the License. transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out; } -.spectrum-Stepper-button.spectrum-InfieldButton--top { - padding-block-start: calc(var(--mod-stepper-button-padding, var(--spectrum-stepper-button-padding)) - var(--mod-stepper-border-width, var(--spectrum-stepper-border-width))); -} - -.spectrum-Stepper-button.spectrum-InfieldButton--bottom { - padding-block-end: calc(var(--mod-stepper-button-padding, var(--spectrum-stepper-button-padding)) - var(--mod-stepper-border-width, var(--spectrum-stepper-border-width))); -} - /* hide-stepper */ .spectrum-Stepper.hide-stepper .spectrum-Stepper-input { border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); diff --git a/components/stepper/metadata/mods.md b/components/stepper/metadata/mods.md index ce2df8d4188..daa54e86e02 100644 --- a/components/stepper/metadata/mods.md +++ b/components/stepper/metadata/mods.md @@ -15,7 +15,6 @@ | `--mod-stepper-border-width` | | `--mod-stepper-button-background-color-focus` | | `--mod-stepper-button-background-color-keyboard-focus` | -| `--mod-stepper-button-padding` | | `--mod-stepper-button-width` | | `--mod-stepper-button-width-quiet` | | `--mod-stepper-buttons-background-color` | From dbc7e3dd2a4aca187f70107c83b77c58c9e0dc4a Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Thu, 16 Nov 2023 14:25:33 -0500 Subject: [PATCH 2/2] fix(stepper): button size + space match infieldbutton spec --- components/stepper/index.css | 3 ++- components/stepper/metadata/mods.md | 1 + components/stepper/themes/express.css | 1 + components/stepper/themes/spectrum.css | 5 +++-- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/components/stepper/index.css b/components/stepper/index.css index d26cc237c1b..93eedf16b3c 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -36,7 +36,7 @@ governing permissions and limitations under the License. /*** MODS for sub components ***/ --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color))); - --mod-infield-button-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width)); --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); &.spectrum-Stepper--sizeS { @@ -227,6 +227,7 @@ governing permissions and limitations under the License. .spectrum-Stepper-button { --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); --mod-infield-button-stacked-bottom-border-radius-end-end: 0; --mod-infield-button-stacked-bottom-border-radius-end-start: 0; --mod-infield-button-fill-justify-content: flex-end; diff --git a/components/stepper/metadata/mods.md b/components/stepper/metadata/mods.md index daa54e86e02..aa81c18f4f0 100644 --- a/components/stepper/metadata/mods.md +++ b/components/stepper/metadata/mods.md @@ -15,6 +15,7 @@ | `--mod-stepper-border-width` | | `--mod-stepper-button-background-color-focus` | | `--mod-stepper-button-background-color-keyboard-focus` | +| `--mod-stepper-button-border-width` | | `--mod-stepper-button-width` | | `--mod-stepper-button-width-quiet` | | `--mod-stepper-buttons-background-color` | diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index c500033395b..f5b575d2439 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -23,6 +23,7 @@ governing permissions and limitations under the License. --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; --spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --spectrum-stepper-button-border-width: 0; --spectrum-stepper-border-color: var(--spectrum-gray-400); --spectrum-stepper-border-color-hover: var(--spectrum-gray-500); diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index b92c4a3ad90..a59b448068d 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -22,6 +22,9 @@ governing permissions and limitations under the License. --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); + --spectrum-stepper-button-border-radius-reset: 0px; + --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); + --spectrum-stepper-border-color: var(--spectrum-gray-500); --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); @@ -33,8 +36,6 @@ governing permissions and limitations under the License. --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - --spectrum-stepper-button-border-radius-reset: 0px; - --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300); --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); }