From 87b40f7d7fa256eaddaf71e13e46b1663a67221b Mon Sep 17 00:00:00 2001
From: Caroline Taymor and Kenny Wang <ctaymor@pivotal.io>
Date: Fri, 17 Jul 2015 18:00:21 -0700
Subject: [PATCH] feat(dropdown): Dropdown and DropdownItem pass through
 attributes

Dropdown passes through className, id and style.
Dropdown merges buttonClassName when provided.
DropdownItem passes through className, id and style.
Updates documentation to include buttonClassName.

[Finishes #98913274]
---
 .../dropdown/dropdown_spec.js                 | 57 +++++++++++++++++--
 src/pivotal-ui-react/dropdowns/dropdowns.js   |  4 +-
 2 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/spec/pivotal-ui-react/dropdown/dropdown_spec.js b/spec/pivotal-ui-react/dropdown/dropdown_spec.js
index 2dade1052..162093ae1 100644
--- a/spec/pivotal-ui-react/dropdown/dropdown_spec.js
+++ b/spec/pivotal-ui-react/dropdown/dropdown_spec.js
@@ -1,4 +1,6 @@
 require('../spec_helper');
+import {itPropagatesAttributes} from '../support/shared_examples';
+import {Dropdown, DropdownItem} from '../../../src/pivotal-ui-react/dropdowns/dropdowns';
 
 describe('Dropdowns', function() {
   function dropdownTestFor(dropdownComponentName, dropdownClassName) {
@@ -24,22 +26,65 @@ describe('Dropdowns', function() {
   }
 
   describe('Dropdown', function() {
+    var props = {
+      className: 'test-class',
+      id: 'test-id',
+      style: {
+        opacity: '1'
+      }
+    };
+
     beforeEach(function() {
-      var Dropdown = require('../../../src/pivotal-ui-react/dropdowns/dropdowns').Dropdown;
-      React.render(<Dropdown title="Dropping"/>, root);
+      React.render(
+        <Dropdown title="Dropping" {...props} buttonClassName="test-btn-class">
+          <DropdownItem href="test">Item #1</DropdownItem>
+        </Dropdown>, root);
     });
 
     afterEach(function() {
       React.unmountComponentAtNode(root);
     });
 
-    it('creates a dropdown', function() {
-      expect('button.dropdown-toggle').toContainText('Dropping');
+    it('passes through className and style to the btn-group ', function() {
+      expect('#root .btn-group').toHaveClass('test-class');
+      expect('#root .btn-group').toHaveCss({opacity: '1'});
+    });
+
+    it('passes through id', function() {
+      expect('#root #test-id').toExist();
+    });
+
+    it('create a dropdown-toggle, merging buttonClassName with the provided one', () => {
+      expect('.dropdown-toggle').toContainText('Dropping');
+      expect('.dropdown-toggle').toHaveClass('btn-default');
+      expect('.dropdown-toggle').toHaveClass('test-btn-class');
+    });
+
+    it('renders all children DropdownItems', function() {
+      expect('#root .dropdown-menu li').toHaveLength(1);
+      expect('#root .dropdown-menu li').toHaveText('Item #1');
     });
+  });
 
-    it('adds the appropriate button classes to the dropdown toggle', () => {
-      expect('button.dropdown-toggle').toHaveClass('btn-default');
+  describe('DropdownItem', function() {
+    var props = {
+      className: 'test-item-class',
+      id: 'test-item-id',
+      style: {
+        opacity: '1'
+      }
+    };
+    beforeEach(function() {
+      React.render(
+        <DropdownItem href='test' {...props}>Item</DropdownItem>,
+        root);
     });
+
+    afterEach(function() {
+      React.unmountComponentAtNode(root);
+    });
+
+    itPropagatesAttributes('#root li', props);
   });
 
   dropdownTestFor('LinkDropdown', 'btn-link');
diff --git a/src/pivotal-ui-react/dropdowns/dropdowns.js b/src/pivotal-ui-react/dropdowns/dropdowns.js
index a7acf4c93..cc9b32471 100644
--- a/src/pivotal-ui-react/dropdowns/dropdowns.js
+++ b/src/pivotal-ui-react/dropdowns/dropdowns.js
@@ -1,4 +1,5 @@
 var React = require('react');
+import {mergeProps} from '../../../src/pivotal-ui-react/helpers/helpers';
 
 /**
  * @component Dropdown
@@ -30,7 +31,8 @@ var Dropdown = require('react-bootstrap').DropdownButton;
 function defDropdown(props) {
   return React.createClass({
     render() {
-      return <Dropdown {...props} {...this.props}/>;
+      var others = mergeProps(props, this.props);
+      return <Dropdown {...others}/>;
     }
   });
 }