From 48c40c0620f5ec098ca43a649d08c2603b0db7d2 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Mon, 30 Jan 2017 13:03:09 -0800
Subject: [PATCH] fix(DropdownItem): add className to element shorthands

---
 src/modules/Dropdown/DropdownItem.js          | 11 ++++++--
 .../modules/Dropdown/DropdownItem-test.js     | 25 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 40c0f7eacd..67ec6cccc4 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -138,11 +138,18 @@ export default class DropdownItem extends Component {
     const labelElement = Label.create(label)
     const descriptionElement = createShorthand(
       'span',
-      val => ({ className: 'description', children: val }),
+      val => ({ children: val }),
       description,
+      props => ({ className: 'description' })
     )
 
     if (descriptionElement) {
+      const textElement = createShorthand(
+        'span',
+        val => ({ children: val }),
+        content || text,
+        props => ({ className: 'text' })
+      )
       return (
         <ElementType {...rest} {...ariaOptions} className={classes} onClick={this.handleClick}>
           {imageElement}
@@ -150,7 +157,7 @@ export default class DropdownItem extends Component {
           {flagElement}
           {labelElement}
           {descriptionElement}
-          {createShorthand('span', val => ({ className: 'text', children: val }), content || text)}
+          {textElement}
         </ElementType>
       )
     }
diff --git a/test/specs/modules/Dropdown/DropdownItem-test.js b/test/specs/modules/Dropdown/DropdownItem-test.js
index 53d78e54d8..a933545b40 100644
--- a/test/specs/modules/Dropdown/DropdownItem-test.js
+++ b/test/specs/modules/Dropdown/DropdownItem-test.js
@@ -27,9 +27,22 @@ describe('DropdownItem', () => {
     propKey: 'description',
     ShorthandComponent: 'span',
     mapValueToProps: val => ({
+      children: val,
+    }),
+    shorthandDefaultProps: props => ({
       className: 'description',
+    }),
+  })
+
+  common.implementsShorthandProp(DropdownItem, {
+    propKey: 'text',
+    ShorthandComponent: 'span',
+    mapValueToProps: val => ({
       children: val,
     }),
+    shorthandDefaultProps: props => ({
+      className: 'description',
+    }),
   })
 
   describe('aria', () => {
@@ -71,6 +84,13 @@ describe('DropdownItem', () => {
     })
   })
 
+  describe('description', () => {
+    it('adds className="description" to element shorthand', () => {
+      shallow(<DropdownItem description={<strong />} />)
+        .should.not.have.descendants('strong.description')
+    })
+  })
+
   describe('text', () => {
     it('renders with wrapping span when description', () => {
       const wrapper = shallow(<DropdownItem text='hey' description='description' />)
@@ -85,6 +105,11 @@ describe('DropdownItem', () => {
       wrapper.should.not.have.descendants('span.text')
       wrapper.text().should.equal('hey')
     })
+
+    it('adds className="text" to element shorthand', () => {
+      shallow(<DropdownItem text={<strong />} />)
+        .should.not.have.descendants('strong.text')
+    })
   })
 
   describe('content', () => {