From 87681b77e4590ba0a15a1cc20e77bf5f4053a451 Mon Sep 17 00:00:00 2001
From: Maja Grubic <maja.grubic@elastic.co>
Date: Tue, 20 Sep 2022 16:36:08 +0200
Subject: [PATCH] Trying to convert to emotion

---
 .../impl/src/page_template_inner.tsx          |  2 +-
 .../with_solution_nav.test.tsx.snap           | 32 +++++++++++++++++--
 .../solution_nav/src/with_solution_nav.scss   |  7 ++++
 .../src/with_solution_nav.styles.ts           |  9 +++---
 .../solution_nav/src/with_solution_nav.tsx    | 12 +++++--
 5 files changed, 52 insertions(+), 10 deletions(-)
 create mode 100644 packages/shared-ux/page/solution_nav/src/with_solution_nav.scss

diff --git a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx
index efbfd15e281f2..35d3c200f0712 100644
--- a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx
+++ b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx
@@ -43,7 +43,7 @@ export const KibanaPageTemplateInner: FC<Props> = ({
       const kibanaChromeHeader = kibanaChrome.querySelector(
         '[data-test-subj="headerGlobalNav"]'
       ) as HTMLElement;
-      setOffset(kibanaChromeHeader?.offsetHeight);
+      setOffset(kibanaChromeHeader?.offsetTop + kibanaChromeHeader?.offsetHeight);
     }
   }, []);
 
diff --git a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap
index bae96ec7b65d3..33e01abdf8a00 100644
--- a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap
+++ b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap
@@ -2,6 +2,20 @@
 
 exports[`WithSolutionNav renders wrapped component 1`] = `
 <TestComponent
+  css={
+    Object {
+      "map": undefined,
+      "name": "1go9zi6",
+      "next": undefined,
+      "styles": "
+    overflow: hidden;
+    @media screen and (prefers-reduced-motion: no-preference) {
+      transition: min-width fast normal;
+    }
+  ",
+      "toString": [Function],
+    }
+  }
   pageSideBar={
     <SolutionNav
       icon="logoKibana"
@@ -52,7 +66,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = `
   }
   pageSideBarProps={
     Object {
-      "className": "kbnSolutionNav__sidebar kbnStickyMenu",
+      "className": "kbnStickyMenu",
       "minWidth": undefined,
       "paddingSize": "none",
     }
@@ -62,6 +76,20 @@ exports[`WithSolutionNav renders wrapped component 1`] = `
 
 exports[`WithSolutionNav with children 1`] = `
 <TestComponent
+  css={
+    Object {
+      "map": undefined,
+      "name": "1go9zi6",
+      "next": undefined,
+      "styles": "
+    overflow: hidden;
+    @media screen and (prefers-reduced-motion: no-preference) {
+      transition: min-width fast normal;
+    }
+  ",
+      "toString": [Function],
+    }
+  }
   pageSideBar={
     <SolutionNav
       icon="logoKibana"
@@ -112,7 +140,7 @@ exports[`WithSolutionNav with children 1`] = `
   }
   pageSideBarProps={
     Object {
-      "className": "kbnSolutionNav__sidebar kbnStickyMenu",
+      "className": "kbnStickyMenu",
       "minWidth": undefined,
       "paddingSize": "none",
     }
diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.scss b/packages/shared-ux/page/solution_nav/src/with_solution_nav.scss
new file mode 100644
index 0000000000000..97ecdc18020c0
--- /dev/null
+++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.scss
@@ -0,0 +1,7 @@
+.kbnSolutionNav__sidebar {
+  overflow: hidden;
+
+  @include euiCanAnimate {
+    transition: min-width $euiAnimSpeedFast $euiAnimSlightResistance;
+  }
+}
diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.styles.ts b/packages/shared-ux/page/solution_nav/src/with_solution_nav.styles.ts
index c4ef64784b996..25425a20c636a 100644
--- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.styles.ts
+++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.styles.ts
@@ -6,11 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { EuiThemeAnimationSpeeds } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 export const WithSolutionNavStyles = () => {
-  return {
-    overflow: 'hidden',
-    transition: `min-width ${EuiThemeAnimationSpeeds[1]} ${EuiThemeAnimationSpeeds[2]}`,
-  };
+  return css`
+    background: red;
+  `;
 };
diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
index 8b2635416aa2f..95e8a58f12da7 100644
--- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
+++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
@@ -8,9 +8,12 @@
 
 import React, { ComponentType, ReactNode, useState } from 'react';
 import classNames from 'classnames';
+import { SerializedStyles } from '@emotion/serialize';
+import { css } from '@emotion/react';
 import { useIsWithinBreakpoints, useEuiTheme } from '@elastic/eui';
 import { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template-types';
 import { SolutionNav, SolutionNavProps } from './solution_nav';
+import './with_solution_nav.scss';
 
 // https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging
 function getDisplayName(Component: ComponentType<any>) {
@@ -49,6 +52,7 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
     const { canBeCollapsed = true } = solutionNav;
     const isSidebarShrunk =
       isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop);
+    //  const withSolutionNavStyles = WithSolutionNavStyles();
     const sideBarClasses = classNames(
       'kbnSolutionNav__sidebar',
       'kbnStickyMenu',
@@ -66,11 +70,15 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
       />
     );
 
-    const pageSideBarProps: TemplateProps['pageSideBarProps'] = {
+    const pageSideBarProps: TemplateProps['pageSideBarProps'] & { css: SerializedStyles } = {
       paddingSize: 'none' as 'none',
       ...props.pageSideBarProps,
       minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined,
-      className: sideBarClasses,
+      className: '',
+      css: css`
+        background-color: red;
+        min-width: ${euiTheme.size.xxl};
+      `,
     };
 
     return (