@stackoverflow/stacks 1.6.5 → 1.6.7

package/lib/css/components/user-cards.less

@@ -19,6 +19,7 @@
     &&__deleted {
         --_uc-fc: var(--black-500);
     }
+
     &&__highlighted {
         --_uc-bg: var(--theme-secondary-050);
         --_uc-bar: var(--br-md);
@@ -34,12 +35,13 @@
         --_uc-p: 0;
         --_uc-info-ai: center;
         --_uc-info-fd: row;
-
     }
+
     &&__full {
         --_uc-ai: flex-start;
         --_uc-link-fs: var(--fs-body2);
     }
+
     &&__minimal {
         --_uc-link-ws: nowrap;
         --_uc-rep-fc: var(--black-600);
@@ -52,6 +54,7 @@
         font-size: var(--fs-caption);
         color: var(--black-500);
     }
+
     & &--awards {
         li {
             font-size: var(--fs-caption);
@@ -62,6 +65,7 @@
         display: flex;
         gap: var(--su6);
     }
+
     & &--info {
         align-items: var(--_uc-info-ai);
         flex-direction: var(--_uc-info-fd);
@@ -69,6 +73,7 @@
         display: flex;
         gap: var(--su4);
     }
+
     & &--link {
         font-size: var(--_uc-link-fs);
         white-space: var(--_uc-link-ws);
@@ -78,16 +83,19 @@
         min-width: 0; // Allow things to wrap
         overflow-wrap: break-word;
     }
+
     & &--rep {
         color: var(--_uc-rep-fc);
 
         font-weight: 700;
     }
+
     & &--tags {
         align-items: center;
         min-width: 0; // Allow things to wrap
         flex-wrap: wrap;
     }
+
     & &--time {
         color: var(--_uc-time-fc);
         white-space: var(--_uc-time-ws);
@@ -96,6 +104,7 @@
         grid-column: ~"1 / 3";
         grid-row: ~"1 / 2";
     }
+
     & &--type {
         a {
             color: inherit;

package/lib/test/s-tooltip.test.ts

@@ -0,0 +1,62 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen, waitForElementToBeRemoved } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import "../ts/index";
+
+const user = userEvent.setup();
+
+describe("s-tooltip", () => {
+    it("should make the tooltip element visible on hover (after a delay)", async () => {
+        const trigger = await fixture(html`
+            <button
+                class="s-btn s-btn__filled"
+                role="button"
+                data-controller="s-tooltip"
+                title="tooltip content"
+                data-s-tooltip-placement="bottom-start"
+            >
+                Hover tooltip popover
+            </button>
+        `);
+
+        expect(screen.queryByRole("tooltip")).to.be.null;
+
+        await user.hover(trigger);
+        const tooltip = await screen.findByRole("tooltip");
+        expect(tooltip).to.be.visible;
+
+        await user.unhover(trigger);
+        await waitForElementToBeRemoved(() => screen.queryByRole("tooltip"));
+    });
+
+    it("should not flicker when the host contains an SVG and the user hover on it", async () => {
+        await fixture(html`
+            <button
+                class="s-btn"
+                role="button"
+                title="tooltip content"
+                data-controller="s-tooltip"
+                data-s-tooltip-placement="bottom-start"
+            >
+                <svg
+                    data-testid="svg"
+                    aria-hidden="true"
+                    class="bg-red-500"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 18 18"
+                ></svg>
+                👈 Shouldn't flicker 🤷‍
+            </button>
+        `);
+        const button = screen.getByRole("button");
+        const svg = screen.getByTestId("svg");
+
+        await user.hover(button);
+        const tooltip = await screen.findByRole("tooltip");
+        expect(tooltip).to.be.visible;
+
+        await user.hover(svg);
+        expect(tooltip).to.be.visible;
+    });
+});

package/lib/test/s-tooltip.visual.test.ts

@@ -0,0 +1,31 @@
+import { html, fixture } from "@open-wc/testing";
+import { screen } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import { visualDiff } from "@web/test-runner-visual-regression";
+import "../ts/index";
+
+const user = userEvent.setup();
+
+describe("s-tooltip", () => {
+    it("should not introduce visual regressions", async () => {
+        const wrapper = await fixture(html`
+            <div style="height: 100px; width: 160px; display: inline-block;">
+                <button
+                    class="s-btn s-btn__filled"
+                    role="button"
+                    data-controller="s-tooltip"
+                    title="tooltip content"
+                    data-s-tooltip-placement="bottom-start"
+                >
+                    Hover tooltip popover
+                </button>
+            </div>
+        `);
+
+        const trigger = screen.getByRole("button");
+        await user.hover(trigger);
+        await screen.findByRole("tooltip");
+
+        await visualDiff(wrapper, "s-tooltip");
+    });
+});

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.6.5",
+  "version": "1.6.7",
   "files": [
     "dist",
     "lib"
@@ -22,8 +22,11 @@
     "build:docs": "webpack --mode=production --config ./docs/webpack.config.js && cd ./docs && eleventy",
     "start:webpack": "webpack --watch --config ./docs/webpack.config.js",
     "start:eleventy": "cd ./docs && eleventy --serve",
-    "test": "backstop test",
-    "approve": "backstop approve",
+    "test": "web-test-runner",
+    "test:unit": "web-test-runner --group=unit",
+    "test:unit:watch": "web-test-runner --group=unit --watch",
+    "test:visual": "web-test-runner --group=visual",
+    "test:visual:update": "web-test-runner --group=visual --update-visual-baseline",
     "prepublishOnly": "npm run build",
     "lint": "concurrently -n w: npm:lint:*",
     "lint:ts": "eslint ./lib/ts",
@@ -37,13 +40,22 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.2",
-    "@highlightjs/cdn-assets": "^11.6.0",
-    "@stackoverflow/stacks-editor": "^0.8.2",
-    "@stackoverflow/stacks-icons": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.44.0",
-    "backstopjs": "^6.1.4",
-    "concurrently": "^7.5.0",
+    "@highlightjs/cdn-assets": "^11.7.0",
+    "@open-wc/testing": "^3.1.7",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-replace": "^5.0.1",
+    "@stackoverflow/stacks-editor": "^0.8.3",
+    "@stackoverflow/stacks-icons": "^4.0.0",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.46.0",
+    "@web/dev-server-esbuild": "^0.3.3",
+    "@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",
+    "@web/test-runner": "^0.15.0",
+    "@web/test-runner-playwright": "^0.9.0",
+    "@web/test-runner-visual-regression": "^0.7.0",
+    "concurrently": "^7.6.0",
     "css-loader": "^6.7.2",
     "cssnano": "^5.1.14",
     "docsearch.js": "^2.6.3",
@@ -51,7 +63,7 @@
     "eleventy-plugin-nesting-toc": "^1.3.0",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-no-unsanitized": "^4.0.1",
+    "eslint-plugin-no-unsanitized": "^4.0.2",
     "jquery": "^3.6.1",
     "less-loader": "^11.1.0",
     "list.js": "^2.3.1",
@@ -60,12 +72,13 @@
     "postcss-less": "^6.0.0",
     "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "stylelint": "^14.16.0",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-standard": "^29.0.0",
     "terser-webpack-plugin": "^5.3.6",
-    "ts-loader": "^9.4.1",
-    "typescript": "^4.9.3",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.4",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0",
     "webpack-merge": "^5.8.0"
@@ -84,5 +97,8 @@
     "not and_uc > 0",
     "not Samsung > 0",
     "not Android > 0"
-  ]
+  ],
+  "overrides": {
+    "aria-query": "~5.0.0"
+  }
 }