fix(dropdowns): buttonClassName is propagted properly

buttonClassName is merged and applied to the button [Finishes #98913274]
pivotal-cf · Jul 21, 2015 · 4e88e37 · 4e88e37
1 parent 87b40f7
commit 4e88e37
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/spec/pivotal-ui-react/dropdown/dropdown_spec.js b/spec/pivotal-ui-react/dropdown/dropdown_spec.js
@@ -7,7 +7,7 @@ describe('Dropdowns', function() {
     describe(dropdownComponentName, function() {
       beforeEach(function() {
         var DropdownClass = require('../../../src/pivotal-ui-react/dropdowns/dropdowns')[dropdownComponentName];
-        React.render(<DropdownClass title="Dropping"/>, root);
+        React.render(<DropdownClass title="Dropping" buttonClassName="test-btn-class"/>, root);
       });
 
       afterEach(function() {
@@ -18,9 +18,10 @@ describe('Dropdowns', function() {
         expect('button.dropdown-toggle').toContainText('Dropping');
       });
 
-      it('adds the appropriate button classes to the dropdown toggle', () => {
+      it('adds the appropriate button classes (merging in buttonClassName) to the dropdown toggle', () => {
         expect('button.dropdown-toggle').toHaveClass(dropdownClassName);
         expect('button.dropdown-toggle').not.toHaveClass('btn-default');
+        expect('.dropdown-toggle').toHaveClass('test-btn-class');
       });
     });
   }
@@ -54,7 +55,7 @@ describe('Dropdowns', function() {
       expect('#root #test-id').toExist();
     });
 
-    it('create a dropdown-toggle, merging buttonClassName with the provided one', () => {
+    it('creates a dropdown-toggle', () => {
       expect('.dropdown-toggle').toContainText('Dropping');
       expect('.dropdown-toggle').toHaveClass('btn-default');
       expect('.dropdown-toggle').toHaveClass('test-btn-class');

diff --git a/src/pivotal-ui-react/dropdowns/dropdowns.js b/src/pivotal-ui-react/dropdowns/dropdowns.js
@@ -1,5 +1,5 @@
 var React = require('react');
-import {mergeProps} from '../../../src/pivotal-ui-react/helpers/helpers';
+import classnames from 'classnames';
 
 /**
  * @component Dropdown
@@ -31,11 +31,16 @@ var Dropdown = require('react-bootstrap').DropdownButton;
 function defDropdown(props) {
   return React.createClass({
     render() {
-      var others = mergeProps(props, this.props);
-      return <Dropdown {...others}/>;
+      const {buttonClassName, ...others} = this.props;
+      const {buttonClassName: defaultBtnClassName, bsStyle} = props;
+
+      const btnClass = classnames(buttonClassName, defaultBtnClassName);
+
+      return <Dropdown buttonClassName={btnClass} bsStyle={bsStyle} {...others}/>;
     }
   });
 }
+
 module.exports = {
   Dropdown,
 

diff --git a/src/pivotal-ui-react/dropdowns/package.json b/src/pivotal-ui-react/dropdowns/package.json
@@ -6,6 +6,7 @@
     "react-bootstrap": "0.23.3",
     "pui-css-dropdowns": "1.10.0",
     "pui-css-iconography": "1.10.0",
-    "pui-css-buttons": "1.10.0"
+    "pui-css-buttons": "1.10.0",
+    "classnames": "^2.1.2"
   }
 }
diff --git a/src/pivotal-ui/components/dropdowns/dropdowns.scss b/src/pivotal-ui/components/dropdowns/dropdowns.scss
@@ -202,11 +202,11 @@ If you want to customize the dropdown button, you can add modifier classes to it
 using the `buttonClassName` property:
 
 ```react_example
-<UI.Dropdown title='DropDown' buttonClassName='type-neutral-1 em-alt type-sm'>
+<UI.DefaultAltDropdown title='DropDown' buttonClassName='btn-lg'>
   <UI.DropdownItem href="https://media.giphy.com/media/13py6c5BSnBkic/giphy.gif">Booyeah</UI.DropdownItem>
   <UI.DropdownItem divider />
   <UI.DropdownItem href="https://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</UI.DropdownItem>
-</UI.Dropdown>
+</UI.DefaultAltDropdown>
 ```
 
 */