Description list enhancements and fixes (#1419)

elastic · Jan 9, 2019 · ce1dc7c · ce1dc7c
1 parent bb02e2b
commit ce1dc7c
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,17 +5,18 @@
 - Updated `gisApp` icon ([#1413](https://github.com/elastic/eui/pull/1413))
 - Added `isAutoRefreshOnly` prop to `EuiSuperDatePicker` ([#1412](https://github.com/elastic/eui/pull/1412))
 - Migrate remaining files in `accessiblity/` to TS ([#1408](https://github.com/elastic/eui/pull/1408))
+- Added `titleProps` and `descriptionProps` to `EuiDescriptionList` ([#1419](https://github.com/elastic/eui/pull/1419))
 
 **Bug fixes**
 
 - Support extended characters (e.g. non-latin, unicode) in `EuiSearchBar` and `EuiQuery` ([#1415](https://github.com/elastic/eui/pull/1415))
+- Fixed line-heights of the differently sized `EuiDescriptionList` alternates ([#1419](https://github.com/elastic/eui/pull/1419))
 
 ## [`6.2.0`](https://github.com/elastic/eui/tree/v6.2.0)
 
 - Added `logoCodesandbox` and updated `apmApp` icons ([#1407](https://github.com/elastic/eui/pull/1407))
 - Changed `EuiListGroup` PropType for `extraAction` to remove console warning ([#1405](hhttps://github.com/elastic/eui/pull/1405))
 
-
 **Bug fixes**
 
 - Account for `min` attribute when determining `EuiRange` input width ([#1406](https://github.com/elastic/eui/pull/1406))

diff --git a/src-docs/src/views/description_list/description_list_classes.js b/src-docs/src/views/description_list/description_list_classes.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {
+  EuiDescriptionList,
+} from '../../../../src/components';
+
+const favoriteVideoGames = [
+  {
+    title: 'The Elder Scrolls: Morrowind',
+    description: 'The opening music alone evokes such strong memories.',
+  },
+  {
+    title: 'TIE Fighter',
+    description: 'The sequel to XWING, join the dark side and fly for the Emporer.',
+  },
+  {
+    title: 'Quake 2',
+    description: 'The game that made me drop out of college.',
+  },
+];
+export default () => (
+  <div style={{ maxWidth: '400px' }}>
+    <EuiDescriptionList
+      listItems={favoriteVideoGames}
+      type="column"
+      align="center"
+      titleProps={{ className: 'eui-textTruncate' }}
+      descriptionProps={{ className: 'eui-textTruncate' }}
+    />
+  </div>
+);
diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js
@@ -31,6 +31,10 @@ import DescriptionListReverse from './description_list_reverse';
 const descriptionListReverseSource = require('!!raw-loader!./description_list_reverse');
 const descriptionListReverseHtml = renderToHtml(DescriptionListReverse);
 
+import DescriptionListClasses from './description_list_classes';
+const descriptionListClassesSource = require('!!raw-loader!./description_list_classes');
+const descriptionListClassesHtml = renderToHtml(DescriptionListClasses);
+
 export const DescriptionListExample = {
   title: 'Description List',
   sections: [{
@@ -124,5 +128,23 @@ export const DescriptionListExample = {
       </p>
     ),
     demo: <DescriptionListStyling />,
+  }, {
+    title: 'Passing className',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: descriptionListClassesSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: descriptionListClassesHtml,
+    }],
+    text: (
+      <p>
+        When using the <EuiCode>listItems</EuiCode> prop to pass an object of items and you
+        need to also add <EuiCode>className</EuiCode>s (or other available props) to the individual
+        pieces, you can use the <EuiCode>titleProps</EuiCode> and <EuiCode>descriptionProps</EuiCode> to
+        do so.
+      </p>
+    ),
+    demo: <DescriptionListClasses />,
   }],
 };
diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss
@@ -5,6 +5,7 @@
 
     .euiDescriptionList__title {
       @include euiTitle('xs');
+      line-height: $euiLineHeight;
       margin-top: $euiSize;
 
       // Make sure the first <dt> doesn't get a margine.
@@ -43,6 +44,7 @@
 
       .euiDescriptionList__title {
         @include euiTitle('xxs');
+        line-height: $euiLineHeight;
       }
 
       .euiDescriptionList__description {
@@ -57,6 +59,7 @@
 
         .euiDescriptionList__description {
           @include euiTitle('xxs');
+          line-height: $euiLineHeight;
         }
       }
     }
@@ -80,13 +83,14 @@
 
     .euiDescriptionList__title {
       @include euiTitle('xs');
-      flex-basis: 50%;
+      line-height: $euiLineHeight;
+      width: 50%; // Flex-basis doesn't work in IE with padding
       padding-right: $euiSizeS;
     }
 
     .euiDescriptionList__description {
       @include euiFontSize;
-      flex-basis: 50%;
+      width: 50%; // Flex-basis doesn't work in IE with padding
       padding-left: $euiSizeS;
     }
 
@@ -106,13 +110,15 @@
 
       .euiDescriptionList__description {
         @include euiTitle('xs');
+        line-height: $euiLineHeight;
       }
     }
 
     &.euiDescriptionList--compressed {
 
       .euiDescriptionList__title {
         @include euiTitle('xxs');
+        line-height: $euiLineHeight;
       }
 
       .euiDescriptionList__description {
@@ -127,6 +133,7 @@
 
         .euiDescriptionList__description {
           @include euiTitle('xxs');
+          line-height: $euiLineHeight;
         }
       }
     }

diff --git a/src/components/description_list/description_list.js b/src/components/description_list/description_list.js
@@ -33,12 +33,14 @@ const textStylesToClassNameMap = {
 export const TEXT_STYLES = Object.keys(textStylesToClassNameMap);
 
 export const EuiDescriptionList = ({
+  align,
   children,
   className,
-  listItems,
-  align,
   compressed,
+  descriptionProps,
+  listItems,
   textStyle,
+  titleProps,
   type,
   ...rest
 }) => {
@@ -58,11 +60,11 @@ export const EuiDescriptionList = ({
     childrenOrListItems = (
       listItems.map((item, index) => {
         return [
-          <EuiDescriptionListTitle key={`title-${index}`}>
+          <EuiDescriptionListTitle key={`title-${index}`} {...titleProps}>
             {item.title}
           </EuiDescriptionListTitle>,
 
-          <EuiDescriptionListDescription key={`description-${index}`}>
+          <EuiDescriptionListDescription key={`description-${index}`} {...descriptionProps}>
             {item.description}
           </EuiDescriptionListDescription>
         ];
@@ -110,6 +112,16 @@ EuiDescriptionList.propTypes = {
    * How each item should be layed out
    */
   type: PropTypes.oneOf(TYPES),
+
+  /**
+   * Props object to be passed to `EuiDescriptionListTitle`
+   */
+  titleProps: PropTypes.object,
+
+  /**
+   * Props object to be passed to `EuiDescriptionListDescription`
+   */
+  descriptionProps: PropTypes.object,
 };
 
 EuiDescriptionList.defaultProps = {

diff --git a/src/components/description_list/index.d.ts b/src/components/description_list/index.d.ts
@@ -12,6 +12,8 @@ declare module '@elastic/eui' {
     compressed?: boolean;
     textStyle?: EuiDescriptionListTextStyle;
     type?: EuiDescriptionListType;
+    titleProps?: HTMLAttributes<HTMLElement>;
+    descriptionProps?: HTMLAttributes<HTMLElement>;
   }
 
   export class EuiDescriptionList extends Component<