From f98b8a138c2cc78cb37b48af26a4c69d141afc3f Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Mon, 6 Nov 2023 14:34:43 -0500 Subject: [PATCH 1/4] fix(tooltip): custom animation distance overrides overlay value --- components/tooltip/index.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/components/tooltip/index.css b/components/tooltip/index.css index 147eedc6440..1ff1774f8ec 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -122,6 +122,7 @@ governing permissions and limitations under the License. } &.is-open { + --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--open; } @@ -399,6 +400,7 @@ governing permissions and limitations under the License. /* tooltip animates upward ⬆ */ &.is-open { + --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--top--open; } } @@ -414,6 +416,7 @@ governing permissions and limitations under the License. /* Tooltip animates downward ⬇ */ &.is-open { + --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--bottom--open; } } @@ -427,6 +430,7 @@ governing permissions and limitations under the License. /* Tooltip animates to right ⮕ */ &.is-open { + --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--right--open; } } @@ -440,6 +444,7 @@ governing permissions and limitations under the License. /* Tooltip animates to left ⬅ */ &.is-open { + --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--left--open; } } @@ -453,12 +458,14 @@ governing permissions and limitations under the License. /* LTR read, tooltip animates towards left ⬅ */ &.is-open { + --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--left--open; } /* RTL read, tooltip animates towards right ⮕ */ [dir="rtl"] & { &.is-open { + --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--right--open; } } @@ -473,12 +480,14 @@ governing permissions and limitations under the License. /* LTR read, tooltip animates towards right ⮕ */ &.is-open { + --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--right--open; } /* RTL read, tooltip animates towards left ⬅ */ [dir="rtl"] & { &.is-open { + --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--left--open; } } From 2c184ad26c26a6a99248d30597c0549888207606 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 7 Nov 2023 14:21:39 -0500 Subject: [PATCH 2/4] fix(tooltip): animation transform defined in tooltip instead of inherited --- components/tooltip/index.css | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/components/tooltip/index.css b/components/tooltip/index.css index 1ff1774f8ec..0efc054e8fe 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -122,7 +122,6 @@ governing permissions and limitations under the License. } &.is-open { - --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); @inherit: %spectrum-overlay--open; } @@ -400,8 +399,7 @@ governing permissions and limitations under the License. /* tooltip animates upward ⬆ */ &.is-open { - --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); - @inherit: %spectrum-overlay--top--open; + transform: translateY(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); } } @@ -416,8 +414,7 @@ governing permissions and limitations under the License. /* Tooltip animates downward ⬇ */ &.is-open { - --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); - @inherit: %spectrum-overlay--bottom--open; + transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); } } @@ -430,8 +427,7 @@ governing permissions and limitations under the License. /* Tooltip animates to right ⮕ */ &.is-open { - --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); - @inherit: %spectrum-overlay--right--open; + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); } } @@ -444,8 +440,7 @@ governing permissions and limitations under the License. /* Tooltip animates to left ⬅ */ &.is-open { - --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); - @inherit: %spectrum-overlay--left--open; + transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); } } @@ -458,15 +453,13 @@ governing permissions and limitations under the License. /* LTR read, tooltip animates towards left ⬅ */ &.is-open { - --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); - @inherit: %spectrum-overlay--left--open; + transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); } /* RTL read, tooltip animates towards right ⮕ */ [dir="rtl"] & { &.is-open { - --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); - @inherit: %spectrum-overlay--right--open; + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); } } } @@ -480,15 +473,13 @@ governing permissions and limitations under the License. /* LTR read, tooltip animates towards right ⮕ */ &.is-open { - --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); - @inherit: %spectrum-overlay--right--open; + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); } /* RTL read, tooltip animates towards left ⬅ */ [dir="rtl"] & { &.is-open { - --spectrum-overlay-animation-distance: var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)); - @inherit: %spectrum-overlay--left--open; + transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); } } } From 5ca49661e004bb3eaaede161e498ef89b64a5088 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 7 Nov 2023 15:48:07 -0500 Subject: [PATCH 3/4] chore(tokens): tooltip animation distance custom tokens for desktop/mobile --- components/tokens/custom-spectrum/custom-large-vars.css | 2 ++ components/tokens/custom-spectrum/custom-medium-vars.css | 2 ++ 2 files changed, 4 insertions(+) diff --git a/components/tokens/custom-spectrum/custom-large-vars.css b/components/tokens/custom-spectrum/custom-large-vars.css index 847412d4196..6df1643d901 100644 --- a/components/tokens/custom-spectrum/custom-large-vars.css +++ b/components/tokens/custom-spectrum/custom-large-vars.css @@ -118,4 +118,6 @@ governing permissions and limitations under the License. --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance: 5px; } diff --git a/components/tokens/custom-spectrum/custom-medium-vars.css b/components/tokens/custom-spectrum/custom-medium-vars.css index dbdf20f81ae..e99d7e3dad4 100644 --- a/components/tokens/custom-spectrum/custom-medium-vars.css +++ b/components/tokens/custom-spectrum/custom-medium-vars.css @@ -117,4 +117,6 @@ governing permissions and limitations under the License. --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); } From 8916055edeb2c8b512c49c6cad2cd23601385ed2 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 7 Nov 2023 17:04:19 -0500 Subject: [PATCH 4/4] chore(tooltip): remove tooltip-animation-distance that now lives in tokens --- components/tooltip/index.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/tooltip/index.css b/components/tooltip/index.css index 0efc054e8fe..42770794a26 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -15,9 +15,6 @@ governing permissions and limitations under the License. .spectrum-Tooltip { --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); - /* animation distance is equal to spacing to source */ - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - /* override if additional spacing to source is required */ --spectrum-tooltip-margin: 0px;