fix: adjust tree node alignment when using a different font

storybookjs · Apr 23, 2023 · 645c7cd · 645c7cd
1 parent 716df0b
commit 645c7cd
Showing 1 changed file with 34 additions and 9 deletions.
diff --git 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 (
+    <Wrapper>
+      <InvisibleText>&nbsp;</InvisibleText>
+      {children}
+    </Wrapper>
+  );
+};
+
 export const GroupNode: FunctionComponent<
   ComponentProps<typeof BranchNode> & { isExpanded?: boolean; isExpandable?: boolean }
 > = React.memo(function GroupNode({
@@ -155,8 +172,10 @@ 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>
   );
@@ -166,8 +185,10 @@ export const ComponentNode: FunctionComponent<ComponentProps<typeof BranchNode>>
   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>
     );
@@ -179,7 +200,9 @@ export const DocumentNode: FunctionComponent<
 > = React.memo(function DocumentNode({ theme, children, docsMode, ...props }) {
   return (
     <LeafNode tabIndex={-1} {...props}>
-      <TypeIcon icon="document" useSymbol docsMode={docsMode} />
+      <IconsWrapper>
+        <TypeIcon icon="document" useSymbol docsMode={docsMode} />
+      </IconsWrapper>
       {children}
     </LeafNode>
   );
@@ -189,7 +212,9 @@ export const StoryNode: FunctionComponent<ComponentProps<typeof LeafNode>> = Rea
   function StoryNode({ theme, children, ...props }) {
     return (
       <LeafNode tabIndex={-1} {...props}>
-        <TypeIcon icon="bookmarkhollow" useSymbol />
+        <IconsWrapper>
+          <TypeIcon icon="bookmarkhollow" useSymbol />
+        </IconsWrapper>
         {children}
       </LeafNode>
     );