Merge pull request #32395 from storybookjs/sidnioulz/issue-32249-tooltip-filesearch-ui-cleanup

UI: Review FileSearchList tooltip behavior and align style with sidebar

Author: Sidnioulz

code/core/src/manager/components/sidebar/FileList.tsx

@@ -42,11 +42,11 @@ export const FileListLi = styled('li')(({ theme }) => ({
   },
 }));
 
-export const FileListItem = styled('div')(({ theme }) => ({
+export const FileListItem = styled('div')({
   display: 'flex',
   flexDirection: 'column',
   position: 'relative',
-}));
+});
 
 export const FileListItemContentWrapper = styled.div<{
   selected: boolean;
@@ -141,8 +141,7 @@ export const FileListExport = styled('ul')(({ theme }) => ({
 }));
 
 export const FileListItemExport = styled('li')<{ error: boolean }>(({ theme, error }) => ({
-  padding: '8px 16px 8px 16px',
-  marginLeft: '30px',
+  padding: '8px 16px 8px 58px',
   display: 'flex',
   gap: '8px',
   alignItems: 'center',
@@ -188,10 +187,14 @@ export const FileListItemExportNameContent = styled('span')(({ theme }) => ({
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   overflow: 'hidden',
-  maxWidth: 'calc(100% - 160px)',
   display: 'inline-block',
+  color: theme.base === 'dark' ? theme.color.lightest : theme.color.darkest,
 }));
 
+export const FileListItemExportNameContentWithExport = styled(FileListItemExportNameContent)({
+  maxWidth: 'calc(100% - 120px)',
+});
+
 export const DefaultExport = styled('span')(({ theme }) => ({
   display: 'inline-block',
   padding: `1px ${theme.appBorderRadius}px`,

code/core/src/manager/components/sidebar/FileSearchList.tsx

@@ -6,7 +6,12 @@ import type {
   FileComponentSearchResponsePayload,
 } from 'storybook/internal/core-events';
 
-import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons';
+import {
+  BookmarkHollowIcon,
+  ChevronSmallDownIcon,
+  ChevronSmallRightIcon,
+  ComponentIcon,
+} from '@storybook/icons';
 
 import type { VirtualItem } from '@tanstack/react-virtual';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -24,6 +29,7 @@ import {
   FileListItemExport,
   FileListItemExportName,
   FileListItemExportNameContent,
+  FileListItemExportNameContentWithExport,
   FileListItemLabel,
   FileListItemPath,
   FileListLi,
@@ -40,16 +46,14 @@ export interface NewStoryPayload extends CreateNewStoryRequestPayload {
   selectedItemId: string | number;
 }
 
-const ChevronRightIconStyled = styled(ChevronRightIcon)(({ theme }) => ({
-  display: 'none',
-  alignSelf: 'center',
+const TreeExpandIconStyled = styled(ChevronSmallRightIcon)(({ theme }) => ({
   color: theme.color.mediumdark,
+  marginTop: 2,
 }));
 
-const ChevronDownIconStyled = styled(ChevronDownIcon)(({ theme }) => ({
-  display: 'none',
-  alignSelf: 'center',
+const TreeCollapseIconStyled = styled(ChevronSmallDownIcon)(({ theme }) => ({
   color: theme.color.mediumdark,
+  marginTop: 2,
 }));
 
 interface FileSearchListProps {
@@ -189,6 +193,11 @@ export const FileSearchList = memo(function FileSearchList({
               searchResult.exportedComponents?.length === 0
             }
           >
+            {itemSelected ? (
+              <TreeCollapseIconStyled size={14} />
+            ) : (
+              <TreeExpandIconStyled size={14} />
+            )}
             <FileListIconWrapper error={itemError}>
               <ComponentIcon />
             </FileListIconWrapper>
@@ -198,7 +207,6 @@ export const FileSearchList = memo(function FileSearchList({
               </FileListItemLabel>
               <FileListItemPath>{searchResult.filepath}</FileListItemPath>
             </FileListItemContent>
-            {itemSelected ? <ChevronDownIconStyled /> : <ChevronRightIconStyled />}
           </FileListItemContentWrapper>
           {/* @ts-expect-error (non strict) */}
           {searchResult?.exportedComponents?.length > 1 && itemSelected && (
@@ -249,19 +257,20 @@ export const FileSearchList = memo(function FileSearchList({
                     }}
                   >
                     <FileListItemExportName>
-                      <ComponentIcon />
+                      <BookmarkHollowIcon />
                       {component.default ? (
                         <>
-                          <FileListItemExportNameContent>
+                          <FileListItemExportNameContentWithExport>
                             {searchResult.filepath.split('/').at(-1)?.split('.')?.at(0)}
-                          </FileListItemExportNameContent>
+                          </FileListItemExportNameContentWithExport>
                           <DefaultExport>Default export</DefaultExport>
                         </>
                       ) : (
-                        component.name
+                        <FileListItemExportNameContent>
+                          {component.name}
+                        </FileListItemExportNameContent>
                       )}
                     </FileListItemExportName>
-                    <ChevronRightIconStyled />
                   </FileListItemExport>
                 );
               })}
@@ -340,15 +349,15 @@ export const FileSearchList = memo(function FileSearchList({
                     <WithTooltip
                       {...itemProps}
                       style={{ width: '100%' }}
+                      trigger="hover"
                       hasChrome={false}
-                      closeOnOutsideClick={true}
+                      delayHide={100}
+                      delayShow={200}
+                      placement="top-start"
                       tooltip={
                         <TooltipNote
-                          // @ts-expect-error (non strict)
                           note={
-                            noExports
-                              ? "We can't evaluate exports for this file. You can't create a story for it automatically"
-                              : null
+                            "We can't evaluate exports for this file. Automatic story creation is disabled."
                           }
                         />
                       }