feat(Dropdown): add size prop (#90)

mking-clari · eddywashere · commit 92c62b13877d · 2016-08-07T14:36:57.000-07:00
diff --git a/docs/lib/Components/DropdownsPage.jsx b/docs/lib/Components/DropdownsPage.jsx
@@ -9,6 +9,7 @@ import {
   DropdownMenu } from 'reactstrap';
 import DropdownExample from '../examples/Dropdown';
 const DropdownExampleSource = require('!!raw!../examples/Dropdown.jsx');
+import DropdownSizingExample from '../examples/DropdownSizing';
 
 export default class DropdownPage extends React.Component {
   constructor(props) {
@@ -120,6 +121,44 @@ DropdownToggle.propTypes = {
 {'<DropdownItem disabled>Action</DropdownItem>'}
           </PrismCode>
         </pre>
+        <h3>Sizing</h3>
+        <div className="docs-example">
+          <div>
+            <DropdownSizingExample group size="lg" />
+            <DropdownSizingExample className="m-t-1" />
+            <DropdownSizingExample className="m-t-1" group size="sm" />
+          </div>
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+{`<Dropdown group isOpen={this.state.dropdownOpen} size="lg" toggle={this.toggle}>
+  <DropdownToggle caret>
+    Dropdown
+  </DropdownToggle>
+  <DropdownMenu>
+    ...
+  </DropdownMenu>
+</Dropdown>
+
+<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+  <DropdownToggle caret>
+    Dropdown
+  </DropdownToggle>
+  <DropdownMenu>
+    ...
+  </DropdownMenu>
+</Dropdown>
+
+<Dropdown group isOpen={this.state.dropdownOpen} size="sm" toggle={this.toggle}>
+  <DropdownToggle caret>
+    Dropdown
+  </DropdownToggle>
+  <DropdownMenu>
+    ...
+  </DropdownMenu>
+</Dropdown>`}
+          </PrismCode>
+        </pre>
       </div>
     );
   }
diff --git a/docs/lib/examples/DropdownSizing.jsx b/docs/lib/examples/DropdownSizing.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+export default class Example extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      dropdownOpen: false
+    };
+  }
+
+  toggle() {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  }
+
+  render() {
+    return (
+      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} {...this.props}>
+        <DropdownToggle caret>
+          Dropdown
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem header>Header</DropdownItem>
+          <DropdownItem>Action</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
diff --git a/src/Dropdown.jsx b/src/Dropdown.jsx
@@ -13,6 +13,7 @@ const propTypes = {
   dropup: PropTypes.bool,
   group: PropTypes.bool,
   isOpen: PropTypes.bool,
+  size: PropTypes.string,
   tag: PropTypes.string,
   tether: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   toggle: PropTypes.func,
@@ -162,6 +163,7 @@ class Dropdown extends React.Component {
       className,
       dropup,
       group,
+      size,
       tag: Tag,
       isOpen,
       ...attributes
@@ -171,6 +173,7 @@ class Dropdown extends React.Component {
       className,
       {
         'btn-group': group,
+        [`btn-group-${size}`]: !!size,
         dropdown: !group,
         open: isOpen,
         dropup: dropup
diff --git a/test/Dropdown.spec.js b/test/Dropdown.spec.js
@@ -245,4 +245,27 @@ describe('Dropdown', () => {
       wrapper.detach();
     });
   });
+
+  it('should render different size classes', () => {
+    const small = mount(
+      <Dropdown group isOpen={isOpen} size="sm" toggle={toggle}>
+        <DropdownToggle>Toggle</DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem>Test</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+
+    const large = mount(
+      <Dropdown group isOpen={isOpen} size="lg" toggle={toggle}>
+        <DropdownToggle>Toggle</DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem>Test</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+
+    expect(small.find('.btn-group-sm').length).toBe(1);
+    expect(large.find('.btn-group-lg').length).toBe(1);
+  });
 });
