From 91ec9720fe85d4c1cc9852663042abae5ae286be Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 15 Mar 2024 10:53:55 +0100 Subject: [PATCH 1/7] UI: Improve empty state of addon panel --- .../a11y/src/components/Report/index.tsx | 4 +- .../src/components/EmptyState.tsx | 74 ++++----------- code/ui/.storybook/main.ts | 1 + .../blocks/src/components/ArgsTable/Empty.tsx | 91 ++++++++----------- .../tabs/EmptyTabContent.stories.tsx | 47 ++++++++++ .../src/components/tabs/EmptyTabContent.tsx | 52 +++++++++++ .../src/components/tabs/tabs.stories.tsx | 69 ++++++++++---- .../components/src/components/tabs/tabs.tsx | 28 ++++-- code/ui/components/src/index.ts | 1 + .../ui/manager/src/components/panel/Panel.tsx | 29 +++++- code/ui/manager/src/globals/exports.ts | 1 + 11 files changed, 259 insertions(+), 138 deletions(-) create mode 100644 code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx create mode 100644 code/ui/components/src/components/tabs/EmptyTabContent.tsx diff --git a/code/addons/a11y/src/components/Report/index.tsx b/code/addons/a11y/src/components/Report/index.tsx index d231cc4cf0e2..83bcb1705d32 100644 --- 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 = ({ items, empty, type }) => ( {items && items.length ? ( items.map((item) => ) ) : ( - {empty} + )} ); diff --git a/code/addons/interactions/src/components/EmptyState.tsx b/code/addons/interactions/src/components/EmptyState.tsx index d4fa62c144a4..0cb5ecba69e2 100644 --- 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 ( - - - Interaction testing - + Interaction tests allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here. - - - - - Watch 8m video - - - - {({ state }) => ( - - Read docs - - )} - - - + + } + footer={ + + + Watch 8m video + + + + Read docs + + + } + /> ); }; diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index dd01824a38e8..4025715324d0 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -52,6 +52,7 @@ const config: StorybookConfig = { '@storybook/addon-interactions', '@storybook/addon-storysource', '@storybook/addon-designs', + '@storybook/addon-a11y', '@chromatic-com/storybook', ], build: { diff --git a/code/ui/blocks/src/components/ArgsTable/Empty.tsx b/code/ui/blocks/src/components/ArgsTable/Empty.tsx index c4269a605f95..64de5e1efe3b 100644 --- a/code/ui/blocks/src/components/ArgsTable/Empty.tsx +++ b/code/ui/blocks/src/components/ArgsTable/Empty.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; import { styled } from '@storybook/theming'; -import { Link } from '@storybook/components'; +import { Link, EmptyTabContent } from '@storybook/components'; import { DocumentIcon, SupportIcon, VideoIcon } from '@storybook/icons'; interface EmptyProps { @@ -22,27 +22,6 @@ const Wrapper = styled.div<{ inAddonPanel?: boolean }>(({ inAddonPanel, theme }) boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0', })); -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,39 +52,47 @@ export const Empty: FC = ({ inAddonPanel }) => { return ( - - - {inAddonPanel + <EmptyTabContent + title={ + inAddonPanel ? 'Interactive story playground' - : "Args table with interactive controls couldn't be auto-generated"} - - - Controls give you an easy to use interface to test your components. Set your story args - and you'll see controls appearing here automatically. - - - - {inAddonPanel && ( + : "Args table with interactive controls couldn't be auto-generated" + } + description={ <> - - Watch 5m video - - - - Read docs - + Controls give you an easy to use interface to test your components. Set your story args + and you'll see controls appearing here automatically. - )} - {!inAddonPanel && ( - - Learn how to set that up - - )} - + } + footer={ + + {inAddonPanel && ( + <> + + Watch 5m video + + + + Read docs + + + )} + {!inAddonPanel && ( + + Learn how to set that up + + )} + + } + /> ); }; diff --git a/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx b/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx new file mode 100644 index 000000000000..3fcd2767e079 --- /dev/null +++ b/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import type { EmptyTabContent } from './EmptyTabContent'; +import { DocumentIcon } from '@storybook/icons'; +import { Link } from '@storybook/components'; +import type { Meta, StoryObj } from '@storybook/react'; +const EmptyComponent = () => ''; + +export default { + component: EmptyComponent, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta; + +type Story = StoryObj; + +export const EmptyStuff = { + render: () => { + return
; + }, +}; + +export const OnlyTitle: Story = { + args: { + title: 'Nothing found', + }, +}; + +export const TitleAndDescription: Story = { + args: { + title: 'Nothing found', + description: 'Sorry, there is nothing to display here.', + }, +}; + +export const CustomFooter: Story = { + args: { + title: 'Nothing found', + description: 'Sorry, there is nothing to display here.', + footer: ( + + See the docs + + ), + }, +}; diff --git a/code/ui/components/src/components/tabs/EmptyTabContent.tsx b/code/ui/components/src/components/tabs/EmptyTabContent.tsx new file mode 100644 index 000000000000..eec65f6183d7 --- /dev/null +++ b/code/ui/components/src/components/tabs/EmptyTabContent.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { styled } from '@storybook/theming'; + +const Wrapper = styled.div(({ theme }) => ({ + height: '100%', + display: 'flex', + padding: 30, + 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, +})); + +interface Props { + title: React.ReactNode; + description?: React.ReactNode; + footer?: React.ReactNode; +} + +export const EmptyTabContent = ({ title, description, footer }: Props) => { + return ( + + + {title} + {description && {description}} + + {footer} + + ); +}; diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx index 46a332a87f1f..02031dd1448a 100644 --- a/code/ui/components/src/components/tabs/tabs.stories.tsx +++ b/code/ui/components/src/components/tabs/tabs.stories.tsx @@ -1,9 +1,9 @@ import { expect } from '@storybook/test'; -import React, { Fragment } from 'react'; +import React from 'react'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; import { within, fireEvent, waitFor, screen, userEvent, findByText } from '@storybook/test'; -import { CPUIcon, MemoryIcon } from '@storybook/icons'; +import { BottomBarIcon, CloseIcon } from '@storybook/icons'; import { Tabs, TabsState, TabWrapper } from './tabs'; import type { ChildrenList } from './tabs.helpers'; import { IconButton } from '../IconButton/IconButton'; @@ -260,7 +260,27 @@ export const StatelessBordered = { ), } satisfies Story; +const AddonTools = () => ( +
+ + + + + + +
+); + export const StatelessWithTools = { + args: { + tools: , + }, render: (args) => ( - - - - - - - - } {...args} > {content} ), -} satisfies Story; +} satisfies StoryObj; export const StatelessAbsolute = { parameters: { @@ -303,7 +313,7 @@ export const StatelessAbsolute = { {content} ), -} satisfies Story; +} satisfies StoryObj; export const StatelessAbsoluteBordered = { parameters: { @@ -323,9 +333,13 @@ export const StatelessAbsoluteBordered = { {content} ), -} satisfies Story; +} satisfies StoryObj; -export const StatelessEmpty = { +export const StatelessEmptyWithTools = { + args: { + ...StatelessWithTools.args, + showToolsWhenEmpty: true, + }, parameters: { layout: 'fullscreen', }, @@ -340,4 +354,25 @@ export const StatelessEmpty = { {...args} /> ), -} satisfies Story; +} satisfies StoryObj; + +export const StatelessWithCustomEmpty = { + args: { + ...StatelessEmptyWithTools.args, + customEmptyState:
I am custom!
, + }, + parameters: { + layout: 'fullscreen', + }, + render: (args) => ( + + ), +} satisfies StoryObj; diff --git a/code/ui/components/src/components/tabs/tabs.tsx b/code/ui/components/src/components/tabs/tabs.tsx index 0e3484eab4ba..5c25feb04d42 100644 --- a/code/ui/components/src/components/tabs/tabs.tsx +++ b/code/ui/components/src/components/tabs/tabs.tsx @@ -1,14 +1,14 @@ import type { FC, PropsWithChildren, ReactElement, ReactNode, SyntheticEvent } from 'react'; -import React, { useMemo, Component, Fragment, memo } from 'react'; +import React, { useMemo, Component, memo } from 'react'; import { styled } from '@storybook/theming'; import { sanitize } from '@storybook/csf'; import type { Addon_RenderOptions } from '@storybook/types'; -import { Placeholder } from '../placeholder/placeholder'; import { TabButton } from '../bar/button'; import { FlexBar } from '../bar/bar'; import { childrenToList, VisuallyHidden } from './tabs.helpers'; import { useList } from './tabs.hooks'; +import { EmptyTabContent } from './EmptyTabContent'; const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */'; @@ -119,6 +119,8 @@ export interface TabsProps { }>[]; id?: string; tools?: ReactNode; + showToolsWhenEmpty?: boolean; + customEmptyState?: ReactNode; selected?: string; actions?: { onSelect: (id: string) => void; @@ -140,6 +142,8 @@ export const Tabs: FC = memo( backgroundColor, id: htmlId, menuName, + customEmptyState, + showToolsWhenEmpty, }) => { const idList = childrenToList(children) .map((i) => i.id) @@ -157,7 +161,13 @@ export const Tabs: FC = memo( const { visibleList, tabBarRef, tabRefs, AddonTab } = useList(list); - return list.length ? ( + const EmptyContent = customEmptyState ?? ; + + if (!showToolsWhenEmpty && list.length === 0) { + return EmptyContent; + } + + return ( @@ -190,15 +200,13 @@ export const Tabs: FC = memo( {tools} - {list.map(({ id, active, render }) => { - return React.createElement(render, { key: id, active }, null); - })} + {list.length + ? list.map(({ id, active, render }) => { + return React.createElement(render, { key: id, active }, null); + }) + : EmptyContent} - ) : ( - - Nothing found - ); } ); diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts index f43d08b5d8f5..ffe4a08d699f 100644 --- a/code/ui/components/src/index.ts +++ b/code/ui/components/src/index.ts @@ -66,6 +66,7 @@ export { default as ListItem } from './components/tooltip/ListItem'; // Toolbar and subcomponents export { Tabs, TabsState, TabBar, TabWrapper } from './components/tabs/tabs'; +export { EmptyTabContent } from './components/tabs/EmptyTabContent'; export { IconButtonSkeleton, TabButton } from './components/bar/button'; export { Separator, interleaveSeparators } from './components/bar/separator'; export { Bar, FlexBar } from './components/bar/bar'; diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx index e37339445c82..56cc32e7a161 100644 --- a/code/ui/manager/src/components/panel/Panel.tsx +++ b/code/ui/manager/src/components/panel/Panel.tsx @@ -1,10 +1,10 @@ -import React, { Component } from 'react'; -import { Tabs, IconButton } from '@storybook/components'; +import React, { Component, Fragment } from 'react'; +import { Tabs, IconButton, Placeholder, P, Link } from '@storybook/components'; import type { State } from '@storybook/manager-api'; import { shortcutToHumanString } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; import { styled } from '@storybook/theming'; -import { BottomBarIcon, CloseIcon, SidebarAltIcon } from '@storybook/icons'; +import { BottomBarIcon, CloseIcon, DocumentIcon, SidebarAltIcon } from '@storybook/icons'; import { useLayout } from '../layout/LayoutProvider'; export interface SafeTabProps { @@ -60,6 +60,23 @@ export const AddonPanel = React.memo<{ {...(selectedPanel ? { selected: selectedPanel } : {})} menuName="Addons" actions={actions} + showToolsWhenEmpty + customEmptyContent={ + + +

