docs: add storybook migrated badge (#3690)

marissahuysentruyt · web-flow · commit bf8150cc0b00 · 2025-05-05T20:15:02.000Z
Adds the migrated status to components that have been migrated fully to S2. A migrated badge to the storybook toolbar should now appear for those components.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -85,6 +85,11 @@ export const parameters = {
 				color: "#fff",
 				description: "Should not be used and will not receive updates.",
 			},
+			migrated: {
+				background: "rgb(84, 36, 219)",
+				color: "#fff",
+				description: "Migrated to Spectrum 2.",
+			},
 		},
 	},
 	// Set an empty object to avoid the "undefined" value in the ComponentDetails doc block
diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
@@ -103,7 +103,10 @@ export default {
 			story: {
 				height: "auto",
 			},
-		}
+		},
+		status: {
+			type: "migrated",
+		},
 	},
 	decorators: [
 		withDownStateDimensionCapture,
diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js
@@ -99,6 +99,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js
@@ -75,6 +75,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js
@@ -59,6 +59,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js
@@ -139,6 +139,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		}
 	},
 };
 
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
@@ -101,6 +101,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	decorators: [
 		withDownStateDimensionCapture,
diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js
@@ -64,6 +64,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js
@@ -61,6 +61,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js
@@ -52,6 +52,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
@@ -5,9 +5,9 @@ import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { CoachMarkGroup } from "./coachmark.test.js";
 import {
-	Template,
-	CoachmarkMenuStatesTemplate,
 	CoachMarkMediaOptionsTemplate,
+	CoachmarkMenuStatesTemplate,
+	Template,
 } from "./template.js";
 
 /**
@@ -99,6 +99,9 @@ export default {
 				height: "525px",
 			},
 		},
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js
@@ -49,6 +49,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js
@@ -52,6 +52,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js
@@ -45,6 +45,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js
@@ -71,6 +71,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js
@@ -63,6 +63,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js
@@ -35,6 +35,9 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
@@ -1,8 +1,8 @@
 import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen, size } from "@spectrum-css/preview/types";
-import { Template as Table } from "@spectrum-css/table/stories/template.js";
 import { Template as Steplist } from "@spectrum-css/steplist/stories/template.js";
+import { Template as Table } from "@spectrum-css/table/stories/template.js";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
@@ -163,6 +163,9 @@ export default {
 		packageJson,
 		metadata,
 		layout: "fullscreen",
+		status: {
+			type: "migrated",
+		},
 	},
 	decorators: [
 		withUnderlayWrapper,
diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js
@@ -38,6 +38,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js
@@ -46,6 +46,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js
@@ -96,6 +96,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js
@@ -52,6 +52,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js
@@ -107,6 +107,9 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js
@@ -63,6 +63,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
@@ -98,6 +98,9 @@ export default {
 			type: "figma",
 			url: "https://www.figma.com/design/9qeVZSJ9t0kv6r7njzgHx7/S2-%2F-Styles-visualizer-(WIP)?node-id=295-24257&t=ZC7fyaQ0VQYQ5VYM-1",
 		},
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js
@@ -75,6 +75,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 		layout: "centered"
 	},
 };
diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js
@@ -59,6 +59,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	decorators: [
 		withDownStateDimensionCapture,
diff --git a/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js b/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js
@@ -30,7 +30,10 @@ export default {
 		},
 		packageJson,
 		metadata,
-	}
+		status: {
+			type: "migrated",
+		},
+	},
 };
 
 export const Default = InfieldProgressCircleGroup.bind({});
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
@@ -101,6 +101,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js
@@ -89,7 +89,10 @@ export default {
 		},
 		packageJson,
 		metadata,
-	}
+		status: {
+			type: "migrated",
+		},
+	},
 };
 
 export const Default = LinkGroup.bind({});
diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
@@ -42,6 +42,9 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js
@@ -70,6 +70,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
@@ -145,6 +145,9 @@ export default {
 		downState: {
 			selectors: [".spectrum-Picker:not(:disabled, .is-disabled, .is-loading)"],
 		},
+		status: {
+			type: "migrated",
+		},
 	},
 	decorators: [
 		withDownStateDimensionCapture,
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
@@ -98,6 +98,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
@@ -98,6 +98,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js
@@ -45,6 +45,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js
@@ -66,6 +66,9 @@ export default {
 		},
 		packageJson,
 		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
 };
 
diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js
diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js
diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js
diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js
diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js
diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js
diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js
diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js
diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js
