feat(Dropdowns): use split class for split dropdowns (#92)

mking-clari · eddywashere · commit ee17a47c1684 · 2016-08-07T14:16:22.000-07:00
diff --git a/docs/lib/Components/ButtonDropdownPage.jsx b/docs/lib/Components/ButtonDropdownPage.jsx
@@ -92,7 +92,7 @@ DropdownToggle.propTypes = {
 </ButtonDropdown>`}
           </PrismCode>
         </pre>
-        <h3>Single button dropdowns</h3>
+        <h3>Split button dropdowns</h3>
         <div className="docs-example">
           <div>
             <ExampleSplit color="secondary" text="Default" />
diff --git a/docs/lib/examples/ButtonDropdownMultiSplit.jsx b/docs/lib/examples/ButtonDropdownMultiSplit.jsx
@@ -21,7 +21,7 @@ export default class Example extends React.Component {
     return (
       <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
         <Button id="caret" color={this.props.color}>{this.props.text}</Button>
-        <DropdownToggle caret>
+        <DropdownToggle caret split>
           <Button color={this.props.color}><span className="sr-only">Toggle Dropdown</span></Button>
         </DropdownToggle>
         <DropdownMenu>
diff --git a/src/DropdownToggle.jsx b/src/DropdownToggle.jsx
@@ -10,6 +10,7 @@ const propTypes = {
   onClick: PropTypes.func,
   'data-toggle': PropTypes.string,
   'aria-haspopup': PropTypes.bool,
+  split: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
@@ -46,12 +47,13 @@ class DropdownToggle extends React.Component {
   }
 
   render() {
-    const { className, children, caret, color, tag: Tag, ...props } = this.props;
+    const { className, children, caret, color, split, tag: Tag, ...props } = this.props;
     const classes = classNames(
       className,
       {
         'dropdown-toggle': caret,
-        active: this.context.isOpen
+        'dropdown-toggle-split': split,
+        active: this.context.isOpen,
       }
     );
     const buttonClasses = classNames(
diff --git a/test/DropdownToggle.spec.js b/test/DropdownToggle.spec.js
@@ -56,6 +56,20 @@ describe('DropdownToggle', () => {
     expect(wrapper.find('[data-toggle="dropdown"]').hasClass('dropdown-toggle')).toBe(true);
   });
 
+  it('should render a split', () => {
+    const wrapper = mount(
+      <DropdownToggle split>Ello world</DropdownToggle>,
+      {
+        context: {
+          isOpen: isOpen,
+          toggle: toggle
+        }
+      }
+    );
+
+    expect(wrapper.find('[data-toggle="dropdown"]').hasClass('dropdown-toggle-split')).toBe(true);
+  });
+
   describe('onClick', () => {
     it('should call props.onClick if it exists', () => {
       const onClick = jasmine.createSpy('onClick');
