diff --git a/CHANGELOG.md b/CHANGELOG.md index 6838f83a226a..72040a29644c 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 da6ba5f91675..fd5c4fa2d481 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 fc49e4a91e7e..ce8b751a5f8d 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 22783649db6c..39ebce4c32c5 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 && 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', };