Merge pull request #22530 from storybookjs/main-prerelease

7.0.11 patch release

.spelling

@@ -7,7 +7,6 @@ addon
 addons
 api
 apollo
-aurelia
 bundlers
 center
 centered

CHANGELOG.md

@@ -1,3 +1,21 @@
+## 7.0.11 (May 12, 2023)
+
+#### Bug Fixes
+
+-   Toolbars: Fix title behavior in UI [#22496](https://github.com/storybooks/storybook/pull/22496)
+-   CLI: Fix storybook upgrade precheckfailure object [#22517](https://github.com/storybooks/storybook/pull/22517)
+-   CLI: Throw errors instead of rejecting promises [#22515](https://github.com/storybooks/storybook/pull/22515)
+-   CLI: Remove unsupported frameworks/renderers and improve builder detection [#22492](https://github.com/storybooks/storybook/pull/22492)
+-   Web-components: Fix source decorator to handle document fragments [#22513](https://github.com/storybooks/storybook/pull/22513)
+-   Core: Fix windows path error in StoryStore v6 [#22512](https://github.com/storybooks/storybook/pull/22512)
+-   CLI: Do not show a migration summary on sb init [#22109](https://github.com/storybooks/storybook/pull/22109)
+-   UI: Show current search shortcut in search box sidebar [#21619](https://github.com/storybooks/storybook/pull/21619)
+-   Outline: Fix additional outline border in docs mode [#21773](https://github.com/storybooks/storybook/pull/21773)
+-   Measure: Deactivate when switching to Docs mode [#21602](https://github.com/storybooks/storybook/pull/21602)
+-   CSF: Expose story id in composeStories [#22471](https://github.com/storybooks/storybook/pull/22471)
+-   CLI: Prompt to force initialization when storybook folder is detected [#22392](https://github.com/storybooks/storybook/pull/22392)
+-   UI: Fix css inconsistency in Button and Icon components [#22497](https://github.com/storybooks/storybook/pull/22497)
+
 ## 7.0.10 (May 9, 2023)
 
 #### Bug Fixes

MIGRATION.md

@@ -25,7 +25,9 @@
     - [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
     - [Stories field in .storybook/main.js is mandatory](#stories-field-in-storybookmainjs-is-mandatory)
     - [Stricter global types](#stricter-global-types)
-    - [Dropped support for file URLs](#dropped-support-for-file-urls)
+    - [Deploying build artifacts](#deploying-build-artifacts)
+      - [Dropped support for file URLs](#dropped-support-for-file-urls)
+      - [Serving with nginx](#serving-with-nginx)
   - [7.0 Core changes](#70-core-changes)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -905,11 +907,36 @@ Please follow up the [Configure your Storybook project](https://storybook.js.org
 
 In 6.x, you could declare and use [`globals`](https://storybook.js.org/docs/react/essentials/toolbars-and-globals) without declaring their corresponding `globalTypes`. We've made this more strict in 7.0, so that the `globalTypes` declaration is required, and undeclared globals will be ignored.
 
-#### Dropped support for file URLs
+#### Deploying build artifacts
 
-In 6.x it was possible to open a storybook from the file system. In 7.x, you must serve your static storybook with an HTTP server, e.g. `npx http-server storybook-static`.
+Starting with 7.x, we are using modern [ECMAScript Modules (ESM)](https://nodejs.org/api/esm.html).
 
-The reason for this change is that we're now using `.mjs` (modern ESM) and these are incompatible with the browser's CORS settings for file URLs.
+Those end up as `.mjs` files in your static Storybook artifact and need to be served as `application/javascript`, indicated by the `Content-Type` HTTP header.
+
+For a simple HTTP server to view a Storybook build, you can run `npx http-server storybook-static`.
+
+Note that [using the serve package](https://storybook.js.org/docs/react/faq#i-see-a-no-preview-error-with-a-storybook-production-build) will not work.
+
+##### Dropped support for file URLs
+
+In 6.x it was possible to open a Storybook build from the file system.
+
+ESM requires loading over HTTP(S), which is incompatible with the browser's CORS settings for `file://` URLs.
+
+So you now need to use a web server as described above.
+
+##### Serving with nginx
+
+With [nginx](https://www.nginx.com/), you need to extend [the MIME type handling](https://github.com/nginx/nginx/blob/master/conf/mime.types) in your configuration:
+
+```
+    include mime.types;
+    types {
+        application/javascript mjs;
+    }
+```
+
+It would otherwise default to serving the `.mjs` files as `application/octet-stream`.
 
 ### 7.0 Core changes
 

code/.eslintrc.js

@@ -139,12 +139,6 @@ module.exports = {
         'spaced-comment': 'off',
       },
     },
-    {
-      files: ['**/mithril/**/*'],
-      rules: {
-        'react/no-unknown-property': 'off', // Need to deactivate otherwise eslint replaces some unknown properties with React ones
-      },
-    },
     {
       files: ['**/e2e-tests/**/*'],
       rules: {

code/addons/links/package.json

@@ -124,7 +124,6 @@
     "displayName": "Links",
     "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
     "unsupportedFrameworks": [
-      "marko",
       "react-native"
     ]
   }

code/addons/measure/src/withMeasure.ts

@@ -46,7 +46,7 @@ export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryCont
       });
     };
 
-    if (measureEnabled) {
+    if (context.viewMode === 'story' && measureEnabled) {
       document.addEventListener('pointerover', onPointerOver);
       init();
       window.addEventListener('resize', onResize);
@@ -58,7 +58,7 @@ export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryCont
       window.removeEventListener('resize', onResize);
       destroy();
     };
-  }, [measureEnabled]);
+  }, [measureEnabled, context.viewMode]);
 
   return StoryFn();
 };

code/addons/outline/src/withOutline.ts

@@ -11,7 +11,7 @@ export const withOutline = (StoryFn: StoryFunction<Renderer>, context: StoryCont
   const isInDocs = context.viewMode === 'docs';
 
   const outlineStyles = useMemo(() => {
-    const selector = isInDocs ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
+    const selector = isInDocs ? `[data-story-block="true"]` : '.sb-show-main';
 
     return outlineCSS(selector);
   }, [context]);

code/addons/storyshots-core/README.md

@@ -603,11 +603,10 @@ initStoryshots({
 
 Use this table as a reference for manually specifying the framework.
 
-| angular        | html | preact       |
-| -------------- | ---- | ------------ |
-| react          | riot | react-native |
-| svelte         | vue  | vue3         |
-| web-components | rax  |              |
+| angular | html         | preact         |
+| ------- | ------------ | -------------- |
+| react   | react-native | vue3           |
+| svelte  | vue          | web-components |
 
 ### `test`
 

code/addons/storyshots-core/package.json

@@ -147,9 +147,7 @@
     "displayName": "Storyshots",
     "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
     "unsupportedFrameworks": [
-      "ember",
-      "mithril",
-      "marko"
+      "ember"
     ]
   }
 }

code/addons/storyshots-core/src/frameworks/SupportedFramework.ts

@@ -3,10 +3,8 @@ export type SupportedFramework =
   | 'html'
   | 'preact'
   | 'react'
-  | 'riot'
   | 'react-native'
   | 'svelte'
   | 'vue'
   | 'vue3'
-  | 'web-components'
-  | 'rax';
+  | 'web-components';

code/addons/storyshots-core/src/typings.d.ts

@@ -3,7 +3,6 @@
 declare module 'jest-preset-angular/*';
 declare module 'preact-render-to-string/jsx';
 declare module 'react-test-renderer*';
-declare module 'rax-test-renderer*';
 
 declare module '@storybook/babel-plugin-require-context-hook/register';
 

code/addons/toolbars/src/components/ToolbarMenuList.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 import React, { useState, useCallback } from 'react';
 import { useGlobals } from '@storybook/manager-api';
-import { deprecate } from '@storybook/client-logger';
 import { WithTooltip, TooltipLinkList } from '@storybook/components';
 import { ToolbarMenuButton } from './ToolbarMenuButton';
 import type { WithKeyboardCycleProps } from '../hoc/withKeyboardCycle';
@@ -31,23 +30,14 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
       icon = getSelectedIcon({ currentValue, items }) || icon;
     }
 
-    // Deprecation support for old "name of global arg used as title"
-    if (!title) {
-      title = name;
-      deprecate(
-        '`showName` is deprecated as `name` will stop having dual purposes in the future. Please specify a `title` in `globalTypes` instead.'
-      );
-    } else if (!icon && !title) {
-      title = name;
-      deprecate(
-        `Using the \`name\` "${name}" as toolbar title for backward compatibility. \`name\` will stop having dual purposes in the future. Please specify either a \`title\` or an \`icon\` in \`globalTypes\` instead.`
-      );
-    }
-
     if (dynamicTitle) {
       title = getSelectedTitle({ currentValue, items }) || title;
     }
 
+    if (!title && !icon) {
+      console.warn(`Toolbar '${name}' has no title or icon`);
+    }
+
     const handleItemClick = useCallback(
       (value: string | undefined) => {
         updateGlobals({ [id]: value });

code/addons/toolbars/src/components/ToolbarMenuListItem.tsx

@@ -21,7 +21,7 @@ export const ToolbarMenuListItem = ({
   const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
 
   const Item: TooltipLinkListLink = {
-    id: value || currentValue,
+    id: value ?? '_reset',
     active: currentValue === value,
     right,
     title,