change isWrappable to displayType

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

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 && 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',
 };