Fixed EuiNavDrawer collapse/expand button height issue (#2463)

elastic · Oct 22, 2019 · 560152b · 560152b
1 parent cf3483b
commit 560152b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,8 @@
 **Bug fixes**
 
 - Reenabled `width` property for `EuiTable` cell components ([#2452](https://github.com/elastic/eui/pull/2452))
+- Fixed `EuiNavDrawer` collapse/expand button height issue
+ ([#2463](https://github.com/elastic/eui/pull/2463))
 
 ## [`14.6.0`](https://github.com/elastic/eui/tree/v14.6.0)
 

diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss
@@ -33,12 +33,12 @@
     transition: width $euiAnimSpeedExtraFast;
     z-index: $euiZHeader + 1;
 
-    .navDrawerExpandButton-isExpanded .euiListGroupItem__button {
+    .euiListGroupItem__button {
       padding: $euiSizeM $euiSize;
     }
 
     .navDrawerExpandButton-isCollapsed .euiListGroupItem__button {
-      max-width: $euiSizeXL;
+      max-width: 100%;
     }
   }
 

diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js
@@ -229,7 +229,7 @@ export class EuiNavDrawer extends Component {
     let footerContent;
     if (showExpandButton) {
       footerContent = (
-        <EuiListGroup className="euiNavDrawer__expandButton">
+        <EuiListGroup className="euiNavDrawer__expandButton" flush>
           <EuiI18n
             tokens={[
               'euiNavDrawer.sideNavCollapse',
@@ -336,8 +336,8 @@ export class EuiNavDrawer extends Component {
                 onClick={this.handleDrawerMenuClick}>
                 {/* Put expand button first so it's first in tab order then on toggle starts the tabbing of the items from the top */}
                 {/* TODO: Add a "skip navigation" keyboard only button */}
-                {modifiedChildren}
                 {footerContent}
+                {modifiedChildren}
               </div>
             </EuiFlexItem>
             {flyoutContent}