adds prop to wrap EuiListItem text

elastic · Jan 18, 2019 · cc06303 · cc06303
1 parent 59622f6
commit cc06303
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
-  }
 }