fix(tooltip): restore negative and informative semantic variants (#3641)

* fix(tooltip): restore negative and informative semantic variants

* fix(tooltip): remove positive semantic variant test

* fix(tooltip): deduplicate high contrast color vars

Author: cdransf

.changeset/stale-pans-carry.md

@@ -0,0 +1,12 @@
+---
+"@spectrum-css/tooltip": minor
+---
+
+#### S2: restore negative and informative semantic variants
+
+This restores the negative and informative tooltip semantic variant styles, story controls and test cases. Icons have been removed for all variants as they are not present in the specifications provided by design.
+
+##### Restored mods
+
+`--mod-tooltip-background-color-informative`
+`--mod-tooltip-background-color-negative"`

components/tooltip/dist/metadata.json

@@ -35,6 +35,8 @@
     ".spectrum-Tooltip--end-top.is-open:dir(rtl)",
     ".spectrum-Tooltip--end.is-open",
     ".spectrum-Tooltip--end.is-open:dir(rtl)",
+    ".spectrum-Tooltip--info",
+    ".spectrum-Tooltip--info .spectrum-Tooltip-tip",
     ".spectrum-Tooltip--left",
     ".spectrum-Tooltip--left .spectrum-Tooltip-tip",
     ".spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl)",
@@ -47,6 +49,8 @@
     ".spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)",
     ".spectrum-Tooltip--left-top.is-open",
     ".spectrum-Tooltip--left.is-open",
+    ".spectrum-Tooltip--negative",
+    ".spectrum-Tooltip--negative .spectrum-Tooltip-tip",
     ".spectrum-Tooltip--right",
     ".spectrum-Tooltip--right .spectrum-Tooltip-tip",
     ".spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl)",
@@ -302,6 +306,8 @@
     "--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-border-radius",
     "--mod-tooltip-cjk-line-height",
     "--mod-tooltip-content-color",
@@ -324,8 +330,9 @@
   "component": [
     "--spectrum-tooltip-animation-distance",
     "--spectrum-tooltip-animation-duration",
-    "--spectrum-tooltip-backgound-color-default-neutral",
     "--spectrum-tooltip-background-color-default",
+    "--spectrum-tooltip-background-color-informative",
+    "--spectrum-tooltip-background-color-negative",
     "--spectrum-tooltip-border-radius",
     "--spectrum-tooltip-cjk-line-height",
     "--spectrum-tooltip-content-color",
@@ -358,8 +365,9 @@
     "--spectrum-corner-radius-400",
     "--spectrum-font-size-75",
     "--spectrum-gray-25",
+    "--spectrum-informative-background-color-default",
+    "--spectrum-negative-background-color-default",
     "--spectrum-neutral-background-color-default",
-    "--spectrum-neutral-subdued-background-color-default",
     "--spectrum-regular-font-weight",
     "--spectrum-spacing-75"
   ],

components/tooltip/index.css

@@ -14,8 +14,6 @@
 @import "@spectrum-css/commons/overlay.css";
 
 .spectrum-Tooltip {
-	--spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
-
 	--spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
 	--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
 
@@ -43,6 +41,10 @@
 	--spectrum-tooltip-content-color: var(--spectrum-gray-25);
 	--spectrum-tooltip-background-color-default: var(--spectrum-neutral-background-color-default);
 
+	/* colors */
+	--spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
+	--spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);
+
 	/* tip */
 	--spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
 
@@ -57,6 +59,7 @@
 
 	--highcontrast-tooltip-border-width: 0px;
 }
+
 .spectrum-Tooltip {
 	@extend %spectrum-overlay;
 
@@ -102,6 +105,15 @@
 	}
 }
 
+/****** Variants ******/
+.spectrum-Tooltip--info {
+	background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
+}
+
+.spectrum-Tooltip--negative {
+	background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
+}
+
 .spectrum-Tooltip.is-open {
 	@extend %spectrum-overlay--open;
 }
@@ -125,6 +137,14 @@
 
 	border-radius: 0 0 0 var(--mod-tooltip-tip-corner-radius, var(--spectrum-tooltip-tip-corner-radius));
 
