diff --git a/docs/src/examples/modules/Modal/Types/ModalExampleMultiple.js b/docs/src/examples/modules/Modal/Types/ModalExampleMultiple.js index 50b9c2a24f..d40c961d95 100644 --- a/docs/src/examples/modules/Modal/Types/ModalExampleMultiple.js +++ b/docs/src/examples/modules/Modal/Types/ModalExampleMultiple.js @@ -12,7 +12,6 @@ class NestedModal extends Component { return ( Delete Your Account

Are you sure you want to delete your account

- - + - None}> - Heads up! - - By default, a Modal closes when escape is pressed or when the dimmer is clicked. Setting - the dimmer to "None" (dimmer={'{'}false{'}'}) means that there is no dimmer to click so - clicking outside won't close the Modal. To close on outside click when there's no - dimmer, you can pass the "closeOnDocumentClick" prop. - - Select a Photo diff --git a/src/modules/Modal/Modal.d.ts b/src/modules/Modal/Modal.d.ts index b6a3bce615..e452ee9a72 100644 --- a/src/modules/Modal/Modal.d.ts +++ b/src/modules/Modal/Modal.d.ts @@ -44,7 +44,7 @@ export interface ModalProps extends PortalProps { defaultOpen?: boolean; /** A modal can appear in a dimmer. */ - dimmer?: boolean | 'blurring' | 'inverted'; + dimmer?: true | 'blurring' | 'inverted'; /** Event pool namespace that is used to handle component events */ eventPool?: string; diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js index 4d4429fdd2..e3ad504502 100644 --- a/src/modules/Modal/Modal.js +++ b/src/modules/Modal/Modal.js @@ -65,7 +65,7 @@ class Modal extends Component { defaultOpen: PropTypes.bool, /** A Modal can appear in a dimmer. */ - dimmer: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['inverted', 'blurring'])]), + dimmer: PropTypes.oneOf([true, 'inverted', 'blurring']), /** Event pool namespace that is used to handle component events */ eventPool: PropTypes.string, @@ -348,14 +348,12 @@ class Modal extends Component { const portalProps = _.pick(unhandled, portalPropNames) // wrap dimmer modals - const dimmerClasses = !dimmer - ? null - : cx( - 'ui', - dimmer === 'inverted' && 'inverted', - !centered && 'top aligned', - 'page modals dimmer transition visible active', - ) + const dimmerClasses = cx( + 'ui', + dimmer === 'inverted' && 'inverted', + !centered && 'top aligned', + 'page modals dimmer transition visible active', + ) // Heads up! // diff --git a/test/specs/modules/Modal/Modal-test.js b/test/specs/modules/Modal/Modal-test.js index d5b97f42b6..7e86f19ca7 100644 --- a/test/specs/modules/Modal/Modal-test.js +++ b/test/specs/modules/Modal/Modal-test.js @@ -249,18 +249,6 @@ describe('Modal', () => { }) }) - describe('false', () => { - it('does not render a dimmer', () => { - wrapperMount() - assertBodyClasses('dimmable dimmed blurring', false) - }) - - it('does not add any dimmer classes to the body', () => { - wrapperMount() - assertBodyClasses('dimmable dimmed blurring', false) - }) - }) - describe('blurring', () => { it('adds/removes body classes "dimmable dimmed blurring" on mount/unmount', () => { assertBodyClasses('dimmable dimmed blurring', false)