From 522790298a7831857bb0c1ef1fe9a3541d7a93ce Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Thu, 19 Feb 2026 18:01:21 -0500 Subject: [PATCH 1/9] chore(components): remove deprecated components --- packages/stacks-classic/lib/stacks-static.less | 11 +---------- packages/stacks-docs/_includes/layouts/page.html | 12 +++++++++++- .../assets/less/stacks-documentation.less | 10 ++++++++++ .../stacks-docs/product/components/breadcrumbs.html | 2 ++ .../product/components/button-groups.html | 1 + packages/stacks-docs/product/components/cards.html | 1 + .../stacks-docs/product/components/expandable.html | 1 + .../product/components/link-previews.html | 1 + .../stacks-docs/product/components/page-titles.html | 1 + .../product/components/progress-bars.html | 1 + packages/stacks-docs/product/components/topbar.html | 1 + .../stacks-docs/product/components/uploader.html | 1 + 12 files changed, 32 insertions(+), 11 deletions(-) diff --git a/packages/stacks-classic/lib/stacks-static.less b/packages/stacks-classic/lib/stacks-static.less index 3ed3e2db4b..3aa73ab947 100644 --- a/packages/stacks-classic/lib/stacks-static.less +++ b/packages/stacks-classic/lib/stacks-static.less @@ -51,43 +51,34 @@ @import "components/badge/badge.less"; @import "components/banner/banner.less"; @import "components/bling/bling.less"; -@import "components/breadcrumbs/breadcrumbs.less"; @import "components/button/button.less"; -@import "components/button-group/button-group.less"; -@import "components/card/card.less"; @import "components/checkbox_radio/checkbox_radio.less"; @import "components/form-group/form-group.less"; @import "components/code-block/code-block.less"; @import "components/description/description.less"; @import "components/empty-state/empty-state.less"; -@import "components/expandable/expandable.less"; @import "components/input_textarea/input_textarea.less"; @import "components/input-fill/input-fill.less"; @import "components/input-icon/input-icon.less"; @import "components/input-message/input-message.less"; @import "components/label/label.less"; @import "components/link/link.less"; -@import "components/link-preview/link-preview.less"; +@import "components/loader/loader.less"; @import "components/menu/menu.less"; @import "components/modal/modal.less"; @import "components/navigation/navigation.less"; @import "components/notice/notice.less"; -@import "components/page-title/page-title.less"; @import "components/pagination/pagination.less"; @import "components/popover/popover.less"; @import "components/post-summary/post-summary.less"; -@import "components/progress-bar/progress-bar.less"; @import "components/prose/prose.less"; @import "components/select/select.less"; @import "components/sidebar-widget/sidebar-widget.less"; -@import "components/loader/loader.less"; @import "components/table/table.less"; @import "components/table-container/table-container.less"; @import "components/tag/tag.less"; @import "components/toast/toast.less"; @import "components/toggle-switch/toggle-switch.less"; -@import "components/topbar/topbar.less"; -@import "components/uploader/uploader.less"; @import "components/user-card/user-card.less"; @import "components/vote/vote.less"; diff --git a/packages/stacks-docs/_includes/layouts/page.html b/packages/stacks-docs/_includes/layouts/page.html index fef634a7ed..769c22df8b 100644 --- a/packages/stacks-docs/_includes/layouts/page.html +++ b/packages/stacks-docs/_includes/layouts/page.html @@ -87,7 +87,17 @@

{{ title }}

{{ description }}

