From db2aee73dcc6bd613e7189e76e255644ced6dc0a Mon Sep 17 00:00:00 2001 From: Sal Date: Mon, 15 Dec 2025 14:32:52 -0500 Subject: [PATCH 01/28] update stacks docs --- .../components/empty-state/empty-state.less | 20 +++-- .../stacks-docs/_data/site-navigation.json | 3 +- .../product/components/empty-states.html | 81 +++++++------------ 3 files changed, 47 insertions(+), 57 deletions(-) diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.less b/packages/stacks-classic/lib/components/empty-state/empty-state.less index c163f4476c..e1eb51871b 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.less +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.less @@ -1,15 +1,23 @@ .s-empty-state { // CHILD ELEMENTS p { - strong { - color: var(--fc-dark); - } - + color: var(--black-400); font-size: var(--fs-body1); - margin-bottom: var(--su12); + margin-bottom: var(--su32); + } + + &__title { + font-weight: 600; + font-size: var(--fs-body3); + margin-bottom: var(--su8); + color: var(--black-400); + } + + .svg-spot * { + //Don't change the colors on our new colorful spot icons + fill: revert-layer; } - color: var(--fc-light); text-align: center; margin-left: auto; margin-right: auto; diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index 9025e7277c..15f3ec9b47 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -254,7 +254,8 @@ }, { "title": "Empty states", - "url": "/product/components/empty-states/" + "url": "/product/components/empty-states/", + "new": true }, { "title": "Expandable", diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html index 0ff8233f72..2c9a6f5893 100644 --- a/packages/stacks-docs/product/components/empty-states.html +++ b/packages/stacks-docs/product/components/empty-states.html @@ -1,95 +1,76 @@ --- layout: page title: Empty states +svelte: +figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18807&p=f&m=dev description: Empty states are used when there is no data to show. Ideally they orient the user by providing feedback based on the the user’s last interaction or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action. tags: components ---
- {% header "h2", "No data" %} + {% header "h2", "No data or results" %}

- Used when a user hasn’t interacted with a feature yet. + Typical use-case for an empty state is when a feature has no data or a search/filter operation yields no results.

- {% header "h3", "No data actionable" %} + {% header "h3", "Actionable" %}

- If the user can take an action to fix the situation, it's best to draw attention to it, explain next steps, and provide a call-to-action. + If the user is able to address the situation resulting in an empty state, it is appropriate to include a button for them to do so.

{% highlight html %}
- @Svg.Spot.EmptyXL.With("mb24") -

Why is this blank? Explain it.

- Call to action + @Svg.Spot.Empty.With("mb24") +

No questions match your result.

+

Try refining your search term or trying something more general.

+
{% endhighlight %}
- {% spot, "EmptyXL", "mb24" %} -

We haven’t received any data yet. Have you connected your Stack Overflow account?

- Connect my account + {% spot, "Empty", "mb24" %} +

No questions match your result.

+

Try refining your search term or trying something more general.

+
- {% header "h3", "No data non-actionable" %} + + {% header "h3", "Non-actionable" %}

- If the user can’t take an action to fix the situation, it’s more appropriate to set expectations. + If the user can’t take an action to fix the situation, it’s appropriate to set expectations.

{% highlight html %}
- @Svg.Spot.EmptyXL.With("mb24") -

Why is this blank? Explain it.

+ @Svg.Spot.Empty.With("mb24") +

User trends not ready

+

Please check back in a few days.

{% endhighlight %}
- {% spot, "EmptyXL", "mb24" %} -

There’s no data associated with your account yet. Please check back tomorrow.

-
-
-
-
-
- {% header "h2", "No results" %} -

- When someone performs an action that returns nothing, a blank state can explain what happened and help get someone back on track. -

- {% header "h3", "No results actionable" %} -

- If the user can take an action to fix the situation, it’s best to draw attention to it and provide a call-to-action. -

-
-{% highlight html %} -
- @Svg.Spot.EmptyXL.With("mb24") -

Why is this blank? Explain it.

- Call to action -
-{% endhighlight %} -
-
- {% spot, "EmptyXL", "mb24" %} -

We couldn’t find any tags matching stacks-1-0-0. It might not exist yet. Would you like to create it?

- Create this tag + {% spot, "Empty", "mb24" %} +

User trends not ready

+

Please check back in a few days.

- {% header "h3", "No results non-actionable" %} + {% header "h3", "Minimal" %}

- If the user can’t take an action to fix the situation, it’s more appropriate to set expectations. + If desired, both the title and call-to-action may be omitted for a minimal look.

{% highlight html %}
- @Svg.Spot.EmptyXL.With("mb24") -

Why is this blank? Explain it.

+ @Svg.Spot.Empty.With("mb24") +

Please check back in a few days.

{% endhighlight %} -
+
- {% spot, "EmptyXL", "mb24" %} -

We couldn’t match users for Namey McUser. Try refining your search or trying something more general.

+ {% spot, "Empty", "mb24" %} +

There’s no data associated with this account.

-
+ \ No newline at end of file From d59b2fc38866493ffb42e3e058c1c1b6dce7e1eb Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 08:55:58 -0500 Subject: [PATCH 02/28] implement svelte component --- package-lock.json | 60 +++++-------------- .../components/empty-state/empty-state.less | 9 ++- .../product/components/empty-states.html | 14 ++--- .../EmptyState/EmptyState.stories.svelte | 41 +++++++++++++ .../components/EmptyState/EmptyState.svelte | 46 ++++++++++++++ .../components/EmptyState/EmptyState.test.ts | 38 ++++++++++++ .../stacks-svelte/src/components/index.ts | 1 + 7 files changed, 155 insertions(+), 54 deletions(-) create mode 100644 packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte create mode 100644 packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte create mode 100644 packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts diff --git a/package-lock.json b/package-lock.json index 6cac5e58dc..ed5d1d5072 100644 --- a/package-lock.json +++ b/package-lock.json @@ -119,7 +119,6 @@ "integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@11ty/dependency-tree": "^4.0.0", "@11ty/dependency-tree-esm": "^2.0.0", @@ -404,7 +403,6 @@ "integrity": "sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -767,7 +765,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -791,7 +788,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -1780,15 +1776,13 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.3.0.tgz", "integrity": "sha512-L9X8uHCYU310o99L3/MpJKYxPzXPOS7S0NmBaM7UO/x2Kb2WbmMLSkfvdr1KxRIFYOpbY0Jhn7CfLSUDzL8arQ==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@lezer/highlight": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz", "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==", "license": "MIT", - "peer": true, "dependencies": { "@lezer/common": "^1.3.0" } @@ -3098,7 +3092,6 @@ "integrity": "sha512-TmzrdDHUKtKG7x1CqYuMIHjfXMqS85EwIF3Of/LV+laBtDhKrgioPJW82dIOJ44w1nryH8Yeh1Hdx9O+cPWfVw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ts-dedent": "^2.0.0", "type-fest": "~2.19" @@ -3210,7 +3203,6 @@ "integrity": "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1", "debug": "^4.4.1", @@ -3251,7 +3243,6 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -3529,7 +3520,6 @@ "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "*", "@types/json-schema": "*" @@ -3725,7 +3715,6 @@ "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3924,7 +3913,6 @@ "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.46.2", "@typescript-eslint/types": "8.46.2", @@ -4916,7 +4904,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -5377,7 +5364,6 @@ "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==", "dev": true, "license": "MPL-2.0", - "peer": true, "engines": { "node": ">=4" } @@ -5670,7 +5656,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.19", "caniuse-lite": "^1.0.30001751", @@ -6483,6 +6468,7 @@ "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "is-what": "^3.14.1" }, @@ -6793,7 +6779,8 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/dashdash": { "version": "1.14.1", @@ -7019,8 +7006,7 @@ "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1508733.tgz", "integrity": "sha512-QJ1R5gtck6nDcdM+nlsaJXcelPEI7ZxSMw1ujHpO1c4+9l+Nue5qlebi9xO1Z2MGr92bFOQTW7/rrheh5hHxDg==", "dev": true, - "license": "BSD-3-Clause", - "peer": true + "license": "BSD-3-Clause" }, "node_modules/diff": { "version": "5.2.0", @@ -7462,7 +7448,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -7580,7 +7565,6 @@ "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -7641,7 +7625,6 @@ "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", "dev": true, "license": "MIT", - "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -8882,7 +8865,6 @@ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz", "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==", "license": "BSD-3-Clause", - "peer": true, "engines": { "node": ">=12.0.0" } @@ -9141,6 +9123,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "bin": { "image-size": "bin/image-size.js" }, @@ -9601,7 +9584,8 @@ "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/is-windows": { "version": "1.0.2", @@ -10117,6 +10101,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "prr": "~1.0.1" }, @@ -10131,6 +10116,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "pify": "^4.0.1", "semver": "^5.6.0" @@ -10146,6 +10132,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "bin": { "mime": "cli.js" }, @@ -10160,6 +10147,7 @@ "dev": true, "license": "ISC", "optional": true, + "peer": true, "bin": { "semver": "bin/semver" } @@ -10171,6 +10159,7 @@ "dev": true, "license": "BSD-3-Clause", "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -10929,6 +10918,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "iconv-lite": "^0.6.3", "sax": "^1.2.4" @@ -10947,6 +10937,7 @@ "dev": true, "license": "MIT", "optional": true, + "peer": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" }, @@ -11486,6 +11477,7 @@ "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">= 0.10" } @@ -11835,7 +11827,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -12495,7 +12486,6 @@ "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -12550,7 +12540,6 @@ "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "posthtml-parser": "^0.11.0", "posthtml-render": "^3.0.0" @@ -12703,7 +12692,6 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -12879,7 +12867,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz", "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==", "license": "MIT", - "peer": true, "dependencies": { "orderedmap": "^2.0.0" } @@ -12909,7 +12896,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz", "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==", "license": "MIT", - "peer": true, "dependencies": { "prosemirror-model": "^1.0.0", "prosemirror-transform": "^1.0.0", @@ -12940,7 +12926,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.3.tgz", "integrity": "sha512-SqMiYMUQNNBP9kfPhLO8WXEk/fon47vc52FQsUiJzTBuyjKgEcoAwMyF04eQ4WZ2ArMn7+ReypYL60aKngbACQ==", "license": "MIT", - "peer": true, "dependencies": { "prosemirror-model": "^1.20.0", "prosemirror-state": "^1.0.0", @@ -13198,7 +13183,6 @@ "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -13209,7 +13193,6 @@ "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -13679,7 +13662,6 @@ "integrity": "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -14624,7 +14606,6 @@ "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -14710,7 +14691,6 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -15281,7 +15261,6 @@ "integrity": "sha512-es7uDdEwRVVUAt7XLAZZ1hicOq9r4ov5NFeFPpa2YEyAsyHYOCr0CTlHBfslWG6D5EVNWK3kVIIuW8GHB6hEig==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@testing-library/jest-dom": "^6.6.3", @@ -15755,7 +15734,6 @@ "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.42.2.tgz", "integrity": "sha512-iSry5jsBHispVczyt9UrBX/1qu3HQ/UyKPAIjqlvlu3o/eUvc+kpyMyRS2O4HLLx4MvLurLGIUOyyP11pyD59g==", "license": "MIT", - "peer": true, "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", @@ -16220,7 +16198,6 @@ "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.15.0", @@ -16567,7 +16544,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -16803,7 +16779,6 @@ "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", @@ -16922,7 +16897,6 @@ "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/chai": "^5.2.2", "@vitest/expect": "3.2.4", @@ -17061,7 +17035,6 @@ "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -17111,7 +17084,6 @@ "integrity": "sha512-MfwFQ6SfwinsUVi0rNJm7rHZ31GyTcpVE5pgVA3hwFRb7COD4TzjUUwhGWKfO50+xdc2MQPuEBBJoqIMGt3JDw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@discoveryjs/json-ext": "^0.6.1", "@webpack-cli/configtest": "^3.0.1", diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.less b/packages/stacks-classic/lib/components/empty-state/empty-state.less index e1eb51871b..107d661a38 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.less +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.less @@ -13,9 +13,12 @@ color: var(--black-400); } - .svg-spot * { - //Don't change the colors on our new colorful spot icons - fill: revert-layer; + .svg-spot { + margin-bottom: var(--su24); + * { + //Don't change the colors on our new colorful spot icons + fill: revert-layer; + } } text-align: center; diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html index 2c9a6f5893..50e072c812 100644 --- a/packages/stacks-docs/product/components/empty-states.html +++ b/packages/stacks-docs/product/components/empty-states.html @@ -18,7 +18,7 @@
{% highlight html %}
- @Svg.Spot.Empty.With("mb24") + @Svg.Spot.Empty

No questions match your result.

Try refining your search term or trying something more general.

@@ -41,14 +41,14 @@

No questions match your result.

{% highlight html %}
- @Svg.Spot.Empty.With("mb24") + @Svg.Spot.Empty

User trends not ready

Please check back in a few days.

{% endhighlight %}
- {% spot, "Empty", "mb24" %} + {% spot, "Empty" %}

User trends not ready

Please check back in a few days.

@@ -62,13 +62,13 @@

User trends not ready

{% highlight html %}
- @Svg.Spot.Empty.With("mb24") + @Svg.Spot.Empty

Please check back in a few days.

{% endhighlight %}
- {% spot, "Empty", "mb24" %} + {% spot, "Empty" %}

There’s no data associated with this account.

diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte new file mode 100644 index 0000000000..ad845c75c4 --- /dev/null +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte @@ -0,0 +1,41 @@ + + + + {#snippet template(args)} + + {#snippet description()} + There are no items to display at this time. + {/snippet} + {#snippet callToAction()} + + {/snippet} + + {/snippet} + + + + {#snippet template(args)} + + {#snippet description()} + No data found. Check back later. + {/snippet} + + {/snippet} + \ No newline at end of file diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte new file mode 100644 index 0000000000..5b3d7e95de --- /dev/null +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte @@ -0,0 +1,46 @@ + + +
+ + {#if title} +

{title}

+ {/if} +

{@render description()}

+ {#if callToAction} + {@render callToAction()} + {/if} +
\ No newline at end of file diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts new file mode 100644 index 0000000000..9088b79a6a --- /dev/null +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts @@ -0,0 +1,38 @@ +import { expect } from "@open-wc/testing"; +import { render, screen } from "@testing-library/svelte"; +import { createRawSnippet } from "svelte"; +import EmptyState from "./EmptyState.svelte"; + +describe("EmptyState", () => { + it("should render an empty state with the description content", () => { + render(EmptyState, { description: createRawSnippet(() => ({ + render: () => "There are no items to display at this time." + })) }); + expect(screen.getByText("There are no items to display at this time.")).to.exist; + expect(screen.getByRole("button")).not.to.exist; + }); + + it("should render an empty state with the description and call-to-action content", () => { + render(EmptyState, { + description: createRawSnippet(() => ({ + render: () => "There are no items to display at this time." + })), + callToAction: createRawSnippet(() => ({ + render: () => "" + })), + }); + expect(screen.getByText("There are no items to display at this time.")).to.exist; + expect(screen.getByRole("button")).to.exist; + }); + + it("should render an empty state with the description and title content", () => { + render(EmptyState, { + description: createRawSnippet(() => ({ + render: () => "There are no items to display at this time." + })), + title: "No results found", + }); + expect(screen.getByText("There are no items to display at this time.")).to.exist; + expect(screen.getByText("No results found")).to.exist; + }); +}); diff --git a/packages/stacks-svelte/src/components/index.ts b/packages/stacks-svelte/src/components/index.ts index e551216bc9..0ef917eeb7 100644 --- a/packages/stacks-svelte/src/components/index.ts +++ b/packages/stacks-svelte/src/components/index.ts @@ -3,6 +3,7 @@ export { default as Avatar } from "./Avatar/Avatar.svelte"; export { default as Badge } from "./Badge/Badge.svelte"; export { default as Bling } from "./Bling/Bling.svelte"; export { default as Button } from "./Button/Button.svelte"; +export { default as EmptyState } from "./EmptyState/EmptyState.svelte"; export { default as ExpandingInput } from "./ExpandingInput/ExpandingInput.svelte"; export { default as Icon } from "./Icon/Icon.svelte"; export { default as Link } from "./Link/Link.svelte"; From 834a22a2f3fed44764030009327b7f651880f21f Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 09:02:27 -0500 Subject: [PATCH 03/28] fix link --- packages/stacks-docs/product/components/empty-states.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html index 50e072c812..65be0e94b8 100644 --- a/packages/stacks-docs/product/components/empty-states.html +++ b/packages/stacks-docs/product/components/empty-states.html @@ -1,7 +1,7 @@ --- layout: page title: Empty states -svelte: +svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-emptystate--docs figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18807&p=f&m=dev description: Empty states are used when there is no data to show. Ideally they orient the user by providing feedback based on the the user’s last interaction or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action. tags: components @@ -63,7 +63,7 @@

User trends not ready

{% highlight html %}
@Svg.Spot.Empty -

Please check back in a few days.

+

There’s no data associated with this account.

{% endhighlight %}
From 734a14c5ad4495ec1078e1b7906b6fc2e78eb31d Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 09:06:32 -0500 Subject: [PATCH 04/28] lint --- .../EmptyState/EmptyState.stories.svelte | 2 +- .../components/EmptyState/EmptyState.svelte | 8 ++--- .../components/EmptyState/EmptyState.test.ts | 32 +++++++++++-------- 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte index ad845c75c4..971d943590 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte @@ -38,4 +38,4 @@ {/snippet} {/snippet} - \ No newline at end of file + diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte index 5b3d7e95de..95e58ffbc5 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte @@ -15,7 +15,7 @@ class?: ClassValue; /** - * Snippet containing brief text + * Snippet containing brief text * explaining the empty state */ description: Snippet; @@ -28,13 +28,13 @@ let { title, - class : className, + class: className, description, callToAction, }: Props = $props(); -
+
{#if title}

{title}

@@ -43,4 +43,4 @@ {#if callToAction} {@render callToAction()} {/if} -
\ No newline at end of file +
diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts index 9088b79a6a..c106f3ac0c 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts @@ -5,34 +5,40 @@ import EmptyState from "./EmptyState.svelte"; describe("EmptyState", () => { it("should render an empty state with the description content", () => { - render(EmptyState, { description: createRawSnippet(() => ({ - render: () => "There are no items to display at this time." - })) }); - expect(screen.getByText("There are no items to display at this time.")).to.exist; + render(EmptyState, { + description: createRawSnippet(() => ({ + render: () => "There are no items to display at this time.", + })), + }); + expect(screen.getByText("There are no items to display at this time.")) + .to.exist; expect(screen.getByRole("button")).not.to.exist; }); it("should render an empty state with the description and call-to-action content", () => { - render(EmptyState, { + render(EmptyState, { description: createRawSnippet(() => ({ - render: () => "There are no items to display at this time." - })), + render: () => "There are no items to display at this time.", + })), callToAction: createRawSnippet(() => ({ - render: () => "" + render: () => + '', })), }); - expect(screen.getByText("There are no items to display at this time.")).to.exist; + expect(screen.getByText("There are no items to display at this time.")) + .to.exist; expect(screen.getByRole("button")).to.exist; }); it("should render an empty state with the description and title content", () => { - render(EmptyState, { + render(EmptyState, { description: createRawSnippet(() => ({ - render: () => "There are no items to display at this time." - })), + render: () => "There are no items to display at this time.", + })), title: "No results found", }); - expect(screen.getByText("There are no items to display at this time.")).to.exist; + expect(screen.getByText("There are no items to display at this time.")) + .to.exist; expect(screen.getByText("No results found")).to.exist; }); }); From 79e61a8f8cb482b6d11b15d7bd50133e2138f4a7 Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 09:38:49 -0500 Subject: [PATCH 05/28] update baseline --- .../lib/components/empty-state/empty-state.a11y.test.ts | 4 ++-- .../lib/components/empty-state/empty-state.visual.test.ts | 4 ++-- .../screenshots/Chromium/baseline/s-empty-state-dark.ico | 4 ++-- .../Chromium/baseline/s-empty-state-highcontrast-dark.ico | 4 ++-- .../Chromium/baseline/s-empty-state-highcontrast-light.ico | 4 ++-- .../screenshots/Chromium/baseline/s-empty-state-light.ico | 4 ++-- .../screenshots/Firefox/baseline/s-empty-state-dark.ico | 4 ++-- .../Firefox/baseline/s-empty-state-highcontrast-dark.ico | 4 ++-- .../Firefox/baseline/s-empty-state-highcontrast-light.ico | 4 ++-- .../screenshots/Firefox/baseline/s-empty-state-light.ico | 4 ++-- .../screenshots/Webkit/baseline/s-empty-state-dark.ico | 4 ++-- .../Webkit/baseline/s-empty-state-highcontrast-dark.ico | 4 ++-- .../Webkit/baseline/s-empty-state-highcontrast-light.ico | 4 ++-- .../screenshots/Webkit/baseline/s-empty-state-light.ico | 4 ++-- 14 files changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts index 6693e7ecef..9b515072e7 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts @@ -1,5 +1,5 @@ import { html } from "@open-wc/testing"; -import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy"; +import { SpotEmpty } from "@stackoverflow/stacks-icons/spots"; import { runA11yTests } from "../../test/a11y-test-utils"; import "../../index"; @@ -7,7 +7,7 @@ describe("empty-state", () => { runA11yTests({ baseClass: "s-empty-state", children: { - default: `${SpotEmptyXL}

Hello! This is a wonderful empty state component.

`, + default: `${SpotEmpty}

This is a wonderful empty state component.

`, }, template: ({ component, testid }) => html`
${component}
diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts index 257c8b03ed..212eae67ff 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts @@ -1,5 +1,5 @@ import { html } from "@open-wc/testing"; -import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy"; +import { SpotEmpty } from "@stackoverflow/stacks-icons/spots"; import { runVisualTests } from "../../test/visual-test-utils"; import "../../index"; @@ -7,7 +7,7 @@ describe("empty-state", () => { runVisualTests({ baseClass: "s-empty-state", children: { - default: `${SpotEmptyXL}

Hello! This is a wonderful empty state component.

`, + default: `${SpotEmpty}

This is a wonderful empty state component.

`, }, template: ({ component, testid }) => html`
${component}
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico index a34c39f76e..81afb0c510 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b5b8aec3ee47957bfb3258c09c7d837479815fcc2636b1a510b82d6891e8fd6b -size 10141 +oid sha256:abdd2b0e72462e7d58dc5062d99fecdd6305b85bd463756148ec59a5144710af +size 4964 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico index 8bf3bda3ea..cb80b2b336 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9e8e491ce3392d5a7f98fe395919e8472e651c2a0d6687df4964715c5df2520a -size 10449 +oid sha256:ae4486bd476995dd06ad6524352cc5b71cf27a4200e6b787654c2b4bfeb65189 +size 4955 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico index 9779904eb7..fa489e539b 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:304f778a1b49536e633137d8ebac8e334ce660aa5fcc7781824f44f6b669b545 -size 9852 +oid sha256:21b5a8e4b5d0c260d519798d6706108835c69cc038fed18fb4e0e48d5155652f +size 4904 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico index e20826f3dc..9715b66dbc 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a89e77df3a1d709d751f94ebd59c0e439a736e201bc5c2cff2872bdb72d3afac -size 9947 +oid sha256:268fb0f84f7cc040c39dd40258e97dde5bc892769456e1d7641b9e6ac20fbde8 +size 4837 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico index 36d23e786a..d9ec6efafd 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0ea7b4378ca813105adc1de4585ca88d62aa2c6d85f07ad7c4fac583ae5d2e63 -size 14559 +oid sha256:9aa6a6662837f8eb316946279fa13a04e0cfbbceddd86b89763336b6c28ba87e +size 7714 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico index e8d2bf4e28..5d970e8867 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ffb32312369a2acab1aad1a79464400e6d957778b02d6d2368aaf26f3abc3830 -size 14607 +oid sha256:d1d9d8a2df80f64320951a2ee5047768cd486add3d6a354bf4c5c51821651d4a +size 7776 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico index d0aa78ee1d..b916ca2a57 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d9fa9ca91a903c6af5830a07e592da8848916a05d66901ca2fbf0c63bb9203d1 -size 14326 +oid sha256:87ad263ed3cb2acb2e2147c19b2da60114426e3176be55d5b33f1f1d3a33ec0b +size 7634 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico index e65057473d..b8e049d292 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f7a3461edde26a19c2db0cb8f48fcd7a11f73cacef071915b1e98a9979546690 -size 14135 +oid sha256:206ed6c081a51ce31d1db33dda132dde2a4a02e8cf81a415d02b3811329b48c0 +size 7572 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico index 8617cecd72..9269df1452 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f9575a575df5e335753b7ca26e80a9cdbb6cafb37910aea661f0fef3c675c646 -size 12124 +oid sha256:0275d8c821344f5af2e474b9fbf13bd56834b91a44ecbca1b81445338256fca9 +size 6006 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico index 7f3a1d48fb..2024331fd6 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f32692921567602bddc548d13b2c303d2c16289c298571364e8d3a7dde23dff0 -size 12413 +oid sha256:813d4262d8e5f0b64c6db67bf2a2e8f7bed95bca6fdc3a164acf757c1930a121 +size 5974 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico index 17322036c9..3316a7be96 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8b8ceddbd32608a07fdac977291f511fcbf6b493cbafbcd3108522c20c341855 -size 12216 +oid sha256:56d31af326848708f73d89c3cb022cb4f8c9826ccbbf8b940bfafdfbaba5bdfd +size 6001 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico index 52f1461b9f..1fca548b7d 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:18ed145cc87bd5c25eada1c06f126488517e04b4a8ea11521f48d13c8d06305f -size 12084 +oid sha256:249f486df5b225439551188f5df370898767690b6de50316b0d938abab29c751 +size 5910 From 85f6c3e0b7f102625f341eecbb5d7c89990396e4 Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 09:42:01 -0500 Subject: [PATCH 06/28] fix test --- .../stacks-svelte/src/components/EmptyState/EmptyState.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts index c106f3ac0c..643a5e8093 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts @@ -12,7 +12,6 @@ describe("EmptyState", () => { }); expect(screen.getByText("There are no items to display at this time.")) .to.exist; - expect(screen.getByRole("button")).not.to.exist; }); it("should render an empty state with the description and call-to-action content", () => { From e4f6018e7b0f9f6f09d23fad4e43a8c899f4b7d6 Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 09:52:13 -0500 Subject: [PATCH 07/28] upgrade expanding input to svelte 5 --- .../ExpandingInput/ExpandingInput.svelte | 43 ++++++++++--------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte index d7d8dd8da7..4e72fafaad 100644 --- a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte +++ b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte @@ -3,24 +3,28 @@
@@ -43,9 +48,7 @@ rows="1" bind:value {id} - {...$$restProps} - on:input - on:keydown + {...rest} >
From 3d906e3f9a5ddf5ea427c03b51c67aaef9c3ed52 Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 10:39:25 -0500 Subject: [PATCH 08/28] tweak tests --- .../src/components/EmptyState/EmptyState.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts index 643a5e8093..b41f955615 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts @@ -7,7 +7,7 @@ describe("EmptyState", () => { it("should render an empty state with the description content", () => { render(EmptyState, { description: createRawSnippet(() => ({ - render: () => "There are no items to display at this time.", + render: () => "There are no items to display at this time.", })), }); expect(screen.getByText("There are no items to display at this time.")) @@ -17,7 +17,7 @@ describe("EmptyState", () => { it("should render an empty state with the description and call-to-action content", () => { render(EmptyState, { description: createRawSnippet(() => ({ - render: () => "There are no items to display at this time.", + render: () => "There are no items to display at this time.", })), callToAction: createRawSnippet(() => ({ render: () => @@ -32,7 +32,7 @@ describe("EmptyState", () => { it("should render an empty state with the description and title content", () => { render(EmptyState, { description: createRawSnippet(() => ({ - render: () => "There are no items to display at this time.", + render: () => "There are no items to display at this time.", })), title: "No results found", }); From c24d2fb202667c817f365a6535f3187f7fce8ced Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 10:44:13 -0500 Subject: [PATCH 09/28] lint --- .../src/components/EmptyState/EmptyState.test.ts | 9 ++++++--- .../components/ExpandingInput/ExpandingInput.svelte | 11 +++-------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts index b41f955615..5df5d3ce5c 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts @@ -7,7 +7,8 @@ describe("EmptyState", () => { it("should render an empty state with the description content", () => { render(EmptyState, { description: createRawSnippet(() => ({ - render: () => "There are no items to display at this time.", + render: () => + "There are no items to display at this time.", })), }); expect(screen.getByText("There are no items to display at this time.")) @@ -17,7 +18,8 @@ describe("EmptyState", () => { it("should render an empty state with the description and call-to-action content", () => { render(EmptyState, { description: createRawSnippet(() => ({ - render: () => "There are no items to display at this time.", + render: () => + "There are no items to display at this time.", })), callToAction: createRawSnippet(() => ({ render: () => @@ -32,7 +34,8 @@ describe("EmptyState", () => { it("should render an empty state with the description and title content", () => { render(EmptyState, { description: createRawSnippet(() => ({ - render: () => "There are no items to display at this time.", + render: () => + "There are no items to display at this time.", })), title: "No results found", }); diff --git a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte index 4e72fafaad..87d98a06dd 100644 --- a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte +++ b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte @@ -15,13 +15,13 @@ * @type {"default" | "chat"} Variant */ variant?: Variant; - + /** * Initial value to pass to input */ value?: string; - [key: string]: any + [key: string]: any; } let { id, variant = "default", value = "", ...rest }: Props = $props(); @@ -43,12 +43,7 @@
-
From c24783dae36a379d7ca4170d23f79a6c9108e855 Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 10:47:12 -0500 Subject: [PATCH 10/28] simplify expanding input svelte code --- .../src/components/ExpandingInput/ExpandingInput.svelte | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte index 87d98a06dd..6ebd8f0276 100644 --- a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte +++ b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte @@ -20,11 +20,9 @@ * Initial value to pass to input */ value?: string; - - [key: string]: any; } - let { id, variant = "default", value = "", ...rest }: Props = $props(); + let { id, variant = "default", value = "" }: Props = $props(); const getClasses = (variant: string) => { let common = "s-textarea ws-pre-wrap break-word hmx3 lh-lg"; @@ -43,8 +41,7 @@
- +
From fd216d9b2634c2a3b2b9ebc3a5be5f25c7bd580a Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 10:48:20 -0500 Subject: [PATCH 11/28] Create lovely-hotels-arrive.md --- .changeset/lovely-hotels-arrive.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/lovely-hotels-arrive.md diff --git a/.changeset/lovely-hotels-arrive.md b/.changeset/lovely-hotels-arrive.md new file mode 100644 index 0000000000..4aa1203c22 --- /dev/null +++ b/.changeset/lovely-hotels-arrive.md @@ -0,0 +1,6 @@ +--- +"@stackoverflow/stacks": patch +"@stackoverflow/stacks-svelte": minor +--- + +feat(empty-state): new SHINE styles and Svelte Component From 68cdb17c8d4fe81475070e62f6f1e25c16e739e2 Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 10:52:29 -0500 Subject: [PATCH 12/28] Revert "simplify expanding input svelte code" This reverts commit c24783dae36a379d7ca4170d23f79a6c9108e855. --- .../src/components/ExpandingInput/ExpandingInput.svelte | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte index 6ebd8f0276..87d98a06dd 100644 --- a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte +++ b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte @@ -20,9 +20,11 @@ * Initial value to pass to input */ value?: string; + + [key: string]: any; } - let { id, variant = "default", value = "" }: Props = $props(); + let { id, variant = "default", value = "", ...rest }: Props = $props(); const getClasses = (variant: string) => { let common = "s-textarea ws-pre-wrap break-word hmx3 lh-lg"; @@ -41,7 +43,8 @@
- +
From c8dc0381e8b082c6f9ab2f548f28cd57ab6b791a Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 10:55:05 -0500 Subject: [PATCH 13/28] fix lint --- .../src/components/ExpandingInput/ExpandingInput.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte index 87d98a06dd..daa6d8ee15 100644 --- a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte +++ b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte @@ -21,7 +21,10 @@ */ value?: string; - [key: string]: any; + /** + * Additional input attributes like `placeholder` + */ + [key: string]: unknown; } let { id, variant = "default", value = "", ...rest }: Props = $props(); From 7bb42fa8d00083138d7b34d829aa7b3f42b99af7 Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 11:20:01 -0500 Subject: [PATCH 14/28] fix expanding-input --- .../src/components/ExpandingInput/ExpandingInput.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte index daa6d8ee15..436a7193c7 100644 --- a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte +++ b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte @@ -32,7 +32,7 @@ const getClasses = (variant: string) => { let common = "s-textarea ws-pre-wrap break-word hmx3 lh-lg"; let textarea = `${common} ps-absolute i0 h100`; - let grower = `${common} v-hidden overflow-hidden`; + let grower = `${common} v-hidden overflow-hidden h100`; if (variant === "chat") { let chatCommon = " py12 pr64 hmn48"; From 0388f4ad26b36f78df881673ab19bb6f0c1873cc Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 11:22:15 -0500 Subject: [PATCH 15/28] Update lovely-hotels-arrive.md --- .changeset/lovely-hotels-arrive.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/lovely-hotels-arrive.md b/.changeset/lovely-hotels-arrive.md index 4aa1203c22..996dccdf2b 100644 --- a/.changeset/lovely-hotels-arrive.md +++ b/.changeset/lovely-hotels-arrive.md @@ -4,3 +4,4 @@ --- feat(empty-state): new SHINE styles and Svelte Component +fix(expanding-input): expands correctly now after textarea update From 14c8cea461864278406bd78525669cec1b2bf2d2 Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 12:02:48 -0500 Subject: [PATCH 16/28] set width for textareas in docs --- .../product/components/textarea.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/stacks-docs/product/components/textarea.html b/packages/stacks-docs/product/components/textarea.html index f56821a670..43b82e37a0 100644 --- a/packages/stacks-docs/product/components/textarea.html +++ b/packages/stacks-docs/product/components/textarea.html @@ -13,7 +13,7 @@
- +
{% endhighlight %} @@ -21,7 +21,7 @@
- +
@@ -72,7 +72,7 @@
- + @Svg.Alert.With("s-input-icon")

Consider entering a description to help us better help you.

@@ -82,7 +82,7 @@
- + {% icon "Alert", "s-input-icon" %}

Consider entering a description to help us better help you.

@@ -96,7 +96,7 @@
- + @Svg.AlertCircle.With("s-input-icon")

A description must be provided.

@@ -106,7 +106,7 @@
- + {% icon "AlertCircle", "s-input-icon" %}

A description must be provided.

@@ -120,7 +120,7 @@
- + @Svg.Checkmark.With("s-input-icon")

Thanks for providing a description.

@@ -130,7 +130,7 @@
- + {% icon "Check", "s-input-icon" %}

Thanks for providing a description.

@@ -161,7 +161,7 @@ {% if item.class == "N/A" %}{{ item.class }}{% else %}.{{ item.class }}{% endif %}
- +
From 21a57a68042e9a2b395c1a41e134248c8564b543 Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 12:37:33 -0500 Subject: [PATCH 17/28] add examples with links --- packages/stacks-docs/product/components/empty-states.html | 4 ++-- .../src/components/EmptyState/EmptyState.stories.svelte | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html index 65be0e94b8..4b4a97950c 100644 --- a/packages/stacks-docs/product/components/empty-states.html +++ b/packages/stacks-docs/product/components/empty-states.html @@ -63,13 +63,13 @@

User trends not ready

{% highlight html %}
@Svg.Spot.Empty -

There’s no data associated with this account.

+

There’s no data associated with this account.

{% endhighlight %}
{% spot, "Empty" %} -

There’s no data associated with this account.

+

There’s no data associated with this account.

diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte index 971d943590..7282874c53 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte @@ -1,6 +1,7 @@
- + {#if title}

{title}

{/if} From c7cc9b3db586234eec6dcbe5c24ebe297aeac40c Mon Sep 17 00:00:00 2001 From: Sal Date: Tue, 16 Dec 2025 14:27:59 -0500 Subject: [PATCH 19/28] hack to fix visual tests --- .../lib/components/empty-state/empty-state.visual.test.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts index 212eae67ff..113951cac7 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts @@ -7,7 +7,8 @@ describe("empty-state", () => { runVisualTests({ baseClass: "s-empty-state", children: { - default: `${SpotEmpty}

This is a wonderful empty state component.

`, + default: `${SpotEmpty.replace("svg-spot", "svg-spot native")} +

This is a wonderful empty state component.

`, }, template: ({ component, testid }) => html`
${component}
From 3310b2b69048e1961d005533132b6aeb1c646d6f Mon Sep 17 00:00:00 2001 From: Sal Date: Fri, 19 Dec 2025 12:14:56 -0500 Subject: [PATCH 20/28] update baseline --- .../Chromium/baseline/s-empty-state-dark-withTitle.ico | 3 +++ .../baseline/s-empty-state-highcontrast-dark-withTitle.ico | 3 +++ .../baseline/s-empty-state-highcontrast-light-withTitle.ico | 3 +++ .../Chromium/baseline/s-empty-state-light-withTitle.ico | 3 +++ .../Firefox/baseline/s-empty-state-dark-withTitle.ico | 3 +++ .../baseline/s-empty-state-highcontrast-dark-withTitle.ico | 3 +++ .../baseline/s-empty-state-highcontrast-light-withTitle.ico | 3 +++ .../Firefox/baseline/s-empty-state-light-withTitle.ico | 3 +++ .../Webkit/baseline/s-empty-state-dark-withTitle.ico | 3 +++ .../baseline/s-empty-state-highcontrast-dark-withTitle.ico | 3 +++ .../baseline/s-empty-state-highcontrast-light-withTitle.ico | 3 +++ .../Webkit/baseline/s-empty-state-light-withTitle.ico | 3 +++ 12 files changed, 36 insertions(+) create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-withTitle.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-withTitle.ico diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-withTitle.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-withTitle.ico new file mode 100644 index 0000000000..456a396b44 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:dddbb78b1154e0fd67da24fd963a9a478df6a1ea7ab7aa93f60bb90e618d5fdf +size 8804 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-withTitle.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-withTitle.ico new file mode 100644 index 0000000000..476d05430f --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8033adaacd353f6928864f6213b05897ec5257289840ee88bc41b7f816d9f126 +size 8786 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-withTitle.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-withTitle.ico new file mode 100644 index 0000000000..6d53500c16 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d355bd17a16fae60ad90be6c6178153ea1d87c80210e73931129616aef8d9132 +size 8782 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-withTitle.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-withTitle.ico new file mode 100644 index 0000000000..9a5bd9fb79 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2720347a9599ce2c4b4f7f07a56e3dab10bfe0646b2e2d9f66dad927013880aa +size 8588 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-withTitle.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-withTitle.ico new file mode 100644 index 0000000000..e7f5b1bf4c --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f4fb1ba22e07d2c6f253e21852d3465ae92e9938997e92177bc4b3880ed31488 +size 12565 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-withTitle.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-withTitle.ico new file mode 100644 index 0000000000..9cc3991640 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8fc5ef304dd47f1ff6a2e3dbf86ea6060552b03108f06fe56a865ce2e22fb848 +size 12613 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-withTitle.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-withTitle.ico new file mode 100644 index 0000000000..01788e8030 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5908f7e495cb1d410b154749065448f4b5aa543b129e75c4f5f4c5b15b081714 +size 12294 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-withTitle.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-withTitle.ico new file mode 100644 index 0000000000..79c9fedef2 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:82682a993a09de13aa4b29e3c4e93be29a9c71706f70a509576cf4c5256239f5 +size 12155 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-withTitle.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-withTitle.ico new file mode 100644 index 0000000000..9dc9949c10 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:45de364e970f768f4208529f191f8efdc6095b7c8f035f5372e5bc4d85ac528d +size 10527 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-withTitle.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-withTitle.ico new file mode 100644 index 0000000000..19c9044442 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b518cbbfa5232fae6df1bcb7c9d2e8a4bb55e63c6a586aa5d0d417e859ce4cda +size 10507 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-withTitle.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-withTitle.ico new file mode 100644 index 0000000000..caaf8cd918 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:77c07d37d7fae93cbd5bd0a08f192f559e150d8a0fc27b593666187f07a16d78 +size 10638 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-withTitle.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-withTitle.ico new file mode 100644 index 0000000000..786e5c301c --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-withTitle.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8c45db21dc51a5905a22880ab75ebe397af7ecd315b3cf6c694fa36d6b5c5c86 +size 10372 From eda831ccb38927c01fbd2bc63ea5dbe80d99cd8c Mon Sep 17 00:00:00 2001 From: Sal Date: Fri, 19 Dec 2025 12:15:05 -0500 Subject: [PATCH 21/28] pr feedback --- .../empty-state/empty-state.a11y.test.ts | 4 +++- .../components/empty-state/empty-state.less | 8 ++++++-- .../empty-state/empty-state.visual.test.ts | 3 +++ .../product/components/empty-states.html | 12 ++++++------ .../EmptyState/EmptyState.stories.svelte | 18 +++++------------- .../components/EmptyState/EmptyState.svelte | 10 +++++----- .../components/EmptyState/EmptyState.test.ts | 4 ++-- 7 files changed, 30 insertions(+), 29 deletions(-) diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts index 9b515072e7..39d01d1ee6 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts @@ -7,7 +7,9 @@ describe("empty-state", () => { runA11yTests({ baseClass: "s-empty-state", children: { - default: `${SpotEmpty}

This is a wonderful empty state component.

`, + default: `${SpotEmpty} +

No questions match your result.

+

This is a wonderful empty state component.

`, }, template: ({ component, testid }) => html`
${component}
diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.less b/packages/stacks-classic/lib/components/empty-state/empty-state.less index 569c55f71a..8829b68c7d 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.less +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.less @@ -2,11 +2,10 @@ // CHILD ELEMENTS p { color: var(--black-400); - font-size: var(--fs-body1); margin-bottom: var(--su32); } - &__title { + &--title { font-weight: 600; font-size: var(--fs-body3); margin-bottom: var(--su8); @@ -17,6 +16,11 @@ margin-bottom: var(--su24); } + // Remove margin from

if there are no buttons + &:last-child { + margin-bottom: 0; + } + text-align: center; margin-left: auto; margin-right: auto; diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts index 113951cac7..a87dd27c57 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts @@ -9,6 +9,9 @@ describe("empty-state", () => { children: { default: `${SpotEmpty.replace("svg-spot", "svg-spot native")}

This is a wonderful empty state component.

`, + withTitle: `${SpotEmpty.replace("svg-spot", "svg-spot native")} +

Amazing title for this empty state.

+

This is a wonderful empty state component.

`, }, template: ({ component, testid }) => html`
${component}
diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html index 00b3aa9347..87d8702155 100644 --- a/packages/stacks-docs/product/components/empty-states.html +++ b/packages/stacks-docs/product/components/empty-states.html @@ -19,17 +19,17 @@ {% highlight html %}
@Svg.Spot.Empty.With("native") -

No questions match your result.

+

No questions match your result.

Try refining your search term or trying something more general.

-
{% endhighlight %}
{% spot, "Empty", "native" %} -

No questions match your result.

+

No questions match your result.

Try refining your search term or trying something more general.

- +
@@ -42,14 +42,14 @@

No questions match your result.

{% highlight html %}
@Svg.Spot.Empty.With("native") -

User trends not ready

+

User trends not ready

Please check back in a few days.

{% endhighlight %}
{% spot, "Empty", "native" %} -

User trends not ready

+

User trends not ready

Please check back in a few days.

diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte index 7282874c53..1212d2202a 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte @@ -2,30 +2,22 @@ import { defineMeta } from "@storybook/addon-svelte-csf"; import EmptyState from "./EmptyState.svelte"; import Link from "../Link/Link.svelte"; + import Button from "../Button/Button.svelte"; const { Story } = defineMeta({ title: "Components/EmptyState", component: EmptyState, - tags: ["labs"], - argTypes: { - title: { - control: "text", - }, - class: { - control: "text", - }, - }, }); {#snippet template(args)} - + {#snippet description()} There are no items to display at this time. {/snippet} - {#snippet callToAction()} - + {#snippet actions()} + {/snippet} {/snippet} @@ -33,7 +25,7 @@ {#snippet template(args)} - + {#snippet description()} No data found. Check back later. {/snippet} diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte index e03a56ed9a..37b2e83ce5 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte @@ -23,24 +23,24 @@ /** * Optional snippet for actionable buttons */ - callToAction?: Snippet; + actions?: Snippet; } let { title, class: className, description, - callToAction, + actions, }: Props = $props();
{#if title} -

{title}

+

{title}

{/if}

{@render description()}

- {#if callToAction} - {@render callToAction()} + {#if actions} + {@render actions()} {/if}
diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts index 5df5d3ce5c..9a9631ab0a 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts @@ -21,9 +21,9 @@ describe("EmptyState", () => { render: () => "There are no items to display at this time.", })), - callToAction: createRawSnippet(() => ({ + actions: createRawSnippet(() => ({ render: () => - '', + '', })), }); expect(screen.getByText("There are no items to display at this time.")) From b4fb2aeb6ac85c03d0c7b8a1ace5d1961d20f110 Mon Sep 17 00:00:00 2001 From: Sal Date: Fri, 19 Dec 2025 12:20:28 -0500 Subject: [PATCH 22/28] make header tag dynamic --- .../src/components/EmptyState/EmptyState.svelte | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte index 37b2e83ce5..eeeab4b3db 100644 --- a/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte +++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte @@ -9,6 +9,11 @@ */ title?: string; + /** + * Html tag to use for the title + */ + titleTag?: string; + /** * Additional CSS classes added to the underlying outer HTML element */ @@ -28,6 +33,7 @@ let { title, + titleTag = "h4", class: className, description, actions, @@ -37,7 +43,9 @@
{#if title} -

{title}

+ + {title} + {/if}

{@render description()}

{#if actions} From 09b1d00bba97c41d533714795d2dc25101deba70 Mon Sep 17 00:00:00 2001 From: Sal Date: Fri, 19 Dec 2025 12:25:59 -0500 Subject: [PATCH 23/28] optimize expanding input css class --- .../src/components/ExpandingInput/ExpandingInput.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte index 436a7193c7..bdc7025017 100644 --- a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte +++ b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte @@ -30,9 +30,9 @@ let { id, variant = "default", value = "", ...rest }: Props = $props(); const getClasses = (variant: string) => { - let common = "s-textarea ws-pre-wrap break-word hmx3 lh-lg"; - let textarea = `${common} ps-absolute i0 h100`; - let grower = `${common} v-hidden overflow-hidden h100`; + let common = "s-textarea ws-pre-wrap break-word hmx3 lh-lg h100"; + let textarea = `${common} ps-absolute i0`; + let grower = `${common} v-hidden overflow-hidden`; if (variant === "chat") { let chatCommon = " py12 pr64 hmn48"; From 5f3229b330d784a2fdd7533e895517b063c4af7f Mon Sep 17 00:00:00 2001 From: Sal Date: Fri, 19 Dec 2025 14:11:38 -0500 Subject: [PATCH 24/28] update baseline --- .../lib/components/empty-state/empty-state.visual.test.ts | 2 +- .../Chromium/baseline/s-empty-state-dark-with-title.ico | 3 +++ .../screenshots/Chromium/baseline/s-empty-state-dark.ico | 4 ++-- .../baseline/s-empty-state-highcontrast-dark-with-title.ico | 3 +++ .../Chromium/baseline/s-empty-state-highcontrast-dark.ico | 4 ++-- .../baseline/s-empty-state-highcontrast-light-with-title.ico | 3 +++ .../Chromium/baseline/s-empty-state-highcontrast-light.ico | 4 ++-- .../Chromium/baseline/s-empty-state-light-with-title.ico | 3 +++ .../screenshots/Chromium/baseline/s-empty-state-light.ico | 4 ++-- .../Firefox/baseline/s-empty-state-dark-with-title.ico | 3 +++ .../screenshots/Firefox/baseline/s-empty-state-dark.ico | 4 ++-- .../baseline/s-empty-state-highcontrast-dark-with-title.ico | 3 +++ .../Firefox/baseline/s-empty-state-highcontrast-dark.ico | 4 ++-- .../baseline/s-empty-state-highcontrast-light-with-title.ico | 3 +++ .../Firefox/baseline/s-empty-state-highcontrast-light.ico | 4 ++-- .../Firefox/baseline/s-empty-state-light-with-title.ico | 3 +++ .../screenshots/Firefox/baseline/s-empty-state-light.ico | 4 ++-- .../Webkit/baseline/s-empty-state-dark-with-title.ico | 3 +++ .../screenshots/Webkit/baseline/s-empty-state-dark.ico | 4 ++-- .../baseline/s-empty-state-highcontrast-dark-with-title.ico | 3 +++ .../Webkit/baseline/s-empty-state-highcontrast-dark.ico | 4 ++-- .../baseline/s-empty-state-highcontrast-light-with-title.ico | 3 +++ .../Webkit/baseline/s-empty-state-highcontrast-light.ico | 4 ++-- .../Webkit/baseline/s-empty-state-light-with-title.ico | 3 +++ .../screenshots/Webkit/baseline/s-empty-state-light.ico | 4 ++-- 25 files changed, 61 insertions(+), 25 deletions(-) create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-with-title.ico create mode 100644 packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-with-title.ico diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts index a87dd27c57..a276d3b83d 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts @@ -9,7 +9,7 @@ describe("empty-state", () => { children: { default: `${SpotEmpty.replace("svg-spot", "svg-spot native")}

This is a wonderful empty state component.

`, - withTitle: `${SpotEmpty.replace("svg-spot", "svg-spot native")} + "with-title": `${SpotEmpty.replace("svg-spot", "svg-spot native")}

Amazing title for this empty state.

This is a wonderful empty state component.

`, }, diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-with-title.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-with-title.ico new file mode 100644 index 0000000000..e7a02f7e9d --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f1e44944124c52ff9e2ac166218ced4ea01fb24f5548e2dcdbc2ecc55c21215f +size 8811 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico index 81afb0c510..655ea4f81b 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:abdd2b0e72462e7d58dc5062d99fecdd6305b85bd463756148ec59a5144710af -size 4964 +oid sha256:dda72730120d7efa55fc8d8bced11fa70d6a09e950de74ded770eb4a20344e6b +size 4970 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-with-title.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-with-title.ico new file mode 100644 index 0000000000..3096ac8b9e --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:acf1c05eba84b81f31affe9746c1f1117956659dbdd8b9e7649cd0cf293d8216 +size 8795 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico index cb80b2b336..7b416fc1be 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ae4486bd476995dd06ad6524352cc5b71cf27a4200e6b787654c2b4bfeb65189 -size 4955 +oid sha256:f6bb4127c9fe2c530c1e3b4a277e939f6de501d3cc0244d0369473a667718d18 +size 4962 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-with-title.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-with-title.ico new file mode 100644 index 0000000000..ec761f5360 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:106377ab17a76741a26125107a0423a4a5d4303888a1e815ed4e6a1932bb0859 +size 8789 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico index fa489e539b..78b905a9f2 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:21b5a8e4b5d0c260d519798d6706108835c69cc038fed18fb4e0e48d5155652f -size 4904 +oid sha256:7bfeb3d6a5c171a8d0d762263b1c2414949c52b76745b3220fdd70c8689e79db +size 4912 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-with-title.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-with-title.ico new file mode 100644 index 0000000000..1ba0906471 --- /dev/null +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ff618adb5b8327a4a29073249b70b8c628bc392ec8c8be72713e6addbad2d649 +size 8595 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico index 9715b66dbc..72827574f7 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:268fb0f84f7cc040c39dd40258e97dde5bc892769456e1d7641b9e6ac20fbde8 -size 4837 +oid sha256:4692877f28bbc9fa042e05a85f8361f1a28e8569eddba4c9ba11c8d60fb4997e +size 4844 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-with-title.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-with-title.ico new file mode 100644 index 0000000000..290efbc349 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bfda345117d0322843da191a69356ed40a60f2c86e7ebd22664b0a06f667f8f2 +size 12538 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico index d9ec6efafd..44a84cb023 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9aa6a6662837f8eb316946279fa13a04e0cfbbceddd86b89763336b6c28ba87e -size 7714 +oid sha256:037b1502f9a69c255871b19cb0d8a63f8050cf826bbf7b15b817bfa1534476b0 +size 7681 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-with-title.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-with-title.ico new file mode 100644 index 0000000000..51c7c09c15 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:895e62747b0711ff16abf4a03a2f518611252fb18e124898007fd4c6cab52808 +size 12587 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico index 5d970e8867..1e5edf2486 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d1d9d8a2df80f64320951a2ee5047768cd486add3d6a354bf4c5c51821651d4a -size 7776 +oid sha256:6984bb7c7acc7d900572926d77444909815670e884b2866f78990ab669df2daa +size 7747 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-with-title.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-with-title.ico new file mode 100644 index 0000000000..922efdc23c --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b32e88072db1e29476df89fc603c6d356e12b231e19618773f73a27a66036435 +size 12268 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico index b916ca2a57..15ffea9273 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:87ad263ed3cb2acb2e2147c19b2da60114426e3176be55d5b33f1f1d3a33ec0b -size 7634 +oid sha256:babf286cdfaed4239fa2bd9a622a22e00f81d83912cfb91ebb4ba5d740d8d773 +size 7608 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-with-title.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-with-title.ico new file mode 100644 index 0000000000..856823b3a7 --- /dev/null +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0fb5ed282c442f215e566167b0c51082d93e28d05f60d4d730afe076b4af8387 +size 12129 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico index b8e049d292..def7121f50 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:206ed6c081a51ce31d1db33dda132dde2a4a02e8cf81a415d02b3811329b48c0 -size 7572 +oid sha256:b3e4a5d663e048339750521c1ee12db9d49c979c86e34860622019a985458646 +size 7543 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-with-title.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-with-title.ico new file mode 100644 index 0000000000..e43bc62777 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c44c854487589df61d9733ffc6fb81723821de9aee0573f727b3daa47aaed511 +size 10535 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico index 9269df1452..652317eaa8 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0275d8c821344f5af2e474b9fbf13bd56834b91a44ecbca1b81445338256fca9 -size 6006 +oid sha256:69ec21b24df946f3954c661b09076814bcfe33315d413e7f435fba4fa3c56c06 +size 6012 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-with-title.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-with-title.ico new file mode 100644 index 0000000000..9ef220430d --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3443cda8cde6fbcd37238d132310798e8376158f8f3f04713a9e95245ee6ff8f +size 10516 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico index 2024331fd6..6fc50d752a 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:813d4262d8e5f0b64c6db67bf2a2e8f7bed95bca6fdc3a164acf757c1930a121 -size 5974 +oid sha256:bd13e509147261e1e98247d8a97144c692528b28d348dab6449944ccfd1e9499 +size 5983 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-with-title.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-with-title.ico new file mode 100644 index 0000000000..49306713b3 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7181f9fd8ac664fbf9263df5c7274593d40f140a031605fe3a59d0e13540c52c +size 10647 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico index 3316a7be96..7ccb8b471f 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:56d31af326848708f73d89c3cb022cb4f8c9826ccbbf8b940bfafdfbaba5bdfd -size 6001 +oid sha256:4abc5ef6b29d547d085f881b0099f4136525c829696d9a81b7634909216f8d02 +size 6012 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-with-title.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-with-title.ico new file mode 100644 index 0000000000..db6ef35604 --- /dev/null +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-with-title.ico @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0fefd26d34d0dd0f792c5f42e24319f9161e4d9bdfdfcfcd2210d1095168d063 +size 10382 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico index 1fca548b7d..f90c1a6079 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:249f486df5b225439551188f5df370898767690b6de50316b0d938abab29c751 -size 5910 +oid sha256:f0172e907c70b655f4f490ebe7c88c6868450a4a56acec8b7c1b4c0023de3564 +size 5921 From 8749cebf54781191693cfd998cc414da39dd6494 Mon Sep 17 00:00:00 2001 From: Sal Date: Fri, 19 Dec 2025 14:16:53 -0500 Subject: [PATCH 25/28] try fix timeout --- packages/stacks-classic/lib/components/modal/modal.test.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/stacks-classic/lib/components/modal/modal.test.ts b/packages/stacks-classic/lib/components/modal/modal.test.ts index 8fef533a7b..06a1c898a7 100644 --- a/packages/stacks-classic/lib/components/modal/modal.test.ts +++ b/packages/stacks-classic/lib/components/modal/modal.test.ts @@ -139,8 +139,7 @@ describe("modal", () => { await user.click(trigger); expect(modal).to.be.visible; - - await waitFor(() => expect(initialFocusEl).to.have.focus); + await waitFor(() => expect(initialFocusEl).to.have.focus, { timeout: 20000 }); }); it("should focus on the first focusable element when modal is shown and no initialFocus is specified", async () => { From 8f82547d6686fa3500f88a16302ee9d5ee352469 Mon Sep 17 00:00:00 2001 From: Sal Date: Fri, 19 Dec 2025 14:21:30 -0500 Subject: [PATCH 26/28] switch back to ellipsis again --- .../src/components/PostSummary/PostSummary.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte index 3bc507526a..0652af822f 100644 --- a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte +++ b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte @@ -35,8 +35,8 @@ import PopoverContent from "../Popover/PopoverContent.svelte"; import PopoverReference from "../Popover/PopoverReference.svelte"; import UserCard from "../UserCard/UserCard.svelte"; - import { IconShield } from "@stackoverflow/stacks-icons-legacy/icons"; - import { IconCheck, IconMore16V } from "@stackoverflow/stacks-icons/icons"; + import { IconShield, IconEllipsisVertical } from "@stackoverflow/stacks-icons-legacy/icons"; + import { IconCheck } from "@stackoverflow/stacks-icons/icons"; /** * The URL to navigate to when the post title is clicked @@ -349,7 +349,7 @@ class="s-post-summary--content-menu-button" variant="tonal" > - + {i18nActionMenuButtonText} From 759b9aca9666dbc3c805741030e2f3828461f329 Mon Sep 17 00:00:00 2001 From: Sal Date: Fri, 19 Dec 2025 14:37:20 -0500 Subject: [PATCH 27/28] lint --- .../src/components/PostSummary/PostSummary.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte index 0652af822f..ced266bec4 100644 --- a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte +++ b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte @@ -35,7 +35,10 @@ import PopoverContent from "../Popover/PopoverContent.svelte"; import PopoverReference from "../Popover/PopoverReference.svelte"; import UserCard from "../UserCard/UserCard.svelte"; - import { IconShield, IconEllipsisVertical } from "@stackoverflow/stacks-icons-legacy/icons"; + import { + IconShield, + IconEllipsisVertical, + } from "@stackoverflow/stacks-icons-legacy/icons"; import { IconCheck } from "@stackoverflow/stacks-icons/icons"; /** From 306a2f3e8bbcc93381b7e56a60980e0cc06f16b1 Mon Sep 17 00:00:00 2001 From: Sal Date: Fri, 19 Dec 2025 14:45:42 -0500 Subject: [PATCH 28/28] prettier format --- .../lib/components/empty-state/empty-state.visual.test.ts | 2 +- packages/stacks-classic/lib/components/modal/modal.test.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts index a276d3b83d..d314d7444e 100644 --- a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts +++ b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts @@ -7,7 +7,7 @@ describe("empty-state", () => { runVisualTests({ baseClass: "s-empty-state", children: { - default: `${SpotEmpty.replace("svg-spot", "svg-spot native")} + "default": `${SpotEmpty.replace("svg-spot", "svg-spot native")}

This is a wonderful empty state component.

`, "with-title": `${SpotEmpty.replace("svg-spot", "svg-spot native")}

Amazing title for this empty state.

diff --git a/packages/stacks-classic/lib/components/modal/modal.test.ts b/packages/stacks-classic/lib/components/modal/modal.test.ts index 06a1c898a7..ea9a3b3532 100644 --- a/packages/stacks-classic/lib/components/modal/modal.test.ts +++ b/packages/stacks-classic/lib/components/modal/modal.test.ts @@ -139,7 +139,9 @@ describe("modal", () => { await user.click(trigger); expect(modal).to.be.visible; - await waitFor(() => expect(initialFocusEl).to.have.focus, { timeout: 20000 }); + await waitFor(() => expect(initialFocusEl).to.have.focus, { + timeout: 20000, + }); }); it("should focus on the first focusable element when modal is shown and no initialFocus is specified", async () => {