Skip to content

Commit c0a2bc1

Browse files
cdransfcdransf
committed
fix(tooltip): restore negative and informative semantic variants
1 parent 60a156d commit c0a2bc1

File tree

5 files changed

+65
-33
lines changed

5 files changed

+65
-33
lines changed

‎.changeset/stale-pans-carry.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@spectrum-css/tooltip": minor
3+
---
4+
5+
#### S2: restore negative and informative semantic variants
6+
7+
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.
8+
9+
##### Restored mods
10+
11+
`--mod-tooltip-background-color-informative`
12+
`--mod-tooltip-background-color-negative"`

‎components/tooltip/dist/metadata.json

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
".spectrum-Tooltip--end-top.is-open:dir(rtl)",
3636
".spectrum-Tooltip--end.is-open",
3737
".spectrum-Tooltip--end.is-open:dir(rtl)",
38+
".spectrum-Tooltip--info",
39+
".spectrum-Tooltip--info .spectrum-Tooltip-tip",
3840
".spectrum-Tooltip--left",
3941
".spectrum-Tooltip--left .spectrum-Tooltip-tip",
4042
".spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl)",
@@ -47,6 +49,8 @@
4749
".spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)",
4850
".spectrum-Tooltip--left-top.is-open",
4951
".spectrum-Tooltip--left.is-open",
52+
".spectrum-Tooltip--negative",
53+
".spectrum-Tooltip--negative .spectrum-Tooltip-tip",
5054
".spectrum-Tooltip--right",
5155
".spectrum-Tooltip--right .spectrum-Tooltip-tip",
5256
".spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl)",
@@ -302,6 +306,8 @@
302306
"--mod-overlay-animation-duration-opened",
303307
"--mod-tooltip-animation-distance",
304308
"--mod-tooltip-background-color-default",
309+
"--mod-tooltip-background-color-informative",
310+
"--mod-tooltip-background-color-negative",
305311
"--mod-tooltip-border-radius",
306312
"--mod-tooltip-cjk-line-height",
307313
"--mod-tooltip-content-color",
@@ -324,8 +330,9 @@
324330
"component": [
325331
"--spectrum-tooltip-animation-distance",
326332
"--spectrum-tooltip-animation-duration",
327-
"--spectrum-tooltip-backgound-color-default-neutral",
328333
"--spectrum-tooltip-background-color-default",
334+
"--spectrum-tooltip-background-color-informative",
335+
"--spectrum-tooltip-background-color-negative",
329336
"--spectrum-tooltip-border-radius",
330337
"--spectrum-tooltip-cjk-line-height",
331338
"--spectrum-tooltip-content-color",
@@ -358,14 +365,17 @@
358365
"--spectrum-corner-radius-400",
359366
"--spectrum-font-size-75",
360367
"--spectrum-gray-25",
368+
"--spectrum-informative-background-color-default",
369+
"--spectrum-negative-background-color-default",
361370
"--spectrum-neutral-background-color-default",
362-
"--spectrum-neutral-subdued-background-color-default",
363371
"--spectrum-regular-font-weight",
364372
"--spectrum-spacing-75"
365373
],
366374
"passthroughs": [],
367375
"high-contrast": [
368376
"--highcontrast-tooltip-background-color-default",
377+
"--highcontrast-tooltip-background-color-informative",
378+
"--highcontrast-tooltip-background-color-negative",
369379
"--highcontrast-tooltip-border-width"
370380
]
371381
}

‎components/tooltip/index.css

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
@import "@spectrum-css/commons/overlay.css";
1515

1616
.spectrum-Tooltip {
17-
--spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
18-
1917
--spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
2018
--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
2119

@@ -43,6 +41,10 @@
4341
--spectrum-tooltip-content-color: var(--spectrum-gray-25);
4442
--spectrum-tooltip-background-color-default: var(--spectrum-neutral-background-color-default);
4543

44+
/* colors */
45+
--spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
46+
--spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);
47+
4648
/* tip */
4749
--spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
4850

@@ -57,6 +59,7 @@
5759

5860
--highcontrast-tooltip-border-width: 0px;
5961
}
62+
6063
.spectrum-Tooltip {
6164
@extend %spectrum-overlay;
6265

@@ -102,6 +105,15 @@
102105
}
103106
}
104107

108+
/****** Variants ******/
109+
.spectrum-Tooltip--info {
110+
background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
111+
}
112+
113+
.spectrum-Tooltip--negative {
114+
background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
115+
}
116+
105117
.spectrum-Tooltip.is-open {
106118
@extend %spectrum-overlay--open;
107119
}
@@ -125,6 +137,14 @@
125137

