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', () => {