Merge pull request #24707 from storybookjs/charles-sidebar-ui-updates

UI: sidebar UI updates

code/ui/components/src/components/ScrollArea/ScrollArea.tsx

@@ -73,8 +73,6 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({
     transform: 'translate(-50%,-50%)',
     width: '100%',
     height: '100%',
-    minWidth: 44,
-    minHeight: 44,
   },
 }));
 

code/ui/manager/src/components/layout/Layout.tsx

@@ -261,16 +261,16 @@ const Drag = styled.div<{ orientation?: 'horizontal' | 'vertical'; position?: 'l
   ({ orientation = 'vertical', position = 'left' }) => {
     if (orientation === 'vertical')
       return {
-        width: '20px',
+        width: position === 'left' ? 10 : 13,
         height: '100%',
         top: 0,
-        right: position === 'left' ? '-10px' : null,
-        left: position === 'right' ? '-10px' : null,
+        right: position === 'left' ? '-7px' : null,
+        left: position === 'right' ? '-7px' : null,
 
         '&:after': {
           width: 1,
           height: '100%',
-          marginLeft: 10,
+          marginLeft: position === 'left' ? 3 : 6,
         },
 
         '&:hover': {
@@ -279,14 +279,14 @@ const Drag = styled.div<{ orientation?: 'horizontal' | 'vertical'; position?: 'l
       };
     return {
       width: '100%',
-      height: '20px',
-      top: '-10px',
+      height: '13px',
+      top: '-7px',
       left: 0,
 
       '&:after': {
         width: '100%',
         height: 1,
-        marginTop: 9,
+        marginTop: 6,
       },
 
       '&:hover': {

code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx

@@ -67,15 +67,14 @@ const Container = styled.div(({ theme }) => ({
   background: theme.barBg,
   padding: '0 6px',
   borderTop: `1px solid ${theme.appBorderColor}`,
-  color: theme.color.mediumdark,
 }));
 
 const Button = styled.button(({ theme }) => ({
   all: 'unset',
   display: 'flex',
   alignItems: 'center',
   gap: 10,
-  color: 'currentColor',
+  color: theme.color.mediumdark,
   fontSize: `${theme.typography.size.s2 - 1}px`,
   padding: '0 7px',
   fontWeight: theme.typography.weight.bold,

code/ui/manager/src/components/sidebar/Heading.tsx

@@ -43,7 +43,8 @@ const HeadingWrapper = styled.div({
   alignItems: 'center',
   justifyContent: 'space-between',
   position: 'relative',
-  minHeight: 28,
+  minHeight: 42,
+  paddingLeft: 8,
 });
 
 const SkipToCanvasLink = styled(Button)(({ theme }) => ({

code/ui/manager/src/components/sidebar/RefBlocks.tsx

@@ -12,12 +12,12 @@ import { Loader, Contained } from './Loader';
 const { window: globalWindow } = global;
 
 const TextStyle = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2 - 1,
+  fontSize: theme.typography.size.s2,
   lineHeight: '20px',
   margin: 0,
 }));
 const Text = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2 - 1,
+  fontSize: theme.typography.size.s2,
   lineHeight: '20px',
   margin: 0,
 

code/ui/manager/src/components/sidebar/Refs.tsx

@@ -11,12 +11,12 @@ import { RefIndicator } from './RefIndicator';
 
 // eslint-disable-next-line import/no-cycle
 import { Tree } from './Tree';
-import { CollapseIcon } from './TreeNode';
 
 import { DEFAULT_REF_ID } from './Sidebar';
 import type { Highlight, RefType } from './types';
 
 import { getStateType } from '../../utils/tree';
+import { CollapseIcon } from './components/CollapseIcon';
 
 export interface RefProps {
   isLoading: boolean;
@@ -28,14 +28,12 @@ export interface RefProps {
 
 const Wrapper = styled.div<{ isMain: boolean }>(({ isMain }) => ({
   position: 'relative',
-  marginLeft: -20,
-  marginRight: -20,
   marginTop: isMain ? undefined : 0,
 }));
 
 const RefHead = styled.div(({ theme }) => ({
   fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s2 - 1,
+  fontSize: theme.typography.size.s2,
 
   // Similar to ListItem.tsx
   textDecoration: 'none',
@@ -48,46 +46,28 @@ const RefHead = styled.div(({ theme }) => ({
   width: '100%',
   marginTop: 20,
   paddingTop: 16,
+  paddingBottom: 12,
   borderTop: `1px solid ${theme.appBorderColor}`,
 
   color:
     theme.base === 'light' ? theme.color.defaultText : transparentize(0.2, theme.color.defaultText),
 }));
 
-const RefTitle = styled.span(({ theme }) => ({
-  display: 'block',
+const RefTitle = styled.div({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   flex: 1,
   overflow: 'hidden',
   marginLeft: 2,
-}));
+});
 
 const CollapseButton = styled.button(({ theme }) => ({
-  // Reset button
-  background: 'transparent',
-  border: '1px solid transparent',
-  borderRadius: 26,
-  outline: 'none',
-  boxSizing: 'content-box',
-  cursor: 'pointer',
-  position: 'relative',
-  textAlign: 'left',
-  lineHeight: 'normal',
-  font: 'inherit',
-  color: 'inherit',
-
+  all: 'unset',
   display: 'flex',
-  padding: 3,
-  paddingLeft: 1,
-  paddingRight: 12,
-  margin: 0,
-  marginLeft: -20,
-  overflow: 'hidden',
-
-  'span:first-of-type': {
-    marginTop: 5,
-  },
+  padding: '0px 8px',
+  gap: 6,
+  alignItems: 'center',
+  cursor: 'pointer',
 
   '&:focus': {
     borderColor: theme.color.secondary,

code/ui/manager/src/components/sidebar/Search.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable import/no-cycle */
 import { useStorybookApi, shortcutToHumanString } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
-import { Icons } from '@storybook/components';
 import type { DownshiftState, StateChangeOptions } from 'downshift';
 import Downshift from 'downshift';
 import type { FuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
 import { global } from '@storybook/global';
 import React, { useMemo, useRef, useState, useCallback } from 'react';
-
+import { CloseIcon, SearchIcon } from '@storybook/icons';
 import { DEFAULT_REF_ID } from './Sidebar';
 import type {
   CombinedDataset,
@@ -18,7 +17,7 @@ import type {
   SearchChildrenFn,
   Selection,
 } from './types';
-import { isSearchResult, isExpandType, isClearType, isCloseType } from './types';
+import { isSearchResult, isExpandType } from './types';
 
 import { scrollIntoView, searchItem } from '../../utils/tree';
 import { getGroupStatus, getHighestStatus } from '../../utils/status';
@@ -53,34 +52,32 @@ const ScreenReaderLabel = styled.label({
   overflow: 'hidden',
 });
 
-const SearchIcon = styled(Icons)(({ theme }) => ({
-  width: 12,
-  height: 12,
+const SearchIconWrapper = styled.div(({ theme }) => ({
   position: 'absolute',
-  top: 10,
-  left: 12,
+  top: 0,
+  left: 8,
   zIndex: 1,
   pointerEvents: 'none',
   color: theme.textMutedColor,
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
 }));
 
-const SearchField = styled.div(({ theme }) => ({
+const SearchField = styled.div({
   display: 'flex',
   flexDirection: 'column',
   position: 'relative',
-  '&:focus-within svg': {
-    color: theme.color.defaultText,
-  },
-}));
+});
 
 const Input = styled.input(({ theme }) => ({
   appearance: 'none',
   height: 32,
-  paddingLeft: 30,
-  paddingRight: 32,
+  paddingLeft: 28,
+  paddingRight: 28,
   border: `1px solid ${theme.appBorderColor}`,
   background: 'transparent',
-  borderRadius: 32,
+  borderRadius: 4,
   fontSize: `${theme.typography.size.s1 + 1}px`,
   fontFamily: 'inherit',
   transition: 'all 150ms',
@@ -117,51 +114,42 @@ const Input = styled.input(({ theme }) => ({
 const FocusKey = styled.code(({ theme }) => ({
   position: 'absolute',
   top: 8,
-  right: 16,
-  minWidth: 16,
+  right: 9,
   height: 16,
   zIndex: 1,
   lineHeight: '16px',
   textAlign: 'center',
   fontSize: '11px',
-  background: theme.base === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)',
   color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor,
-  borderRadius: 3,
   userSelect: 'none',
   pointerEvents: 'none',
 }));
 
-const ClearIcon = styled(Icons)(({ theme }) => ({
-  width: 16,
-  height: 16,
-  padding: 4,
+const ClearIcon = styled.div(({ theme }) => ({
   position: 'absolute',
-  top: 8,
-  right: 16,
+  top: 0,
+  right: 8,
   zIndex: 1,
-  background: theme.base === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.1)',
-  borderRadius: 16,
-  color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor,
+  color: theme.textMutedColor,
   cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
 }));
 
 const FocusContainer = styled.div({ outline: 0 });
 
 export const Search = React.memo<{
   children: SearchChildrenFn;
   dataset: CombinedDataset;
-  isLoading?: boolean;
   enableShortcuts?: boolean;
   getLastViewed: () => Selection[];
-  clearLastViewed: () => void;
   initialQuery?: string;
 }>(function Search({
   children,
   dataset,
-  isLoading = false,
   enableShortcuts = true,
   getLastViewed,
-  clearLastViewed,
   initialQuery = '',
 }) {
   const api = useStorybookApi();
@@ -279,17 +267,6 @@ export const Search = React.memo<{
             // Downshift should completely ignore this
             return {};
           }
-          if (isClearType(changes.selectedItem)) {
-            changes.selectedItem.clearLastViewed();
-            inputRef.current.blur();
-            // Nothing to see anymore, so return to the tree view
-            return { isOpen: false };
-          }
-          if (isCloseType(changes.selectedItem)) {
-            inputRef.current.blur();
-            // Return to the tree view
-            return { isOpen: false };
-          }
           return changes;
         }
 
@@ -344,10 +321,6 @@ export const Search = React.memo<{
             }
             return acc;
           }, []);
-          results.push({ closeMenu });
-          if (results.length > 0) {
-            results.push({ clearLastViewed });
-          }
         }
 
         const inputId = 'storybook-explorer-searchfield';
@@ -375,11 +348,17 @@ export const Search = React.memo<{
               {...getRootProps({ refKey: '' }, { suppressRefError: true })}
               className="search-field"
             >
-              <SearchIcon icon="search" />
+              <SearchIconWrapper>
+                <SearchIcon />
+              </SearchIconWrapper>
               {/* @ts-expect-error (TODO) */}
               <Input {...inputProps} />
-              {enableShortcuts && <FocusKey>{searchShortcut}</FocusKey>}
-              <ClearIcon icon="cross" onClick={() => clearSelection()} />
+              {enableShortcuts && !isOpen && <FocusKey>{searchShortcut}</FocusKey>}
+              {isOpen && (
+                <ClearIcon onClick={() => clearSelection()}>
+                  <CloseIcon />
+                </ClearIcon>
+              )}
             </SearchField>
             <FocusContainer tabIndex={0} id="storybook-explorer-menu">
               {children({