From 774d2d0ead40660a76395d6654ba902da18955e7 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Wed, 8 May 2024 08:23:28 -0400 Subject: [PATCH] fix: alignment of tooltip to source on hover --- components/tooltip/index.css | 18 +++++++++++------- components/tooltip/metadata/tooltip.yml | 8 ++++++++ 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/components/tooltip/index.css b/components/tooltip/index.css index 9c58d739a27..a7c6e43f72e 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -154,7 +154,7 @@ governing permissions and limitations under the License. inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); inset-block-start: 100%; - /* stylelint-disable-next-line csstools/use-logical */ + /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ left: 50%; transform: translateX(-50%); @@ -392,7 +392,8 @@ governing permissions and limitations under the License. .spectrum-Tooltip--right, .spectrum-Tooltip--right-bottom, .spectrum-Tooltip--right-top { - margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ + margin-left: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); /* Tooltip animates to right ⮕ */ &.is-open { @@ -404,7 +405,8 @@ governing permissions and limitations under the License. .spectrum-Tooltip--left, .spectrum-Tooltip--left-bottom, .spectrum-Tooltip--left-top { - margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ + margin-right: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); /* Tooltip animates to left ⬅ */ &.is-open { @@ -486,7 +488,8 @@ governing permissions and limitations under the License. .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start, .spectrum-Tooltip--bottom-end { - inset-inline-start: 50%; + /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ + left: 50%; transform: translate(-50%, 0); } @@ -528,7 +531,8 @@ governing permissions and limitations under the License. .spectrum-Tooltip--start, .spectrum-Tooltip--start-top, .spectrum-Tooltip--start-bottom { - inset-inline-end: 100%; + /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ + right: 100%; } /* RTL */ @@ -547,7 +551,8 @@ governing permissions and limitations under the License. .spectrum-Tooltip--end, .spectrum-Tooltip--end-top, .spectrum-Tooltip--end-bottom { - inset-inline: 100% auto; + /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ + left: 100%; } /* RTL */ @@ -600,7 +605,6 @@ governing permissions and limitations under the License. } } - /* stylelint-disable max-nesting-depth */ /* RTL */ &:dir(rtl) { &:hover, diff --git a/components/tooltip/metadata/tooltip.yml b/components/tooltip/metadata/tooltip.yml index 0e66e63387f..ec589f02056 100644 --- a/components/tooltip/metadata/tooltip.yml +++ b/components/tooltip/metadata/tooltip.yml @@ -6,6 +6,14 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - name: Migration Guide description: | + ### Version 6.1.1 + This patch includes tooltip placement adjustments for RTL bugs and increased coverage with Chromatic VRTs. Some clarification on placements: + + - If you use a Start or End placement, the tooltip *will* change to the other side of the source when the text direction (LTR/RTL) is changed + - If you use a Left or Right placement, the tooltip *will not* change sides when text direction is changed + + As a result of the placement specifications, some placements intentionally use non-logical properties in the CSS (particularly for tooltips that show on hover). + ### Tooltip now has 22 directions - 10 of the new directions are logical and should be tested both left-to-right and right-to-left examples: