diff --git a/docs/app/Examples/addons/Confirm/Variations/ConfirmExampleSize.js b/docs/app/Examples/addons/Confirm/Variations/ConfirmExampleSize.js
new file mode 100644
index 0000000000..a34f1f3134
--- /dev/null
+++ b/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 (
+
+
+
+
+ )
+ }
+}
diff --git a/docs/app/Examples/addons/Confirm/Variations/index.js b/docs/app/Examples/addons/Confirm/Variations/index.js
index 99998d57bf..8fba6dd4c7 100644
--- a/docs/app/Examples/addons/Confirm/Variations/index.js
+++ b/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'
/>
+
)
diff --git a/src/addons/Confirm/Confirm.d.ts b/src/addons/Confirm/Confirm.d.ts
index ec259223b6..4127564dff 100644
--- a/src/addons/Confirm/Confirm.d.ts
+++ b/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;
diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 8fa83726df..f623c225cb 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/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.Header.create(header)}
{Modal.Content.create(content)}
diff --git a/test/specs/addons/Confirm/Confirm-test.js b/test/specs/addons/Confirm/Confirm-test.js
index 5b15250974..56d71d6a0e 100644
--- a/test/specs/addons/Confirm/Confirm-test.js
+++ b/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()
- wrapper
- .type()
- .should.equal(Modal)
- wrapper
- .should.have.prop('size', 'small')
+ describe('children', () => {
+ it('renders a Modal', () => {
+ shallow()
+ .type()
+ .should.equal(Modal)
+ })
+ })
+
+ describe('size', () => {
+ it('has "small" size by default', () => {
+ shallow()
+ .should.have.prop('size', 'small')
+ })
+
+ _.forEach(['fullscreen', 'large', 'mini', 'small', 'tiny'], (size) => {
+ it(`applies ${size} size`, () => {
+ shallow()
+ .should.have.prop('size', size)
+ })
+ })
})
describe('cancelButton', () => {