Merge pull request #211 from pivotal-cf/passthrough-on-dropdowns

feat(dropdown): Dropdown passes through attributes
pivotal-cf · Jul 22, 2015 · 482ef1e · 482ef1e
2 parents 9cdfac1 + 4e88e37
commit 482ef1e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 12 deletions.
diff --git a/spec/pivotal-ui-react/dropdown/dropdown_spec.js b/spec/pivotal-ui-react/dropdown/dropdown_spec.js
@@ -1,11 +1,13 @@
 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) {
  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() {
@@ -16,30 +18,74 @@ 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');
  });
  });
  }
 
  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('creates a dropdown-toggle', () => {
+ 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
@@ -1,4 +1,5 @@
 var React = require('react');
+import classnames from 'classnames';
 
 /**
  * @component Dropdown
@@ -30,10 +31,16 @@ var Dropdown = require('react-bootstrap').DropdownButton;
 function defDropdown(props) {
  return React.createClass({
  render() {
- return <Dropdown {...props} {...this.props}/>;
+ 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>
 ```
 
 */