Tweak solution nav to feedback (elastic#104666) (elastic#105305)

Makes some tweaks to the Solution Side nav (and corresponding global nav) due to feedback since merged.
kibanamachine · Jul 13, 2021 · 1f987cd · 1f987cd
1 parent b7a8c1e
commit 1f987cd
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 19 deletions.
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -126,7 +126,7 @@ export function CollapsibleNav({
       onClose={closeNav}
       button={button}
       ownFocus={false}
-      size={240}
+      size={248}
     >
       {customNavLink && (
         <Fragment>

diff --git a/src/plugins/kibana_react/public/page_template/page_template.scss b/src/plugins/kibana_react/public/page_template/page_template.scss
@@ -1,5 +1,7 @@
 .kbnPageTemplate__pageSideBar {
   overflow: hidden;
+  // Temporary hack till the sizing is changed directly in EUI
+  min-width: 248px;
 
   @include euiCanAnimate {
     transition: min-width $euiAnimSpeedFast $euiAnimSlightResistance;

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss
@@ -3,13 +3,8 @@ $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
 .kbnPageTemplateSolutionNav {
   @include euiYScroll;
 
-  @include euiBreakpoint('m') {
-    width: $euiPageSidebarMinWidth + ($euiSizeL * 2);
-    padding: $euiSizeL;
-  }
-
-  @include euiBreakpoint('l', 'xl') {
-    width: $euiPageSidebarMinWidth + ($euiSizeL * 2);
+  @include euiBreakpoint('m' ,'l', 'xl') {
+    width: 248px;
     padding: $euiSizeL;
   }
 }

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.tsx
@@ -138,7 +138,7 @@ export const KibanaPageTemplateSolutionNav: FunctionComponent<KibanaPageTemplate
               outsideClickCloses
               onClose={() => setIsSideNavOpenOnMobile(false)}
               side="left"
-              size={240}
+              size={248}
               closeButtonPosition="outside"
             >
               {sideNav}

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.scss
@@ -1,8 +1,8 @@
 .kbnPageTemplateSolutionNavCollapseButton {
   position: absolute;
   opacity: 0;
-  left: 240px - $euiSize;
-  top: $euiSize;
+  left: 248px - $euiSize;
+  top: $euiSizeL;
   z-index: 2;
 
   @include euiCanAnimate {
@@ -18,11 +18,11 @@
   &:hover,
   &:focus {
     opacity: 1;
-    left: 240px - $euiSizeL;
+    left: 248px - $euiSizeL;
   }
 
   .kbnPageTemplate__pageSideBar:hover & {
-    transition-delay: $euiAnimSpeedSlow;
+    transition-delay: $euiAnimSpeedSlow * 2;
   }
 }
 

diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_collapse_button.tsx
@@ -49,7 +49,6 @@ export const KibanaPageTemplateSolutionNavCollapseButton: FunctionComponent<Kiba
       className={classes}
       iconType={isCollapsed ? 'menuRight' : 'menuLeft'}
       size="s"
-      display="fill"
       color="text"
       aria-label={isCollapsed ? openLabel : collapseLabel}
       title={isCollapsed ? openLabel : collapseLabel}