feat(tooltip): s2 migration (#2743)

Author: Melissa Thompson

.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`

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;
+	}
+}

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`           |

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 <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/tooltip/metadata/mods.md">here</a>.
   - 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

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"