refactor(quickaction): deprecate component; support this in docs (#2304)

BREAKING CHANGE: @spectrum-css/quickaction deprecated

This component has been deprecated. Use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead.

Author: castastrophe

components/quickaction/stories/quickaction.stories.js renamed to .storybook/deprecated/quickaction/quickaction.stories.js

@@ -1,9 +1,7 @@
-// Import the component markup template
-import { Template } from "./template";
+import { Template } from "@spectrum-css/quickaction/stories/template.js";
 
 export default {
-	title: "Components/Quick actions",
-	description: "The Quick actions component is...",
+	title: "Deprecated/Quick actions",
 	component: "QuickAction",
 	argTypes: {
 		content: { table: { disable: true } },
@@ -40,45 +38,31 @@ export default {
 		rootClass: "spectrum-QuickActions",
 		isOpen: true,
 		textOnly: false,
+		content: [
+			{
+				iconName: "Edit",
+				label: "Edit",
+			},
+			{
+				iconName: "Copy",
+				label: "Copy",
+			},
+			{
+				iconName: "Delete",
+				label: "Delete",
+			},
+		],
 	},
 	parameters: {
 		actions: {
 			handles: [],
 		},
 		status: {
-			type: process.env.MIGRATED_PACKAGES.includes("quickaction")
-				? "migrated"
-				: undefined,
+			type: "deprecated"
 		},
+		chromatic: { disable: true },
 	},
 };
 
 export const Default = Template.bind({});
-Default.args = {
-	content: [
-		{
-			iconName: "Edit",
-		},
-		{
-			iconName: "Copy",
-		},
-		{
-			iconName: "Delete",
-		},
-	],
-};
-
-export const TextOnly = Template.bind({});
-TextOnly.args = {
-	content: [
-		{
-			label: "Edit",
-		},
-		{
-			label: "Copy",
-		},
-		{
-			label: "Delete",
-		},
-	],
-};
+Default.args = {};

components/quickaction/metadata/quickaction.yml renamed to .storybook/deprecated/quickaction/quickaction.yml

@@ -1,13 +1,9 @@
 id: quickactions
 name: Quick actions
-status: Verified
-description: "Note that the `.spectrum-QuickActions-overlay` class should be placed on the container where the Quick Actions are displayed, and the `.spectrum-QuickActions--textOnly` class should be applied when the buttons have text only."
+status: Deprecated
+deprecationNotice: Use an <a href="actionbar.html">action bar</a> to allow users to perform actions on either a single or multiple items at the same time, instead.
+description: Note that the `.spectrum-QuickActions-overlay` class should be placed on the container where the Quick Actions are displayed, and the `.spectrum-QuickActions--textOnly` class should be applied when the buttons have text only.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/quick-actions/
-section:
-  - name: Migration Guide
-    description: |
-      ### Change workflow icon size to medium
-      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
 examples:
   - id: quickactions
     name: Standard

.storybook/main.js

@@ -11,6 +11,7 @@ module.exports = {
 	stories: [
 		"../components/*/stories/*.stories.js",
 		"./guides/*.mdx",
+		"./deprecated/*/*.stories.js",
 	],
 	rootDir: "../",
 	staticDirs: ["../assets"],

.storybook/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.5.4",
     "@spectrum-css/expressvars": "^3.0.9",
+    "@spectrum-css/quickaction": "^3.1.1",
     "@spectrum-css/site": "^4.2.1",
     "@spectrum-css/tokens": "^13.1.2",
     "@spectrum-css/ui-icons": "^1.1.2",

README.md

@@ -404,3 +404,13 @@ Occasionally, you may want to run a prerelease for an individual package and ski
 - You **must** run a build **before** continuing with the prerelease. An npm task for cleaning, building, and beta publishing is available, and it can be run via the following command: `yarn release:beta-from-package`. This command will perform a full `clean` (via the `clean` task), a full `build` (via the `build` task), and will attempt to publish the package (via `lerna publish --conventional-prerelease --preid beta --pre-dist-tag beta --no-private`).
 - Depending on the severity of your change(s), and before publishing to npm, Lerna should show a preview of the affected package version number that looks something like: `@spectrum-css/switch: 1.0.23 => 2.0.0-beta.0`. Additionally, at this time, Lerna will ask if you would like to continue with publishing the changes or cancel.
 - Selecting `y` to publish will publish the affected package(s) to npm.
+
+## Deprecating a component
+
+1. Create a new folder with the component name in `.storybook/deprecated`, i.e., `.storybook/deprecated/quickaction`.
+2. Copy _.stories.js and metadata/_.yml into the new folder (directly, not nested inside subfolders).
+3. Update the title of the `*.stories.js` asset to be prefixed with the `Deprecated` category, i.e., `title: "Deprecated/Quick actions"`.
+4. Update any local references to `template.js` or other files to point to their package name, i.e., `import { Template } from "./template";` -> `import { Template } from "@spectrum-css/quickaction/stories/template.js";`.
+5. In the parameters section of the `*.stories.js`, add `chromatic: { disable: true },` to ensure it no longer runs regression tests.
+6. Update the status of the component to `Deprecated` in the `*.yml` file. Add any additional migration notes to the `deprecationNotice` keyword.
+7. Delete the package from the components directory.

components/card/stories/card.stories.js

@@ -1,11 +1,10 @@
-import { html } from "lit";
 
 // Import the component markup template
 import { Template } from "./template";
 
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
-import { default as QuickAction } from "@spectrum-css/quickaction/stories/quickaction.stories.js";
 import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
+import { default as QuickAction } from "@spectrum-css/quickaction/stories/quickaction.stories.js";
 
 export default {
   title: "Components/Card",