Merge pull request #1777 from aswinshenoy/modal-dismiss

Replace dismissible with disableClose in Modal

Author: interactivellama

components/component-docs.json

@@ -8617,14 +8617,14 @@
                 "required": false,
                 "description": "If true, modal footer buttons render left and right. An example use case would be for \"back\" and \"next\" buttons."
             },
-            "dismissible": {
+            "disableClose": {
                 "type": {
                     "name": "bool"
                 },
                 "required": false,
-                "description": "If true, Modals can be dismissed by clicking on the close icon or pressing esc key.",
+                "description": "If true, Modals cannot be dismissed by clicking on the close icon or pressing esc key.",
                 "defaultValue": {
-                    "value": "true",
+                    "value": "false",
                     "computed": false
                 }
             },
@@ -8633,7 +8633,7 @@
                     "name": "bool"
                 },
                 "required": false,
-                "description": "If true, Modals can be dismissed by clicking outside of modal. If unspecified, defaults to dismissible."
+                "description": "If true, Modals can be dismissed by clicking outside of modal. If unspecified, defaults to disableClose."
             },
             "onRequestClose": {
                 "type": {
@@ -13843,4 +13843,4 @@
         "SLDS-component-path": "/components/vertical-navigation",
         "dependencies": []
     }
-}
+}

components/modal/__docs__/storybook-stories.jsx

@@ -241,7 +241,7 @@ storiesOf(MODAL, module)
 	)
 	.add('Small with footer, not dismissible', () =>
 		getModal({
-			dismissible: false,
+			disableClose: true,
 			isOpen: true,
 			tagline: 'Enter in details below',
 			title: 'New Opportunity',

components/modal/__examples__/prompt.jsx

@@ -21,7 +21,7 @@ class Example extends React.Component {
 				<div>
 					<Button label="Open Prompt Variant" onClick={this.toggleOpen} />
 					<Modal
-						dismissible={false}
+						disableClose
 						footer={[
 							<Button
 								key="promptBtn"

components/modal/__tests__/modal.browser-test.jsx

@@ -155,7 +155,7 @@ describe('SLDSModal: ', function() {
 		it('non-dismissible modal has role=alertdialog', () => {
 			const cmp = getModal({
 				isOpen: true,
-				dismissible: false,
+				disableClose: true,
 			});
 			const modal = getModalNode(document.body);
 			const role = modal.getAttribute('role');

components/modal/check-props.js

@@ -18,6 +18,13 @@ if (process.env.NODE_ENV !== 'production') {
 			"assistiveText['closeButton']",
 			createDocUrl('assistiveText')
 		);
+		deprecatedProperty(
+			COMPONENT,
+			props.dismissible,
+			'dismissible',
+			'disableClose',
+			createDocUrl('disableClose')
+		);
 	};
 }
 

components/modal/index.jsx

@@ -79,11 +79,11 @@ const propTypes = {
 	 */
 	directional: PropTypes.bool,
 	/**
-	 * If true, Modals can be dismissed by clicking on the close icon or pressing esc key.
+	 * If true, Modals cannot be dismissed by clicking on the close icon or pressing esc key.
 	 */
-	dismissible: PropTypes.bool,
+	disableClose: PropTypes.bool,
 	/**
-	 * If true, Modals can be dismissed by clicking outside of modal. If unspecified, defaults to dismissible.
+	 * If true, Modals can be dismissed by clicking outside of modal. If unspecified, defaults to disableClose.
 	 */
 	dismissOnClickOutside: PropTypes.bool,
 	/**
@@ -158,7 +158,6 @@ const defaultProps = {
 	},
 	align: 'center',
 	ariaHideApp: true,
-	dismissible: true,
 };
 
 /**
@@ -259,7 +258,7 @@ class Modal extends React.Component {
 					'slds-modal_prompt': this.isPrompt(),
 				})}
 				onClick={this.dismissModalOnClickOutside}
-				role={this.props.dismissible ? 'dialog' : 'alertdialog'}
+				role={this.props.disableClose ? 'alertdialog' : 'dialog'}
 			>
 				<div
 					className={classNames(
@@ -300,7 +299,7 @@ class Modal extends React.Component {
 	}
 
 	closeModal() {
-		if (this.props.dismissible) {
+		if (!this.props.disableClose) {
 			this.dismissModal();
 		}
 	}
@@ -316,10 +315,10 @@ class Modal extends React.Component {
 	}
 
 	dismissModalOnClickOutside() {
-		// if dismissOnClickOutside is not set, default its value to dismissible
+		// if dismissOnClickOutside is not set, default its value to disableClose
 		const dismissOnClickOutside = this.props.dismissOnClickOutside
 			? this.props.dismissOnClickOutside
-			: this.props.dismissible;
+			: !this.props.disableClose;
 
 		if (dismissOnClickOutside) {
 			this.dismissModal();
@@ -417,7 +416,7 @@ class Modal extends React.Component {
 				)}
 				onClick={this.handleModalClick}
 			>
-				{this.props.dismissible ? closeButton : null}
+				{this.props.disableClose ? null : closeButton}
 				{headerContent}
 			</header>
 		);