From 47676be1df084391e3ec10d3f6ef7d3744db8dcc Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 7 May 2024 10:17:15 -0400 Subject: [PATCH] feat(tooltip): s2 migration --- .changeset/light-years-speak.md | 23 +++ components/tooltip/index.css | 143 +++++------------- components/tooltip/metadata/mods.md | 55 +++---- components/tooltip/metadata/tooltip.yml | 20 ++- components/tooltip/package.json | 2 +- components/tooltip/stories/template.js | 23 --- components/tooltip/stories/tooltip.stories.js | 15 +- tokens/custom-spectrum/custom-large-vars.css | 3 +- tokens/custom-spectrum/custom-medium-vars.css | 3 +- .../dist/css/spectrum/custom-large-vars.css | 3 +- .../dist/css/spectrum/custom-medium-vars.css | 3 +- tokens/dist/index.css | 6 +- yarn.lock | 2 +- 13 files changed, 120 insertions(+), 181 deletions(-) create mode 100644 .changeset/light-years-speak.md diff --git a/.changeset/light-years-speak.md b/.changeset/light-years-speak.md new file mode 100644 index 00000000000..d92990e0f59 --- /dev/null +++ b/.changeset/light-years-speak.md @@ -0,0 +1,23 @@ +--- +"@spectrum-css/tooltip": major +--- + +feat(tooltip): Spectrum 2 migration + +This migration includes updated colors, rounding, a bigger tip, and the removal of variants (only neutral is available in Spectrum 2). As a result of the deprecation of variants, icons have also been removed. + +The redesign of the tip, specifically the rounding, required a reworking of how we use clip-path and transform. + +Some custom property mods have been removed: + +- `--mod-tooltip-background-color-informative` +- `--mod-tooltip-background-color-negative` +- `--mod-tooltip-background-color-positive` +- `--mod-tooltip-icon-spacing-block-start` +- `--mod-tooltip-icon-spacing-inline-end` +- `--mod-tooltip-icon-spacing-inline-start` +- `--mod-tooltip-icon-width` + +And one mod has been added: + +- `--mod-tooltip-tip-corner-radius` diff --git a/components/tooltip/index.css b/components/tooltip/index.css index a7c6e43f72e..6d1d19f02a2 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -15,19 +15,19 @@ governing permissions and limitations under the License. .spectrum-Tooltip { --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); /* 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-icon-width: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-400); --spectrum-tooltip-font-size: var(--spectrum-font-size-75); - --spectrum-tooltip-line-height: var(--spectrum-line-height-100); + + /* @todo set line-height using font size specific line-height tokens when they are finalized along with the new variable font. */ + --spectrum-tooltip-line-height: 1.2; --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight); @@ -38,50 +38,22 @@ governing permissions and limitations under the License. --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); - - /* 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-gray-25); + --spectrum-tooltip-background-color-default: var(--spectrum-neutral-background-color-default); /* 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); - /* Percentage value of height divided by width, for calculating clip-path within a square tip. */ - --spectrum-tooltip-tip-height-percentage: 50%; + --spectrum-tooltip-tip-height-percentage: 100%; /* 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); + --spectrum-tooltip-pointer-corner-spacing: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); - /* 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; - } + --highcontrast-tooltip-border-width: 0px; } .spectrum-Tooltip { @@ -129,19 +101,6 @@ governing permissions and limitations under the License. } } -/****** Variants ******/ -.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))); -} - .spectrum-Tooltip.is-open { @extend %spectrum-overlay--open; } @@ -153,27 +112,17 @@ governing permissions and limitations under the License. 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-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ - left: 50%; - transform: translateX(-50%); + left: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)))); + transform: rotate(-45deg); 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))); - } + clip-path: polygon(0 0, 100% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 0 100%); - .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))); - } + border-radius: 0 0 0 var(--mod-tooltip-tip-corner-radius, var(--spectrum-tooltip-tip-corner-radius)); /*** Tip Placement ***/ /* tip is horizontal at bottom pointing down ▽ */ @@ -182,7 +131,8 @@ governing permissions and limitations under the License. .spectrum-Tooltip--top-right &, .spectrum-Tooltip--top-start &, .spectrum-Tooltip--top-end & { - inset-block-start: 100%; + inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + transform: rotate(-45deg); } /* tip is horizontal at top pointing up △ */ @@ -191,20 +141,8 @@ governing permissions and limitations under the License. .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; + inset-block: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + transform: rotate(135deg); } /* tip is horizontal at left △ ▽ */ @@ -254,8 +192,7 @@ governing permissions and limitations under the License. .spectrum-Tooltip--end &, .spectrum-Tooltip--end-top &, .spectrum-Tooltip--end-bottom & { - inset-block-start: 50%; - transform: translateY(-50%); + inset-block-start: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)))); } /* tip is vertical and at edge */ @@ -267,7 +204,6 @@ governing permissions and limitations under the License. .spectrum-Tooltip--start-bottom &, .spectrum-Tooltip--end-top &, .spectrum-Tooltip--end-bottom & { - transform: none; inset-block-start: auto; } @@ -278,8 +214,8 @@ governing permissions and limitations under the License. .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%; + inset-inline: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + transform: rotate(45deg); } /* tip is vertical pointing ▷ right or end, for LTR. */ @@ -289,8 +225,8 @@ governing permissions and limitations under the License. .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%; + inset-inline-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + transform: rotate(-135deg); } /* tip is vertical at top ◁ ▷ */ @@ -317,9 +253,9 @@ governing permissions and limitations under the License. .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%); + transform: rotate(-135deg); right: auto; - left: 100%; + left: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); } } @@ -331,25 +267,13 @@ governing permissions and limitations under the License. .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); + transform: rotate(45deg); left: auto; - right: 100%; + right: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); } } } -/****** 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; -} - /****** Label ******/ .spectrum-Tooltip-label { /* Make sure line height is correct to prevent problems in Windows */ @@ -647,3 +571,14 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-Tooltip { + --highcontrast-tooltip-border-width: 1px; + border: var(--highcontrast-tooltip-border-width) solid CanvasText; + } + + .spectrum-Tooltip-tip { + --highcontrast-tooltip-background-color-default: CanvasText; + } +} diff --git a/components/tooltip/metadata/mods.md b/components/tooltip/metadata/mods.md index 7931ae66573..f00d5647a5c 100644 --- a/components/tooltip/metadata/mods.md +++ b/components/tooltip/metadata/mods.md @@ -1,31 +1,24 @@ -| Modifiable custom properties | -| -------------------------------------------- | -| `--mod-overlay-animation-duration` | -| `--mod-overlay-animation-duration-opened` | -| `--mod-tooltip-animation-distance` | -| `--mod-tooltip-background-color-default` | -| `--mod-tooltip-background-color-informative` | -| `--mod-tooltip-background-color-negative` | -| `--mod-tooltip-background-color-positive` | -| `--mod-tooltip-border-radius` | -| `--mod-tooltip-cjk-line-height` | -| `--mod-tooltip-content-color` | -| `--mod-tooltip-font-size` | -| `--mod-tooltip-font-weight` | -| `--mod-tooltip-height` | -| `--mod-tooltip-icon-height` | -| `--mod-tooltip-icon-spacing-block-start` | -| `--mod-tooltip-icon-spacing-inline-end` | -| `--mod-tooltip-icon-spacing-inline-start` | -| `--mod-tooltip-icon-width` | -| `--mod-tooltip-line-height` | -| `--mod-tooltip-margin` | -| `--mod-tooltip-max-inline-size` | -| `--mod-tooltip-pointer-corner-spacing` | -| `--mod-tooltip-spacing-block-end` | -| `--mod-tooltip-spacing-block-start` | -| `--mod-tooltip-spacing-inline` | -| `--mod-tooltip-tip-antialiasing-inset` | -| `--mod-tooltip-tip-block-size` | -| `--mod-tooltip-tip-height-percentage` | -| `--mod-tooltip-tip-square-size` | +| Modifiable custom properties | +| ----------------------------------------- | +| `--mod-overlay-animation-duration` | +| `--mod-overlay-animation-duration-opened` | +| `--mod-tooltip-animation-distance` | +| `--mod-tooltip-background-color-default` | +| `--mod-tooltip-border-radius` | +| `--mod-tooltip-cjk-line-height` | +| `--mod-tooltip-content-color` | +| `--mod-tooltip-font-size` | +| `--mod-tooltip-font-weight` | +| `--mod-tooltip-height` | +| `--mod-tooltip-line-height` | +| `--mod-tooltip-margin` | +| `--mod-tooltip-max-inline-size` | +| `--mod-tooltip-pointer-corner-spacing` | +| `--mod-tooltip-spacing-block-end` | +| `--mod-tooltip-spacing-block-start` | +| `--mod-tooltip-spacing-inline` | +| `--mod-tooltip-tip-antialiasing-inset` | +| `--mod-tooltip-tip-block-size` | +| `--mod-tooltip-tip-corner-radius` | +| `--mod-tooltip-tip-height-percentage` | +| `--mod-tooltip-tip-square-size` | diff --git a/components/tooltip/metadata/tooltip.yml b/components/tooltip/metadata/tooltip.yml index ec589f02056..385aa865adb 100644 --- a/components/tooltip/metadata/tooltip.yml +++ b/components/tooltip/metadata/tooltip.yml @@ -6,15 +6,29 @@ 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 + ### Version 7.0.0 + #### Spectrum 2 migration + This migration includes updated colors, rounding, a bigger tip, and the removal of variants (only neutral is available in Spectrum 2). As a result of the deprecation of variants, icons have also been removed. The redesign of the tip, specifically the rounding, required a reworking of how we use clip-path and transform. Some custom property mods have been removed: + - `--mod-tooltip-background-color-informative` + - `--mod-tooltip-background-color-negative` + - `--mod-tooltip-background-color-positive` + - `--mod-tooltip-icon-spacing-block-start` + - `--mod-tooltip-icon-spacing-inline-end` + - `--mod-tooltip-icon-spacing-inline-start` + - `--mod-tooltip-icon-width` + + And one mod has been added: + - `--mod-tooltip-tip-corner-radius` + + ### Spectrum 1 versions + #### 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 + #### 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: - id: tooltip diff --git a/components/tooltip/package.json b/components/tooltip/package.json index a7922041187..c453139221a 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -23,7 +23,7 @@ ], "peerDependencies": { "@spectrum-css/icon": ">=7", - "@spectrum-css/tokens": ">=14.0.0-next.3" + "@spectrum-css/tokens": ">=14.0.0-next.7" }, "devDependencies": { "@spectrum-css/commons": "^10.0.0" diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js index 1b7c9a73d66..ebaae171134 100644 --- a/components/tooltip/stories/template.js +++ b/components/tooltip/stories/template.js @@ -2,47 +2,24 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; -import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; - import "../index.css"; export const Template = ({ rootClass = "spectrum-Tooltip", label, - variant = "neutral", placement, isOpen = true, isFocused = false, }) => { - let variantIcon; - if (variant === "info") { - variantIcon = "Info"; - } - else if (variant === "positive") { - variantIcon = "CheckmarkCircle"; - } - else if (variant === "negative") { - variantIcon = "Alert"; - } - return html` - ${when(variantIcon, () => - Icon({ - iconName: variantIcon, - size: "m", - customClasses: [`${rootClass}-typeIcon`], - }) - )} ${when( label, () => html`${label}` diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js index 689b2e0240d..117e4579c86 100644 --- a/components/tooltip/stories/tooltip.stories.js +++ b/components/tooltip/stories/tooltip.stories.js @@ -45,16 +45,6 @@ export default { }, control: "text", }, - variant: { - name: "Variant", - type: { name: "string" }, - table: { - type: { summary: "string" }, - category: "Component", - }, - options: ["neutral", "info", "positive", "negative"], - control: "inline-radio", - }, placement: { name: "Placement", description: "The placement of the tooltip relative to the source. Note that placements that start with Left/Right do not change with text direction, but Start/End placements do.", @@ -102,7 +92,6 @@ export default { isOpen: true, isFocused: false, showOnHover: false, - variant: "neutral", label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", }, parameters: { @@ -148,7 +137,7 @@ const PlacementVariants = (args) => html` if (option.startsWith("start") || option.startsWith("end")) return "Changes side with text direction (like a logical property)"; if (option.startsWith("left") || option.startsWith("right")) - return "Text direction does not effect the position"; + return "Text direction does not affect the position"; return null; }; @@ -173,10 +162,12 @@ const PlacementVariants = (args) => html` content: [`${optionDescription()}`], })} `)} +
${Template({ ...args, placement: option, })} +
`; diff --git a/tokens/custom-spectrum/custom-large-vars.css b/tokens/custom-spectrum/custom-large-vars.css index 88b0fdb0983..cf2e7aa1a77 100644 --- a/tokens/custom-spectrum/custom-large-vars.css +++ b/tokens/custom-spectrum/custom-large-vars.css @@ -115,7 +115,8 @@ governing permissions and limitations under the License. --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; + /* To get a square that measures 12px on the diagonal, the sides have to be 10px */ + --spectrum-tooltip-tip-square-size: 10px; --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; diff --git a/tokens/custom-spectrum/custom-medium-vars.css b/tokens/custom-spectrum/custom-medium-vars.css index 2e98c3fd2b6..ba05660497a 100644 --- a/tokens/custom-spectrum/custom-medium-vars.css +++ b/tokens/custom-spectrum/custom-medium-vars.css @@ -114,7 +114,8 @@ governing permissions and limitations under the License. --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); + /* To get a square that measures 10px on the diagonal, the sides have to be 8px */ + --spectrum-tooltip-tip-square-size: 8px; --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; diff --git a/tokens/dist/css/spectrum/custom-large-vars.css b/tokens/dist/css/spectrum/custom-large-vars.css index 1268b3a75bb..9057447781d 100644 --- a/tokens/dist/css/spectrum/custom-large-vars.css +++ b/tokens/dist/css/spectrum/custom-large-vars.css @@ -101,7 +101,8 @@ --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; + /* To get a square that measures 12px on the diagonal, the sides have to be 10px */ + --spectrum-tooltip-tip-square-size:10px; --spectrum-ui-icon-medium-display:none; --spectrum-ui-icon-large-display:block; diff --git a/tokens/dist/css/spectrum/custom-medium-vars.css b/tokens/dist/css/spectrum/custom-medium-vars.css index c476a7ee960..e7df6b9f5c3 100644 --- a/tokens/dist/css/spectrum/custom-medium-vars.css +++ b/tokens/dist/css/spectrum/custom-medium-vars.css @@ -100,7 +100,8 @@ --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); + /* To get a square that measures 10px on the diagonal, the sides have to be 8px */ + --spectrum-tooltip-tip-square-size:8px; --spectrum-ui-icon-medium-display:block; --spectrum-ui-icon-large-display:none; diff --git a/tokens/dist/index.css b/tokens/dist/index.css index 84b437a1ea5..8885b163d6a 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -2264,7 +2264,8 @@ --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; + /* To get a square that measures 12px on the diagonal, the sides have to be 10px */ + --spectrum-tooltip-tip-square-size:10px; --spectrum-ui-icon-medium-display:none; --spectrum-ui-icon-large-display:block; @@ -3683,7 +3684,8 @@ --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); + /* To get a square that measures 10px on the diagonal, the sides have to be 8px */ + --spectrum-tooltip-tip-square-size:8px; --spectrum-ui-icon-medium-display:block; --spectrum-ui-icon-large-display:none; diff --git a/yarn.lock b/yarn.lock index 3874987e519..c38db6faab7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5592,7 +5592,7 @@ __metadata: "@spectrum-css/commons": "npm:^10.0.0" peerDependencies: "@spectrum-css/icon": ">=7" - "@spectrum-css/tokens": ">=14.0.0-next.3" + "@spectrum-css/tokens": ">=14.0.0-next.7" languageName: unknown linkType: soft