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

components/splitbutton/stories/splitbutton.stories.js → .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"
 		},
 	},
 };

components/splitbutton/metadata/splitbutton.yml → .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

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,

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",