Don't absolutely position status icons

storybookjs · Dec 17, 2024 · 66faa7e · 66faa7e
1 parent e77bd59
commit 66faa7e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx
@@ -24,6 +24,11 @@ const PositionedWithTooltip = styled(WithTooltip)({
   right: 0,
 });
 
+const FloatingStatusButton = styled(StatusButton)({
+  background: 'var(--tree-node-background-hover)',
+  boxShadow: '0 0 5px 5px var(--tree-node-background-hover)',
+});
+
 export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => {
   const [hoverCount, setHoverCount] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
@@ -83,9 +88,9 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API)
           }}
           tooltip={<LiveContextMenu context={context} links={links} />}
         >
-          <StatusButton type="button" status={'pending'}>
+          <FloatingStatusButton type="button" status={'pending'}>
             <EllipsisIcon />
-          </StatusButton>
+          </FloatingStatusButton>
         </PositionedWithTooltip>
       ) : null,
     };

diff --git a/code/core/src/manager/components/sidebar/StatusButton.tsx b/code/core/src/manager/components/sidebar/StatusButton.tsx
@@ -40,8 +40,6 @@ export const StatusButton = styled(IconButton)<{
     justifyContent: 'center',
     width: width || 28,
     height: height || 28,
-    background: 'var(--tree-node-background-hover)',
-    boxShadow: '0 0 5px 5px var(--tree-node-background-hover)',
 
     '&:hover': {
       color: theme.color.secondary,

diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -196,12 +196,6 @@ const StatusIconMap = {
   unknown: null,
 };
 
-const PositionedStatusButton = styled(StatusButton)({
-  position: 'absolute',
-  right: 0,
-  top: 0,
-});
-
 export const ContextMenu = {
   ListItem,
 };
@@ -340,15 +334,15 @@ const Node = React.memo<NodeProps>(function Node({
         )}
         {contextMenu.node}
         {icon ? (
-          <PositionedStatusButton
+          <StatusButton
             aria-label={`Test status: ${statusValue}`}
             role="status"
             type="button"
             status={statusValue}
             selectedItem={isSelected}
           >
             {icon}
-          </PositionedStatusButton>
+          </StatusButton>
         ) : null}
       </LeafNodeStyleWrapper>
     );
@@ -442,11 +436,11 @@ const Node = React.memo<NodeProps>(function Node({
         </BranchNode>
         {contextMenu.node}
         {['error', 'warn'].includes(itemStatus) && (
-          <PositionedStatusButton type="button" status={itemStatus}>
+          <StatusButton type="button" status={itemStatus}>
             <svg key="icon" viewBox="0 0 6 6" width="6" height="6" type="dot">
               <UseSymbol type="dot" />
             </svg>
-          </PositionedStatusButton>
+          </StatusButton>
         )}
       </LeafNodeStyleWrapper>
     );