fix(Modals): Change bsSize prop to size

Breaking Change: Change bsSize prop to size

- also make title prop a node instead of a string

[#130459975]

Signed-off-by: Jonathan Berney <jberney@pivotal.io>

library/spec/pivotal-ui-react/modals/modals_spec.js

@@ -256,22 +256,22 @@ describe('BaseModal', function() {
     });
 
     it('can set the small (sm) size', () => {
-      subject::setProps({bsSize: 'sm'});
+      subject::setProps({size: 'sm'});
       expect('.modal-dialog').toHaveClass('modal-sm');
     });
 
     it('can set the small size', () => {
-      subject::setProps({bsSize: 'small'});
+      subject::setProps({size: 'small'});
       expect('.modal-dialog').toHaveClass('modal-sm');
     });
 
     it('can set the large (lg) size', () => {
-      subject::setProps({bsSize: 'lg'});
+      subject::setProps({size: 'lg'});
       expect('.modal-dialog').toHaveClass('modal-lg');
     });
 
     it('can set the large size', () => {
-      subject::setProps({bsSize: 'large'});
+      subject::setProps({size: 'large'});
       expect('.modal-dialog').toHaveClass('modal-lg');
     });
   });

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

@@ -15,14 +15,14 @@ const privates = new WeakMap();
 class BaseModal extends mixin(React.Component).with(Animation) {
   static propTypes = {
     animation: types.bool,
-    bsSize: types.string,
+    size: types.string,
     dialogClassName: types.string,
     keyboard: types.bool,
     onEntered: types.func,
     onExited: types.func,
     onHide: types.func,
     show: types.bool,
-    title: types.string
+    title: types.node
   };
 
   static defaultProps = {
@@ -69,7 +69,7 @@ class BaseModal extends mixin(React.Component).with(Animation) {
   render() {
     const {
       animation,
-      bsSize,
+      size,
       children,
       dialogClassName,
       keyboard: __ignore,
@@ -111,7 +111,7 @@ class BaseModal extends mixin(React.Component).with(Animation) {
       marginTop: `${50 * fractionShown}px`
     };
 
-    const modalSize = {small: 'sm', sm: 'sm', large: 'lg', lg: 'lg'}[bsSize];
+    const modalSize = {small: 'sm', sm: 'sm', large: 'lg', lg: 'lg'}[size];
     const modalSizeClass = `modal-${modalSize}`;
 
     return (

styleguide/docs/react/modals.js

@@ -35,14 +35,14 @@ We provide 3 components that can be used to assemble modals:
  Property           |  Type         | Description
  -------------      | --------------| --------------------------------------------------------------------------
  `animation`        | Boolean       | Opens and closes the modal widow with sliding and fading animations.
- `bsSize`           | String        | Size variations. Can be `lg`, `large`, `sm`, or `small`.
+ `size`             | String        | Size variations. Can be `lg`, `large`, `sm`, or `small`.
  `dialogClassName`  | String        | A CSS class to apply to the modal dialog.
  `keyboard`         | Boolean       | Set to false to prevent escape from closing the modal dialog.
  `onEntered`        | Function      | Callback that fires after the modal has finished animating in.
  `onExited`         | Function      | Callback that fires after the modal has finished animating out.
  `onHide`           | Function      | Callback that fires as soon as the modal begins closing.
  `show`             | Boolean       | Whether the modal should be opened or closed.
- `title`            | String        | Title of the modal, shown at the top of the modal.
+ `title`            | Node          | Title of the modal, shown at the top of the modal.
 
 **Note**: A modal will be rendered at the end of `body` instead of the DOM node it is given. This makes positioning
 work regardless of where you render the modal. One side effect is `ReactDOM.findDOMNode`does not