Merge pull request #22221 from bdriguesdev/fix/tree-node-alignment

UI: Fix TreeNode alignment when using a different font
storybookjs · Sep 14, 2023 · 9e7c93b · 9e7c93b
2 parents 72400c6 + 0978fdc
commit 9e7c93b
Showing 1 changed file with 51 additions and 24 deletions.
diff --git a/code/ui/manager/src/components/sidebar/TreeNode.tsx b/code/ui/manager/src/components/sidebar/TreeNode.tsx
@@ -2,14 +2,13 @@ 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 }) => ({
   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',
   },
@@ -132,7 +129,27 @@ export const RootNode = styled.div(({ theme }) => ({
   color: theme.textMutedColor,
 }));
 
-export const GroupNode: FunctionComponent<
+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: FC<{ children?: React.ReactNode }> = ({ children }) => {
+  return (
+    <Wrapper>
+      <InvisibleText>&nbsp;</InvisibleText>
+      {children}
+    </Wrapper>
+  );
+};
+
+export const GroupNode: FC<
   ComponentProps<typeof BranchNode> & { isExpanded?: boolean; isExpandable?: boolean }
 > = React.memo(function GroupNode({
   children,
@@ -142,43 +159,53 @@ export const GroupNode: FunctionComponent<
 }) {
   return (
     <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}>
-      {isExpandable ? <CollapseIcon isExpanded={isExpanded} /> : null}
-      <TypeIcon icon="folder" useSymbol color="primary" />
+      <IconsWrapper>
+        {isExpandable ? <CollapseIcon isExpanded={isExpanded} /> : null}
+        <TypeIcon icon="folder" useSymbol color="primary" />
+      </IconsWrapper>
       {children}
     </BranchNode>
   );
 });
 
-export const ComponentNode: FunctionComponent<ComponentProps<typeof BranchNode>> = React.memo(
+export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
   function ComponentNode({ theme, children, isExpanded, isExpandable, isSelected, ...props }) {
     return (
       <BranchNode isExpandable={isExpandable} tabIndex={-1} {...props}>
-        {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
-        <TypeIcon icon="component" useSymbol color="secondary" />
+        <IconsWrapper>
+          {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
+          <TypeIcon icon="component" useSymbol color="secondary" />
+        </IconsWrapper>
         {children}
       </BranchNode>
     );
   }
 );
 
-export const DocumentNode: FunctionComponent<
-  ComponentProps<typeof LeafNode> & { docsMode: boolean }
-> = React.memo(function DocumentNode({ theme, children, docsMode, ...props }) {
-  return (
-    <LeafNode tabIndex={-1} {...props}>
-      <TypeIcon icon="document" useSymbol docsMode={docsMode} />
-      {children}
-    </LeafNode>
-  );
-});
-
-export const StoryNode: FunctionComponent<ComponentProps<typeof LeafNode>> = React.memo(
-  function StoryNode({ theme, children, ...props }) {
+export const DocumentNode: FC<ComponentProps<typeof LeafNode> & { docsMode: boolean }> = React.memo(
+  function DocumentNode({ theme, children, docsMode, ...props }) {
     return (
       <LeafNode tabIndex={-1} {...props}>
-        <TypeIcon icon="bookmarkhollow" useSymbol />
+        <IconsWrapper>
+          <TypeIcon icon="document" useSymbol docsMode={docsMode} />
+        </IconsWrapper>
         {children}
       </LeafNode>
     );
   }
 );
+
+export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(function StoryNode({
+  theme,
+  children,
+  ...props
+}) {
+  return (
+    <LeafNode tabIndex={-1} {...props}>
+      <IconsWrapper>
+        <TypeIcon icon="bookmarkhollow" useSymbol />
+      </IconsWrapper>
+      {children}
+    </LeafNode>
+  );
+});