Allow EuiListGroupItem link text to wrap (#1459)

* make side nav flyout links wrap * adds prop to wrap EuiListItem text * change isWrappable to displayType * export types and move class to parent * remove displayType, truncate long labels, add wrapText * icon min-width, ie fixes
elastic · Jan 23, 2019 · 8f36ae1 · 8f36ae1
1 parent 967ae85
commit 8f36ae1
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Adds `wrapText` prop that enables `EuiListGroupItem` text to wrap ([#1459](https://github.com/elastic/eui/pull/1459))
 - Added `inputRef` prop to `EuiFieldNumber` and updated `EuiFieldText`'s to a Ref type ([#1434](https://github.com/elastic/eui/pull/1434))
 - Added `snowflake` icon ([#1445](https://github.com/elastic/eui/pull/1445))
 - Added `bell` icon ([#1447](https://github.com/elastic/eui/pull/1447))

diff --git 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
@@ -337,12 +337,12 @@ export default class extends Component {
         },
       },
       {
-        label: 'My workpad',
+        label: 'Workpad with title that wraps',
         href: '/#/layout/nav-drawer',
         iconType: 'canvasApp',
         size: 's',
         style: { color: 'inherit' },
-        'aria-label': 'My workpad',
+        'aria-label': 'Workpad with title that wraps',
         extraAction: {
           color: 'subdued',
           iconType: 'starEmpty',
@@ -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 = () => {
@@ -635,6 +637,7 @@ export default class extends Component {
                 isCollapsed={flyoutIsCollapsed}
                 listItems={navFlyoutContent}
                 onMouseLeave={this.collapseFlyout}
+                wrapText={true}
               />
             </EuiNavDrawer>
           </EuiOutsideClickDetector>

diff --git 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
@@ -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;
+  flex-shrink: 0;
 }
 
 .euiListGroupItem--xSmall {
@@ -79,6 +91,18 @@
   font-size: $euiFontSizeL;
 }
 
+.euiListGroup-wrapText {
+  .euiListGroupItem__button,
+  .euiListGroupItem__text {
+    width: 100%;
+    word-break: break-word;
+  }
+
+  .euiListGroupItem__label {
+    white-space: initial;
+  }
+}
+
 // Layout alts from euiListGroup
 
 .euiListGroup-flush .euiListGroupItem {

diff --git a/src/components/list_group/list_group.js b/src/components/list_group/list_group.js
@@ -11,6 +11,7 @@ export const EuiListGroup = ({
   className,
   flush,
   bordered,
+  wrapText,
   listItems,
   maxWidth,
   style,
@@ -31,6 +32,7 @@ export const EuiListGroup = ({
     {
       'euiListGroup-flush': flush,
       'euiListGroup-bordered': bordered,
+      'euiListGroup-wrapText': wrapText,
     },
     widthClassName,
     className
@@ -85,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,
@@ -102,5 +109,6 @@ EuiListGroup.propTypes = {
 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
@@ -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
@@ -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
@@ -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;
@@ -50,6 +56,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 +90,10 @@
       .euiNavDrawerMenu {
         width: $euiNavDrawerWidthCollapsed;
         overflow-y: hidden;
+
+        .euiListGroupItem__extraAction {
+          visibility: hidden;
+        }
       }
 
       .euiNavDrawerMenu .euiListGroupItem__label {
@@ -88,6 +110,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
@@ -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, wrapText, ...rest }) => {
   const classes = classNames(
     'euiNavDrawerFlyout',
     {
@@ -22,14 +22,15 @@ 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} wrapText={wrapText} />
     </div>
   );
 };
 
 EuiNavDrawerFlyout.propTypes = {
   className: PropTypes.string,
   listItems: EuiListGroup.propTypes.listItems,
+  wrapText: EuiListGroup.propTypes.wrapText,
 
   /**
    * Display a title atop the flyout