feat(Confirm): allow custom sizes

docs/app/Examples/addons/Confirm/Variations/ConfirmExampleSize.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import { Button, Confirm } from 'semantic-ui-react'
+
+export default class ConfirmExampleSize extends Component {
+  state = { open: false }
+
+  handleButtonClick = () => this.setState({ open: true })
+  handleConfirm = () => this.setState({ open: false })
+  handleCancel = () => this.setState({ open: false })
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.handleButtonClick}>Show Large</Button>
+        <Confirm
+          header='This is a large confirm'
+          open={this.state.open}
+          onCancel={this.handleCancel}
+          onConfirm={this.handleConfirm}
+          size='large'
+        />
+      </div>
+    )
+  }
+}

docs/app/Examples/addons/Confirm/Variations/index.js

@@ -19,6 +19,11 @@ const ConfirmVariationsExamples = () => (
       description='A confirm can customize button text.'
       examplePath='addons/Confirm/Variations/ConfirmExampleButtons'
     />
+    <ComponentExample
+      title='Confirm Size'
+      description='A confirm can define size.'
+      examplePath='addons/Confirm/Variations/ConfirmExampleSize'
+    />
   </ExampleSection>
 )
 

src/addons/Confirm/Confirm.d.ts

@@ -39,6 +39,9 @@ export interface ConfirmProps extends ModalProps {
 
   /** Whether or not the modal is visible. */
   open?: boolean;
+
+  /** A confirm can vary in size. */
+  size?: 'fullscreen' | 'large' | 'mini' | 'small' | 'tiny';
 }
 
 declare const Confirm: React.ComponentClass<ConfirmProps>;

src/addons/Confirm/Confirm.js

@@ -46,12 +46,16 @@ class Confirm extends Component {
 
     /** Whether or not the modal is visible. */
     open: PropTypes.bool,
+
+    /** A Confirm can vary in size */
+    size: PropTypes.oneOf(['fullscreen', 'large', 'mini', 'small', 'tiny']),
   }
 
   static defaultProps = {
     cancelButton: 'Cancel',
     confirmButton: 'OK',
     content: 'Are you sure?',
+    size: 'small',
   }
 
   static _meta = {
@@ -84,6 +88,7 @@ class Confirm extends Component {
       content,
       header,
       open,
+      size,
     } = this.props
     const rest = getUnhandledProps(Confirm, this.props)
 
@@ -94,7 +99,7 @@ class Confirm extends Component {
     if (_.has(this.props, 'open')) openProp.open = open
 
     return (
-      <Modal {...rest} {...openProp} size='small' onClose={this.handleCancel}>
+      <Modal {...rest} {...openProp} size={size} onClose={this.handleCancel}>
         {Modal.Header.create(header)}
         {Modal.Content.create(content)}
         <Modal.Actions>

test/specs/addons/Confirm/Confirm-test.js

@@ -15,7 +15,6 @@ let wrapper
 // we need to unmount the modal after every test to remove it from the document
 // wrap the render methods to update a global wrapper that is unmounted after each test
 const wrapperMount = (...args) => (wrapper = mount(...args))
-const wrapperShallow = (...args) => (wrapper = shallow(...args))
 
 describe('Confirm', () => {
   beforeEach(() => {
@@ -40,13 +39,26 @@ describe('Confirm', () => {
     mapValueToProps: content => ({ content }),
   })
 
-  it('renders a small Modal', () => {
-    wrapperShallow(<Confirm />)
-    wrapper
-      .type()
-      .should.equal(Modal)
-    wrapper
-      .should.have.prop('size', 'small')
+  describe('children', () => {
+    it('renders a Modal', () => {
+      shallow(<Confirm />)
+        .type()
+        .should.equal(Modal)
+    })
+  })
+
+  describe('size', () => {
+    it('has "small" size by default', () => {
+      shallow(<Confirm />)
+        .should.have.prop('size', 'small')
+    })
+
+    _.forEach(['fullscreen', 'large', 'mini', 'small', 'tiny'], (size) => {
+      it(`applies ${size} size`, () => {
+        shallow(<Confirm size={size} />)
+          .should.have.prop('size', size)
+      })
+    })
   })
 
   describe('cancelButton', () => {