126138
border-radius: 0 0 0 var(--mod-tooltip-tip-corner-radius, var(--spectrum-tooltip-tip-corner-radius));
127139

140+
.spectrum-Tooltip--info & {
141+
background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
142+
}
143+
144+
.spectrum-Tooltip--negative & {
145+
background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
146+
}
147+
128148
/*** Tip Placement ***/
129149
/* tip is horizontal at bottom pointing down ▽ */
130150
.spectrum-Tooltip--top &,
@@ -576,11 +596,13 @@
576596
@media (forced-colors: active) {
577597
.spectrum-Tooltip {
578598
--highcontrast-tooltip-border-width: 1px;
579-
599+
580600
border: var(--highcontrast-tooltip-border-width) solid CanvasText;
581601
}
582602

583603
.spectrum-Tooltip-tip {
584604
--highcontrast-tooltip-background-color-default: CanvasText;
605+
--highcontrast-tooltip-background-color-informative: CanvasText;
606+
--highcontrast-tooltip-background-color-negative: CanvasText;
585607
}
586608
}

‎components/tooltip/stories/template.js

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
21
import { Container } from "@spectrum-css/preview/decorators";
32
import { html } from "lit";
43
import { classMap } from "lit/directives/class-map.js";
@@ -18,18 +17,7 @@ export const Template = ({
1817
showOnHover = false,
1918
customStyles = {},
2019
customClasses = [],
21-
} = {}, context = {}) => {
22-
let variantIcon;
23-
if (variant === "info") {
24-
variantIcon = "Info";
25-
}
26-
else if (variant === "positive") {
27-
variantIcon = "CheckmarkCircle";
28-
}
29-
else if (variant === "negative") {
30-
variantIcon = "Alert";
31-
}
32-
20+
} = {}) => {
3321
if (showOnHover) {
3422
document.addEventListener("DOMContentLoaded", () => {
3523
[...document.querySelectorAll(`.${rootClass}`)].forEach(tooltip => {
@@ -42,21 +30,15 @@ export const Template = ({
4230
<span
4331
class=${classMap({
4432
[rootClass]: true,
33+
[`${rootClass}--${variant}`]:
34+
typeof variant !== "undefined" && variant !== "neutral",
4535
[`${rootClass}--${placement}`]: typeof placement !== "undefined",
4636
"is-open": isOpen,
4737
"is-focused": isFocused,
4838
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
4939
})}
5040
style=${styleMap(customStyles)}
5141
>
52-
${when(variantIcon, () =>
53-
Icon({
54-
iconName: variantIcon,
55-
setName: "workflow",
56-
size: "m",
57-
customClasses: [`${rootClass}-typeIcon`],
58-
}, context)
59-
)}
6042
${when(label, () => html`
6143
<span class=${classMap({
6244
[`${rootClass}-label`]: true
@@ -145,7 +127,6 @@ export const SemanticVariantGroup = (args, context) => {
145127
const variants = [
146128
"neutral",
147129
"info",
148-
"positive",
149130
"negative",
150131
];
151132

‎components/tooltip/stories/tooltip.stories.js

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,16 @@ export default {
2121
},
2222
control: "text",
2323
},
24+
variant: {
25+
name: "Variant",
26+
type: { name: "string" },
27+
table: {
28+
type: { summary: "string" },
29+
category: "Component",
30+
},
31+
options: ["neutral", "info", "negative"],
32+
control: "inline-radio",
33+
},
2434
placement: {
2535
name: "Placement",
2636
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 {
7686
isOpen: true,
7787
isFocused: false,
7888
showOnHover: false,
89+
variant: "neutral",
7990
label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
8091
},
8192
parameters: {
@@ -123,14 +134,10 @@ ShowOnHover.parameters = {
123134

124135
/**
125136
* By default, tooltips are the neutral variant. This is the most common variant because most tooltips are used to only
126-
* disclose additional information, without conveying a semantic meaning. The neutral variant never includes an icon.
137+
* disclose additional information, without conveying a semantic meaning.
127138
*
128-
* Tooltips also come in other semantic variants: informative (blue), positive (green), and negative (red). These use
139+
* Tooltips also come in other semantic variants: informative (blue) and negative (red). These use
129140
* [semantic colors](https://spectrum.adobe.com/page/color-system/#Color-semantics) to communicate the meaning.
130-
*
131-
* These semantic variants include an icon to supplement the messaging. These icons are predefined and can not be
132-
* customized. Unless it's being used to provide context about the exact same icon, a semantic tooltip should always
133-
* show an icon. Doing this is essential for helping users with color vision deficiency to discern the message tone.
134141
*/
135142
export const SemanticVariants = SemanticVariantGroup.bind({});
136143
SemanticVariants.tags = ["!dev"];

0 commit comments

Comments
 (0)