diff --git a/code/core/src/manager/components/sidebar/FileList.tsx b/code/core/src/manager/components/sidebar/FileList.tsx index a2c179439801..f0d8917f5561 100644 --- a/code/core/src/manager/components/sidebar/FileList.tsx +++ b/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`, diff --git a/code/core/src/manager/components/sidebar/FileSearchList.tsx b/code/core/src/manager/components/sidebar/FileSearchList.tsx index 15593113ad2f..510d48bf236a 100644 --- a/code/core/src/manager/components/sidebar/FileSearchList.tsx +++ b/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 ? ( + + ) : ( + + )} @@ -198,7 +207,6 @@ export const FileSearchList = memo(function FileSearchList({ {searchResult.filepath} - {itemSelected ? : } {/* @ts-expect-error (non strict) */} {searchResult?.exportedComponents?.length > 1 && itemSelected && ( @@ -249,19 +257,20 @@ export const FileSearchList = memo(function FileSearchList({ }} > - + {component.default ? ( <> - + {searchResult.filepath.split('/').at(-1)?.split('.')?.at(0)} - + Default export ) : ( - component.name + + {component.name} + )} - ); })} @@ -340,15 +349,15 @@ export const FileSearchList = memo(function FileSearchList({ }