fix(DropdownItem): add className to element shorthands (#1256)

* fix(DropdownItem): add className to element shorthands

* docs(DropdownExampleDescription): fix markup

* test(Dropdown): fix shorthand tests

docs/app/Examples/modules/Dropdown/Content/DropdownExampleDescription.js

@@ -2,13 +2,12 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleDescription = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown text='Filter Tags' floating labeled button icon='filter' className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />
       <Dropdown.Item description='2 new' text='Important' />
-      <Dropdown.Item description='10 new' text='Announcement' />
+      <Dropdown.Item description='10 new' text='Hopper' />
       <Dropdown.Item description='5 new' text='Discussion' />
     </Dropdown.Menu>
   </Dropdown>

src/modules/Dropdown/DropdownItem.js

@@ -138,30 +138,25 @@ 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' })
+    )
+    const textElement = createShorthand(
+      'span',
+      val => ({ children: val }),
+      content || text,
+      props => ({ className: 'text' })
     )
-
-    if (descriptionElement) {
-      return (
-        <ElementType {...rest} {...ariaOptions} className={classes} onClick={this.handleClick}>
-          {imageElement}
-          {iconElement}
-          {flagElement}
-          {labelElement}
-          {descriptionElement}
-          {createShorthand('span', val => ({ className: 'text', children: val }), content || text)}
-        </ElementType>
-      )
-    }
 
     return (
       <ElementType {...rest} {...ariaOptions} className={classes} onClick={this.handleClick}>
         {imageElement}
         {iconElement}
         {flagElement}
         {labelElement}
-        {content || text}
+        {descriptionElement}
+        {textElement}
       </ElementType>
     )
   }

test/specs/elements/Image/Image-test.js

@@ -7,7 +7,7 @@ import { SUI } from 'src/lib'
 import Dimmer from 'src/modules/Dimmer/Dimmer'
 import * as common from 'test/specs/commonTests'
 
-describe('Image Component', () => {
+describe('Image', () => {
   common.isConformant(Image)
   common.hasSubComponents(Image, [ImageGroup])
   common.hasUIClassName(Image)

test/specs/modules/Dropdown/Dropdown-test.js

@@ -56,7 +56,7 @@ const dropdownMenuIsOpen = () => {
 
 const nativeEvent = { nativeEvent: { stopImmediatePropagation: _.noop } }
 
-describe('Dropdown Component', () => {
+describe('Dropdown', () => {
   beforeEach(() => {
     attachTo = undefined
     wrapper = undefined
@@ -769,12 +769,12 @@ describe('Dropdown Component', () => {
       const nextItem = _.sample(_.without(options, initialItem))
 
       wrapperMount(<Dropdown options={options} selection value={initialItem.value} />)
-        .find('.text')
+        .find('div.text')
         .should.contain.text(initialItem.text)
 
       wrapper
         .setProps({ value: nextItem.value })
-        .find('.text')
+        .find('div.text')
         .should.contain.text(nextItem.text)
     })
   })
@@ -784,7 +784,7 @@ describe('Dropdown Component', () => {
       const text = faker.hacker.phrase()
 
       wrapperRender(<Dropdown options={options} selection text={text} />)
-        .find('.text')
+        .find('div.text')
         .should.contain.text(text)
     })
     it('prevents updates on item click if defined', () => {
@@ -797,7 +797,7 @@ describe('Dropdown Component', () => {
         .simulate('click')
 
       wrapper
-        .find('.text')
+        .find('div.text')
         .should.contain.text(text)
     })
     it('is updated on item click if not already defined', () => {
@@ -814,7 +814,7 @@ describe('Dropdown Component', () => {
 
       // text updated
       wrapper
-        .find('.text')
+        .find('div.text')
         .should.contain.text(item.text())
     })
     it('displays if value is 0', () => {
@@ -832,10 +832,10 @@ describe('Dropdown Component', () => {
 
       // text updated
       wrapper
-        .find('.text')
+        .find('div.text')
         .should.contain.text(item.text())
     })
-    it('does not display if value is \'\'', () => {
+    it("does not display if value is ''", () => {
       const text = faker.hacker.noun()
 
       wrapperMount(<Dropdown options={[{ value: '', text }]} selection />)
@@ -844,7 +844,7 @@ describe('Dropdown Component', () => {
         .simulate('click')
 
       wrapper
-        .find('.text')
+        .find('div.text')
         .should.contain.text('')
     })
     it('does not display if value is null', () => {
@@ -856,7 +856,7 @@ describe('Dropdown Component', () => {
         .simulate('click')
 
       wrapper
-        .find('.text')
+        .find('div.text')
         .should.contain.text('')
     })
     it('does not display if value is undefined', () => {
@@ -868,7 +868,7 @@ describe('Dropdown Component', () => {
         .simulate('click')
 
       wrapper
-        .find('.text')
+        .find('div.text')
         .should.contain.text('')
     })
   })
@@ -887,7 +887,7 @@ describe('Dropdown Component', () => {
       const trigger = <div className='trigger'>{text}</div>
 
       wrapperRender(<Dropdown options={options} trigger={trigger} text={text} />)
-        .should.not.have.descendants('.text')
+        .should.not.have.descendants('div.text')
     })
   })
 

test/specs/modules/Dropdown/DropdownItem-test.js

@@ -20,16 +20,21 @@ describe('DropdownItem', () => {
   common.implementsShorthandProp(DropdownItem, {
     propKey: 'flag',
     ShorthandComponent: Flag,
-    mapValueToProps: val => ({ name: val }),
+    mapValueToProps: name => ({ name }),
   })
 
   common.implementsShorthandProp(DropdownItem, {
     propKey: 'description',
     ShorthandComponent: 'span',
-    mapValueToProps: val => ({
-      className: 'description',
-      children: val,
-    }),
+    mapValueToProps: children => ({ children }),
+    shorthandDefaultProps: props => ({ className: 'description' }),
+  })
+
+  common.implementsShorthandProp(DropdownItem, {
+    propKey: 'text',
+    ShorthandComponent: 'span',
+    mapValueToProps: children => ({ children }),
+    shorthandDefaultProps: props => ({ className: 'text' }),
   })
 
   describe('aria', () => {
@@ -71,19 +76,17 @@ describe('DropdownItem', () => {
     })
   })
 
-  describe('text', () => {
-    it('renders with wrapping span when description', () => {
-      const wrapper = shallow(<DropdownItem text='hey' description='description' />)
-
-      wrapper.should.have.descendants('span.text')
-      wrapper.text().should.include('hey')
+  describe('description', () => {
+    it('adds className="description" to element shorthand', () => {
+      shallow(<DropdownItem description={<strong />} />)
+        .should.have.descendants('strong.description')
     })
+  })
 
-    it('renders without wrapping span when no description', () => {
-      const wrapper = shallow(<DropdownItem text='hey' />)
-
-      wrapper.should.not.have.descendants('span.text')
-      wrapper.text().should.equal('hey')
+  describe('text', () => {
+    it('adds className="text" to element shorthand', () => {
+      shallow(<DropdownItem text={<strong />} />)
+        .should.have.descendants('strong.text')
     })
   })
 

test/specs/modules/Search/Search-test.js

@@ -63,7 +63,7 @@ const openSearchResults = () => {
 
 const nativeEvent = { nativeEvent: { stopImmediatePropagation: _.noop } }
 
-describe('Search Component', () => {
+describe('Search', () => {
   beforeEach(() => {
     attachTo = undefined
     wrapper = undefined