Merge pull request #5150 from storybooks/fix/highlight-color

FIX highlightColor

lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot

@@ -711,7 +711,7 @@ exports[`Storyshots UI|stories/Stories with highlighting when storiesFilter is p
                       ano
                     </span>
                     <strong
-                      style="background-color:#FFFEAA;font-weight:inherit"
+                      style="background-color:#FFFEAA;font-weight:inherit;background:#9fdaff;color:black"
                     >
                       th
                     </strong>

lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js

@@ -103,7 +103,7 @@ ContainerDecorator.defaultProps = {
 };
 
 function HeaderDecorator(props) {
-  const { style, node, ...restProps } = props;
+  const { style, node, theme, ...restProps } = props;
 
   let newStyle = style;
 
@@ -114,7 +114,7 @@ function HeaderDecorator(props) {
     };
   }
 
-  const name = highlightNode(node, style);
+  const name = highlightNode(node, style, theme.highlightColor, 'black');
 
   const newNode = {
     ...node,
@@ -137,7 +137,7 @@ HeaderDecorator.propTypes = {
 
 export default {
   ...decorators,
-  Header: HeaderDecorator,
+  Header: withCSSContext((props, { theme }) => <HeaderDecorator {...props} theme={theme} />),
   Container: withCSSContext((props, { theme }) => <ContainerDecorator {...props} theme={theme} />),
   Toggle: withCSSContext((props, { theme }) => <ToggleDecorator {...props} theme={theme} />),
 };

lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.js

@@ -30,7 +30,7 @@ function getParts(name, highlight) {
   return nameParts;
 }
 
-export function highlightNode(node, style) {
+export function highlightNode(node, style, background, color) {
   const { name, highlight } = node;
 
   if (!highlight || !highlight.length) {
@@ -46,7 +46,7 @@ export function highlightNode(node, style) {
 
       if (part.strong) {
         return (
-          <strong key={key} style={style.highLightText}>
+          <strong key={key} style={{ ...style.highLightText, ...{ background, color } }}>
             {part.text}
           </strong>
         );

lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.test.js

@@ -20,12 +20,21 @@ describe('manager.ui.components.stories_panel.tree_decorators_utils.test', () =>
         highlight: [[1, 3], [5, 7]],
       };
 
-      const result = highlightNode(node, { highLightText: { color: 'red' } });
+      const result = highlightNode(
+        node,
+        { highLightText: { textDecoration: 'underline' } },
+        'red',
+        'white'
+      );
 
       expect(shallow(result[0]).html()).toEqual('<span>s</span>');
-      expect(shallow(result[1]).html()).toEqual('<strong style="color:red">ome</strong>');
+      expect(shallow(result[1]).html()).toEqual(
+        '<strong style="text-decoration:underline;background:red;color:white">ome</strong>'
+      );
       expect(shallow(result[2]).html()).toEqual('<span> </span>');
-      expect(shallow(result[3]).html()).toEqual('<strong style="color:red">nam</strong>');
+      expect(shallow(result[3]).html()).toEqual(
+        '<strong style="text-decoration:underline;background:red;color:white">nam</strong>'
+      );
       expect(shallow(result[4]).html()).toEqual('<span>e</span>');
     });
   });