fix(DropdownItem): add className to element shorthands

Semantic-Org · Jan 31, 2017 · 6d732ea · 6d732ea
1 parent d003911
commit 6d732ea
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
@@ -138,19 +138,26 @@ 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}
           {iconElement}
           {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
@@ -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', () => {