{% endif %} -
{{ content }}
+ {% if deprecated %} +
+ {% tip, "warning" %} + This component has been deprecated in Stacks v3. If using Stacks v2, please refer to the v2 documentation for more information. + {% endtip %} +
+ {% endif %} + + {% if deprecated != true %} +
{{ content }}
+ {% endif %}
diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less index 629f9d6611..555870eb71 100644 --- a/packages/stacks-docs/assets/less/stacks-documentation.less +++ b/packages/stacks-docs/assets/less/stacks-documentation.less @@ -2,6 +2,16 @@ // $ IMPORTS // ---------------------------------------------------------------------------- @import (reference) "../../../stacks-classic/lib/stacks.less"; // These are actual styles used in SO projects +// Deprecated components styles imports +@import "../../../stacks-classic/lib/components/breadcrumbs/breadcrumbs.less"; +@import "../../../stacks-classic/lib/components/button-groups/button-groups.less"; +@import "../../../stacks-classic/lib/components/cards/cards.less"; +@import "../../../stacks-classic/lib/components/expandable/expandable.less"; +@import "../../../stacks-classic/lib/components/link-preview/link-preview.less"; +@import "../../../stacks-classic/lib/components/page-title/page-title.less"; +@import "../../../stacks-classic/lib/components/progress-bar/progress-bar.less"; +@import "../../../stacks-classic/lib/components/topbar/topbar.less"; +@import "../../../stacks-classic/lib/components/uploader/uploader.less"; body { &.theme-custom { diff --git a/packages/stacks-docs/product/components/breadcrumbs.html b/packages/stacks-docs/product/components/breadcrumbs.html index d8e975a573..1ced41a1aa 100644 --- a/packages/stacks-docs/product/components/breadcrumbs.html +++ b/packages/stacks-docs/product/components/breadcrumbs.html @@ -4,6 +4,7 @@ figma: https://svelte.stackoverflow.design/figma/breadcrumbs description: Breadcrumbs are used to provide context for the currently-viewed page. tags: components +deprecated: true ---
@@ -144,3 +145,4 @@

Payment Details

