From fc48d5db1e98fa2b1a7f8ad97339d958c9a8a6a7 Mon Sep 17 00:00:00 2001
From: Melissa Thompson <mthompson@heysparkbox.com>
Date: Thu, 15 Feb 2024 16:03:15 -0500
Subject: [PATCH] docs(splitbutton): setup for deprecation (#2526)

* update Storybook template to reference package instead of local
* remove Chromatic testing
* add deprecation tag to Storybook & in docs
---
 .../deprecated/splitbutton}/splitbutton.stories.js     | 10 ++++------
 .../deprecated/splitbutton}/splitbutton.yml            |  8 ++------
 components/splitbutton/stories/template.js             |  4 ++--
 package.json                                           |  1 +
 4 files changed, 9 insertions(+), 14 deletions(-)
 rename {components/splitbutton/stories => .storybook/deprecated/splitbutton}/splitbutton.stories.js (90%)
 rename {components/splitbutton/metadata => .storybook/deprecated/splitbutton}/splitbutton.yml (88%)

diff --git a/components/splitbutton/stories/splitbutton.stories.js b/.storybook/deprecated/splitbutton/splitbutton.stories.js
similarity index 90%
rename from components/splitbutton/stories/splitbutton.stories.js
rename to .storybook/deprecated/splitbutton/splitbutton.stories.js
index 525e30f8f86..b22e44ebfae 100644
--- a/components/splitbutton/stories/splitbutton.stories.js
+++ b/.storybook/deprecated/splitbutton/splitbutton.stories.js
@@ -1,8 +1,7 @@
-// Import the component markup template
-import { Template } from "./template";
+import { Template } from "@spectrum-css/splitbutton/stories/template.js";
 
 export default {
-	title: "Components/Split button",
+	title: "Deprecated/Split button",
 	description:
 		"A split button surfaces an immediately invokable action via it's main button, as well as a list of alternative actions in its toggle-able menu overlay.",
 	component: "SplitButton",
@@ -52,10 +51,9 @@ export default {
 		actions: {
 			handles: [],
 		},
+		chromatic: { disable: true },
 		status: {
-			type: process.env.MIGRATED_PACKAGES.includes("splitbutton")
-				? "migrated"
-				: undefined,
+			type: "deprecated"
 		},
 	},
 };
diff --git a/components/splitbutton/metadata/splitbutton.yml b/.storybook/deprecated/splitbutton/splitbutton.yml
similarity index 88%
rename from components/splitbutton/metadata/splitbutton.yml
rename to .storybook/deprecated/splitbutton/splitbutton.yml
index ad461971b46..7150d0a5ade 100644
--- a/components/splitbutton/metadata/splitbutton.yml
+++ b/.storybook/deprecated/splitbutton/splitbutton.yml
@@ -1,10 +1,6 @@
 name: Split button
-description: Instead of a single split button (now a deprecated component), use a button group to show any additional actions related to the most critical action. Reference [Spectrum documentation](https://spectrum.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions) for more information.
-sections:
-  - name: Migration Guide
-    description: |
-      ### Remove focus-ring class
-      We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
+status: Deprecated
+deprecationNotice: Use a <a href="buttongroup.html">button group</a> to show any additional actions related to the most critical action. Reference <a href="https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions">Spectrum documentation</a> for more information.
 examples:
   - id: splitbutton
     name: CTA
diff --git a/components/splitbutton/stories/template.js b/components/splitbutton/stories/template.js
index b930b9f14a2..8b2af86267b 100644
--- a/components/splitbutton/stories/template.js
+++ b/components/splitbutton/stories/template.js
@@ -3,7 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
 
 import { Template as Button } from "@spectrum-css/button/stories/template.js";
 
-import "../index.css";
+import "@spectrum-css/splitbutton/index.css";
 
 export const Template = ({
 	rootClass = "spectrum-SplitButton",
@@ -48,7 +48,7 @@ export const Template = ({
 				variant,
 				size,
 				iconName: position === "right"
-					? iconName 
+					? iconName
 					: typeof labelIconName != "undefined" ? labelIconName : undefined,
 				iconAfterLabel: true,
 				label: position === "right" ? undefined : label,
diff --git a/package.json b/package.json
index e86e3d00178..5a7943c22f2 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "@nx/devkit": "^18.0.4",
     "@spectrum-css/expressvars": "^3.0.9",
     "@spectrum-css/quickaction": "^3.1.1",
+    "@spectrum-css/splitbutton": "^8.1.1",
     "@spectrum-css/vars": "^9.0.8",
     "colors": "^1.4.0",
     "conventional-changelog-spectrum": "^1.0.2",