Fix hover behavior and search view

storybookjs · Aug 1, 2024 · c6ebc2c · c6ebc2c
1 parent 81b6775
commit c6ebc2c
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 69 deletions.
diff --git a/code/core/src/manager/components/sidebar/SearchResults.tsx b/code/core/src/manager/components/sidebar/SearchResults.tsx
@@ -16,6 +16,7 @@ import { matchesKeyCode, matchesModifiers } from '../../keybinding';
 
 import { statusMapping } from '../../utils/status';
 import { UseSymbol } from './IconSymbols';
+import { StatusLabel } from './StatusButton';
 
 const { document } = global;
 
@@ -31,6 +32,7 @@ const ResultRow = styled.li<{ isHighlighted: boolean }>(({ theme, isHighlighted
   cursor: 'pointer',
   display: 'flex',
   alignItems: 'start',
+  justifyContent: 'space-between',
   textAlign: 'left',
   color: 'inherit',
   fontSize: `${theme.typography.size.s2}px`,
@@ -54,6 +56,7 @@ const IconWrapper = styled.div({
 });
 
 const ResultRowContent = styled.div({
+  flex: 1,
   display: 'flex',
   flexDirection: 'column',
 });
@@ -181,7 +184,7 @@ const Result: FC<
   const nameMatch = matches.find((match: Match) => match.key === 'name');
   const pathMatches = matches.filter((match: Match) => match.key === 'path');
 
-  const [i] = item.status ? statusMapping[item.status] : [];
+  const [icon] = item.status ? statusMapping[item.status] : [];
 
   return (
     <ResultRow {...props} onClick={click}>
@@ -216,7 +219,7 @@ const Result: FC<
           ))}
         </Path>
       </ResultRowContent>
-      {item.status ? i : null}
+      {item.status ? <StatusLabel status={item.status}>{icon}</StatusLabel> : null}
     </ResultRow>
   );
 });

diff --git a/code/core/src/manager/components/sidebar/StatusButton.tsx b/code/core/src/manager/components/sidebar/StatusButton.tsx
@@ -0,0 +1,63 @@
+import type { Theme } from '@emotion/react';
+import { IconButton } from '@storybook/core/components';
+import { styled } from '@storybook/core/theming';
+import type { API_StatusValue } from '@storybook/types';
+import { transparentize } from 'polished';
+
+const withStatusColor = ({ theme, status }: { theme: Theme; status: API_StatusValue }) => {
+  const defaultColor =
+    theme.base === 'light'
+      ? transparentize(0.3, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText);
+
+  return {
+    color: {
+      pending: defaultColor,
+      success: theme.color.positive,
+      error: theme.color.negative,
+      warn: theme.color.warning,
+      unknown: defaultColor,
+    }[status],
+  };
+};
+
+export const StatusLabel = styled.div<{ status: API_StatusValue }>(withStatusColor, {
+  margin: 3,
+});
+
+export const StatusButton = styled(IconButton)<{
+  height?: number;
+  width?: number;
+  status: API_StatusValue;
+  selectedItem?: boolean;
+}>(
+  withStatusColor,
+  ({ theme, height, width }) => ({
+    transition: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: width || 28,
+    height: height || 28,
+
+    '&:hover': {
+      color: theme.color.secondary,
+    },
+
+    '&:focus': {
+      color: theme.color.secondary,
+      borderColor: theme.color.secondary,
+
+      '&:not(:focus-visible)': {
+        borderColor: 'transparent',
+      },
+    },
+  }),
+  ({ theme, selectedItem }) =>
+    selectedItem && {
+      '&:hover': {
+        boxShadow: `inset 0 0 0 2px ${theme.color.secondary}`,
+        background: 'rgba(255, 255, 255, 0.2)',
+      },
+    }
+);
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -43,62 +43,13 @@ import { useLayout } from '../layout/LayoutProvider';
 import { IconSymbols, UseSymbol } from './IconSymbols';
 import { CollapseIcon } from './components/CollapseIcon';
 import { StatusContext, useStatusSummary } from './StatusContext';
+import { StatusButton } from './StatusButton';
 
 const Container = styled.div<{ hasOrphans: boolean }>((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20,
 }));
 
