From 59622f64e23968a8cc3610b840943b07620db490 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Fri, 18 Jan 2019 10:35:41 -0600
Subject: [PATCH 1/6] make side nav flyout links wrap

---
 CHANGELOG.md                                      |  2 +-
 src-docs/src/views/nav_drawer/nav_drawer.js       |  2 +-
 src/components/nav_drawer/_nav_drawer_flyout.scss | 10 ++++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9eaa2d20601..7f7eacf7ab4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.5.1`.
+- Changes `EuiNavDrawerFLyout` links to wrap ([#1457](https://github.com/elastic/eui/pull/1457))
 
 ## [`6.5.1`](https://github.com/elastic/eui/tree/v6.5.1)
 
diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index 9ea4122be4e..c9b873d304f 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -337,7 +337,7 @@ export default class extends Component {
         },
       },
       {
-        label: 'My workpad',
+        label: 'Workpad with title that wraps',
         href: '/#/layout/nav-drawer',
         iconType: 'canvasApp',
         size: 's',
diff --git a/src/components/nav_drawer/_nav_drawer_flyout.scss b/src/components/nav_drawer/_nav_drawer_flyout.scss
index 789ecbd3457..de1af15ffd8 100644
--- a/src/components/nav_drawer/_nav_drawer_flyout.scss
+++ b/src/components/nav_drawer/_nav_drawer_flyout.scss
@@ -24,4 +24,14 @@
     padding-left: 0;
     padding-right: 0;
   }
+
+  .euiListGroupItem__button {
+    width: 100%;
+    word-break: break-word;
+    line-height: $euiSize;
+  }
+
+  .euiListGroupItem__icon {
+    min-width: $euiSize;
+  }
 }

From cc063031f1ac5450ae747789845958a11449ca4f Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Fri, 18 Jan 2019 15:42:32 -0600
Subject: [PATCH 2/6] adds prop to wrap EuiListItem text

---
 CHANGELOG.md                                      |  2 +-
 src-docs/src/views/nav_drawer/nav_drawer.js       |  5 ++++-
 src/components/list_group/_list_group_item.scss   | 12 ++++++++++++
 src/components/list_group/list_group_item.js      |  8 ++++++++
 src/components/nav_drawer/_nav_drawer_flyout.scss | 10 ----------
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f7eacf7ab4..6838f83a226 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Changes `EuiNavDrawerFLyout` links to wrap ([#1457](https://github.com/elastic/eui/pull/1457))
+- Adds `isWrappable` prop that wraps `EuiListGroupItem` text ([#1458](https://github.com/elastic/eui/pull/1458))
 
 ## [`6.5.1`](https://github.com/elastic/eui/tree/v6.5.1)
 
diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index c9b873d304f..da6ba5f9167 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -329,6 +329,7 @@ export default class extends Component {
         size: 's',
         style: { color: 'inherit' },
         'aria-label': 'My dashboard',
+        isWrappable: true,
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
@@ -342,7 +343,8 @@ export default class extends Component {
         iconType: 'canvasApp',
         size: 's',
         style: { color: 'inherit' },
-        'aria-label': 'My workpad',
+        'aria-label': 'Workpad with title that wraps',
+        isWrappable: true,
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
@@ -357,6 +359,7 @@ export default class extends Component {
         size: 's',
         style: { color: 'inherit' },
         'aria-label': 'My logs',
+        isWrappable: true,
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index f2cb42ce077..fc49e4a91e7 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -79,6 +79,18 @@
   font-size: $euiFontSizeL;
 }
 
+.euiListGroupItem-isWrappable {
+  .euiListGroupItem__button {
+    width: 100%;
+    word-break: break-word;
+    line-height: $euiSize;
+  }
+
+  .euiListGroupItem__icon {
+    min-width: $euiSize;
+  }
+}
+
 // Layout alts from euiListGroup
 
 .euiListGroup-flush .euiListGroupItem {
diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js
index f3167d5d097..22783649db6 100644
--- a/src/components/list_group/list_group_item.js
+++ b/src/components/list_group/list_group_item.js
@@ -18,6 +18,7 @@ export const EuiListGroupItem = ({
   label,
   isActive,
   isDisabled,
+  isWrappable,
   href,
   className,
   iconType,
@@ -33,6 +34,7 @@ export const EuiListGroupItem = ({
       'euiListGroupItem-isActive': isActive,
       'euiListGroupItem-isDisabled': isDisabled,
       'euiListGroupItem-isClickable': href || onClick,
+      'euiListGroupItem-isWrappable': isWrappable,
     },
     className
   );
@@ -126,6 +128,11 @@ EuiListGroupItem.propTypes = {
    */
   isDisabled: PropTypes.bool,
 
+  /**
+   * Allow link text to wrap
+   */
+  isWrappable: PropTypes.bool,
+
   /**
    * Make the list item label a link
    */
@@ -151,5 +158,6 @@ EuiListGroupItem.propTypes = {
 EuiListGroupItem.defaultProps = {
   isActive: false,
   isDisabled: false,
+  isWrappable: false,
   size: 'm',
 };
diff --git a/src/components/nav_drawer/_nav_drawer_flyout.scss b/src/components/nav_drawer/_nav_drawer_flyout.scss
index de1af15ffd8..789ecbd3457 100644
--- a/src/components/nav_drawer/_nav_drawer_flyout.scss
+++ b/src/components/nav_drawer/_nav_drawer_flyout.scss
@@ -24,14 +24,4 @@
     padding-left: 0;
     padding-right: 0;
   }
-
-  .euiListGroupItem__button {
-    width: 100%;
-    word-break: break-word;
-    line-height: $euiSize;
-  }
-
-  .euiListGroupItem__icon {
-    min-width: $euiSize;
-  }
 }

From c04cc9d2493b0160e9936a6abbe8eab5d40ca507 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Fri, 18 Jan 2019 17:19:30 -0600
Subject: [PATCH 3/6] change isWrappable to displayType

---
 CHANGELOG.md                                    | 2 +-
 src-docs/src/views/nav_drawer/nav_drawer.js     | 6 +++---
 src/components/list_group/_list_group_item.scss | 2 +-
 src/components/list_group/list_group_item.js    | 7 +++----
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6838f83a226..72040a29644 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Adds `isWrappable` prop that wraps `EuiListGroupItem` text ([#1458](https://github.com/elastic/eui/pull/1458))
+- Adds `displayType` prop that enables `EuiListGroupItem` text to wrap ([#1458](https://github.com/elastic/eui/pull/1458))
 
 ## [`6.5.1`](https://github.com/elastic/eui/tree/v6.5.1)
 
diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index da6ba5f9167..fd5c4fa2d48 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -329,7 +329,7 @@ export default class extends Component {
         size: 's',
         style: { color: 'inherit' },
         'aria-label': 'My dashboard',
-        isWrappable: true,
+        displayType: 'wrapText',
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
@@ -344,7 +344,7 @@ export default class extends Component {
         size: 's',
         style: { color: 'inherit' },
         'aria-label': 'Workpad with title that wraps',
-        isWrappable: true,
+        displayType: 'wrapText',
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
@@ -359,7 +359,7 @@ export default class extends Component {
         size: 's',
         style: { color: 'inherit' },
         'aria-label': 'My logs',
-        isWrappable: true,
+        displayType: 'wrapText',
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index fc49e4a91e7..ce8b751a5f8 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -79,7 +79,7 @@
   font-size: $euiFontSizeL;
 }
 
-.euiListGroupItem-isWrappable {
+.euiListGroupItem-wrapText {
   .euiListGroupItem__button {
     width: 100%;
     word-break: break-word;
diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js
index 22783649db6..0627690e9b2 100644
--- a/src/components/list_group/list_group_item.js
+++ b/src/components/list_group/list_group_item.js
@@ -18,7 +18,7 @@ export const EuiListGroupItem = ({
   label,
   isActive,
   isDisabled,
-  isWrappable,
+  displayType,
   href,
   className,
   iconType,
@@ -34,7 +34,7 @@ export const EuiListGroupItem = ({
       'euiListGroupItem-isActive': isActive,
       'euiListGroupItem-isDisabled': isDisabled,
       'euiListGroupItem-isClickable': href || onClick,
-      'euiListGroupItem-isWrappable': isWrappable,
+      'euiListGroupItem-wrapText': displayType === 'wrapText',
     },
     className
   );
@@ -131,7 +131,7 @@ EuiListGroupItem.propTypes = {
   /**
    * Allow link text to wrap
    */
-  isWrappable: PropTypes.bool,
+  displayType: PropTypes.oneOf(['wrapText']),
 
   /**
    * Make the list item label a link
@@ -158,6 +158,5 @@ EuiListGroupItem.propTypes = {
 EuiListGroupItem.defaultProps = {
   isActive: false,
   isDisabled: false,
-  isWrappable: false,
   size: 'm',
 };

From 658e75cf7876fd663541d010375bce5bc0dd0fb1 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Tue, 22 Jan 2019 12:14:39 -0600
Subject: [PATCH 4/6] export types and move class to parent

---
 src-docs/src/views/nav_drawer/nav_drawer.js     |  4 +---
 src/components/list_group/_list_group_item.scss |  5 +++--
 src/components/list_group/list_group.js         | 13 +++++++++++++
 src/components/list_group/list_group_item.js    |  7 -------
 src/components/nav_drawer/nav_drawer_flyout.js  |  5 +++--
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index fd5c4fa2d48..28f1d4bf970 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -329,7 +329,6 @@ export default class extends Component {
         size: 's',
         style: { color: 'inherit' },
         'aria-label': 'My dashboard',
-        displayType: 'wrapText',
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
@@ -344,7 +343,6 @@ export default class extends Component {
         size: 's',
         style: { color: 'inherit' },
         'aria-label': 'Workpad with title that wraps',
-        displayType: 'wrapText',
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
@@ -359,7 +357,6 @@ export default class extends Component {
         size: 's',
         style: { color: 'inherit' },
         'aria-label': 'My logs',
-        displayType: 'wrapText',
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
@@ -638,6 +635,7 @@ export default class extends Component {
                 isCollapsed={flyoutIsCollapsed}
                 listItems={navFlyoutContent}
                 onMouseLeave={this.collapseFlyout}
+                displayType="wrapText"
               />
             </EuiNavDrawer>
           </EuiOutsideClickDetector>
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index ce8b751a5f8..4c75730a1f2 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -79,8 +79,9 @@
   font-size: $euiFontSizeL;
 }
 
-.euiListGroupItem-wrapText {
-  .euiListGroupItem__button {
+.euiListGroup-wrapText {
+  .euiListGroupItem__button,
+  .euiListGroupItem__text {
     width: 100%;
     word-break: break-word;
     line-height: $euiSize;
diff --git a/src/components/list_group/list_group.js b/src/components/list_group/list_group.js
index a615519ed03..f4411562e87 100644
--- a/src/components/list_group/list_group.js
+++ b/src/components/list_group/list_group.js
@@ -6,6 +6,12 @@ import {
   EuiListGroupItem,
 } from './list_group_item';
 
+const displayTypeToClassNameMap = {
+  wrapText: 'euiListGroup-wrapText',
+};
+
+export const DISPLAY_TYPES = Object.keys(displayTypeToClassNameMap);
+
 export const EuiListGroup = ({
   children,
   className,
@@ -14,6 +20,7 @@ export const EuiListGroup = ({
   listItems,
   maxWidth,
   style,
+  displayType,
   ...rest,
 }) => {
 
@@ -28,6 +35,7 @@ export const EuiListGroup = ({
 
   const classes = classNames(
     'euiListGroup',
+    displayTypeToClassNameMap[displayType],
     {
       'euiListGroup-flush': flush,
       'euiListGroup-bordered': bordered,
@@ -97,6 +105,11 @@ EuiListGroup.propTypes = {
     PropTypes.number,
     PropTypes.string,
   ]),
+
+  /**
+   * Allow link text to wrap
+   */
+  displayType: PropTypes.oneOf(DISPLAY_TYPES),
 };
 
 EuiListGroup.defaultProps = {
diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js
index 0627690e9b2..f3167d5d097 100644
--- a/src/components/list_group/list_group_item.js
+++ b/src/components/list_group/list_group_item.js
@@ -18,7 +18,6 @@ export const EuiListGroupItem = ({
   label,
   isActive,
   isDisabled,
-  displayType,
   href,
   className,
   iconType,
@@ -34,7 +33,6 @@ export const EuiListGroupItem = ({
       'euiListGroupItem-isActive': isActive,
       'euiListGroupItem-isDisabled': isDisabled,
       'euiListGroupItem-isClickable': href || onClick,
-      'euiListGroupItem-wrapText': displayType === 'wrapText',
     },
     className
   );
@@ -128,11 +126,6 @@ EuiListGroupItem.propTypes = {
    */
   isDisabled: PropTypes.bool,
 
-  /**
-   * Allow link text to wrap
-   */
-  displayType: PropTypes.oneOf(['wrapText']),
-
   /**
    * Make the list item label a link
    */
diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js
index 468ffe5b829..526eaeb2afd 100644
--- a/src/components/nav_drawer/nav_drawer_flyout.js
+++ b/src/components/nav_drawer/nav_drawer_flyout.js
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { EuiTitle } from '../title';
 import { EuiListGroup } from '../list_group';
 
-export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, ...rest }) => {
+export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, displayType, ...rest }) => {
   const classes = classNames(
     'euiNavDrawerFlyout',
     {
@@ -22,7 +22,7 @@ export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, .
       {...rest}
     >
       <EuiTitle tabIndex="-1" size="xxs"><h5 id="navDrawerFlyoutTitle">{title}</h5></EuiTitle>
-      <EuiListGroup className="euiNavDrawerFlyout__listGroup" listItems={listItems} />
+      <EuiListGroup className="euiNavDrawerFlyout__listGroup" listItems={listItems} displayType={displayType} />
     </div>
   );
 };
@@ -30,6 +30,7 @@ export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, .
 EuiNavDrawerFlyout.propTypes = {
   className: PropTypes.string,
   listItems: EuiListGroup.propTypes.listItems,
+  displayType: EuiListGroup.propTypes.displayType,
 
   /**
    * Display a title atop the flyout

From 18ae98d5f21bd7e17e400943bb031730e5ecf001 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Wed, 23 Jan 2019 09:16:10 -0600
Subject: [PATCH 5/6] remove displayType, truncate long labels, add wrapText

---
 .../src/views/list_group/list_group_links.js  |  2 +-
 src-docs/src/views/nav_drawer/nav_drawer.js   |  2 +-
 src/components/header/_index.scss             |  1 -
 .../list_group/_list_group_item.scss          | 17 ++++++++++++++-
 src/components/list_group/list_group.js       | 21 +++++++------------
 src/components/list_group/list_group_item.js  |  1 +
 src/components/nav_drawer/_index.scss         |  1 +
 src/components/nav_drawer/_nav_drawer.scss    | 20 ++++++++++++++++++
 .../nav_drawer/nav_drawer_flyout.js           |  6 +++---
 9 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/src-docs/src/views/list_group/list_group_links.js b/src-docs/src/views/list_group/list_group_links.js
index 0f9d4268ecc..cd5852278f4 100644
--- a/src-docs/src/views/list_group/list_group_links.js
+++ b/src-docs/src/views/list_group/list_group_links.js
@@ -17,7 +17,7 @@ const myContent = [
     size: 's',
   },
   {
-    label: 'Second link is active',
+    label: 'This is an active link with very long label that truncates',
     href: '#/display/list-group',
     isActive: true,
     iconType: 'clock',
diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index 28f1d4bf970..5d3e12715b9 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -635,7 +635,7 @@ export default class extends Component {
                 isCollapsed={flyoutIsCollapsed}
                 listItems={navFlyoutContent}
                 onMouseLeave={this.collapseFlyout}
-                displayType="wrapText"
+                wrapText={true}
               />
             </EuiNavDrawer>
           </EuiOutsideClickDetector>
diff --git a/src/components/header/_index.scss b/src/components/header/_index.scss
index e845a598096..350bf3ff5c1 100644
--- a/src/components/header/_index.scss
+++ b/src/components/header/_index.scss
@@ -1,5 +1,4 @@
 // Components
-@import '../header/variables';
 @import 'variables';
 @import 'header';
 @import 'header_profile';
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index 4c75730a1f2..c486630d003 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -43,6 +43,17 @@
   align-items: center;
   flex: 1 0 auto; // The flex-shrink and flex-basis values are needed for IE11
   text-align: left;
+  max-width: 100%;
+
+  .euiListGroupItem-hasExtraAction & {
+    max-width: calc(100% - #{$euiSizeXL});
+  }
+}
+
+.euiListGroupItem__label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .euiListGroupItem__button:focus {
@@ -65,6 +76,7 @@
 .euiListGroupItem__icon {
   flex-grow: 0;
   margin-right: $euiSizeM;
+  min-width: $euiSize;
 }
 
 .euiListGroupItem--xSmall {
@@ -84,7 +96,10 @@
   .euiListGroupItem__text {
     width: 100%;
     word-break: break-word;
-    line-height: $euiSize;
+  }
+
+  .euiListGroupItem__label {
+    white-space: initial;
   }
 
   .euiListGroupItem__icon {
diff --git a/src/components/list_group/list_group.js b/src/components/list_group/list_group.js
index f4411562e87..299550655c0 100644
--- a/src/components/list_group/list_group.js
+++ b/src/components/list_group/list_group.js
@@ -6,21 +6,15 @@ import {
   EuiListGroupItem,
 } from './list_group_item';
 
-const displayTypeToClassNameMap = {
-  wrapText: 'euiListGroup-wrapText',
-};
-
-export const DISPLAY_TYPES = Object.keys(displayTypeToClassNameMap);
-
 export const EuiListGroup = ({
   children,
   className,
   flush,
   bordered,
+  wrapText,
   listItems,
   maxWidth,
   style,
-  displayType,
   ...rest,
 }) => {
 
@@ -35,10 +29,10 @@ export const EuiListGroup = ({
 
   const classes = classNames(
     'euiListGroup',
-    displayTypeToClassNameMap[displayType],
     {
       'euiListGroup-flush': flush,
       'euiListGroup-bordered': bordered,
+      'euiListGroup-wrapText': wrapText,
     },
     widthClassName,
     className
@@ -93,6 +87,11 @@ EuiListGroup.propTypes = {
    */
   bordered: PropTypes.bool,
 
+  /**
+   * Allow link text to wrap
+   */
+  wrapText: PropTypes.bool,
+
   /**
    * Sets the max-width of the page,
    * set to `true` to use the default size,
@@ -105,15 +104,11 @@ EuiListGroup.propTypes = {
     PropTypes.number,
     PropTypes.string,
   ]),
-
-  /**
-   * Allow link text to wrap
-   */
-  displayType: PropTypes.oneOf(DISPLAY_TYPES),
 };
 
 EuiListGroup.defaultProps = {
   flush: false,
   bordered: false,
+  wrapText: false,
   maxWidth: true,
 };
diff --git a/src/components/list_group/list_group_item.js b/src/components/list_group/list_group_item.js
index f3167d5d097..22c871dfe08 100644
--- a/src/components/list_group/list_group_item.js
+++ b/src/components/list_group/list_group_item.js
@@ -33,6 +33,7 @@ export const EuiListGroupItem = ({
       'euiListGroupItem-isActive': isActive,
       'euiListGroupItem-isDisabled': isDisabled,
       'euiListGroupItem-isClickable': href || onClick,
+      'euiListGroupItem-hasExtraAction': extraAction,
     },
     className
   );
diff --git a/src/components/nav_drawer/_index.scss b/src/components/nav_drawer/_index.scss
index 8eeab22cbe3..fc62c67f187 100644
--- a/src/components/nav_drawer/_index.scss
+++ b/src/components/nav_drawer/_index.scss
@@ -1,3 +1,4 @@
+@import '../header/variables';
 @import 'variables';
 
 // Components
diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss
index bfa23c53f18..42569243f24 100644
--- a/src/components/nav_drawer/_nav_drawer.scss
+++ b/src/components/nav_drawer/_nav_drawer.scss
@@ -50,6 +50,18 @@
     // sass-lint:disable no-vendor-prefixes
     -ms-overflow-style: -ms-autohiding-scrollbar;
   }
+
+  .euiListGroupItem__label {
+    line-height: $euiSize;
+  }
+
+  .euiListGroupItem__extraAction {
+    visibility: hidden;
+  }
+
+  &.euiNavDrawer-showScrollbar .euiListGroupItem__extraAction {
+    visibility: visible;
+  }
 }
 
 @include euiBreakpoint('xs', 's') {
@@ -72,6 +84,10 @@
       .euiNavDrawerMenu {
         width: $euiNavDrawerWidthCollapsed;
         overflow-y: hidden;
+
+        .euiListGroupItem__extraAction {
+          visibility: hidden;
+        }
       }
 
       .euiNavDrawerMenu .euiListGroupItem__label {
@@ -88,6 +104,10 @@
     .euiNavDrawerMenu .euiListGroupItem__label {
       opacity: 1;
     }
+
+    .euiListGroupItem__extraAction {
+      visibility: visible;
+    }
   }
 }
 
diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js
index 526eaeb2afd..dcdc6327ab4 100644
--- a/src/components/nav_drawer/nav_drawer_flyout.js
+++ b/src/components/nav_drawer/nav_drawer_flyout.js
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { EuiTitle } from '../title';
 import { EuiListGroup } from '../list_group';
 
-export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, displayType, ...rest }) => {
+export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, wrapText, ...rest }) => {
   const classes = classNames(
     'euiNavDrawerFlyout',
     {
@@ -22,7 +22,7 @@ export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, d
       {...rest}
     >
       <EuiTitle tabIndex="-1" size="xxs"><h5 id="navDrawerFlyoutTitle">{title}</h5></EuiTitle>
-      <EuiListGroup className="euiNavDrawerFlyout__listGroup" listItems={listItems} displayType={displayType} />
+      <EuiListGroup className="euiNavDrawerFlyout__listGroup" listItems={listItems} wrapText={wrapText} />
     </div>
   );
 };
@@ -30,7 +30,7 @@ export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, d
 EuiNavDrawerFlyout.propTypes = {
   className: PropTypes.string,
   listItems: EuiListGroup.propTypes.listItems,
-  displayType: EuiListGroup.propTypes.displayType,
+  wrapText: EuiListGroup.propTypes.wrapText,
 
   /**
    * Display a title atop the flyout

From 2b23df352d83c49a305e640a069785cacac905bd Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Wed, 23 Jan 2019 13:36:33 -0600
Subject: [PATCH 6/6] icon min-width, ie fixes

---
 src-docs/src/views/nav_drawer/nav_drawer.js     | 6 ++++--
 src/components/list_group/_list_group_item.scss | 6 +-----
 src/components/nav_drawer/_nav_drawer.scss      | 6 ++++++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index 5d3e12715b9..af13f8a9121 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -522,8 +522,10 @@ export default class extends Component {
     }, 350);
 
     // Scrolls the menu and flyout back to top when the nav drawer collapses
-    document.getElementById('navDrawerMenu').scroll(0, 0);
-    document.getElementById('navDrawerFlyout').scroll(0, 0);
+    setTimeout(() => {
+      document.getElementById('navDrawerMenu').scrollTop = 0;
+      document.getElementById('navDrawerFlyout').scrollTop = 0;
+    }, 300);
   };
 
   focusOut = () => {
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
index c486630d003..0c9f7a5b299 100644
--- a/src/components/list_group/_list_group_item.scss
+++ b/src/components/list_group/_list_group_item.scss
@@ -76,7 +76,7 @@
 .euiListGroupItem__icon {
   flex-grow: 0;
   margin-right: $euiSizeM;
-  min-width: $euiSize;
+  flex-shrink: 0;
 }
 
 .euiListGroupItem--xSmall {
@@ -101,10 +101,6 @@
   .euiListGroupItem__label {
     white-space: initial;
   }
-
-  .euiListGroupItem__icon {
-    min-width: $euiSize;
-  }
 }
 
 // Layout alts from euiListGroup
diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss
index 42569243f24..3ab0f007a94 100644
--- a/src/components/nav_drawer/_nav_drawer.scss
+++ b/src/components/nav_drawer/_nav_drawer.scss
@@ -13,6 +13,12 @@
   transition: width $euiAnimSpeedFast $euiAnimSlightResistance;
   transition-delay: $euiNavDrawerContractingDelay;
 
+  &.euiNavDrawer-isCollapsed  {
+    .euiListGroupItem-hasExtraAction .euiListGroupItem__button {
+      max-width: 100%;
+    }
+  }
+
   &.euiNavDrawer-isExpanded {
     width: $euiNavDrawerWidthExpanded;
     transition-delay: $euiNavDrawerExpandingDelay;