Release: Patch 7.0.28

.circleci/config.yml

@@ -658,27 +658,27 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 17
+          parallelism: 18
           requires:
             - build
       - build-sandboxes:
-          parallelism: 17
+          parallelism: 18
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 17
+          parallelism: 18
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 17
+          parallelism: 18
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 4
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 17
+          parallelism: 18
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

.github/workflows/publish.yml

@@ -27,6 +27,15 @@ jobs:
       run:
         working-directory: scripts
     steps:
+      - name: Cancel if [skip ci]
+        if: contains(github.event.head_commit.message, '[skip ci]')
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        # From https://stackoverflow.com/a/75809743
+        run: |
+          gh run cancel ${{ github.run_id }}
+          gh run watch ${{ github.run_id }}
+
       - name: Checkout ${{ github.ref_name }}
         uses: actions/checkout@v3
         with:
@@ -71,7 +80,7 @@ jobs:
           git config --global user.name "storybook-bot"
           git config --global user.email "32066757+storybook-bot@users.noreply.github.com"
           git add .
-          git commit -m "Bump version from $CURRENT_VERSION to $DEFERRED_NEXT_VERSION" || true
+          git commit -m "Bump version from $CURRENT_VERSION to $DEFERRED_NEXT_VERSION [skip ci]" || true
           git push origin ${{ github.ref_name }}
 
       - name: Get current version
@@ -149,7 +158,7 @@ jobs:
           git pull
           git checkout origin/main ./CHANGELOG.md
           git add ./CHANGELOG.md
-          git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }}"
+          git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]"
           git push origin next
 
       - name: Sync versions/next.json from `next` to `main`

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 7.0.28
+
+- Telemetry: Add globals usage to project.json - [#23431](https://github.com/storybookjs/storybook/pull/23431), thanks [@shilman](https://github.com/shilman)!
+
 ## 7.0.27
 
 - Angular: Enable prod mode when Storybook is built - [#23404](https://github.com/storybookjs/storybook/pull/23404), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

code/frameworks/nextjs/template/stories/Image.stories.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
+import { waitFor } from '@storybook/testing-library';
 
 import StackAlt from '../../assets/colors.svg';
 
@@ -28,6 +29,11 @@ export const BlurredAbsolutePlaceholder = {
       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==',
     placeholder: 'blur',
   },
+  parameters: {
+    // ignoring in Chromatic to avoid inconsistent snapshots
+    // given that the switch from blur to image is quite fast
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 export const FilledParent = {
@@ -63,6 +69,25 @@ export const Lazy = {
       </>
     ),
   ],
+  loaders: [
+    async () => {
+      // make sure we start at the top to test the scrolling into view functionality every time the story renders
+      // eslint-disable-next-line no-undef
+      window.scrollTo({ top: 0 });
+      await new Promise((res) => {
+        setTimeout(res, 16);
+      });
+      return {};
+    },
+  ],
+  play: async ({ canvasElement, step }) => {
+    await step('scroll image into view', () => {
+      canvasElement.scrollIntoView(false);
+    });
+    await step('wait for images to load', async () => {
+      await waitFor(waitForImagesToLoad);
+    });
+  },
 };
 
 export const Eager = {
@@ -75,3 +100,19 @@ export const Eager = {
     },
   },
 };
+
+async function waitForImagesToLoad() {
+  // eslint-disable-next-line no-undef
+  const images = Array.from(document.getElementsByTagName('img'));
+
+  await Promise.all(
+    images.map((image) => {
+      if (image.complete) {
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        image.addEventListener('load', resolve);
+      });
+    })
+  );
+}

code/frameworks/nextjs/template/stories_nextjs-12-js/ImageFuture.stories.jsx

@@ -28,6 +28,11 @@ export const BlurredAbsolutePlaceholder = {
       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==',
     placeholder: 'blur',
   },
