[EuiCollapsibleNavBeta] Fix accordion open animation bug (#7317)

elastic · Oct 27, 2023 · 23d136c · 23d136c
1 parent 78e1c82
commit 23d136c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -177,7 +177,6 @@ export const KibanaExample: Story = {
                   { title: 'Notifications', href: '#' },
                 ],
               },
-              { title: 'Add data', href: '#' },
             ]),
           ]}
         />

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.ts
@@ -73,8 +73,17 @@ export const euiCollapsibleNavAccordionStyles = (
       }
     `,
     isSubItem: css`
-      &.euiAccordion-isOpen {
-        ${logicalCSS('margin-bottom', euiTheme.size.m)}
+      /* Adds extra spacing to the bottom of the accordion while open. Notes:
+         1. This uses a pseudo element instead of margin-bottom on the accordion,
+            because otherwise the height calculations the accordion uses will be off
+            and cause buggy animation behavior
+         2. Setting a margin or padding bottom on .euiAccordion__children does not
+            seem to work correctly and gets collapsed instead of stacking
+       */
+      &.euiAccordion-isOpen .euiAccordion__children::after {
+        content: '';
+        display: block;
+        ${logicalCSS('height', euiTheme.size.m)}
       }
     `,
     // Arrow element
-Original file line number
+Diff line change
@@ Expand Up / @@ -177,7 +177,6 @@ export const KibanaExample: Story = { @@
                       { title: 'Notifications', href: '#' },
                     ],
                   },
-                  { title: 'Add data', href: '#' },
                 ]),
               ]}
             />
@@ Expand Down @@