From e6d28af56608f051692e82f67ed10f26a82c6e47 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Mon, 6 May 2024 12:24:41 -0400 Subject: [PATCH] fix(tooltip): rtl places tip in correct position --- components/tooltip/index.css | 1067 ++++++++--------- components/tooltip/stories/tooltip.stories.js | 109 +- 2 files changed, 604 insertions(+), 572 deletions(-) diff --git a/components/tooltip/index.css b/components/tooltip/index.css index fb8b0f74467..20a3fbf9ddc 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -14,367 +14,347 @@ governing permissions and limitations under the License. @import "@spectrum-css/commons/overlay.css"; .spectrum-Tooltip { - --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); - /* override if additional spacing to source is required */ - --spectrum-tooltip-margin: 0px; + /* override if additional spacing to source is required */ + --spectrum-tooltip-margin: 0px; - --spectrum-tooltip-height: var(--spectrum-component-height-75); - --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); + --spectrum-tooltip-height: var(--spectrum-component-height-75); + --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); + --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); - --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); + --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-font-size: var(--spectrum-font-size-75); - --spectrum-tooltip-line-height: var(--spectrum-line-height-100); - --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight); + --spectrum-tooltip-font-size: var(--spectrum-font-size-75); + --spectrum-tooltip-line-height: var(--spectrum-line-height-100); + --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight); - /* horizontal spacing */ - --spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); + /* horizontal spacing */ + --spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75); - /* vertical spacing */ - --spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); - --spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); + /* vertical spacing */ + --spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); + --spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); - /* icon spacing */ - --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); - --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); + /* icon spacing */ + --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); + --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); + --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - /* colors */ - --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); - --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); - --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); + /* colors */ + --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); + --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); + --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); - --spectrum-tooltip-content-color: var(--spectrum-white); + --spectrum-tooltip-content-color: var(--spectrum-white); - /* tip */ - --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); - --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); + /* tip */ + --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); + --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - /* Width and height of square element used to render the tip triangle. */ - --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size); + /* Width and height of square element used to render the tip triangle. */ + --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size); - /* Percentage value of height divided by width, for calculating clip-path within a square tip. */ - --spectrum-tooltip-tip-height-percentage: 50%; + /* Percentage value of height divided by width, for calculating clip-path within a square tip. */ + --spectrum-tooltip-tip-height-percentage: 50%; - /* Tip inset from container edges for clip-paths calculation, to fix hairline gap in Chrome cause by antialiasing. */ - --spectrum-tooltip-tip-antialiasing-inset: 0.5px; + /* Tip inset from container edges for clip-paths calculation, to fix hairline gap in Chrome cause by antialiasing. */ + --spectrum-tooltip-tip-antialiasing-inset: 0.5px; - /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ - --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); + /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ + --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - /* neutral background changes per theme */ - --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral); + /* neutral background changes per theme */ + --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral); } @media (forced-colors: active) { - .spectrum-Tooltip { - border: 1px solid transparent; - } - - .spectrum-Tooltip-tip { - forced-color-adjust: none; - --highcontrast-tooltip-background-color-default: CanvasText; - --highcontrast-tooltip-background-color-informative: CanvasText; - --highcontrast-tooltip-background-color-positive: CanvasText; - --highcontrast-tooltip-background-color-negative: CanvasText; - } + .spectrum-Tooltip { + border: 1px solid transparent; + } + + .spectrum-Tooltip-tip { + forced-color-adjust: none; + --highcontrast-tooltip-background-color-default: CanvasText; + --highcontrast-tooltip-background-color-informative: CanvasText; + --highcontrast-tooltip-background-color-positive: CanvasText; + --highcontrast-tooltip-background-color-negative: CanvasText; + } } - .spectrum-Tooltip { - @extend %spectrum-overlay; + @extend %spectrum-overlay; - position: relative; + position: relative; - display: inline-flex; - flex-direction: row; - align-items: center; - box-sizing: border-box; + display: inline-flex; + flex-direction: row; + align-items: center; + box-sizing: border-box; - vertical-align: top; + vertical-align: top; - inline-size: auto; - padding-inline: var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)); + inline-size: auto; + padding-inline: var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)); - border-radius: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); + border-radius: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); - block-size: auto; - min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); - max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size)); + block-size: auto; + min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); + max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size)); - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); - color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color)); + background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); + color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color)); - font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); - font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight)); - line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); - word-break: break-word; - -webkit-font-smoothing: antialiased; + font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); + font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight)); + line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); + word-break: break-word; + -webkit-font-smoothing: antialiased; - cursor: default; - user-select: none; + cursor: default; + user-select: none; - /* CJK language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height)); - } + /* CJK language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height)); + } - p { - margin: 0; - } + p { + margin: 0; + } } /****** Variants ******/ .spectrum-Tooltip--info { - background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); + background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); } .spectrum-Tooltip--positive { - background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); + background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); } .spectrum-Tooltip--negative { - background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); + background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); } .spectrum-Tooltip.is-open { - @extend %spectrum-overlay--open; + @extend %spectrum-overlay--open; } /****** Tip Base Styles ******/ .spectrum-Tooltip-tip { - position: absolute; - - block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); - inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); - - inset-block-start: 100%; - inset-inline-start: 50%; - transform: translateX(-50%); - - background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); - - /* Default: Pointing down ▽ */ - clip-path: polygon( - 0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), - 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), - 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) - ); - - .spectrum-Tooltip--info & { - background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); - } - - .spectrum-Tooltip--positive & { - background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); - } - - .spectrum-Tooltip--negative & { - background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); - } - - /*** Tip Placement ***/ - /* tip is horizontal at bottom pointing down ▽ */ - .spectrum-Tooltip--top &, - .spectrum-Tooltip--top-left &, - .spectrum-Tooltip--top-right &, - .spectrum-Tooltip--top-start &, - .spectrum-Tooltip--top-end & { - inset-block-start: 100%; - } - - /* tip is horizontal at top pointing up △ */ - .spectrum-Tooltip--bottom &, - .spectrum-Tooltip--bottom-left &, - .spectrum-Tooltip--bottom-right &, - .spectrum-Tooltip--bottom-start &, - .spectrum-Tooltip--bottom-end & { - clip-path: polygon( - 50% calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))), - 0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), - 100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) - ); - inset-block: auto 100%; - } - - /* tip is horizontal and at the edge */ - .spectrum-Tooltip--top-left &, - .spectrum-Tooltip--bottom-left &, - .spectrum-Tooltip--top-right &, - .spectrum-Tooltip--bottom-right &, - .spectrum-Tooltip--top-start &, - .spectrum-Tooltip--bottom-start &, - .spectrum-Tooltip--top-end &, - .spectrum-Tooltip--bottom-end & { - transform: none; - } - - /* tip is horizontal at left △ ▽ */ - .spectrum-Tooltip--top-left &, - .spectrum-Tooltip--bottom-left & { - inset-inline-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - } - - /* tip is horizontal at right △ ▽ */ - .spectrum-Tooltip--top-right &, - .spectrum-Tooltip--bottom-right & { - inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - } - - /* logical property - tip is horizontal at start △ ▽ */ - .spectrum-Tooltip--top-start &, - .spectrum-Tooltip--bottom-start & { - inset-inline: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)) auto; - - &:dir(rtl) { - right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - left: auto; - } - } - - /* logical property - tip is horizontal at end △ ▽ */ - .spectrum-Tooltip--top-end &, - .spectrum-Tooltip--bottom-end & { - inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - - &:dir(rtl) { - left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - right: auto; - } - } - - /* tip right left start end resets ◁ ▷ */ - .spectrum-Tooltip--right &, - .spectrum-Tooltip--right-bottom &, - .spectrum-Tooltip--right-top &, - .spectrum-Tooltip--left &, - .spectrum-Tooltip--left-bottom &, - .spectrum-Tooltip--left-top &, - .spectrum-Tooltip--start &, - .spectrum-Tooltip--start-top &, - .spectrum-Tooltip--start-bottom &, - .spectrum-Tooltip--end &, - .spectrum-Tooltip--end-top &, - .spectrum-Tooltip--end-bottom & { - inset-block-start: 50%; - transform: translateY(-50%); - } - - /* tip is vertical and at edge */ - .spectrum-Tooltip--right-bottom &, - .spectrum-Tooltip--right-top &, - .spectrum-Tooltip--left-bottom &, - .spectrum-Tooltip--left-top &, - .spectrum-Tooltip--start-top &, - .spectrum-Tooltip--start-bottom &, - .spectrum-Tooltip--end-top &, - .spectrum-Tooltip--end-bottom & { - transform: none; - inset-block-start: auto; - } - - /* tip is vertical pointing ◁ left or start, for LTR. */ - .spectrum-Tooltip--right &, - .spectrum-Tooltip--right-bottom &, - .spectrum-Tooltip--right-top &, - .spectrum-Tooltip--end &, - .spectrum-Tooltip--end-top &, - .spectrum-Tooltip--end-bottom & { - clip-path: polygon( - calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))) 50%, - calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, - calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0 - ); - inset-inline: auto 100%; - } - - /* tip is vertical pointing ▷ right or end, for LTR. */ - .spectrum-Tooltip--left &, - .spectrum-Tooltip--left-bottom &, - .spectrum-Tooltip--left-top &, - .spectrum-Tooltip--start &, - .spectrum-Tooltip--start-top &, - .spectrum-Tooltip--start-bottom & { - clip-path: polygon( - calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, - calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50% - ); - inset-inline-start: 100%; - } - - /* tip is vertical at top ◁ ▷ */ - .spectrum-Tooltip--right-top &, - .spectrum-Tooltip--left-top &, - .spectrum-Tooltip--start-top &, - .spectrum-Tooltip--end-top & { - inset-block-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - } - - /* tip is vertical at bottom ◁ ▷ */ - .spectrum-Tooltip--right-bottom &, - .spectrum-Tooltip--left-bottom &, - .spectrum-Tooltip--start-bottom &, - .spectrum-Tooltip--end-bottom & { - inset-block-end: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); - } - - /* tip logical property - Start pointing tip reversed to point toward end ▷ for RTL. */ - .spectrum-Tooltip--end &, - .spectrum-Tooltip--end-top &, - .spectrum-Tooltip--end-bottom & { - &:dir(rtl) { - clip-path: polygon( - calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, - calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50% - ); - right: auto; - left: 100%; - } - } - - /* tip logical property - End pointing tip reversed to point toward start ◁ for RTL. */ - .spectrum-Tooltip--start &, - .spectrum-Tooltip--start-top &, - .spectrum-Tooltip--start-bottom & { - &:dir(rtl) { - clip-path: polygon( - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, - calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, - calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0 - ); - left: auto; - right: 100%; - } - } + position: absolute; + + block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); + inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); + + inset-block-start: 100%; + inset-inline-start: 50%; + transform: translateX(-50%); + + background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); + + /* Default: Pointing down ▽ */ + clip-path: polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)))); + + .spectrum-Tooltip--info & { + background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); + } + + .spectrum-Tooltip--positive & { + background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); + } + + .spectrum-Tooltip--negative & { + background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); + } + + /*** Tip Placement ***/ + /* tip is horizontal at bottom pointing down ▽ */ + .spectrum-Tooltip--top &, + .spectrum-Tooltip--top-left &, + .spectrum-Tooltip--top-right &, + .spectrum-Tooltip--top-start &, + .spectrum-Tooltip--top-end & { + inset-block-start: 100%; + } + + /* tip is horizontal at top pointing up △ */ + .spectrum-Tooltip--bottom &, + .spectrum-Tooltip--bottom-left &, + .spectrum-Tooltip--bottom-right &, + .spectrum-Tooltip--bottom-start &, + .spectrum-Tooltip--bottom-end & { + clip-path: polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))), 0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)))); + inset-block: auto 100%; + } + + /* tip is horizontal and at the edge */ + .spectrum-Tooltip--top-left &, + .spectrum-Tooltip--bottom-left &, + .spectrum-Tooltip--top-right &, + .spectrum-Tooltip--bottom-right &, + .spectrum-Tooltip--top-start &, + .spectrum-Tooltip--bottom-start &, + .spectrum-Tooltip--top-end &, + .spectrum-Tooltip--bottom-end & { + transform: none; + } + + /* tip is horizontal at left △ ▽ */ + .spectrum-Tooltip--top-left &, + .spectrum-Tooltip--bottom-left & { + inset-inline-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + } + + /* tip is horizontal at right △ ▽ */ + .spectrum-Tooltip--top-right &, + .spectrum-Tooltip--bottom-right & { + inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + } + + /* logical property - tip is horizontal at start △ ▽ */ + .spectrum-Tooltip--top-start &, + .spectrum-Tooltip--bottom-start & { + inset-inline: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)) auto; + + &:dir(rtl) { + right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + left: auto; + } + } + + /* logical property - tip is horizontal at end △ ▽ */ + .spectrum-Tooltip--top-end &, + .spectrum-Tooltip--bottom-end & { + inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + + &:dir(rtl) { + left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + right: auto; + } + } + + /* tip right left start end resets ◁ ▷ */ + .spectrum-Tooltip--right &, + .spectrum-Tooltip--right-bottom &, + .spectrum-Tooltip--right-top &, + .spectrum-Tooltip--left &, + .spectrum-Tooltip--left-bottom &, + .spectrum-Tooltip--left-top &, + .spectrum-Tooltip--start &, + .spectrum-Tooltip--start-top &, + .spectrum-Tooltip--start-bottom &, + .spectrum-Tooltip--end &, + .spectrum-Tooltip--end-top &, + .spectrum-Tooltip--end-bottom & { + inset-block-start: 50%; + transform: translateY(-50%); + } + + /* tip is vertical and at edge */ + .spectrum-Tooltip--right-bottom &, + .spectrum-Tooltip--right-top &, + .spectrum-Tooltip--left-bottom &, + .spectrum-Tooltip--left-top &, + .spectrum-Tooltip--start-top &, + .spectrum-Tooltip--start-bottom &, + .spectrum-Tooltip--end-top &, + .spectrum-Tooltip--end-bottom & { + transform: none; + inset-block-start: auto; + } + + /* tip is vertical pointing ◁ left or start, for LTR. */ + .spectrum-Tooltip--right &, + .spectrum-Tooltip--right-bottom &, + .spectrum-Tooltip--right-top &, + .spectrum-Tooltip--end &, + .spectrum-Tooltip--end-top &, + .spectrum-Tooltip--end-bottom & { + clip-path: polygon(calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0); + inset-inline: auto 100%; + } + + /* tip is vertical pointing ▷ right or end, for LTR. */ + .spectrum-Tooltip--left &, + .spectrum-Tooltip--left-bottom &, + .spectrum-Tooltip--left-top &, + .spectrum-Tooltip--start &, + .spectrum-Tooltip--start-top &, + .spectrum-Tooltip--start-bottom & { + clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%); + inset-inline-start: 100%; + } + + /* tip is vertical at top ◁ ▷ */ + .spectrum-Tooltip--right-top &, + .spectrum-Tooltip--left-top &, + .spectrum-Tooltip--start-top &, + .spectrum-Tooltip--end-top & { + inset-block-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + } + + /* tip is vertical at bottom ◁ ▷ */ + .spectrum-Tooltip--right-bottom &, + .spectrum-Tooltip--left-bottom &, + .spectrum-Tooltip--start-bottom &, + .spectrum-Tooltip--end-bottom & { + inset-block-end: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + } + + /* tip logical property - Start pointing tip reversed to point toward end ▷ for RTL. */ + .spectrum-Tooltip--right &, + .spectrum-Tooltip--right-bottom &, + .spectrum-Tooltip--right-top &, + .spectrum-Tooltip--end &, + .spectrum-Tooltip--end-top &, + .spectrum-Tooltip--end-bottom & { + &:dir(rtl) { + clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%); + right: auto; + left: 100%; + } + } + + /* tip logical property - End pointing tip reversed to point toward start ◁ for RTL. */ + .spectrum-Tooltip--left &, + .spectrum-Tooltip--left-bottom &, + .spectrum-Tooltip--left-top &, + .spectrum-Tooltip--start &, + .spectrum-Tooltip--start-top &, + .spectrum-Tooltip--start-bottom & { + &:dir(rtl) { + clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0); + left: auto; + right: 100%; + } + } } /****** Icon ******/ .spectrum-Tooltip-typeIcon { - /* subtract tooltip padding from icon start margin */ - margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline))); - margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end)); - margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start)); - inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width)); - block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height)); - align-self: flex-start; - flex-shrink: 0; + /* subtract tooltip padding from icon start margin */ + margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline))); + margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end)); + margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start)); + inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width)); + block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height)); + align-self: flex-start; + flex-shrink: 0; } /****** Label ******/ .spectrum-Tooltip-label { - /* Make sure line height is correct to prevent problems in Windows */ - line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); - margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start)); - margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end)); + /* Make sure line height is correct to prevent problems in Windows */ + line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); + margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start)); + margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end)); } /****** Tooltip Placement and Animation Direction ******/ @@ -385,13 +365,12 @@ governing permissions and limitations under the License. .spectrum-Tooltip--top-right, .spectrum-Tooltip--top-start, .spectrum-Tooltip--top-end { - margin-block-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) - + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + margin-block-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - /* tooltip animates upward ⬆ */ - &.is-open { - transform: translateY(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); - } + /* tooltip animates upward ⬆ */ + &.is-open { + transform: translateY(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + } } /* tooltip position is at bottom of source */ @@ -400,272 +379,266 @@ governing permissions and limitations under the License. .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start, .spectrum-Tooltip--bottom-end { - margin-block-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) - + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + margin-block-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - /* Tooltip animates downward ⬇ */ - &.is-open { - transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } + /* Tooltip animates downward ⬇ */ + &.is-open { + transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } } /* tooltip position is right of source */ .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))); + margin-inline-start: 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 { - transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } + /* Tooltip animates to right ⮕ */ + &.is-open { + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } } /* tooltip position is left of source */ .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))); + margin-inline-end: 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 { - transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); - } + /* Tooltip animates to left ⬅ */ + &.is-open { + transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + } } /* logical property - tooltip is horizontally at start */ .spectrum-Tooltip--start, .spectrum-Tooltip--start-top, .spectrum-Tooltip--start-bottom { - margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) - + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - - /* LTR read, tooltip animates towards left ⬅ */ - &.is-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 { - transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } - } + margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + + /* LTR read, tooltip animates towards left ⬅ */ + &.is-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 { + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } + } } /* logical property - tooltip is horizontally at end */ .spectrum-Tooltip--end, .spectrum-Tooltip--end-top, .spectrum-Tooltip--end-bottom { - margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) - + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); - - /* LTR read, tooltip animates towards right ⮕ */ - &.is-open { - transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } - - /* RTL read, tooltip animates towards left ⬅ */ - &:dir(rtl) { - &.is-open { - transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); - } - } + margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); + + /* LTR read, tooltip animates towards right ⮕ */ + &.is-open { + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } + + /* RTL read, tooltip animates towards left ⬅ */ + &:dir(rtl) { + &.is-open { + transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)))); + } + } } /*** CSS Hover Animation ***/ .u-tooltip-showOnHover { - display: inline-block; - position: relative; - - .spectrum-Tooltip { - position: absolute; - white-space: nowrap; - - /* Required for animations to work, !important for diff scaling to work */ - visibility: visible !important; - transition: transform var(--spectrum-tooltip-animation-duration) ease-in-out; - } - - .spectrum-Tooltip-label { - /* Don't try to wrap as the mechanism used for this helper does not support wrapping */ - max-inline-size: none; - } - - &:hover .spectrum-Tooltip, - &:focus .spectrum-Tooltip, - &.is-focused .spectrum-Tooltip, - *:focus .spectrum-Tooltip { - opacity: 1; - } - - .spectrum-Tooltip--top, - .spectrum-Tooltip--top-left, - .spectrum-Tooltip--top-right, - .spectrum-Tooltip--top-start, - .spectrum-Tooltip--top-end, - .spectrum-Tooltip--bottom, - .spectrum-Tooltip--bottom-left, - .spectrum-Tooltip--bottom-right, - .spectrum-Tooltip--bottom-start, - .spectrum-Tooltip--bottom-end { - inset-inline-start: 50%; - transform: translate(-50%, 0); - } - - .spectrum-Tooltip--top, - .spectrum-Tooltip--top-left, - .spectrum-Tooltip--top-right, - .spectrum-Tooltip--top-start, - .spectrum-Tooltip--top-end { - inset-block-end: 100%; - } - - .spectrum-Tooltip--bottom, - .spectrum-Tooltip--bottom-left, - .spectrum-Tooltip--bottom-right, - .spectrum-Tooltip--bottom-start, - .spectrum-Tooltip--bottom-end { - inset-block-start: 100%; - } - - .spectrum-Tooltip--left, - .spectrum-Tooltip--left-bottom, - .spectrum-Tooltip--left-top, - .spectrum-Tooltip--right, - .spectrum-Tooltip--right-bottom, - .spectrum-Tooltip--right-top, - .spectrum-Tooltip--start, - .spectrum-Tooltip--start-top, - .spectrum-Tooltip--start-bottom, - .spectrum-Tooltip--end, - .spectrum-Tooltip--end-top, - .spectrum-Tooltip--end-bottom { - inset-block-start: 50%; - transform: translate(0, -50%); - } - - .spectrum-Tooltip--left, - .spectrum-Tooltip--left-bottom, - .spectrum-Tooltip--left-top, - .spectrum-Tooltip--start, - .spectrum-Tooltip--start-top, - .spectrum-Tooltip--start-bottom { - inset-inline-end: 100%; - } - - /* RTL */ - &:dir(rtl) { - .spectrum-Tooltip--start, - .spectrum-Tooltip--start-top, - .spectrum-Tooltip--start-bottom { - left: 100%; - right: auto; - } - } - - .spectrum-Tooltip--right, - .spectrum-Tooltip--right-top, - .spectrum-Tooltip--right-bottom, - .spectrum-Tooltip--end, - .spectrum-Tooltip--end-top, - .spectrum-Tooltip--end-bottom { - inset-inline: 100% auto; - } - - /* RTL */ - &:dir(rtl) { - .spectrum-Tooltip--end, - .spectrum-Tooltip--end-top, - .spectrum-Tooltip--end-bottom { - left: auto; - right: 100%; - } - } - - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--top, - .spectrum-Tooltip--top-left, - .spectrum-Tooltip--top-right, - .spectrum-Tooltip--top-start, - .spectrum-Tooltip--top-end { - transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1)); - } - } - - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--bottom, - .spectrum-Tooltip--bottom-left, - .spectrum-Tooltip--bottom-right, - .spectrum-Tooltip--bottom-start, - .spectrum-Tooltip--bottom-end { - transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); - } - } - - - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--left, - .spectrum-Tooltip--left-bottom, - .spectrum-Tooltip--left-top, - .spectrum-Tooltip--start, - .spectrum-Tooltip--start-top, - .spectrum-Tooltip--start-bottom { - transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); - } - } - - /* stylelint-disable max-nesting-depth */ - /* RTL */ - &:dir(rtl) { - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--start, - .spectrum-Tooltip--start-top, - .spectrum-Tooltip--start-bottom { - transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); - } - } - } - - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--right, - .spectrum-Tooltip--right-top, - .spectrum-Tooltip--right-bottom, - .spectrum-Tooltip--end, - .spectrum-Tooltip--end-top, - .spectrum-Tooltip--end-bottom { - transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); - } - } - - /* RTL */ - &:dir(rtl) { - &:hover, - &:focus, - &.is-focused, - *:focus { - .spectrum-Tooltip--end, - .spectrum-Tooltip--end-top, - .spectrum-Tooltip--end-bottom { - transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); - } - } - } + display: inline-block; + position: relative; + + .spectrum-Tooltip { + position: absolute; + white-space: nowrap; + + /* Required for animations to work, !important for diff scaling to work */ + visibility: visible !important; + transition: transform var(--spectrum-tooltip-animation-duration) ease-in-out; + } + + .spectrum-Tooltip-label { + /* Don't try to wrap as the mechanism used for this helper does not support wrapping */ + max-inline-size: none; + } + + &:hover .spectrum-Tooltip, + &:focus .spectrum-Tooltip, + &.is-focused .spectrum-Tooltip, + *:focus .spectrum-Tooltip { + opacity: 1; + } + + .spectrum-Tooltip--top, + .spectrum-Tooltip--top-left, + .spectrum-Tooltip--top-right, + .spectrum-Tooltip--top-start, + .spectrum-Tooltip--top-end, + .spectrum-Tooltip--bottom, + .spectrum-Tooltip--bottom-left, + .spectrum-Tooltip--bottom-right, + .spectrum-Tooltip--bottom-start, + .spectrum-Tooltip--bottom-end { + inset-inline-start: 50%; + transform: translate(-50%, 0); + } + + .spectrum-Tooltip--top, + .spectrum-Tooltip--top-left, + .spectrum-Tooltip--top-right, + .spectrum-Tooltip--top-start, + .spectrum-Tooltip--top-end { + inset-block-end: 100%; + } + + .spectrum-Tooltip--bottom, + .spectrum-Tooltip--bottom-left, + .spectrum-Tooltip--bottom-right, + .spectrum-Tooltip--bottom-start, + .spectrum-Tooltip--bottom-end { + inset-block-start: 100%; + } + + .spectrum-Tooltip--left, + .spectrum-Tooltip--left-bottom, + .spectrum-Tooltip--left-top, + .spectrum-Tooltip--right, + .spectrum-Tooltip--right-bottom, + .spectrum-Tooltip--right-top, + .spectrum-Tooltip--start, + .spectrum-Tooltip--start-top, + .spectrum-Tooltip--start-bottom, + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + inset-block-start: 50%; + transform: translate(0, -50%); + } + + .spectrum-Tooltip--left, + .spectrum-Tooltip--left-bottom, + .spectrum-Tooltip--left-top, + .spectrum-Tooltip--start, + .spectrum-Tooltip--start-top, + .spectrum-Tooltip--start-bottom { + inset-inline-end: 100%; + } + + /* RTL */ + &:dir(rtl) { + .spectrum-Tooltip--start, + .spectrum-Tooltip--start-top, + .spectrum-Tooltip--start-bottom { + left: 100%; + right: auto; + } + } + + .spectrum-Tooltip--right, + .spectrum-Tooltip--right-top, + .spectrum-Tooltip--right-bottom, + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + inset-inline: 100% auto; + } + + /* RTL */ + &:dir(rtl) { + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + left: auto; + right: 100%; + } + } + + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--top, + .spectrum-Tooltip--top-left, + .spectrum-Tooltip--top-right, + .spectrum-Tooltip--top-start, + .spectrum-Tooltip--top-end { + transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1)); + } + } + + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--bottom, + .spectrum-Tooltip--bottom-left, + .spectrum-Tooltip--bottom-right, + .spectrum-Tooltip--bottom-start, + .spectrum-Tooltip--bottom-end { + transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); + } + } + + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--left, + .spectrum-Tooltip--left-bottom, + .spectrum-Tooltip--left-top, + .spectrum-Tooltip--start, + .spectrum-Tooltip--start-top, + .spectrum-Tooltip--start-bottom { + transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); + } + } + + /* stylelint-disable max-nesting-depth */ + /* RTL */ + &:dir(rtl) { + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--start, + .spectrum-Tooltip--start-top, + .spectrum-Tooltip--start-bottom { + transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); + } + } + } + + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--right, + .spectrum-Tooltip--right-top, + .spectrum-Tooltip--right-bottom, + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%); + } + } + + /* RTL */ + &:dir(rtl) { + &:hover, + &:focus, + &.is-focused, + *:focus { + .spectrum-Tooltip--end, + .spectrum-Tooltip--end-top, + .spectrum-Tooltip--end-bottom { + transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%); + } + } + } } diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js index 9200e651fe4..eb03ce49a01 100644 --- a/components/tooltip/stories/tooltip.stories.js +++ b/components/tooltip/stories/tooltip.stories.js @@ -1,8 +1,36 @@ +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { html } from "lit"; +import { styleMap } from "lit/directives/style-map.js"; import { Template } from "./template"; /** * Tooltips show contextual help or information about specific components when a user hovers or focuses on them. */ +const placementOptions = [ + "top", + "top-left", + "top-right", + "top-start", + "top-end", + "bottom", + "bottom-left", + "bottom-right", + "bottom-start", + "bottom-end", + "right", + "right-bottom", + "right-top", + "left", + "left-bottom", + "left-top", + "start", + "start-top", + "start-bottom", + "end", + "end-top", + "end-bottom", +]; + export default { title: "Components/Tooltip", component: "Tooltip", @@ -33,30 +61,7 @@ export default { type: { summary: "string" }, category: "Component", }, - options: [ - "top", - "top-left", - "top-right", - "top-start", - "top-end", - "bottom", - "bottom-left", - "bottom-right", - "bottom-start", - "bottom-end", - "right", - "right-bottom", - "right-top", - "left", - "left-bottom", - "left-top", - "start", - "start-top", - "start-bottom", - "end", - "end-top", - "end-bottom", - ], + options: placementOptions, control: "select", }, isOpen: { @@ -106,7 +111,61 @@ export default { type: "migrated", }, }, + decorators: [ + (Story, context) => html` + +
+ ${Story(context)} +
+ `, + ], }; -export const Default = Template.bind({}); +const PlacementVariants = (args) => html` + ${window.isChromatic() + ? html` + ${placementOptions.map(option => { + return html` +
+ ${Typography({ + semantics: "detail", + size: "l", + content: [`${option}`], + })} +
+ ${Template({ + ...args, + placement: option, + })} +
+ `; + })}` + : Template(args) + } +`; + +export const Default = PlacementVariants.bind({}); Default.args = {};