From 645c7cd335a8a771bceaa18166ee189725d50c9c Mon Sep 17 00:00:00 2001 From: Bruno Bufolin Date: Sun, 23 Apr 2023 18:06:44 -0300 Subject: [PATCH 1/3] fix: adjust tree node alignment when using a different font --- .../src/components/sidebar/TreeNode.tsx | 43 +++++++++++++++---- 1 file changed, 34 insertions(+), 9 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index f71c7c0e9202..f869fb53ba67 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -9,7 +9,6 @@ export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExp display: 'inline-block', width: 0, height: 0, - marginTop: 6, marginLeft: 8, marginRight: 5, color: transparentize(0.4, theme.textMutedColor), @@ -41,8 +40,6 @@ const TypeIcon = styled(Icons)<{ docsMode?: boolean }>( { width: 12, height: 12, - padding: 1, - marginTop: 3, marginRight: 5, flex: '0 0 auto', }, @@ -145,6 +142,26 @@ export const RootNode = styled.div(({ theme }) => ({ color: theme.textMutedColor, })); +const Wrapper = styled.div({ + display: 'flex', + alignItems: 'center', +}); + +const InvisibleText = styled.p({ + margin: 0, + width: 0, +}); + +// Make the content have a min-height equal to one line of text +export const IconsWrapper: FunctionComponent<{ children?: React.ReactNode }> = ({ children }) => { + return ( + +   + {children} + + ); +}; + export const GroupNode: FunctionComponent< ComponentProps & { isExpanded?: boolean; isExpandable?: boolean } > = React.memo(function GroupNode({ @@ -155,8 +172,10 @@ export const GroupNode: FunctionComponent< }) { return ( - {isExpandable ? : null} - + + {isExpandable ? : null} + + {children} ); @@ -166,8 +185,10 @@ export const ComponentNode: FunctionComponent> function ComponentNode({ theme, children, isExpanded, isExpandable, isSelected, ...props }) { return ( - {isExpandable && } - + + {isExpandable && } + + {children} ); @@ -179,7 +200,9 @@ export const DocumentNode: FunctionComponent< > = React.memo(function DocumentNode({ theme, children, docsMode, ...props }) { return ( - + + + {children} ); @@ -189,7 +212,9 @@ export const StoryNode: FunctionComponent> = Rea function StoryNode({ theme, children, ...props }) { return ( - + + + {children} ); From f5621205dc714499563f9cb9061f421756a1d632 Mon Sep 17 00:00:00 2001 From: Bruno Bufolin Date: Sun, 25 Jun 2023 22:52:03 -0300 Subject: [PATCH 2/3] refactor: change FunctionComponent for FC to type components --- code/ui/manager/src/components/sidebar/TreeNode.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index f869fb53ba67..e6a60d0e2003 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -2,7 +2,7 @@ import { styled } from '@storybook/theming'; import type { Color, Theme } from '@storybook/theming'; import { Icons } from '@storybook/components'; import { transparentize } from 'polished'; -import type { FunctionComponent, ComponentProps } from 'react'; +import type { FC, ComponentProps } from 'react'; import React from 'react'; export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({ @@ -153,7 +153,7 @@ const InvisibleText = styled.p({ }); // Make the content have a min-height equal to one line of text -export const IconsWrapper: FunctionComponent<{ children?: React.ReactNode }> = ({ children }) => { +export const IconsWrapper: FC<{ children?: React.ReactNode }> = ({ children }) => { return (   @@ -162,7 +162,7 @@ export const IconsWrapper: FunctionComponent<{ children?: React.ReactNode }> = ( ); }; -export const GroupNode: FunctionComponent< +export const GroupNode: FC< ComponentProps & { isExpanded?: boolean; isExpandable?: boolean } > = React.memo(function GroupNode({ children, @@ -181,7 +181,7 @@ export const GroupNode: FunctionComponent< ); }); -export const ComponentNode: FunctionComponent> = React.memo( +export const ComponentNode: FC> = React.memo( function ComponentNode({ theme, children, isExpanded, isExpandable, isSelected, ...props }) { return ( @@ -195,7 +195,7 @@ export const ComponentNode: FunctionComponent> } ); -export const DocumentNode: FunctionComponent< +export const DocumentNode: FC< ComponentProps & { docsMode: boolean } > = React.memo(function DocumentNode({ theme, children, docsMode, ...props }) { return ( @@ -208,7 +208,7 @@ export const DocumentNode: FunctionComponent< ); }); -export const StoryNode: FunctionComponent> = React.memo( +export const StoryNode: FC> = React.memo( function StoryNode({ theme, children, ...props }) { return ( From 1de752eb9ea27986500c56a83e92177cb88aa0ea Mon Sep 17 00:00:00 2001 From: Bruno Bufolin Date: Thu, 29 Jun 2023 23:14:56 -0300 Subject: [PATCH 3/3] refactor: format file --- .../src/components/sidebar/TreeNode.tsx | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx index e6a60d0e2003..879b8077852b 100644 --- a/code/ui/manager/src/components/sidebar/TreeNode.tsx +++ b/code/ui/manager/src/components/sidebar/TreeNode.tsx @@ -195,28 +195,30 @@ export const ComponentNode: FC> = React.memo( } ); -export const DocumentNode: FC< - ComponentProps & { docsMode: boolean } -> = React.memo(function DocumentNode({ theme, children, docsMode, ...props }) { - return ( - - - - - {children} - - ); -}); - -export const StoryNode: FC> = React.memo( - function StoryNode({ theme, children, ...props }) { +export const DocumentNode: FC & { docsMode: boolean }> = React.memo( + function DocumentNode({ theme, children, docsMode, ...props }) { return ( - + {children} ); } ); + +export const StoryNode: FC> = React.memo(function StoryNode({ + theme, + children, + ...props +}) { + return ( + + + + + {children} + + ); +});