From f11b035561109b83bda86b16fcab6c2f5a688656 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 20 Oct 2023 11:46:50 +0100 Subject: [PATCH 1/7] Update Toolbar.tsx --- code/ui/blocks/src/components/Toolbar.tsx | 77 ++++++++++++----------- 1 file changed, 39 insertions(+), 38 deletions(-) diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx index 3fe7e6923097..28ffc7afe285 100644 --- a/code/ui/blocks/src/components/Toolbar.tsx +++ b/code/ui/blocks/src/components/Toolbar.tsx @@ -24,41 +24,6 @@ interface LoadingProps { export type ToolbarProps = BarProps & ZoomProps & EjectProps & LoadingProps; -const Zoom: FC = ({ zoom, resetZoom }) => ( - <> - ) => { - e.preventDefault(); - zoom(0.8); - }} - title="Zoom in" - > - - - ) => { - e.preventDefault(); - zoom(1.25); - }} - title="Zoom out" - > - - - ) => { - e.preventDefault(); - resetZoom(); - }} - title="Reset zoom" - > - - - -); - const Bar = styled(FlexBar)({ position: 'absolute', left: 0, @@ -67,6 +32,11 @@ const Bar = styled(FlexBar)({ transition: 'transform .2s linear', }); +const Wrapper = styled.div({ + display: 'flex', + alignItems: 'center', +}); + export const Toolbar: FC = ({ isLoading, storyId, @@ -76,12 +46,43 @@ export const Toolbar: FC = ({ ...rest }) => ( - + {isLoading ? ( [1, 2, 3].map((key) => ) ) : ( - + <> + ) => { + e.preventDefault(); + zoom(0.8); + }} + title="Zoom in" + > + + + ) => { + e.preventDefault(); + zoom(1.25); + }} + title="Zoom out" + > + + + ) => { + e.preventDefault(); + resetZoom(); + }} + title="Reset zoom" + > + + + )} - + ); From 3eaad3ce0a10f6cb8ebcbe9a64c98ca504365dab Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 20 Oct 2023 12:02:56 +0100 Subject: [PATCH 2/7] Fix listItem story + icon color --- .../components/src/components/tooltip/ListItem.stories.tsx | 4 ++-- code/ui/components/src/components/tooltip/ListItem.tsx | 7 +------ 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/code/ui/components/src/components/tooltip/ListItem.stories.tsx b/code/ui/components/src/components/tooltip/ListItem.stories.tsx index 008c380cdcd5..ab68b8444ba8 100644 --- a/code/ui/components/src/components/tooltip/ListItem.stories.tsx +++ b/code/ui/components/src/components/tooltip/ListItem.stories.tsx @@ -49,14 +49,14 @@ export const ActiveIconLeft = { args: { title: 'Active icon', active: true, - left: , + icon: , }, }; export const ActiveIconLeftColored = { args: { title: 'Active icon', active: true, - left: ( + icon: ( ( ({ active, theme }) => active ? { - '& svg': { - opacity: 1, - }, - '& svg path:not([fill])': { - fill: theme.color.secondary, - }, + color: theme.color.secondary, } : {}, () => ({ From d9e82e78ab10517bbaf99e1c6b0e4bbd5bd269c6 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 20 Oct 2023 12:08:20 +0100 Subject: [PATCH 3/7] Fix story on Tooltip Link List --- .../src/components/tooltip/TooltipLinkList.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx index a03ca5ca5911..afc5ec0a9f22 100644 --- a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx +++ b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx @@ -2,7 +2,7 @@ import type { FunctionComponent, MouseEvent, PropsWithChildren, ReactElement } f import React, { Children, cloneElement } from 'react'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; -import { LinuxIcon } from '@storybook/icons'; +import { LinkIcon, LinuxIcon } from '@storybook/icons'; import { WithTooltip } from './WithTooltip'; import { TooltipLinkList } from './TooltipLinkList'; import ellipseUrl from './assets/ellipse.png'; @@ -76,7 +76,7 @@ export const WithOneIcon = { id: '1', title: 'Link 1', center: 'This is an addition description', - icon: 'link', + icon: , href: 'http://google.com', }, { From ae331e9c124afd0aef0706dd63de62bef8b7f5d8 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 20 Oct 2023 12:09:57 +0100 Subject: [PATCH 4/7] Fix old links name in stories --- .../src/components/tooltip/TooltipLinkList.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx index afc5ec0a9f22..84186de35444 100644 --- a/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx +++ b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx @@ -117,7 +117,7 @@ export const ActiveWithSeparateIcon = { { id: '1', title: 'Link 1', - icon: 'link', + icon: , center: 'This is an addition description', href: 'http://google.com', }, @@ -140,7 +140,7 @@ export const ActiveAndIcon = { id: '1', title: 'Link 1', active: true, - icon: 'link', + icon: , center: 'This is an addition description', href: 'http://google.com', }, @@ -162,7 +162,7 @@ export const WithIllustration = { id: '1', title: 'Link 1', active: true, - icon: 'link', + icon: , right: ellipse, center: 'This is an addition description', href: 'http://google.com', From 8e373382c53fa8d381e7e06dc612d1f230ebab53 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 20 Oct 2023 13:03:12 +0100 Subject: [PATCH 5/7] Update Toolbar.tsx --- code/ui/blocks/src/components/Toolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx index 28ffc7afe285..a0218e7eb56b 100644 --- a/code/ui/blocks/src/components/Toolbar.tsx +++ b/code/ui/blocks/src/components/Toolbar.tsx @@ -1,5 +1,5 @@ import type { FC, MouseEvent } from 'react'; -import React, { Fragment } from 'react'; +import React from 'react'; import { styled } from '@storybook/theming'; import { FlexBar, IconButton, IconButtonSkeleton } from '@storybook/components'; import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons'; From 7759cb80d91cd79d587b67b81b7ec573ba355837 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 20 Oct 2023 14:17:39 +0100 Subject: [PATCH 6/7] Improved empty state --- code/ui/blocks/src/components/Toolbar.tsx | 12 +++++++++++- code/ui/components/src/components/bar/button.tsx | 7 ++++++- .../manager/src/components/sidebar/Menu.stories.tsx | 3 ++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx index a0218e7eb56b..1159c425aa3f 100644 --- a/code/ui/blocks/src/components/Toolbar.tsx +++ b/code/ui/blocks/src/components/Toolbar.tsx @@ -35,8 +35,18 @@ const Bar = styled(FlexBar)({ const Wrapper = styled.div({ display: 'flex', alignItems: 'center', + gap: 4, }); +const IconPlaceholder = styled.div(({ theme }) => ({ + width: 14, + height: 14, + borderRadius: 2, + margin: '0 7px', + backgroundColor: theme.appBorderColor, + animation: `${theme.animation.glow} 1.5s ease-in-out infinite`, +})); + export const Toolbar: FC = ({ isLoading, storyId, @@ -48,7 +58,7 @@ export const Toolbar: FC = ({ {isLoading ? ( - [1, 2, 3].map((key) => ) + [1, 2, 3].map((key) => ) ) : ( <> ({ height: 28, })); -export const IconButtonSkeleton = () => ( +/** + * @deprecated + * This component will be removed in Storybook 9.0 + * */ +export const IconButtonSkeleton: FC = () => ( diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx index c113a632fe7c..e04811e76bf8 100644 --- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx @@ -7,12 +7,13 @@ import { TooltipLinkList } from '@storybook/components'; import { styled } from '@storybook/theming'; import { screen, userEvent, within } from '@storybook/testing-library'; import type { State } from '@storybook/manager-api'; +import { LinkIcon } from '@storybook/icons'; import { SidebarMenu, ToolbarMenu } from './Menu'; import { useMenu } from '../../container/Menu'; import { LayoutProvider } from '../layout/LayoutProvider'; const fakemenu: ComponentProps['links'] = [ - { title: 'has icon', icon: 'link', id: 'icon' }, + { title: 'has icon', icon: , id: 'icon' }, { title: 'has no icon', id: 'non' }, ]; From e39c61767986f11fcbfaacedb1e1dd37b812a489 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 20 Oct 2023 14:41:48 +0100 Subject: [PATCH 7/7] Update Toolbar.tsx --- code/ui/blocks/src/components/Toolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx index 1159c425aa3f..5d6c55307d13 100644 --- a/code/ui/blocks/src/components/Toolbar.tsx +++ b/code/ui/blocks/src/components/Toolbar.tsx @@ -1,7 +1,7 @@ import type { FC, MouseEvent } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; -import { FlexBar, IconButton, IconButtonSkeleton } from '@storybook/components'; +import { FlexBar, IconButton } from '@storybook/components'; import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons'; interface ZoomProps {