@stackoverflow/stacks 1.6.6 → 1.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -2
- package/dist/css/stacks.css +10 -4
- package/dist/css/stacks.min.css +1 -1
- package/lib/css/components/buttons.less +8 -4
- package/lib/css/components/expandable.less +1 -1
- package/lib/test/s-tooltip.test.ts +62 -0
- package/lib/test/s-tooltip.visual.test.ts +31 -0
- package/package.json +27 -11
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
--_bu-filled-bg: var(--theme-button-filled-background-color);
|
|
26
26
|
--_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
|
|
27
27
|
--_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
|
|
28
|
+
--_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0, 100%, 0.7);
|
|
28
29
|
--_bu-filled-fc: var(--theme-button-filled-color);
|
|
29
30
|
--_bu-filled-fc-active: var(--theme-button-filled-hover-color); // Note: hover color used here intentionally
|
|
30
31
|
--_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
// CONTEXTUAL STYLES
|
|
45
46
|
.dark-mode({
|
|
46
47
|
--_bu-bs: none;
|
|
48
|
+
--_bu-filled-bs: var(--_bu-bs);
|
|
47
49
|
});
|
|
48
50
|
|
|
49
51
|
.highcontrast-mode({
|
|
@@ -58,6 +60,7 @@
|
|
|
58
60
|
&[disabled],
|
|
59
61
|
&[aria-disabled="true"] {
|
|
60
62
|
--_bu-bs: none !important;
|
|
63
|
+
--_bu-filled-bs: var(--_bu-bs);
|
|
61
64
|
opacity: var(--_o-disabled-static);
|
|
62
65
|
pointer-events: none;
|
|
63
66
|
text-decoration: none;
|
|
@@ -118,10 +121,9 @@
|
|
|
118
121
|
|
|
119
122
|
// MODIFIERS
|
|
120
123
|
&&__filled {
|
|
121
|
-
--_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0, 100%, 0.7);
|
|
122
|
-
|
|
123
124
|
border-color: var(--_bu-filled-bc);
|
|
124
125
|
background-color: var(--_bu-filled-bg);
|
|
126
|
+
box-shadow: var(--_bu-filled-bs);
|
|
125
127
|
color: var(--_bu-filled-fc);
|
|
126
128
|
}
|
|
127
129
|
|
|
@@ -145,6 +147,7 @@
|
|
|
145
147
|
--_bu-baw: 0;
|
|
146
148
|
--_bu-br: 0;
|
|
147
149
|
--_bu-bs: none;
|
|
150
|
+
--_bu-filled-bs: var(--_bu-bs);
|
|
148
151
|
--_bu-focus-ring: none;
|
|
149
152
|
--_bu-p: 0;
|
|
150
153
|
|
|
@@ -176,6 +179,7 @@
|
|
|
176
179
|
--_bu-bg: none;
|
|
177
180
|
--_bu-br: 0;
|
|
178
181
|
--_bu-bs: none;
|
|
182
|
+
--_bu-filled-bs: var(--_bu-bs);
|
|
179
183
|
--_bu-fc: unset;
|
|
180
184
|
--_bu-focus-ring: none;
|
|
181
185
|
--_bu-p: 0;
|
|
@@ -242,7 +246,6 @@
|
|
|
242
246
|
--_bu-bg-active: var(--red-100);
|
|
243
247
|
--_bu-bg-hover: var(--red-050);
|
|
244
248
|
--_bu-bg-selected: var(--red-200);
|
|
245
|
-
--_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
|
|
246
249
|
--_bu-fc: var(--red-600);
|
|
247
250
|
--_bu-fc-active: var(--_bu-fc);
|
|
248
251
|
--_bu-fc-hover: var(--red-700);
|
|
@@ -254,6 +257,7 @@
|
|
|
254
257
|
--_bu-filled-bg-active: var(--red-700);
|
|
255
258
|
--_bu-filled-bg-hover: var(--red-600);
|
|
256
259
|
--_bu-filled-bg-selected: var(--red-800);
|
|
260
|
+
--_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
|
|
257
261
|
--_bu-filled-fc: var(--white);
|
|
258
262
|
--_bu-filled-fc-active: var(--_bu-filled-fc);
|
|
259
263
|
--_bu-filled-fc-hover: var(--_bu-filled-fc);
|
|
@@ -285,7 +289,6 @@
|
|
|
285
289
|
--_bu-bg-active: var(--black-050);
|
|
286
290
|
--_bu-bg-hover: var(--black-025);
|
|
287
291
|
--_bu-bg-selected: var(--black-075);
|
|
288
|
-
--_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
|
|
289
292
|
--_bu-fc: var(--black-500);
|
|
290
293
|
--_bu-fc-active: var(--_bu-fc);
|
|
291
294
|
--_bu-fc-hover: var(--black-600);
|
|
@@ -297,6 +300,7 @@
|
|
|
297
300
|
--_bu-filled-bg-active: var(--black-200);
|
|
298
301
|
--_bu-filled-bg-hover: var(--black-150);
|
|
299
302
|
--_bu-filled-bg-selected: var(--black-350);
|
|
303
|
+
--_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
|
|
300
304
|
--_bu-filled-fc: var(--black-700);
|
|
301
305
|
--_bu-filled-fc-active: var(--_bu-filled-fc);
|
|
302
306
|
--_bu-filled-fc-hover: var(--_bu-filled-fc);
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
& .s-expandable--content {
|
|
37
37
|
@supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
|
|
38
|
-
--_ex-content-o:
|
|
38
|
+
--_ex-content-o: 0;
|
|
39
39
|
--_ex-content-transform: none;
|
|
40
40
|
}
|
|
41
41
|
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { html, fixture, expect } from "@open-wc/testing";
|
|
2
|
+
import { screen, waitForElementToBeRemoved } from "@testing-library/dom";
|
|
3
|
+
import userEvent from "@testing-library/user-event";
|
|
4
|
+
import "../ts/index";
|
|
5
|
+
|
|
6
|
+
const user = userEvent.setup();
|
|
7
|
+
|
|
8
|
+
describe("s-tooltip", () => {
|
|
9
|
+
it("should make the tooltip element visible on hover (after a delay)", async () => {
|
|
10
|
+
const trigger = await fixture(html`
|
|
11
|
+
<button
|
|
12
|
+
class="s-btn s-btn__filled"
|
|
13
|
+
role="button"
|
|
14
|
+
data-controller="s-tooltip"
|
|
15
|
+
title="tooltip content"
|
|
16
|
+
data-s-tooltip-placement="bottom-start"
|
|
17
|
+
>
|
|
18
|
+
Hover tooltip popover
|
|
19
|
+
</button>
|
|
20
|
+
`);
|
|
21
|
+
|
|
22
|
+
expect(screen.queryByRole("tooltip")).to.be.null;
|
|
23
|
+
|
|
24
|
+
await user.hover(trigger);
|
|
25
|
+
const tooltip = await screen.findByRole("tooltip");
|
|
26
|
+
expect(tooltip).to.be.visible;
|
|
27
|
+
|
|
28
|
+
await user.unhover(trigger);
|
|
29
|
+
await waitForElementToBeRemoved(() => screen.queryByRole("tooltip"));
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
it("should not flicker when the host contains an SVG and the user hover on it", async () => {
|
|
33
|
+
await fixture(html`
|
|
34
|
+
<button
|
|
35
|
+
class="s-btn"
|
|
36
|
+
role="button"
|
|
37
|
+
title="tooltip content"
|
|
38
|
+
data-controller="s-tooltip"
|
|
39
|
+
data-s-tooltip-placement="bottom-start"
|
|
40
|
+
>
|
|
41
|
+
<svg
|
|
42
|
+
data-testid="svg"
|
|
43
|
+
aria-hidden="true"
|
|
44
|
+
class="bg-red-500"
|
|
45
|
+
width="18"
|
|
46
|
+
height="18"
|
|
47
|
+
viewBox="0 0 18 18"
|
|
48
|
+
></svg>
|
|
49
|
+
👈 Shouldn't flicker 🤷
|
|
50
|
+
</button>
|
|
51
|
+
`);
|
|
52
|
+
const button = screen.getByRole("button");
|
|
53
|
+
const svg = screen.getByTestId("svg");
|
|
54
|
+
|
|
55
|
+
await user.hover(button);
|
|
56
|
+
const tooltip = await screen.findByRole("tooltip");
|
|
57
|
+
expect(tooltip).to.be.visible;
|
|
58
|
+
|
|
59
|
+
await user.hover(svg);
|
|
60
|
+
expect(tooltip).to.be.visible;
|
|
61
|
+
});
|
|
62
|
+
});
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { html, fixture } from "@open-wc/testing";
|
|
2
|
+
import { screen } from "@testing-library/dom";
|
|
3
|
+
import userEvent from "@testing-library/user-event";
|
|
4
|
+
import { visualDiff } from "@web/test-runner-visual-regression";
|
|
5
|
+
import "../ts/index";
|
|
6
|
+
|
|
7
|
+
const user = userEvent.setup();
|
|
8
|
+
|
|
9
|
+
describe("s-tooltip", () => {
|
|
10
|
+
it("should not introduce visual regressions", async () => {
|
|
11
|
+
const wrapper = await fixture(html`
|
|
12
|
+
<div style="height: 100px; width: 160px; display: inline-block;">
|
|
13
|
+
<button
|
|
14
|
+
class="s-btn s-btn__filled"
|
|
15
|
+
role="button"
|
|
16
|
+
data-controller="s-tooltip"
|
|
17
|
+
title="tooltip content"
|
|
18
|
+
data-s-tooltip-placement="bottom-start"
|
|
19
|
+
>
|
|
20
|
+
Hover tooltip popover
|
|
21
|
+
</button>
|
|
22
|
+
</div>
|
|
23
|
+
`);
|
|
24
|
+
|
|
25
|
+
const trigger = screen.getByRole("button");
|
|
26
|
+
await user.hover(trigger);
|
|
27
|
+
await screen.findByRole("tooltip");
|
|
28
|
+
|
|
29
|
+
await visualDiff(wrapper, "s-tooltip");
|
|
30
|
+
});
|
|
31
|
+
});
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/StackExchange/Stacks.git"
|
|
7
7
|
},
|
|
8
|
-
"version": "1.6.
|
|
8
|
+
"version": "1.6.7",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"lib"
|
|
@@ -22,8 +22,11 @@
|
|
|
22
22
|
"build:docs": "webpack --mode=production --config ./docs/webpack.config.js && cd ./docs && eleventy",
|
|
23
23
|
"start:webpack": "webpack --watch --config ./docs/webpack.config.js",
|
|
24
24
|
"start:eleventy": "cd ./docs && eleventy --serve",
|
|
25
|
-
"test": "
|
|
26
|
-
"
|
|
25
|
+
"test": "web-test-runner",
|
|
26
|
+
"test:unit": "web-test-runner --group=unit",
|
|
27
|
+
"test:unit:watch": "web-test-runner --group=unit --watch",
|
|
28
|
+
"test:visual": "web-test-runner --group=visual",
|
|
29
|
+
"test:visual:update": "web-test-runner --group=visual --update-visual-baseline",
|
|
27
30
|
"prepublishOnly": "npm run build",
|
|
28
31
|
"lint": "concurrently -n w: npm:lint:*",
|
|
29
32
|
"lint:ts": "eslint ./lib/ts",
|
|
@@ -37,13 +40,22 @@
|
|
|
37
40
|
},
|
|
38
41
|
"devDependencies": {
|
|
39
42
|
"@11ty/eleventy": "^1.0.2",
|
|
40
|
-
"@highlightjs/cdn-assets": "^11.
|
|
41
|
-
"@
|
|
42
|
-
"@
|
|
43
|
-
"@
|
|
43
|
+
"@highlightjs/cdn-assets": "^11.7.0",
|
|
44
|
+
"@open-wc/testing": "^3.1.7",
|
|
45
|
+
"@rollup/plugin-commonjs": "^24.0.0",
|
|
46
|
+
"@rollup/plugin-replace": "^5.0.1",
|
|
47
|
+
"@stackoverflow/stacks-editor": "^0.8.3",
|
|
48
|
+
"@stackoverflow/stacks-icons": "^4.0.0",
|
|
49
|
+
"@testing-library/dom": "^8.19.0",
|
|
50
|
+
"@testing-library/user-event": "^14.4.3",
|
|
51
|
+
"@typescript-eslint/eslint-plugin": "^5.47.1",
|
|
44
52
|
"@typescript-eslint/parser": "^5.46.0",
|
|
45
|
-
"
|
|
46
|
-
"
|
|
53
|
+
"@web/dev-server-esbuild": "^0.3.3",
|
|
54
|
+
"@web/dev-server-rollup": "https://github.com/giamir/web/raw/fix-dev-server-rollup/packages/dev-server-rollup/web-dev-server-rollup-0.3.19.tgz",
|
|
55
|
+
"@web/test-runner": "^0.15.0",
|
|
56
|
+
"@web/test-runner-playwright": "^0.9.0",
|
|
57
|
+
"@web/test-runner-visual-regression": "^0.7.0",
|
|
58
|
+
"concurrently": "^7.6.0",
|
|
47
59
|
"css-loader": "^6.7.2",
|
|
48
60
|
"cssnano": "^5.1.14",
|
|
49
61
|
"docsearch.js": "^2.6.3",
|
|
@@ -60,12 +72,13 @@
|
|
|
60
72
|
"postcss-less": "^6.0.0",
|
|
61
73
|
"postcss-loader": "^7.0.1",
|
|
62
74
|
"prettier": "^2.7.1",
|
|
75
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
63
76
|
"stylelint": "^14.16.0",
|
|
64
77
|
"stylelint-config-recommended": "^9.0.0",
|
|
65
78
|
"stylelint-config-standard": "^29.0.0",
|
|
66
79
|
"terser-webpack-plugin": "^5.3.6",
|
|
67
80
|
"ts-loader": "^9.4.2",
|
|
68
|
-
"typescript": "^4.9.
|
|
81
|
+
"typescript": "^4.9.4",
|
|
69
82
|
"webpack": "^5.75.0",
|
|
70
83
|
"webpack-cli": "^5.0.0",
|
|
71
84
|
"webpack-merge": "^5.8.0"
|
|
@@ -84,5 +97,8 @@
|
|
|
84
97
|
"not and_uc > 0",
|
|
85
98
|
"not Samsung > 0",
|
|
86
99
|
"not Android > 0"
|
|
87
|
-
]
|
|
100
|
+
],
|
|
101
|
+
"overrides": {
|
|
102
|
+
"aria-query": "~5.0.0"
|
|
103
|
+
}
|
|
88
104
|
}
|