+  parameters: {
+    // ignoring in Chromatic to avoid inconsistent snapshots
+    // given that the switch from blur to image is quite fast
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 export const FilledParent = {

code/package.json

@@ -327,5 +327,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.0.28"
 }

code/renderers/react/src/testing-api.ts

@@ -24,12 +24,12 @@ import type { ReactRenderer } from './types';
  *```jsx
  * // setup.js (for jest)
  * import { setProjectAnnotations } from '@storybook/react';
- * import * as projectAnnotations from './.storybook/preview';
+ * import projectAnnotations from './.storybook/preview';
  *
  * setProjectAnnotations(projectAnnotations);
  *```
  *
- * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
  */
 export function setProjectAnnotations(
   projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]

docs/configure/upgrading.md

@@ -37,9 +37,17 @@ In addition to running the command, we also recommend checking the [MIGRATION.md
 
 Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
 
-```
-npx storybook@latest automigrate
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-automigrate.npm.js.mdx',
+    'common/storybook-automigrate.pnpm.js.mdx',
+    'common/storybook-automigrate.yarn.js.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`storybook upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
 
@@ -55,6 +63,7 @@ To upgrade to the latest pre-release:
   paths={[
     'common/storybook-upgrade-prerelease.npm.js.mdx',
     'common/storybook-upgrade-prerelease.pnpm.js.mdx',
+    'common/storybook-upgrade-prerelease.yarn.js.mdx',
   ]}
 />
 

docs/snippets/common/storybook-automigrate.npm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+npx storybook@latest automigrate
+```

docs/snippets/common/storybook-automigrate.pnpm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@latest automigrate
+```

docs/snippets/common/storybook-automigrate.yarn.js.mdx

@@ -0,0 +1,3 @@
+```shell
+yarn dlx storybook@latest automigrate
+```

docs/snippets/web-components/button-story-auto-docs.js.mdx

@@ -4,7 +4,7 @@
 export default {
   component: 'custom-button',
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },

docs/snippets/web-components/button-story-auto-docs.ts.mdx

@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const Meta: Meta = {
   component: 'custom-button',
   //👇 Enables auto-generated documentation for the component story
-  tags: ['docsPage'],
+  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"7.0.27","info":{"plain":"- Angular: Enable prod mode when Storybook is built - [#23404](https://github.com/storybookjs/storybook/pull/23404), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Fix esm issue in combination with rxjs v6 - [#23405](https://github.com/storybookjs/storybook/pull/23405), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- CLI: Exit when user does not select a storybook project type - [#23201](https://github.com/storybookjs/storybook/pull/23201), thanks [@yannbf](https://github.com/yannbf)!\n- Next.js: Fix `useParams` support - [#22946](https://github.com/storybookjs/storybook/pull/22946), thanks [@gitstart-storybook](https://github.com/gitstart-storybook)!\n- Next.js: Fix for @nx/react/plugin/storybook with SVGs - [#23210](https://github.com/storybookjs/storybook/pull/23210), thanks [@daves28](https://github.com/daves28)!\n- Svelte-Webpack: Support Svelte v4 - [#23336](https://github.com/storybookjs/storybook/pull/23336), thanks [@JReinhold](https://github.com/JReinhold)!"}}
+{"version":"7.0.28","info":{"plain":"- Telemetry: Add globals usage to project.json - [#23431](https://github.com/storybookjs/storybook/pull/23431), thanks [@shilman](https://github.com/shilman)!"}}

docs/versions/next.json

@@ -1 +1 @@
-{"version":"7.1.0-rc.1","info":{"plain":"- Angular: Enable prod mode when Storybook is built - [#23404](https://github.com/storybookjs/storybook/pull/23404), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Fix esm issue in combination with rxjs v6 - [#23405](https://github.com/storybookjs/storybook/pull/23405), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- CLI: Fix chevron icon on Configure.mdx page - [#23397](https://github.com/storybookjs/storybook/pull/23397), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Settings: Fix dark mode for what's new page - [#23398](https://github.com/storybookjs/storybook/pull/23398), thanks [@kasperpeulen](https://github.com/kasperpeulen)!"}}
+{"version":"7.1.0-rc.2","info":{"plain":"- CLI: Exit when user does not select a storybook project type - [#23201](https://github.com/storybookjs/storybook/pull/23201), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Fix Javascript language detection - [#23426](https://github.com/storybookjs/storybook/pull/23426), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Core: Fix onboarding detection in what's new module - [#23424](https://github.com/storybookjs/storybook/pull/23424), thanks [@yannbf](https://github.com/yannbf)!\n- Dependencies: Bump `@sveltejs/vite-plugin-svelte` - [#23233](https://github.com/storybookjs/storybook/pull/23233), thanks [@JReinhold](https://github.com/JReinhold)!\n- Telemetry: Add globals usage to project.json - [#23431](https://github.com/storybookjs/storybook/pull/23431), thanks [@shilman](https://github.com/shilman)!"}}

docs/writing-docs/mdx.md

@@ -2,6 +2,8 @@
 title: 'MDX'
 ---
 
+<YouTubeCallout id="YeIvFke5_5Y" title="MDX Storybook Quick Tips" />
+
 [MDX](https://mdxjs.com/) files mix Markdown and Javascript/JSX to create rich interactive documentation. You can use Markdown’s readable syntax (such as `# heading`) for your documentation, include stories defined in [Component Story Format (CSF)](../api/csf.md), and freely embed JSX component blocks at any point in the file. All at once.
 
 In addition, you can write pure documentation pages in MDX and add them to Storybook alongside your stories.