export types and move class to parent

elastic · Jan 22, 2019 · 658e75c · 658e75c
1 parent c04cc9d
commit 658e75c
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 14 deletions.
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,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
@@ -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
@@ -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
@@ -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
@@ -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,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} displayType={displayType} />
     </div>
   );
 };
 
 EuiNavDrawerFlyout.propTypes = {
   className: PropTypes.string,
   listItems: EuiListGroup.propTypes.listItems,
+  displayType: EuiListGroup.propTypes.displayType,
 
   /**
    * Display a title atop the flyout