[cleanup] DRY out hide scrollbars CSS and apply to now-scrollable footer

elastic · Nov 7, 2023 · 99e58fb · 99e58fb
1 parent 14a1726
commit 99e58fb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
@@ -12,7 +12,7 @@ import { logicalCSS } from '../../global_styling';
 import { euiShadowFlat } from '../../themes';
 import { euiHeaderVariables } from '../header/header.styles';
 
-import { euiCollapsibleNavBodyStyles } from './collapsible_nav_body_footer.styles';
+import { hideScrollbars } from './collapsible_nav_body_footer.styles';
 
 export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -42,7 +42,7 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiShadowFlat(euiThemeContext)}
     `,
     isPushCollapsed: css`
-      ${euiCollapsibleNavBodyStyles._isPushCollapsed}
+      ${hideScrollbars}
     `,
     isOverlayFullWidth: css`
       /* Override EuiFlyout's max-width */

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.ts
@@ -10,26 +10,24 @@ import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import { logicalCSS, euiYScrollWithShadows } from '../../global_styling';
 
+// Hide the scrollbar for docked mode (while still keeping the nav scrollable)
+// Otherwise if scrollbars are visible, button icon visibility suffers.
+export const hideScrollbars = `
+  scrollbar-width: none; /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Edge, & Safari */
+  }
+`;
+
 export const euiCollapsibleNavBodyStyles = {
   // In case things get really dire responsively, ensure the footer doesn't overtake the body
   euiCollapsibleNav__body: css`
     ${logicalCSS('min-height', '50%')}
   `,
-  get isPushCollapsed() {
-    return css`
-      .euiFlyoutBody__overflow {
-        ${this._isPushCollapsed}
-      }
-    `;
-  },
-  // CSS is reused by main euiCollapsibleNav styles in case the body component isn't used
-  _isPushCollapsed: `
-    /* Hide the scrollbar for docked mode (while still keeping the nav scrollable)
-       Otherwise if scrollbars are visible, button icon visibility suffers. */
-    scrollbar-width: none; /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none; /* Chrome, Edge, & Safari */
+  isPushCollapsed: css`
+    .euiFlyoutBody__overflow {
+      ${hideScrollbars}
     }
   `,
 };
@@ -42,5 +40,8 @@ export const euiCollapsibleNavFooterStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('border-top', euiTheme.border.thin)}
       ${euiYScrollWithShadows(euiThemeContext, { side: 'end' })}
     `,
+    isPushCollapsed: css`
+      ${hideScrollbars}
+    `,
   };
 };
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
@@ -61,9 +61,13 @@ export const EuiCollapsibleNavFooter: EuiFlyoutFooterProps = ({
 }) => {
   const classes = classNames('euiCollapsibleNav__footer', className);
 
+  const { isCollapsed, isPush } = useContext(EuiCollapsibleNavContext);
   const euiTheme = useEuiTheme();
   const styles = euiCollapsibleNavFooterStyles(euiTheme);
-  const cssStyles = [styles.euiCollapsibleNav__footer];
+  const cssStyles = [
+    styles.euiCollapsibleNav__footer,
+    isCollapsed && isPush && styles.isPushCollapsed,
+  ];
 
   return <EuiFlyoutFooter className={classes} css={cssStyles} {...props} />;
 };