Add responsiveColumn option to type of EuiDescriptionList (elastic#…

…2166)
thompsongl · Sep 10, 2019 · 547b586 · 547b586
1 parent 7580ac7
commit 547b586
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Added `tall`, `fullWidth`, and `isInvalid` props to `EuiFilePicker` ([#2145](https://github.com/elastic/eui/pull/2145))
 - Added exports for `react-beautiful-dnd` interfaces used by EUI components ([#2173](https://github.com/elastic/eui/pull/2173))
 - Added `isDisabled` prop & styles to `EuiSuperDatePicker` ([#2139](https://github.com/elastic/eui/pull/2139))
+- Added `responsiveColumn` option to `type` prop of `EuiDescriptionList` ([#2166](https://github.com/elastic/eui/pull/2166))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/description_list/description_list_column.js b/src-docs/src/views/description_list/description_list_column.js
@@ -1,6 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
-import { EuiDescriptionList } from '../../../../src/components';
+import {
+  EuiDescriptionList,
+  EuiSpacer,
+  EuiTitle,
+} from '../../../../src/components';
 
 const favoriteVideoGames = [
   {
@@ -18,9 +22,27 @@ const favoriteVideoGames = [
   },
 ];
 export default () => (
-  <EuiDescriptionList
-    type="column"
-    listItems={favoriteVideoGames}
-    style={{ maxWidth: '400px' }}
-  />
+  <Fragment>
+    <EuiDescriptionList
+      type="column"
+      listItems={favoriteVideoGames}
+      style={{ maxWidth: '400px' }}
+    />
+
+    <EuiSpacer size="xl" />
+
+    <EuiTitle size="s">
+      <h3>
+        The following list will become the typical row format on small screens
+      </h3>
+    </EuiTitle>
+
+    <EuiSpacer />
+
+    <EuiDescriptionList
+      type="responsiveColumn"
+      listItems={favoriteVideoGames}
+      style={{ maxWidth: '400px' }}
+    />
+  </Fragment>
 );
diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { renderToHtml } from '../../services';
 
@@ -108,10 +108,17 @@ export const DescriptionListExample = {
         },
       ],
       text: (
-        <p>
-          Using a prop <EuiCode>type</EuiCode> set to <EuiCode>column</EuiCode>{' '}
-          description lists can be presented in an inline, column format.
-        </p>
+        <Fragment>
+          <p>
+            Using the prop <EuiCode>type</EuiCode> set to{' '}
+            <EuiCode>column</EuiCode> description lists can be presented in an
+            inline, column format.
+          </p>
+          <p>
+            To return to the typical row format on smaller screens set{' '}
+            <EuiCode>type</EuiCode> to <EuiCode>responsiveColumn</EuiCode>.
+          </p>
+        </Fragment>
       ),
       demo: <DescriptionListColumn />,
     },

diff --git a/src/components/description_list/__snapshots__/description_list.test.tsx.snap b/src/components/description_list/__snapshots__/description_list.test.tsx.snap
@@ -81,6 +81,12 @@ exports[`EuiDescriptionList props type inline is rendered 1`] = `
 />
 `;
 
+exports[`EuiDescriptionList props type responsiveColumn is rendered 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--responsiveColumn"
+/>
+`;
+
 exports[`EuiDescriptionList props type row is rendered 1`] = `
 <dl
   class="euiDescriptionList euiDescriptionList--row"

diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss
@@ -23,10 +23,6 @@
       text-align: center;
     }
 
-    &.euiDescriptionList--right {
-      text-align: right;
-    }
-
     // Reversed makes the description larger than the title
     &.euiDescriptionList--reverse {
       .euiDescriptionList__title {
@@ -66,7 +62,8 @@
   }
 
 
-  &.euiDescriptionList--column {
+  &.euiDescriptionList--column,
+  &.euiDescriptionList--responsiveColumn {
     display: flex;
     align-items: stretch;
     flex-wrap: wrap;
@@ -96,7 +93,6 @@
 
     // Align the title to smush against the description.
     &.euiDescriptionList--center {
-
       .euiDescriptionList__title {
         text-align: right;
       }
@@ -115,7 +111,6 @@
     }
 
     &.euiDescriptionList--compressed {
-
       .euiDescriptionList__title {
         @include euiTitle('xxs');
         line-height: $euiLineHeight;
@@ -139,6 +134,40 @@
     }
   }
 
+  &.euiDescriptionList--responsiveColumn {
+    @include euiBreakpoint('xs', 's') {
+      display: block;
+
+      .euiDescriptionList__title,
+      .euiDescriptionList__description {
+        width:  100%;
+        padding: 0;
+      }
+
+      .euiDescriptionList__description {
+        @include euiFontSizeS;
+        margin-top: 0;
+      }
+
+      &.euiDescriptionList--center {
+        .euiDescriptionList__title,
+        .euiDescriptionList__description {
+          text-align: center;
+        }
+      }
+
+      &.euiDescriptionList--reverse {
+        .euiDescriptionList__title {
+          @include euiFontSizeS;
+        }
+
+        .euiDescriptionList__description {
+          @include euiTitle('xs');
+        }
+      }
+    }
+  }
+
   &.euiDescriptionList--inline {
 
     .euiDescriptionList__title {

diff --git a/src/components/description_list/description_list.tsx b/src/components/description_list/description_list.tsx
@@ -44,8 +44,9 @@ export interface EuiDescriptionListProps {
 
 const typesToClassNameMap = {
   row: 'euiDescriptionList--row',
-  column: 'euiDescriptionList--column',
   inline: 'euiDescriptionList--inline',
+  column: 'euiDescriptionList--column',
+  responsiveColumn: 'euiDescriptionList--responsiveColumn',
 };
 
 export const TYPES = keysOf(typesToClassNameMap);