change: [M3-8096] - Update Storybook to 8.1.0 (#10463)

* update to `8.1.0` and fix breaking changes * Added changeset: Update Storybook to 8.1.0 --------- Co-authored-by: Banks Nussman <banks@nussman.us>
linode · May 14, 2024 · a1e98d4 · a1e98d4
1 parent a1e1213
commit a1e98d4
Show file tree

Hide file tree

Showing 7 changed files with 1,155 additions and 630 deletions.
diff --git a/packages/manager/.changeset/pr-10463-tech-stories-1715699566824.md b/packages/manager/.changeset/pr-10463-tech-stories-1715699566824.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update Storybook to 8.1.0 ([#10463](https://github.com/linode/manager/pull/10463))
diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -113,19 +113,19 @@
   },
   "devDependencies": {
     "@linode/eslint-plugin-cloud-manager": "^0.0.3",
-    "@storybook/addon-actions": "^8.0.5",
-    "@storybook/addon-controls": "^8.0.5",
-    "@storybook/addon-docs": "^8.0.5",
-    "@storybook/addon-mdx-gfm": "^8.0.5",
-    "@storybook/addon-measure": "^8.0.5",
-    "@storybook/addon-storysource": "^8.0.5",
-    "@storybook/addon-viewport": "^8.0.5",
-    "@storybook/blocks": "^8.0.5",
-    "@storybook/manager-api": "^8.0.5",
-    "@storybook/preview-api": "^8.0.5",
-    "@storybook/react": "^8.0.5",
-    "@storybook/react-vite": "^8.0.5",
-    "@storybook/theming": "^8.0.5",
+    "@storybook/addon-actions": "^8.1.0",
+    "@storybook/addon-controls": "^8.1.0",
+    "@storybook/addon-docs": "^8.1.0",
+    "@storybook/addon-mdx-gfm": "^8.1.0",
+    "@storybook/addon-measure": "^8.1.0",
+    "@storybook/addon-storysource": "^8.1.0",
+    "@storybook/addon-viewport": "^8.1.0",
+    "@storybook/blocks": "^8.1.0",
+    "@storybook/manager-api": "^8.1.0",
+    "@storybook/preview-api": "^8.1.0",
+    "@storybook/react": "^8.1.0",
+    "@storybook/react-vite": "^8.1.0",
+    "@storybook/theming": "^8.1.0",
     "@swc/core": "^1.3.1",
     "@testing-library/cypress": "^10.0.0",
     "@testing-library/jest-dom": "~6.4.2",
@@ -207,7 +207,7 @@
     "reselect-tools": "^0.0.7",
     "serve": "^14.0.1",
     "simple-git": "^3.19.0",
-    "storybook": "^8.0.5",
+    "storybook": "^8.1.0",
     "storybook-dark-mode": "^4.0.1",
     "ts-node": "^10.9.2",
     "vite": "^5.1.7",

diff --git a/packages/manager/src/components/ActionMenu/ActionMenu.stories.tsx b/packages/manager/src/components/ActionMenu/ActionMenu.stories.tsx
@@ -34,10 +34,11 @@ export const Default: StoryObj<ActionMenuProps> = {
 const meta: Meta<ActionMenuProps> = {
   argTypes: {
     actionsList: {
-      options: {
-        'disabled actions': standardAndDisabledActions,
-        'standard actions': standardActions,
+      mapping: {
+        Disabled: standardAndDisabledActions,
+        Standard: standardActions,
       },
+      options: ['Standard', 'Disabled'],
     },
   },
   args: { actionsList: standardActions, ariaLabel: 'action menu' },

diff --git a/packages/manager/src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/manager/src/components/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -9,9 +9,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 const meta: Meta<typeof ConfirmationDialog> = {
   argTypes: {
     actions: {
-      control: {
-        type: 'jsx',
-      },
       description:
         'Items that get rendered in the footer of the Dialog. Typicaly you put an `<ActionsPanel />` with `<Button />`s in it.',
     },

diff --git a/packages/manager/src/components/FormControlLabel.stories.tsx b/packages/manager/src/components/FormControlLabel.stories.tsx
@@ -11,22 +11,21 @@ const meta: Meta<typeof FormControlLabel> = {
   title: 'Components/Form/FormControlLabel',
 };
 
-const controlOptions = {
-  Checkbox: <Checkbox />,
-  Radio: <Radio />,
-  Toggle: <Toggle />,
-};
-
 type Story = StoryObj<typeof FormControlLabel>;
 
 export const Default: Story = {
   argTypes: {
     control: {
-      options: controlOptions,
+      mapping: {
+        Checkbox: <Checkbox />,
+        Radio: <Radio />,
+        Toggle: <Toggle />,
+      },
+      options: ['Checkbox', 'Radio', 'Toggle'],
     },
   },
   args: {
-    control: controlOptions.Checkbox,
+    control: <Checkbox />,
     label: 'This is a FormControlLabel',
   },
   render: (args) => <FormControlLabel {...args} />,

diff --git a/packages/manager/src/components/SelectionCard/SelectionCard.stories.tsx b/packages/manager/src/components/SelectionCard/SelectionCard.stories.tsx
@@ -47,12 +47,18 @@ export const Default: StoryObj<SelectionCardProps> = {
 const meta: Meta<SelectionCardProps> = {
   argTypes: {
     renderIcon: {
-      control: { type: 'select' },
-      options: iconOptions,
+      control: {
+        type: 'select',
+      },
+      mapping: iconOptions,
+      options: Object.keys(iconOptions),
     },
     renderVariant: {
-      control: { type: 'select' },
-      options: variantOptions,
+      control: {
+        type: 'select',
+      },
+      mapping: variantOptions,
+      options: Object.keys(variantOptions),
     },
   },
   args: {