Trying to convert to emotion

elastic · Sep 20, 2022 · 87681b7 · 87681b7
1 parent 04e19f8
commit 87681b7
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 10 deletions.
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
@@ -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
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
@@ -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
@@ -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
@@ -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 (