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({
}