Merge branch 'release-8-0' into mobile-truncate-story-name

MIGRATION.md

@@ -3,6 +3,7 @@
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
   - [Core changes](#core-changes)
     - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
+    - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
   - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
   - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
@@ -320,6 +321,24 @@ In Storybook 7 it was possible to use `addons.setConfig({...});` to configure St
 - `showPanel: boolean` is now split into `bottomPanelHeight: number` and `rightPanelWidth: number`, where the numbers represents the size of the panel in pixels.
 - `isFullscreen: boolean` is no longer supported, but can be achieved by setting a combination of the above.
 
+#### New UI and props for Button and IconButton components
+
+We used to have a lot of different buttons in `@storybook/components` that were not used anywhere. In Storybook 8.0 we are deprecating `Form.Button` and added a new `Button` component that can be used in all places. The `IconButton` component has also been updated to use the new `Button` component under the hood. Going forward addon creators and Storybook maintainers should use the new `Button` component instead of `Form.Button`.
+
+For the `Button` component, the following props are now deprecated:
+
+- `isLink` - Please use the `asChild` prop instead like this: `<Button asChild><a href="">Link</a></Button>`
+- `primary` - Please use the `variant` prop instead.
+- `secondary` - Please use the `variant` prop instead.
+- `tertiary` - Please use the `variant` prop instead.
+- `gray` - Please use the `variant` prop instead.
+- `inForm` - Please use the `variant` prop instead.
+- `small` - Please use the `size` prop instead.
+- `outline` - Please use the `variant` prop instead.
+- `containsIcon`. Please add your icon as a child directly. No need for this prop anymore.
+
+The `IconButton` doesn't have any deprecated props but it now uses the new `Button` component under the hood so all props for `IconButton` will be the same as `Button`.
+
 ## From version 7.4.0 to 7.5.0
 
 #### `storyStoreV6` and `storiesOf` is deprecated

code/builders/builder-vite/src/vite-config.ts

@@ -67,6 +67,10 @@ export async function commonConfig(
     // If an envPrefix is specified in the vite config, add STORYBOOK_ to it,
     // otherwise, add VITE_ and STORYBOOK_ so that vite doesn't lose its default.
     envPrefix: userConfig.envPrefix ? ['STORYBOOK_'] : ['VITE_', 'STORYBOOK_'],
+    // Pass build.target option from user's vite config
+    build: {
+      target: buildProperty?.target,
+    },
   };
 
   const config: ViteConfig = mergeConfig(userConfig, sbConfig);

code/lib/manager-api/src/modules/layout.ts

@@ -385,13 +385,12 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, provider, singleStory
 
   const persisted = pick(store.getState(), 'layout', 'selectedPanel');
 
+  provider.channel.on(SET_CONFIG, () => {
+    api.setOptions(merge(api.getInitialOptions(), persisted));
+  });
+
   return {
     api,
     state: merge(api.getInitialOptions(), persisted),
-    init: () => {
-      provider.channel.on(SET_CONFIG, () => {
-        api.setOptions(merge(api.getInitialOptions(), persisted));
-      });
-    },
   };
 };

code/lib/manager-api/src/tests/layout.test.ts

@@ -1,5 +1,6 @@
 import { themes } from '@storybook/theming';
 import type { API_Provider } from 'lib/types/src';
+import EventEmitter from 'events';
 import type { SubAPI, SubState } from '../modules/layout';
 import type { SubState as AddonsSubState } from '../modules/addons';
 import { defaultLayoutState, init as initLayout } from '../modules/layout';
@@ -33,7 +34,10 @@ describe('layout API', () => {
         return currentState as unknown as State;
       }),
     } as unknown as Store;
-    provider = { getConfig: jest.fn(() => ({})) } as unknown as API_Provider<API>;
+    provider = {
+      getConfig: jest.fn(() => ({})),
+      channel: new EventEmitter(),
+    } as unknown as API_Provider<API>;
     layoutApi = initLayout({
       store,
       provider,

code/ui/blocks/src/controls/Object.tsx

@@ -288,7 +288,6 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
     <Wrapper>
       {['Object', 'Array'].includes(getObjectType(data)) && (
         <RawButton
-          href="#"
           onClick={(e: SyntheticEvent) => {
             e.preventDefault();
             setShowRaw((v) => !v);

code/ui/components/package.json

@@ -59,8 +59,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@radix-ui/react-select": "^1.2.2",
-    "@radix-ui/react-toolbar": "^1.0.4",
+    "@radix-ui/react-slot": "^1.0.2",
     "@storybook/client-logger": "workspace:*",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",

code/ui/components/src/components/Button/Button.deprecated.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Button } from './Button';
+import { Icons } from '../icon/icon';
+import { Form } from '../form';
+
+const meta: Meta<typeof Button> = {
+  title: 'Button/Deprecated',
+  component: Button,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default = { args: { children: 'Default' } };
+
+export const FormButton: Story = {
+  render: (args) => <Form.Button {...args} />,
+  args: { children: 'Form.Button' },
+};
+
+export const Primary: Story = { args: { primary: true, children: 'Primary' } };
+export const Secondary: Story = { args: { secondary: true, children: 'Secondary' } };
+export const Tertiary: Story = { args: { tertiary: true, children: 'Tertiary' } };
+export const Gray: Story = { args: { gray: true, children: 'Gray' } };
+
+export const Outline: Story = { args: { outline: true, children: 'Outline' } };
+export const OutlinePrimary: Story = {
+  args: { outline: true, primary: true, children: 'Outline Primary' },
+};
+export const OutlineSecondary: Story = {
+  args: { outline: true, secondary: true, children: 'Outline Secondary' },
+};
+export const OutlineTertiary: Story = {
+  args: { outline: true, tertiary: true, children: 'Outline Tertiary' },
+};
+
+export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };
+export const DisabledPrimary: Story = {
+  args: { disabled: true, primary: true, children: 'Disabled Priary' },
+};
+export const DisabledSecondary: Story = {
+  args: { disabled: true, secondary: true, children: 'Disabled Secondary' },
+};
+export const DisabledTertiary: Story = {
+  args: { disabled: true, tertiary: true, children: 'Disabled Tertiary' },
+};
+export const DisabledGray: Story = {
+  args: { disabled: true, gray: true, children: 'Disabled Gray' },
+};
+
+export const Small: Story = { args: { small: true, children: 'Small' } };
+export const SmallPrimary: Story = {
+  args: { small: true, primary: true, children: 'Small Priary' },
+};
+export const SmallSecondary: Story = {
+  args: { small: true, secondary: true, children: 'Small Secondary' },
+};
+export const SmallTertiary: Story = {
+  args: { small: true, tertiary: true, children: 'Small Tertiary' },
+};
+export const SmallGray: Story = {
+  args: { small: true, gray: true, children: 'Small Gray' },
+};
+
+export const IsLink: Story = {
+  args: { isLink: true, children: 'Button as a link' },
+};
+
+export const IconPrimary: Story = {
+  args: {
+    primary: true,
+    containsIcon: true,
+    title: 'link',
+    children: <Icons icon="link" />,
+  },
+};
+export const IconOutline: Story = {
+  args: { outline: true, containsIcon: true, title: 'link', children: <Icons icon="link" /> },
+};
+export const IconOutlineSmall: Story = {
+  args: {
+    outline: true,
+    containsIcon: true,
+    small: true,
+    title: 'link',
+    children: <Icons icon="link" />,
+  },
+};