feat(buttons): Buttons can now be full width

[Finishes #144221815]

Signed-off-by: Elana Koren <ekoren@pivotal.io>

library/spec/pivotal-ui-react/buttons/button_spec.js → library/spec/pivotal-ui-react/buttons/buttons_spec.js

@@ -125,6 +125,15 @@ describe('UIButton', () => {
     });
   });
 
+  describe('when full width is true', () => {
+    it('adds the full width class', () => {
+      subject = renderComponent({fullWidth: true});
+      const button = ReactTestUtils.findRenderedDOMComponentWithTag(subject, 'button');
+
+      expect(button).toHaveClass('btn-full');
+    });
+  });
+
   describe('when small is true', () => {
     it('adds the small button class', () => {
       subject = renderComponent({small: true});

library/src/pivotal-ui-react/buttons/buttons.js

@@ -13,16 +13,17 @@ export class UIButton extends React.Component {
     kind: PropTypes.oneOf(['default', 'danger', 'primary', 'brand']),
     large: PropTypes.bool,
     small: PropTypes.bool,
+    fullWidth: PropTypes.bool,
     iconPosition: PropTypes.oneOf(['left', 'right'])
   }
 
   static defaultProps = {
     kind: 'default',
     iconPosition: 'left'
-  }
+  };
 
   render() {
-    const {alt, flat, icon, iconPosition, iconOnly, large, small, kind, children, ...others} = this.props;
+    const {alt, flat, icon, iconPosition, iconOnly, large, small, kind, children, fullWidth, ...others} = this.props;
 
 
     const buttonClasses = {
@@ -35,7 +36,8 @@ export class UIButton extends React.Component {
           'btn-lg': large,
           'btn-sm': small,
           'btn-icon': iconOnly,
-          'btn-icon-right': !!icon && iconPosition === 'right'
+          'btn-icon-right': !!icon && iconPosition === 'right',
+          'btn-full': fullWidth
         }
       ]
     };

library/src/pivotal-ui/components/buttons/buttons.scss

@@ -72,6 +72,9 @@
   }
 }
 
+.btn-full {
+  width: 100%;
+}
 
 .btn-lg {
   height: $base-unit*5;

styleguide/docs/react/buttons.js

@@ -23,6 +23,7 @@ iconOnly     | no       | Boolean | false   | If specified, will render as an ic
 iconPosition | no       | String  |         | If specified, places the icon to the left or the right of the text and or children
 large        | no       | Boolean | false   | Whether to render the button large
 small        | no       | Boolean | false   | Whether to render the button small
+fullWidth    | no       | Boolean | false   | Whether to render the button full width
 
 ## Basic usage
 
@@ -90,6 +91,8 @@ parent: button_react
 ---
 To make a button large, set the `large` property to true, to make it small, set `small` to true.
 
+To make a button full width, set `fullWidth` to true.
+
 ```react_example_table
 <DefaultButton large>
   Big Button
@@ -102,6 +105,10 @@ Default
 <DefaultButton small>
   Small Button
 </DefaultButton>
+
+<DefaultButton fullWidth>
+  Full Width Button
+</DefaultButton>
 ```
 
 */