From b0b37b967bc89ac750246fd023eb11941e3fe79d Mon Sep 17 00:00:00 2001
From: Jeff Carbonella <jeff@contactually.com>
Date: Thu, 8 Sep 2016 20:48:59 -0400
Subject: [PATCH] feat(Dropdown): Custom trigger element (#477)

---
 .../modules/Dropdown/Types/Trigger.js         | 29 +++++++++++++++++++
 docs/app/Examples/modules/Dropdown/index.js   |  5 ++++
 src/modules/Dropdown/Dropdown.js              |  8 +++++
 test/specs/modules/Dropdown/Dropdown-test.js  | 19 ++++++++++++
 4 files changed, 61 insertions(+)
 create mode 100644 docs/app/Examples/modules/Dropdown/Types/Trigger.js

diff --git a/docs/app/Examples/modules/Dropdown/Types/Trigger.js b/docs/app/Examples/modules/Dropdown/Types/Trigger.js
new file mode 100644
index 0000000000..cc0642853c
--- /dev/null
+++ b/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
diff --git a/docs/app/Examples/modules/Dropdown/index.js b/docs/app/Examples/modules/Dropdown/index.js
index cf2c72ffc1..5454f33cc8 100644
--- a/docs/app/Examples/modules/Dropdown/index.js
+++ b/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'
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 32479cbef7..aaf99411f7 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/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
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index e0d0a61053..03678e1feb 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/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