feat(Dropdown): Custom trigger element (Semantic-Org#477)

docs/app/Examples/modules/Dropdown/Types/Trigger.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Dropdown, Icon } from 'stardust'
+
+const trigger = (
+  <div style={{display: 'inline-block'}}>
+    <Icon name='user' />
+    Hello, Bob
+  </div>
+)
+
+const DropdownExample = () => (
+  <Dropdown trigger={trigger}>
+    <Dropdown.Menu>
+      <Dropdown.Item text='New' />
+      <Dropdown.Item text='Open...' description='ctrl + o' />
+      <Dropdown.Item text='Save as...' description='ctrl + s' />
+      <Dropdown.Item text='Rename' description='ctrl + r' />
+      <Dropdown.Item text='Make a copy' />
+      <Dropdown.Item icon='trash' text='Move to trash' />
+      <Dropdown.Divider />
+      <Dropdown.Item text='Download As...' />
+      <Dropdown.Item text='Publish To Web' />
+      {/* item text can also be defined as children */}
+      <Dropdown.Item>E-mail Collaborators</Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+)
+
+export default DropdownExample

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

@@ -12,6 +12,11 @@ const DropdownExamples = () => (
         description='A dropdown menu'
         examplePath='modules/Dropdown/Types/Dropdown'
       />
+      <ComponentExample
+        title='Dropdown'
+        description='A dropdown menu with custom trigger'
+        examplePath='modules/Dropdown/Types/Trigger'
+      />
       <ComponentExample
         title='Selection'
         description='A dropdown can be used to select between choices in a form'

src/modules/Dropdown/Dropdown.js

@@ -104,6 +104,12 @@ export default class Dropdown extends Component {
     /** Name of the hidden input which holds the value. */
     name: PropTypes.string,
 
+    /** Custom element to trigger the menu to become visible. Takes place of 'text'. */
+    trigger: customPropTypes.every([
+      customPropTypes.disallow(['selection']),
+      PropTypes.node,
+    ]),
+
     /**
      * Allow user additions to the list of options (boolean).
      * Requires the use of `selection`, `options` and `search`.
@@ -687,6 +693,8 @@ export default class Dropdown extends Component {
   // ----------------------------------------
 
   renderText = () => {
+    if (this.props.trigger) return this.props.trigger
+
     const { multiple, placeholder, search, text } = this.props
     const { searchQuery, value, open } = this.state
     const hasValue = multiple ? !_.isEmpty(value) : !!value

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

@@ -370,6 +370,25 @@ describe('Dropdown Component', () => {
     })
   })
 
+  describe('trigger', () => {
+    it('displays the trigger', () => {
+      const text = 'Hey there'
+      const trigger = (<div className='trigger'>{text}</div>)
+
+      wrapperRender(<Dropdown options={options} trigger={trigger} />)
+        .find('.trigger')
+        .should.contain.text(text)
+    })
+    it('ignores the text prop', () => {
+      const text = faker.hacker.phrase()
+      const trigger = (<div className='trigger'>{text}</div>)
+
+      wrapperRender(<Dropdown options={options} trigger={trigger} text={text} />)
+        .find('.text')
+        .should.have.lengthOf(0)
+    })
+  })
+
   describe('menu', () => {
     // DO NOT simulate events on 'document', use the 'domEvent` util
     // simulate() only uses React's internal event system