+ diff --git a/packages/stacks-docs/product/components/button-groups.html b/packages/stacks-docs/product/components/button-groups.html index e7a4e704a5..9eb3d081f5 100644 --- a/packages/stacks-docs/product/components/button-groups.html +++ b/packages/stacks-docs/product/components/button-groups.html @@ -4,6 +4,7 @@ figma: https://svelte.stackoverflow.design/figma/button-groups description: Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the .s-btn-group component. Add the class .is-selected and the aria-current attribute with the appropriate value to show the currently selected button. tags: components +deprecated: true ---
diff --git a/packages/stacks-docs/product/components/cards.html b/packages/stacks-docs/product/components/cards.html index 3212c2dec2..4498bd421e 100644 --- a/packages/stacks-docs/product/components/cards.html +++ b/packages/stacks-docs/product/components/cards.html @@ -4,6 +4,7 @@ figma: https://svelte.stackoverflow.design/figma/cards description: Cards are used to group similar concepts and tasks together to make information easier to scan, read, and act on. Cards should use a heading that sets clear expectations about the card’s purpose, paragraphs that put the most critical information first, and (optionally) calls to action on the bottom to direct user action. tags: components +deprecated: true ---
diff --git a/packages/stacks-docs/product/components/expandable.html b/packages/stacks-docs/product/components/expandable.html index e9eb23e314..43915ef9df 100644 --- a/packages/stacks-docs/product/components/expandable.html +++ b/packages/stacks-docs/product/components/expandable.html @@ -4,6 +4,7 @@ js: true description: An expandable, sometimes called an accordion, is an element that can be hidden / revealed with a sliding transition. tags: components +deprecated: true ---
diff --git a/packages/stacks-docs/product/components/link-previews.html b/packages/stacks-docs/product/components/link-previews.html index d8c3d99246..888a9883f5 100644 --- a/packages/stacks-docs/product/components/link-previews.html +++ b/packages/stacks-docs/product/components/link-previews.html @@ -3,6 +3,7 @@ title: Link previews description: Link previews add rich previews to links included in questions and answers on Stack Overflow. They’re also known as oneboxes or link unfurls. tags: components +deprecated: true ---
{% header "h2", "Classes" %} diff --git a/packages/stacks-docs/product/components/page-titles.html b/packages/stacks-docs/product/components/page-titles.html index 8123de2148..d9602c657e 100644 --- a/packages/stacks-docs/product/components/page-titles.html +++ b/packages/stacks-docs/product/components/page-titles.html @@ -3,6 +3,7 @@ title: Page titles description: Page titles create consistency in the layout of similar pages, specifically the placement and appearance of titles, descriptions, actions, and breadcrumbs. tags: components +deprecated: true ---
diff --git a/packages/stacks-docs/product/components/progress-bars.html b/packages/stacks-docs/product/components/progress-bars.html index ff49a7a0a1..954295cf6c 100644 --- a/packages/stacks-docs/product/components/progress-bars.html +++ b/packages/stacks-docs/product/components/progress-bars.html @@ -3,6 +3,7 @@ title: Progress bars description: A component that visually communicates the completion of a task or operation. It shows the task’s progress and remainder. tags: components +deprecated: true ---
{% header "h2", "Classes" %} diff --git a/packages/stacks-docs/product/components/topbar.html b/packages/stacks-docs/product/components/topbar.html index 49a706625e..065a81e44b 100644 --- a/packages/stacks-docs/product/components/topbar.html +++ b/packages/stacks-docs/product/components/topbar.html @@ -3,6 +3,7 @@ title: Topbar description: The topbar component is a navigation bar that is placed at the top of the page. tags: components +deprecated: true ---
diff --git a/packages/stacks-docs/product/components/uploader.html b/packages/stacks-docs/product/components/uploader.html index f1f614f763..a17e6747a6 100644 --- a/packages/stacks-docs/product/components/uploader.html +++ b/packages/stacks-docs/product/components/uploader.html @@ -4,6 +4,7 @@ js: true description: The Stacks uploader is a custom-styled file input with added functionality to preview the file or files the user is uploading. tags: components +deprecated: true ---
From 9b8a6430550c1604ef418d89a61c3baef5789889 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Thu, 19 Feb 2026 18:04:42 -0500 Subject: [PATCH 2/9] fix imports --- packages/stacks-docs/assets/less/stacks-documentation.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/stacks-docs/assets/less/stacks-documentation.less b/packages/stacks-docs/assets/less/stacks-documentation.less index 555870eb71..fe6a4d9602 100644 --- a/packages/stacks-docs/assets/less/stacks-documentation.less +++ b/packages/stacks-docs/assets/less/stacks-documentation.less @@ -4,8 +4,8 @@ @import (reference) "../../../stacks-classic/lib/stacks.less"; // These are actual styles used in SO projects // Deprecated components styles imports @import "../../../stacks-classic/lib/components/breadcrumbs/breadcrumbs.less"; -@import "../../../stacks-classic/lib/components/button-groups/button-groups.less"; -@import "../../../stacks-classic/lib/components/cards/cards.less"; +@import "../../../stacks-classic/lib/components/button-group/button-group.less"; +@import "../../../stacks-classic/lib/components/card/card.less"; @import "../../../stacks-classic/lib/components/expandable/expandable.less"; @import "../../../stacks-classic/lib/components/link-preview/link-preview.less"; @import "../../../stacks-classic/lib/components/page-title/page-title.less"; From 5e319473dbe6c3d97138b25ae97d1383ac75b3b4 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Thu, 19 Feb 2026 18:58:13 -0500 Subject: [PATCH 3/9] Skip deprecated component tests --- .../lib/components/breadcrumbs/breadcrumbs.a11y.test.ts | 2 +- .../lib/components/breadcrumbs/breadcrumbs.visual.test.ts | 2 +- .../lib/components/button-group/button-group.a11y.test.ts | 2 +- .../lib/components/button-group/button-group.visual.test.ts | 2 +- packages/stacks-classic/lib/components/card/card.a11y.test.ts | 2 +- packages/stacks-classic/lib/components/card/card.visual.test.ts | 2 +- .../lib/components/expandable/expandable.a11y.test.ts | 2 +- .../stacks-classic/lib/components/expandable/expandable.test.ts | 2 +- .../lib/components/expandable/expandable.visual.test.ts | 2 +- .../lib/components/link-preview/link-preview.a11y.test.ts | 2 +- .../lib/components/link-preview/link-preview.visual.test.ts | 2 +- .../lib/components/page-title/page-title.a11y.test.ts | 2 +- .../lib/components/page-title/page-title.visual.test.ts | 2 +- .../lib/components/progress-bar/progress-bar.a11y.test.ts | 2 +- .../lib/components/progress-bar/progress-bar.visual.test.ts | 2 +- .../stacks-classic/lib/components/topbar/topbar.visual.test.ts | 2 +- 16 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/stacks-classic/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts b/packages/stacks-classic/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts index 6c6e06926b..e7b63b3b31 100644 --- a/packages/stacks-classic/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +++ b/packages/stacks-classic/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts @@ -2,7 +2,7 @@ import { runA11yTests } from "../../test/a11y-test-utils"; import { html } from "@open-wc/testing"; import "../../index"; -describe("breadcrumbs", () => { +describe.skip("breadcrumbs", () => { runA11yTests({ baseClass: "s-breadcrumbs", children: { diff --git a/packages/stacks-classic/lib/components/breadcrumbs/breadcrumbs.visual.test.ts b/packages/stacks-classic/lib/components/breadcrumbs/breadcrumbs.visual.test.ts index b57d3382ba..00363a4f0a 100644 --- a/packages/stacks-classic/lib/components/breadcrumbs/breadcrumbs.visual.test.ts +++ b/packages/stacks-classic/lib/components/breadcrumbs/breadcrumbs.visual.test.ts @@ -2,7 +2,7 @@ import { runVisualTests } from "../../test/visual-test-utils"; import { html } from "@open-wc/testing"; import "../../index"; -describe("breadcrumbs", () => { +describe.skip("breadcrumbs", () => { runVisualTests({ baseClass: "s-breadcrumbs", children: { diff --git a/packages/stacks-classic/lib/components/button-group/button-group.a11y.test.ts b/packages/stacks-classic/lib/components/button-group/button-group.a11y.test.ts index d6e4257a36..9b1703204e 100644 --- a/packages/stacks-classic/lib/components/button-group/button-group.a11y.test.ts +++ b/packages/stacks-classic/lib/components/button-group/button-group.a11y.test.ts @@ -2,7 +2,7 @@ import { testArgs } from "./button-group.test.setup"; import { runA11yTests } from "../../test/a11y-test-utils"; import "../../index"; -describe("button group", () => { +describe.skip("button group", () => { runA11yTests({ ...testArgs, // TODO remove skipped tests once btn badge contrast issues are resolved diff --git a/packages/stacks-classic/lib/components/button-group/button-group.visual.test.ts b/packages/stacks-classic/lib/components/button-group/button-group.visual.test.ts index 74fc30dfe6..14262759bc 100644 --- a/packages/stacks-classic/lib/components/button-group/button-group.visual.test.ts +++ b/packages/stacks-classic/lib/components/button-group/button-group.visual.test.ts @@ -2,6 +2,6 @@ import { testArgs } from "./button-group.test.setup"; import { runVisualTests } from "../../test/visual-test-utils"; import "../../index"; -describe("button group", () => { +describe.skip("button group", () => { runVisualTests(testArgs); }); diff --git a/packages/stacks-classic/lib/components/card/card.a11y.test.ts b/packages/stacks-classic/lib/components/card/card.a11y.test.ts index acdf6dfdbe..5577ae9ecb 100644 --- a/packages/stacks-classic/lib/components/card/card.a11y.test.ts +++ b/packages/stacks-classic/lib/components/card/card.a11y.test.ts @@ -1,7 +1,7 @@ import { runA11yTests } from "../../test/a11y-test-utils"; import "../../index"; -describe("card", () => { +describe.skip("card", () => { runA11yTests({ baseClass: "s-card", variants: ["muted"], diff --git a/packages/stacks-classic/lib/components/card/card.visual.test.ts b/packages/stacks-classic/lib/components/card/card.visual.test.ts index 059df5fac4..c915fa695e 100644 --- a/packages/stacks-classic/lib/components/card/card.visual.test.ts +++ b/packages/stacks-classic/lib/components/card/card.visual.test.ts @@ -24,7 +24,7 @@ const baseChild = `
`; -describe("card", () => { +describe.skip("card", () => { runVisualTests({ baseClass: "s-card", variants: ["muted"], diff --git a/packages/stacks-classic/lib/components/expandable/expandable.a11y.test.ts b/packages/stacks-classic/lib/components/expandable/expandable.a11y.test.ts index ec9f1f9a87..46aaa5f389 100644 --- a/packages/stacks-classic/lib/components/expandable/expandable.a11y.test.ts +++ b/packages/stacks-classic/lib/components/expandable/expandable.a11y.test.ts @@ -2,7 +2,7 @@ import { html } from "@open-wc/testing"; import { runA11yTests } from "../../test/a11y-test-utils"; import "../../index"; -describe("expandable", () => { +describe.skip("expandable", () => { runA11yTests({ baseClass: "s-expandable", modifiers: { diff --git a/packages/stacks-classic/lib/components/expandable/expandable.test.ts b/packages/stacks-classic/lib/components/expandable/expandable.test.ts index 5c893d0f76..d3afa1e6b4 100644 --- a/packages/stacks-classic/lib/components/expandable/expandable.test.ts +++ b/packages/stacks-classic/lib/components/expandable/expandable.test.ts @@ -5,7 +5,7 @@ import "../../index"; const user = userEvent.setup(); -describe("expandable-control", () => { +describe.skip("expandable-control", () => { it("should focus on expandable content only when expanded", async () => { await fixture(html`