EuiDescriptionList accepts nodes for titles and descriptions.

elastic · Mar 21, 2018 · a6ca10c · a6ca10c
1 parent 7351dd1
commit a6ca10c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Updated `EuiDescriptionList` to accept nodes for the titles and descriptions ([#552](https://github.com/elastic/eui/pull/552))
 - Added `stop` and `stopFilled` icons ([#543](https://github.com/elastic/eui/pull/543))
 
 **Bug fixes**

diff --git a/src/components/description_list/__snapshots__/description_list.test.js.snap b/src/components/description_list/__snapshots__/description_list.test.js.snap
@@ -28,7 +28,7 @@ exports[`EuiDescriptionList props compressed is rendered 1`] = `
 />
 `;
 
-exports[`EuiDescriptionList props listItems is rendered 1`] = `
+exports[`EuiDescriptionList props listItems is rendered as strings and elements 1`] = `
 <dl
   class="euiDescriptionList euiDescriptionList--row"
 >
@@ -45,12 +45,16 @@ exports[`EuiDescriptionList props listItems is rendered 1`] = `
   <dt
     class="euiDescriptionList__title"
   >
-    Title 2
+    <em>
+      Title 2
+    </em>
   </dt>
   <dd
     class="euiDescriptionList__description"
   >
-    Description 2
+    <code>
+      Description 2
+    </code>
   </dd>
   <dt
     class="euiDescriptionList__title"

diff --git a/src/components/description_list/description_list.js b/src/components/description_list/description_list.js
@@ -77,8 +77,8 @@ EuiDescriptionList.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   listItems: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    description: PropTypes.string,
+    title: PropTypes.node,
+    description: PropTypes.node,
   })),
   compressed: PropTypes.bool,
   type: PropTypes.oneOf(TYPES),

diff --git a/src/components/description_list/description_list.test.js b/src/components/description_list/description_list.test.js
@@ -18,15 +18,15 @@ describe('EuiDescriptionList', () => {
 
   describe('props', () => {
     describe('listItems', () => {
-      test('is rendered', () => {
+      test('is rendered as strings and elements', () => {
         const listItems = [
           {
             title: 'Title 1',
             description: 'Description 1',
           },
           {
-            title: 'Title 2',
-            description: 'Description 2',
+            title: <em>Title 2</em>,
+            description: <code>Description 2</code>,
           },
           {
             title: 'Title 3',