Reverse description lists

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public changes since 0.0.50
+- Added `textStyle="reverse"` prop to `EuiDescriptionList` as well as a class (`.eui-definitionListReverse`) for `dl`'s within `EuiText` ([#882](https://github.com/elastic/eui/pull/882))
 
 ## [`0.0.50`](https://github.com/elastic/eui/tree/v0.0.50)
 

src-docs/src/views/description_list/description_list_example.js

@@ -27,6 +27,10 @@ import DescriptionListInline from './description_list_inline';
 const descriptionListInlineSource = require('!!raw-loader!./description_list_inline');
 const descriptionListInlineHtml = renderToHtml(DescriptionListInline);
 
+import DescriptionListReverse from './description_list_reverse';
+const descriptionListReverseSource = require('!!raw-loader!./description_list_reverse');
+const descriptionListReverseHtml = renderToHtml(DescriptionListReverse);
+
 export const DescriptionListExample = {
   title: 'Description List',
   sections: [{
@@ -48,6 +52,28 @@ export const DescriptionListExample = {
     ),
     props: { EuiDescriptionList },
     demo: <DescriptionList />,
+  }, {
+    title: 'Reverse style',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: descriptionListReverseSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: descriptionListReverseHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Setting the <EuiCode>textStyle</EuiCode> prop to <EuiCode>reverse</EuiCode> will reverse
+          the text styles of the <EuiCode>title</EuiCode> and <EuiCode>description</EuiCode> elements
+          so that the description is more prominent. This works best for key/value type content.
+        </p>
+        <p>
+          Adding this property to the <EuiCode>inline</EuiCode> type will not change anything.
+        </p>
+      </div>
+    ),
+    demo: <DescriptionListReverse />,
   }, {
     title: 'As columns',
     source: [{

src-docs/src/views/description_list/description_list_reverse.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  EuiDescriptionList,
+} from '../../../../src/components';
+
+const favoriteVideoGame = [
+  {
+    title: 'Name',
+    description: 'The Elder Scrolls: Morrowind',
+  },
+  {
+    title: 'Game style',
+    description: 'Open-world, fantasy, action role-playing',
+  },
+  {
+    title: 'Release date',
+    description: '2002',
+  },
+];
+
+export default () => (
+  <EuiDescriptionList textStyle="reverse" listItems={favoriteVideoGame} />
+);

src-docs/src/views/text/text.js

@@ -124,6 +124,29 @@ export default () => (
           The game that made me drop out of college.
         </dd>
       </dl>
+
+      <EuiHorizontalRule />
+
+      <dl className="eui-definitionListReverse">
+        <dt>
+          Name
+        </dt>
+        <dd>
+          The Elder Scrolls: Morrowind
+        </dd>
+        <dt>
+          Game style
+        </dt>
+        <dd>
+          Open-world, fantasy, action role-playing
+        </dd>
+        <dt>
+          Release date
+        </dt>
+        <dd>
+          2002
+        </dd>
+      </dl>
     </EuiText>
   </div>
 );

src/components/description_list/_description_list.scss

@@ -25,6 +25,18 @@
       text-align: right;
     }
 
+    // Reversed makes the description larger than the title
+    &.euiDescriptionList--reverse {
+      .euiDescriptionList__title {
+        @include euiText;
+        @include euiFontSizeS;
+      }
+
+      .euiDescriptionList__description {
+        @include euiTitle("xs");
+      }
+    }
+
     // Compressed gets smaller fonts.
     &.euiDescriptionList--compressed {
 
@@ -35,6 +47,17 @@
       .euiDescriptionList__description {
         @include euiFontSizeS;
       }
+
+      &.euiDescriptionList--reverse {
+        .euiDescriptionList__title {
+          @include euiText;
+          @include euiFontSizeS;
+        }
+
+        .euiDescriptionList__description {
+          @include euiTitle("xxs");
+        }
+      }
     }
   }
 
@@ -73,6 +96,17 @@
       }
     }
 
+    &.euiDescriptionList--reverse {
+      .euiDescriptionList__title {
+        @include euiText;
+        @include euiFontSize;
+      }
+
+      .euiDescriptionList__description {
+        @include euiTitle("xs");
+      }
+    }
+
     &.euiDescriptionList--compressed {
 
       .euiDescriptionList__title {
@@ -82,6 +116,17 @@
       .euiDescriptionList__description {
         @include euiFontSizeS;
       }
+
+      &.euiDescriptionList--reverse {
+        .euiDescriptionList__title {
+          @include euiText;
+          @include euiFontSizeS;
+        }
+
+        .euiDescriptionList__description {
+          @include euiTitle("xxs");
+        }
+      }
     }
   }
 

src/components/description_list/description_list.js

@@ -25,19 +25,28 @@ const alignmentsToClassNameMap = {
 
 export const ALIGNMENTS = Object.keys(alignmentsToClassNameMap);
 
+const textStylesToClassNameMap = {
+  normal: '',
+  reverse: 'euiDescriptionList--reverse',
+};
+
+export const TEXT_STYLES = Object.keys(textStylesToClassNameMap);
+
 export const EuiDescriptionList = ({
   children,
   className,
   listItems,
   align,
   compressed,
+  textStyle,
   type,
   ...rest
 }) => {
   const classes = classNames(
     'euiDescriptionList',
     typesToClassNameMap[type],
     alignmentsToClassNameMap[align],
+    textStylesToClassNameMap[textStyle],
     {
       'euiDescriptionList--compressed': compressed,
     },
@@ -74,19 +83,38 @@ export const EuiDescriptionList = ({
 };
 
 EuiDescriptionList.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
   listItems: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.node,
     description: PropTypes.node,
   })),
+  children: PropTypes.node,
+  className: PropTypes.string,
+
+  /**
+   * Text alignment
+   */
+  align: PropTypes.oneOf(ALIGNMENTS),
+
+  /**
+   * Smaller text and condensed spacing
+   */
   compressed: PropTypes.bool,
+
+  /**
+   * How should the content be styled, by default
+   * this will emphasize the title
+   */
+  textStyle: PropTypes.oneOf(TEXT_STYLES),
+
+  /**
+   * How each item should be layed out
+   */
   type: PropTypes.oneOf(TYPES),
-  align: PropTypes.oneOf(ALIGNMENTS),
 };
 
 EuiDescriptionList.defaultProps = {
-  type: 'row',
   align: 'left',
   compressed: false,
+  textStyle: 'normal',
+  type: 'row',
 };

src/components/text/_text.scss

@@ -7,7 +7,6 @@
   ul,
   ol,
   dl,
-  dd,
   blockquote,
   img,
   pre {
@@ -32,6 +31,10 @@
     margin-bottom: convertToRem($baseLineHeightMultiplier * 1);
   }
 
+  dd + dt {
+    margin-top: convertToRem($baseLineHeightMultiplier * 2);
+  }
+
   * + h2,
   * + h3,
   * + h4,
@@ -56,10 +59,16 @@
   }
 
   h4,
-  dt {
+  dt,
+  dl.eui-definitionListReverse dd {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 5)); // skip level 4 on purpose
   }
 
+  dl.eui-definitionListReverse dt {
+    font-size: convertToRem($baseFontSize * nth($euiTextScale, 7));
+    color: $euiTextColor;
+  }
+
   h5 {
     font-size: convertToRem($baseFontSize * nth($euiTextScale, 6));
     line-height: convertToRem($baseLineHeightMultiplier * 2);