From d887ff01c16eac61e5f49c9f1b63b575848d3471 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Sat, 5 Jan 2019 11:57:41 +0100
Subject: [PATCH] FIX highlightColor

---
 .../__snapshots__/index.stories.storyshot         |  2 +-
 .../stories_panel/stories_tree/tree_decorators.js |  6 +++---
 .../stories_tree/tree_decorators_utils.js         |  4 ++--
 .../stories_tree/tree_decorators_utils.test.js    | 15 ++++++++++++---
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
index 1ad5a8bb16b4..c38e47d97f55 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
+++ b/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>
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js
index 537dae496304..4ca01b3fac50 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js
+++ b/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} />),
 };
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.js
index 675f5f3d1015..508e80ac48bd 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.js
+++ b/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>
         );
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.test.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.test.js
index ce73ae569b9d..67fcbf1d6971 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.test.js
+++ b/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>');
     });
   });