Storybook add-ons

+ + +

+ Integrate your tools with Storybook to connect workflows and unlock advanced + features. +

+ + Explore integrations catalog + + + + } tools={ {isDesktop ? ( @@ -108,3 +125,9 @@ const Actions = styled.div({ alignItems: 'center', gap: 6, }); + +const EmptyStateDescription = styled.div({ + display: 'flex', + alignItems: 'center', + flexDirection: 'column', +}); diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index 079340369fcb..73881b9b5919 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -67,6 +67,7 @@ export default { 'DL', 'Div', 'DocumentWrapper', + 'EmptyTabContent', 'ErrorFormatter', 'FlexBar', 'Form', From 0e4747d5a6d97e727aef8f8d0f1979fddcd3cd18 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 15 Mar 2024 13:26:09 +0100 Subject: [PATCH 2/7] use correct prop name --- code/ui/manager/src/components/panel/Panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx index 56cc32e7a161..0aa15ddfbe73 100644 --- a/code/ui/manager/src/components/panel/Panel.tsx +++ b/code/ui/manager/src/components/panel/Panel.tsx @@ -61,7 +61,7 @@ export const AddonPanel = React.memo<{ menuName="Addons" actions={actions} showToolsWhenEmpty - customEmptyContent={ + customEmptyState={

Storybook add-ons

From 809471bf16c0d1d04ece9ae40b29689a60ffbb5d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 15 Mar 2024 13:48:16 +0100 Subject: [PATCH 3/7] remove story --- .../src/components/tabs/EmptyTabContent.stories.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx b/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx index 3fcd2767e079..aa7c91de58d8 100644 --- a/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx +++ b/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx @@ -15,12 +15,6 @@ export default { type Story = StoryObj; -export const EmptyStuff = { - render: () => { - return
; - }, -}; - export const OnlyTitle: Story = { args: { title: 'Nothing found', From fb2e9f6d3f5972086c34350bcb667dc6344f4ed7 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 18 Mar 2024 12:02:05 +0100 Subject: [PATCH 4/7] use document icon in empty args table state --- code/ui/blocks/src/components/ArgsTable/Empty.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/Empty.tsx b/code/ui/blocks/src/components/ArgsTable/Empty.tsx index 64de5e1efe3b..2f2c1bb40445 100644 --- a/code/ui/blocks/src/components/ArgsTable/Empty.tsx +++ b/code/ui/blocks/src/components/ArgsTable/Empty.tsx @@ -2,7 +2,7 @@ import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; import { styled } from '@storybook/theming'; import { Link, EmptyTabContent } from '@storybook/components'; -import { DocumentIcon, SupportIcon, VideoIcon } from '@storybook/icons'; +import { DocumentIcon, VideoIcon } from '@storybook/icons'; interface EmptyProps { inAddonPanel?: boolean; @@ -87,7 +87,7 @@ export const Empty: FC = ({ inAddonPanel }) => { target="_blank" withArrow > - Learn how to set that up + Learn how to set that up )} From 34b5d26475c3426f05268cb4d40e9abc319aee4d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 18 Mar 2024 15:32:10 +0100 Subject: [PATCH 5/7] misc fixes --- .../tabs/EmptyTabContent.stories.tsx | 13 +++++++- .../src/components/tabs/tabs.stories.tsx | 2 +- .../components/src/components/tabs/tabs.tsx | 6 ++-- .../ui/manager/src/components/panel/Panel.tsx | 30 ++++++++----------- 4 files changed, 28 insertions(+), 23 deletions(-) diff --git a/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx b/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx index aa7c91de58d8..21d7b34829bf 100644 --- a/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx +++ b/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx @@ -28,7 +28,18 @@ export const TitleAndDescription: Story = { }, }; -export const CustomFooter: Story = { +export const TitleAndFooter: Story = { + args: { + title: 'Nothing found', + footer: ( + + See the docs + + ), + }, +}; + +export const TitleDescriptionAndFooter: Story = { args: { title: 'Nothing found', description: 'Sorry, there is nothing to display here.', diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx index 02031dd1448a..a3c40fd8a9d9 100644 --- a/code/ui/components/src/components/tabs/tabs.stories.tsx +++ b/code/ui/components/src/components/tabs/tabs.stories.tsx @@ -359,7 +359,7 @@ export const StatelessEmptyWithTools = { export const StatelessWithCustomEmpty = { args: { ...StatelessEmptyWithTools.args, - customEmptyState:
I am custom!
, + emptyState:
I am custom!
, }, parameters: { layout: 'fullscreen', diff --git a/code/ui/components/src/components/tabs/tabs.tsx b/code/ui/components/src/components/tabs/tabs.tsx index 5c25feb04d42..5b0cbb2b5612 100644 --- a/code/ui/components/src/components/tabs/tabs.tsx +++ b/code/ui/components/src/components/tabs/tabs.tsx @@ -120,7 +120,7 @@ export interface TabsProps { id?: string; tools?: ReactNode; showToolsWhenEmpty?: boolean; - customEmptyState?: ReactNode; + emptyState?: ReactNode; selected?: string; actions?: { onSelect: (id: string) => void; @@ -142,7 +142,7 @@ export const Tabs: FC = memo( backgroundColor, id: htmlId, menuName, - customEmptyState, + emptyState, showToolsWhenEmpty, }) => { const idList = childrenToList(children) @@ -161,7 +161,7 @@ export const Tabs: FC = memo( const { visibleList, tabBarRef, tabRefs, AddonTab } = useList(list); - const EmptyContent = customEmptyState ?? ; + const EmptyContent = emptyState ?? ; if (!showToolsWhenEmpty && list.length === 0) { return EmptyContent; diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx index 0aa15ddfbe73..8e90e446bacb 100644 --- a/code/ui/manager/src/components/panel/Panel.tsx +++ b/code/ui/manager/src/components/panel/Panel.tsx @@ -1,5 +1,5 @@ -import React, { Component, Fragment } from 'react'; -import { Tabs, IconButton, Placeholder, P, Link } from '@storybook/components'; +import React, { Component } from 'react'; +import { Tabs, IconButton, P, Link, EmptyTabContent } from '@storybook/components'; import type { State } from '@storybook/manager-api'; import { shortcutToHumanString } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; @@ -61,21 +61,21 @@ export const AddonPanel = React.memo<{ menuName="Addons" actions={actions} showToolsWhenEmpty - customEmptyState={ - - -

Storybook add-ons

- - -

+ emptyState={ + Integrate your tools with Storybook to connect workflows and unlock advanced features. -

+ + } + footer={ Explore integrations catalog - - + } + /> } tools={ @@ -125,9 +125,3 @@ const Actions = styled.div({ alignItems: 'center', gap: 6, }); - -const EmptyStateDescription = styled.div({ - display: 'flex', - alignItems: 'center', - flexDirection: 'column', -}); From ad2d423e8e393f4d2687d7d97140776b7fba4f3f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 18 Mar 2024 15:48:13 +0100 Subject: [PATCH 6/7] remove unused import --- code/ui/manager/src/components/panel/Panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx index 8e90e446bacb..654ea6653849 100644 --- a/code/ui/manager/src/components/panel/Panel.tsx +++ b/code/ui/manager/src/components/panel/Panel.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Tabs, IconButton, P, Link, EmptyTabContent } from '@storybook/components'; +import { Tabs, IconButton, Link, EmptyTabContent } from '@storybook/components'; import type { State } from '@storybook/manager-api'; import { shortcutToHumanString } from '@storybook/manager-api'; import type { Addon_BaseType } from '@storybook/types'; From 5152b7c95d2f0ad363788615dbb7ea88d89e9118 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 18 Mar 2024 17:08:41 +0100 Subject: [PATCH 7/7] fix story --- .../src/components/tabs/EmptyTabContent.stories.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx b/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx index 21d7b34829bf..3ef2da755f34 100644 --- a/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx +++ b/code/ui/components/src/components/tabs/EmptyTabContent.stories.tsx @@ -1,12 +1,11 @@ import React from 'react'; -import type { EmptyTabContent } from './EmptyTabContent'; +import { EmptyTabContent } from './EmptyTabContent'; import { DocumentIcon } from '@storybook/icons'; import { Link } from '@storybook/components'; import type { Meta, StoryObj } from '@storybook/react'; -const EmptyComponent = () => ''; export default { - component: EmptyComponent, + component: EmptyTabContent, parameters: { layout: 'centered', },