feat(Dropdown): Enable custom DropdownItem render (#854)

Author: jeffcarbs

docs/app/Examples/modules/Dropdown/Usage/DropdownExampleItemContent.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Dropdown, Header } from 'semantic-ui-react'
+
+const options = [
+  { text: 'Mobile',
+    value: 1,
+    content: <Header icon='mobile' content='Mobile' subheader='The smallest size' /> },
+  { text: 'Tablet',
+    value: 2,
+    content: <Header icon='tablet' content='Tablet' subheader='The size in the middle' /> },
+  { text: 'Desktop',
+    value: 3,
+    content: <Header icon='desktop' content='Desktop' subheader='The largest size' /> },
+]
+
+const DropdownExampleItemContent = () => (
+  <Dropdown
+    selection
+    fluid
+    options={options}
+    placeholder='Choose an option'
+  />
+)
+
+export default DropdownExampleItemContent

docs/app/Examples/modules/Dropdown/Usage/index.js

@@ -44,6 +44,11 @@ const DropdownUsageExamples = () => (
       description='A "multiple" dropdown can render customized label for selected items.'
       examplePath='modules/Dropdown/Usage/DropdownExampleMultipleCustomLabel'
     />
+    <ComponentExample
+      title='Item Content'
+      description='A dropdown item can be rendered differently inside the menu.'
+      examplePath='modules/Dropdown/Usage/DropdownExampleItemContent'
+    />
 
   </ExampleSection>
 )

src/modules/Dropdown/DropdownItem.js

@@ -32,6 +32,9 @@ export default class DropdownItem extends Component {
     /** Additional classes. */
     className: PropTypes.string,
 
+    /** Shorthand for primary content. */
+    content: customPropTypes.contentShorthand,
+
     /** Additional text with less emphasis. */
     description: customPropTypes.itemShorthand,
 
@@ -86,6 +89,7 @@ export default class DropdownItem extends Component {
       active,
       children,
       className,
+      content,
       disabled,
       description,
       flag,
@@ -130,7 +134,7 @@ export default class DropdownItem extends Component {
           {flagElement}
           {labelElement}
           {descriptionElement}
-          {createShorthand('span', val => ({ className: 'text', children: val }), text)}
+          {createShorthand('span', val => ({ className: 'text', children: val }), content || text)}
         </ElementType>
       )
     }
@@ -141,7 +145,7 @@ export default class DropdownItem extends Component {
         {iconElement}
         {flagElement}
         {labelElement}
-        {text}
+        {content || text}
       </ElementType>
     )
   }

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

@@ -48,6 +48,21 @@ describe('DropdownItem', () => {
     })
   })
 
+  describe('content', () => {
+    it('renders text if no content', () => {
+      const wrapper = shallow(<DropdownItem text='hey' />)
+
+      wrapper.text().should.include('hey')
+    })
+
+    it('renders content if present', () => {
+      const wrapper = shallow(<DropdownItem text='hey' content='you' />)
+
+      wrapper.text().should.not.include('hey')
+      wrapper.text().should.include('you')
+    })
+  })
+
   describe('onClick', () => {
     it('omitted when not defined', () => {
       const click = () => shallow(<DropdownItem />).simulate('click')
@@ -59,7 +74,7 @@ describe('DropdownItem', () => {
 
       const value = faker.hacker.phrase()
       const event = { target: null }
-      const props = { value, foo: 'bar' }
+      const props = { value, 'data-foo': 'bar' }
 
       shallow(<DropdownItem onClick={spy} {...props} />)
         .simulate('click', event)