[EuiCollapsibleNavFooter] Fix broken flex/overflow height

- requires adding another div wrapper to work correctly; a la `EuiFlyoutBody`
elastic · Jan 9, 2024 · 928805f · 928805f
1 parent e67ef5d
commit 928805f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_body_footer.test.tsx.snap
@@ -22,5 +22,9 @@ exports[`EuiCollapsibleNavFooter renders 1`] = `
   aria-label="aria-label"
   class="euiFlyoutFooter euiCollapsibleNav__footer testClass1 testClass2 emotion-euiFlyoutFooter-euiCollapsibleNav__footer-euiTestCss"
   data-test-subj="test subject string"
-/>
+>
+  <div
+    class="emotion-euiFlyoutFooter__overflow"
+  />
+</div>
 `;
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
@@ -38,6 +38,9 @@ export const euiCollapsibleNavFooterStyles = (euiThemeContext: UseEuiTheme) => {
     euiCollapsibleNav__footer: css`
       background-color: ${euiTheme.colors.emptyShade};
       ${logicalCSS('border-top', euiTheme.border.thin)}
+      max-block-size: 50%;
+    `,
+    euiFlyoutFooter__overflow: css`
       ${euiYScrollWithShadows(euiThemeContext, { side: 'end' })}
     `,
     isPushCollapsed: css`

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
@@ -57,17 +57,23 @@ export const EuiCollapsibleNavBody: EuiFlyoutBodyProps = ({
 
 export const EuiCollapsibleNavFooter: EuiFlyoutFooterProps = ({
   className,
+  children,
   ...props
 }) => {
   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];
+  const overflowWrapperStyles = [
+    styles.euiFlyoutFooter__overflow,
     isCollapsed && isPush && styles.isPushCollapsed,
   ];
 
-  return <EuiFlyoutFooter className={classes} css={cssStyles} {...props} />;
+  return (
+    <EuiFlyoutFooter className={classes} css={cssStyles} {...props}>
+      <div css={overflowWrapperStyles}>{children}</div>
+    </EuiFlyoutFooter>
+  );
 };