+	.spectrum-Tooltip--info & {
+		background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
+	}
+
+	.spectrum-Tooltip--negative & {
+		background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
+	}
+
 	/*** Tip Placement ***/
 	/* tip is horizontal at bottom pointing down ▽ */
 	.spectrum-Tooltip--top &,
@@ -576,7 +596,7 @@
 @media (forced-colors: active) {
 	.spectrum-Tooltip {
 		--highcontrast-tooltip-border-width: 1px;
-        
+
 		border: var(--highcontrast-tooltip-border-width) solid CanvasText;
 	}
 

components/tooltip/stories/template.js

@@ -1,4 +1,3 @@
-import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Container } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
@@ -18,18 +17,7 @@ export const Template = ({
 	showOnHover = false,
 	customStyles = {},
 	customClasses = [],
-} = {}, context = {}) => {
-	let variantIcon;
-	if (variant === "info") {
-		variantIcon = "Info";
-	}
-	else if (variant === "positive") {
-		variantIcon = "CheckmarkCircle";
-	}
-	else if (variant === "negative") {
-		variantIcon = "Alert";
-	}
-
+} = {}) => {
 	if (showOnHover) {
 		document.addEventListener("DOMContentLoaded", () => {
 			[...document.querySelectorAll(`.${rootClass}`)].forEach(tooltip => {
@@ -42,21 +30,15 @@ export const Template = ({
 		<span
 			class=${classMap({
 				[rootClass]: true,
+				[`${rootClass}--${variant}`]:
+					typeof variant !== "undefined" && variant !== "neutral",
 				[`${rootClass}--${placement}`]: typeof placement !== "undefined",
 				"is-open": isOpen,
 				"is-focused": isFocused,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap(customStyles)}
 		>
-			${when(variantIcon, () =>
-				Icon({
-					iconName: variantIcon,
-					setName: "workflow",
-					size: "m",
-					customClasses: [`${rootClass}-typeIcon`],
-				}, context)
-			)}
 			${when(label, () => html`
 				<span class=${classMap({
 					[`${rootClass}-label`]: true
@@ -145,7 +127,6 @@ export const SemanticVariantGroup = (args, context) => {
 	const variants = [
 		"neutral",
 		"info",
-		"positive",
 		"negative",
 	];
 

components/tooltip/stories/tooltip.stories.js

@@ -21,6 +21,16 @@ export default {
 			},
 			control: "text",
 		},
+		variant: {
+			name: "Variant",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["neutral", "info", "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.",
@@ -76,6 +86,7 @@ export default {
 		isOpen: true,
 		isFocused: false,
 		showOnHover: false,
+		variant: "neutral",
 		label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
 	},
 	parameters: {
@@ -123,14 +134,10 @@ ShowOnHover.parameters = {
 
 /**
  * By default, tooltips are the neutral variant. This is the most common variant because most tooltips are used to only
- * disclose additional information, without conveying a semantic meaning. The neutral variant never includes an icon.
+ * disclose additional information, without conveying a semantic meaning.
  *
- * Tooltips also come in other semantic variants: informative (blue), positive (green), and negative (red). These use
+ * Tooltips also come in other semantic variants: informative (blue) and negative (red). These use
  * [semantic colors](https://spectrum.adobe.com/page/color-system/#Color-semantics) to communicate the meaning.
- *
- * These semantic variants include an icon to supplement the messaging. These icons are predefined and can not be
- * customized. Unless it's being used to provide context about the exact same icon, a semantic tooltip should always
- * show an icon. Doing this is essential for helping users with color vision deficiency to discern the message tone.
  */
 export const SemanticVariants = SemanticVariantGroup.bind({});
 SemanticVariants.tags = ["!dev"];

components/tooltip/stories/tooltip.test.js

@@ -5,7 +5,7 @@ import { Template } from "./template.js";
 export const PlacementVariants = Variants({
 	Template,
 	testData: [
-		...["neutral", "info", "positive", "negative"].map(variant => ({
+		...["neutral", "info", "negative"].map(variant => ({
 			testHeading: capitalize(variant),
 			variant,
 		})),