-export const Action = styled(IconButton)<{
-  height?: number;
-  width?: number;
-  status: API_StatusValue;
-  selectedItem?: boolean;
-}>(
-  ({ theme, height, width, status }) => {
-    const defaultColor =
-      theme.base === 'light'
-        ? transparentize(0.3, theme.color.defaultText)
-        : transparentize(0.6, theme.color.defaultText);
-
-    return {
-      transition: 'none',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: width || 28,
-      height: height || 28,
-      color: {
-        pending: defaultColor,
-        success: theme.color.positive,
-        error: theme.color.negative,
-        warn: theme.color.warning,
-        unknown: defaultColor,
-      }[status],
-
-      '&:hover': {
-        color: theme.color.secondary,
-      },
-
-      '&:focus': {
-        color: theme.color.secondary,
-        borderColor: theme.color.secondary,
-
-        '&:not(:focus-visible)': {
-          borderColor: 'transparent',
-        },
-      },
-    };
-  },
-  ({ theme, selectedItem }) =>
-    selectedItem && {
-      '&:hover': {
-        boxShadow: `inset 0 0 0 2px ${theme.color.secondary}`,
-        background: 'rgba(255, 255, 255, 0.2)',
-      },
-    }
-);
-
 const CollapseButton = styled.button(({ theme }) => ({
   all: 'unset',
   display: 'flex',
@@ -126,6 +77,11 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   minHeight: 28,
   borderRadius: 4,
 
+  '&:hover, &:focus': {
+    background: transparentize(0.93, theme.color.secondary),
+    outline: 'none',
+  },
+
   '&[data-selected="true"]': {
     color: theme.color.lightest,
     background: theme.color.secondary,
@@ -249,7 +205,6 @@ const Node = React.memo<NodeProps>(function Node({
             closeOnOutsideClick
             onClick={(event) => event.stopPropagation()}
             placement="bottom"
-            style={{ position: 'absolute', right: 0, top: 0 }}
             tooltip={() => (
               <TooltipLinkList
                 links={Object.entries(status || {})
@@ -275,9 +230,9 @@ const Node = React.memo<NodeProps>(function Node({
               />
             )}
           >
-            <Action type="button" status={statusValue} selectedItem={isSelected}>
+            <StatusButton type="button" status={statusValue} selectedItem={isSelected}>
               {icon}
-            </Action>
+            </StatusButton>
           </WithTooltip>
         ) : null}
       </LeafNodeStyleWrapper>
@@ -406,14 +361,13 @@ const Node = React.memo<NodeProps>(function Node({
             closeOnOutsideClick
             onClick={(event) => event.stopPropagation()}
             placement="bottom"
-            style={{ position: 'absolute', right: 0, top: 0 }}
             tooltip={({ onHide }) => <TooltipLinkList links={createLinks(onHide)} />}
           >
-            <Action 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>
-            </Action>
+            </StatusButton>
           </WithTooltip>
         )}
       </LeafNodeStyleWrapper>

diff --git a/code/core/src/manager/components/sidebar/TreeNode.tsx b/code/core/src/manager/components/sidebar/TreeNode.tsx
@@ -43,11 +43,6 @@ const BranchNode = styled.button<{
   gap: 6,
   paddingTop: 5,
   paddingBottom: 4,
-
-  '&:hover, &:focus': {
-    background: transparentize(0.93, theme.color.secondary),
-    outline: 'none',
-  },
 }));
 
 const LeafNode = styled.a<{ depth?: number }>(({ theme, depth = 0 }) => ({
@@ -61,17 +56,11 @@ const LeafNode = styled.a<{ depth?: number }>(({ theme, depth = 0 }) => ({
   paddingLeft: `${22 + depth * 18}px`,
   paddingTop: 5,
   paddingBottom: 4,
-  paddingRight: 28,
   fontSize: `${theme.typography.size.s2}px`,
   textDecoration: 'none',
   overflowWrap: 'break-word',
   wordWrap: 'break-word',
   wordBreak: 'break-word',
-
-  '&:hover, &:focus': {
-    background: transparentize(0.93, theme.color.secondary),
-    outline: 'none',
-  },
 }));
 
 export const RootNode = styled.div(({ theme }) => ({