Merge pull request #13155 from storybookjs/feature/sidebarClassNames

UI: Simplify custom Sidebar styling by adding classNames to DOM elements
storybookjs · Nov 18, 2020 · f6d4f0a · f6d4f0a
2 parents 0f4f2c3 + b1ab926
commit f6d4f0a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/lib/ui/src/components/sidebar/Search.tsx b/lib/ui/src/components/sidebar/Search.tsx
@@ -354,7 +354,10 @@ export const Search = React.memo<{
           return (
             <>
               <ScreenReaderLabel {...getLabelProps()}>Search for components</ScreenReaderLabel>
-              <SearchField {...getRootProps({ refKey: '' }, { suppressRefError: true })}>
+              <SearchField
+                {...getRootProps({ refKey: '' }, { suppressRefError: true })}
+                className="search-field"
+              >
                 <SearchIcon icon="search" />
                 <Input {...inputProps} />
                 {enableShortcuts && <FocusKey>/</FocusKey>}

diff --git a/lib/ui/src/components/sidebar/SearchResults.tsx b/lib/ui/src/components/sidebar/SearchResults.tsx
@@ -124,7 +124,7 @@ const Result: FunctionComponent<
   const nameMatch = matches.find((match: Match) => match.key === 'name');
   const pathMatches = matches.filter((match: Match) => match.key === 'path');
   const label = (
-    <div>
+    <div className="search-result-item--label">
       <strong>
         <Highlight match={nameMatch}>{item.name}</Highlight>
       </strong>
@@ -202,7 +202,7 @@ export const SearchResults: FunctionComponent<{
       <ResultsList {...getMenuProps()}>
         {results.length > 0 && !query && (
           <li>
-            <RootNode>Recently opened</RootNode>
+            <RootNode className="search-result-recentlyOpened">Recently opened</RootNode>
           </li>
         )}
         {results.length === 0 && query && (
@@ -221,6 +221,7 @@ export const SearchResults: FunctionComponent<{
                 {...result}
                 {...getItemProps({ key: index, index, item: result })}
                 isHighlighted={highlightedIndex === index}
+                className="search-result-back"
               >
                 <ActionIcon icon="arrowleft" />
                 <ActionLabel>Back to components</ActionLabel>
@@ -234,6 +235,7 @@ export const SearchResults: FunctionComponent<{
                 {...result}
                 {...getItemProps({ key: index, index, item: result })}
                 isHighlighted={highlightedIndex === index}
+                className="search-result-clearHistory"
               >
                 <ActionIcon icon="trash" />
                 <ActionLabel>Clear history</ActionLabel>
@@ -246,6 +248,7 @@ export const SearchResults: FunctionComponent<{
                 {...result}
                 {...getItemProps({ key: index, index, item: result })}
                 isHighlighted={highlightedIndex === index}
+                className="search-result-more"
               >
                 <ActionIcon icon="plus" />
                 <ActionLabel>Show {result.moreCount} more results</ActionLabel>
@@ -260,6 +263,7 @@ export const SearchResults: FunctionComponent<{
               {...result}
               {...getItemProps({ key, index, item: result })}
               isHighlighted={highlightedIndex === index}
+              className="search-result-item"
             />
           );
         })}

diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
@@ -77,6 +77,7 @@ const Node = React.memo<NodeProps>(
         <LeafNode
           key={id}
           id={id}
+          className="sidebar-item"
           data-ref-id={refId}
           data-item-id={item.id}
           data-parent-id={item.parent}
@@ -97,10 +98,18 @@ const Node = React.memo<NodeProps>(
 
     if (isRoot(item)) {
       return (
-        <RootNode key={id} id={id} data-ref-id={refId} data-item-id={item.id} data-nodetype="root">
+        <RootNode
+          key={id}
+          id={id}
+          className="sidebar-subheading"
+          data-ref-id={refId}
+          data-item-id={item.id}
+          data-nodetype="root"
+        >
           {item.name}
           <Action
             type="button"
+            className="sidebar-subheading-action"
             data-action="expand-all"
             data-expanded={isFullyExpanded}
             onClick={(event) => {
@@ -119,6 +128,7 @@ const Node = React.memo<NodeProps>(
       <BranchNode
         key={id}
         id={id}
+        className="sidebar-item"
         data-ref-id={refId}
         data-item-id={item.id}
         data-parent-id={item.parent}