Merge branch 'latest-release'

storybookjs · Mar 19, 2024 · 891244f · 891244f
2 parents 14699a9 + 01c44fb
commit 891244f
Show file tree

Hide file tree

Showing 114 changed files with 581 additions and 348 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 8.0.2
+
+- Addon Docs: Fix [Object object] displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!
+- CLI: Add yarn1 package manager fallback for init in empty directory - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!
+- CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!
+- Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!
+- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!
+- UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!
+- UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!
+
 ## 8.0.1
 
 - Controls: Fix type summary when table.type unset - [#26283](https://github.com/storybookjs/storybook/pull/26283), thanks @shilman!

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

diff --git a/code/addons/a11y/src/components/Report/index.tsx b/code/addons/a11y/src/components/Report/index.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { Fragment } from 'react';
-import { Placeholder } from '@storybook/components';
+import { EmptyTabContent } from '@storybook/components';
 import type { Result } from 'axe-core';
 
 import { Item } from './Item';
@@ -18,7 +18,7 @@ export const Report: FC<ReportProps> = ({ items, empty, type }) => (
     {items && items.length ? (
       items.map((item) => <Item item={item} key={`${type}:${item.id}`} type={type} />)
     ) : (
-      <Placeholder key="placeholder">{empty}</Placeholder>
+      <EmptyTabContent title={empty} />
     )}
   </Fragment>
 );
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/src/components/EmptyState.tsx b/code/addons/interactions/src/components/EmptyState.tsx
@@ -1,43 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Link } from '@storybook/components';
+import { Link, EmptyTabContent } from '@storybook/components';
 import { DocumentIcon, VideoIcon } from '@storybook/icons';
-import { Consumer, useStorybookApi } from '@storybook/manager-api';
+import { useStorybookApi } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
 
 import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
 
-const Wrapper = styled.div(({ theme }) => ({
-  height: '100%',
-  display: 'flex',
-  padding: 0,
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  gap: 15,
-  background: theme.background.content,
-}));
-
-const Content = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 4,
-  maxWidth: 415,
-});
-
-const Title = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s2 - 1,
-  textAlign: 'center',
-  color: theme.textColor,
-}));
-
-const Description = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.regular,
-  fontSize: theme.typography.size.s2 - 1,
-  textAlign: 'center',
-  color: theme.textMutedColor,
-}));
-
 const Links = styled.div(({ theme }) => ({
   display: 'flex',
   fontSize: theme.typography.size.s2 - 1,
@@ -73,27 +41,25 @@ export const Empty = () => {
   if (isLoading) return null;
 
   return (
-    <Wrapper>
-      <Content>
-        <Title>Interaction testing</Title>
-        <Description>
+    <EmptyTabContent
+      title="Interaction testing"
+      description={
+        <>
           Interaction tests allow you to verify the functional aspects of UIs. Write a play function
           for your story and you&apos;ll see it run here.
-        </Description>
-      </Content>
-      <Links>
-        <Link href={TUTORIAL_VIDEO_LINK} target="_blank" withArrow>
-          <VideoIcon /> Watch 8m video
-        </Link>
-        <Divider />
-        <Consumer>
-          {({ state }) => (
-            <Link href={docsUrl} target="_blank" withArrow>
-              <DocumentIcon /> Read docs
-            </Link>
-          )}
-        </Consumer>
-      </Links>
-    </Wrapper>
+        </>
+      }
+      footer={
+        <Links>
+          <Link href={TUTORIAL_VIDEO_LINK} target="_blank" withArrow>
+            <VideoIcon /> Watch 8m video
+          </Link>
+          <Divider />
+          <Link href={docsUrl} target="_blank" withArrow>
+            <DocumentIcon /> Read docs
+          </Link>
+        </Links>
+      }
+    />
   );
 };
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

diff --git a/code/addons/links/package.json b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",

diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {

diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-webpack5",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",

diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-webpack5",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-webpack5",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",