fix(Modal): remove dimmer={false} (Semantic-Org#2882)

* docs(Modal): Fix multiple and close examples

* fix(Modal): remove useless tests and update propTypes

Signed-off-by: Oleksandr Fediashov <[email protected]>

* Update TS def.

Author: mihai-dinculescu

docs/src/examples/modules/Modal/Types/ModalExampleMultiple.js

@@ -12,7 +12,6 @@ class NestedModal extends Component {
 
     return (
       <Modal
-        dimmer={false}
         open={open}
         onOpen={this.open}
         onClose={this.close}

docs/src/examples/modules/Modal/Variations/ModalExampleCloseConfig.js

@@ -22,15 +22,22 @@ class ModalExampleCloseConfig extends Component {
           open={open}
           closeOnEscape={closeOnEscape}
           closeOnRootNodeClick={closeOnRootNodeClick}
-          onClose={this.close}
         >
           <Modal.Header>Delete Your Account</Modal.Header>
           <Modal.Content>
             <p>Are you sure you want to delete your account</p>
           </Modal.Content>
           <Modal.Actions>
-            <Button negative>No</Button>
-            <Button positive labelPosition='right' icon='checkmark' content='Yes' />
+            <Button onClick={this.close} negative>
+              No
+            </Button>
+            <Button
+              onClick={this.close}
+              positive
+              labelPosition='right'
+              icon='checkmark'
+              content='Yes'
+            />
           </Modal.Actions>
         </Modal>
       </div>

docs/src/examples/modules/Modal/Variations/ModalExampleDimmer.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Popup, Button, Header, Image, Modal } from 'semantic-ui-react'
+import { Button, Header, Image, Modal } from 'semantic-ui-react'
 
 class ModalExampleDimmer extends Component {
   state = { open: false }
@@ -15,15 +15,6 @@ class ModalExampleDimmer extends Component {
         <Button onClick={this.show(true)}>Default</Button>
         <Button onClick={this.show('inverted')}>Inverted</Button>
         <Button onClick={this.show('blurring')}>Blurring</Button>
-        <Popup trigger={<Button onClick={this.show(false)}>None</Button>}>
-          <Popup.Header>Heads up!</Popup.Header>
-          <Popup.Content>
-            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.
-          </Popup.Content>
-        </Popup>
 
         <Modal dimmer={dimmer} open={open} onClose={this.close}>
           <Modal.Header>Select a Photo</Modal.Header>

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;

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!
     //

test/specs/modules/Modal/Modal-test.js

@@ -249,18 +249,6 @@ describe('Modal', () => {
       })
     })
 
-    describe('false', () => {
-      it('does not render a dimmer', () => {
-        wrapperMount(<Modal open dimmer={false} />)
-        assertBodyClasses('dimmable dimmed blurring', false)
-      })
-
-      it('does not add any dimmer classes to the body', () => {
-        wrapperMount(<Modal open dimmer={false} />)
-        assertBodyClasses('dimmable dimmed blurring', false)
-      })
-    })
-
     describe('blurring', () => {
       it('adds/removes body classes "dimmable dimmed blurring" on mount/unmount', () => {
         assertBodyClasses('dimmable dimmed blurring', false)