Improve cancelation behavior for SideSheet, Dialog, and Overlay

src/dialog/src/Dialog.js

@@ -135,6 +135,16 @@ class Dialog extends React.Component {
      */
     cancelLabel: PropTypes.string,
 
+    /**
+     * Boolean indicating if clicking the overlay should close the overlay.
+     */
+    shouldCloseOnOverlayClick: PropTypes.bool,
+
+    /**
+     * Boolean indicating if pressing the esc key should close the overlay.
+     */
+    shouldCloseOnEscapePress: PropTypes.bool,
+
     /**
      * Width of the Dialog.
      */
@@ -179,6 +189,8 @@ class Dialog extends React.Component {
     isConfirmLoading: false,
     isConfirmDisabled: false,
     cancelLabel: 'Cancel',
+    shouldCloseOnOverlayClick: true,
+    shouldCloseOnEscapePress: true,
     onCancel: close => close(),
     onConfirm: close => close()
   }
@@ -213,6 +225,8 @@ class Dialog extends React.Component {
       isConfirmLoading,
       isConfirmDisabled,
       cancelLabel,
+      shouldCloseOnOverlayClick,
+      shouldCloseOnEscapePress,
       containerProps,
       minHeightContent
     } = this.props
@@ -230,6 +244,8 @@ class Dialog extends React.Component {
     return (
       <Overlay
         isShown={isShown}
+        shouldCloseOnClick={shouldCloseOnOverlayClick}
+        shouldCloseOnEscapePress={shouldCloseOnEscapePress}
         onExited={onCloseComplete}
         onEntered={onOpenComplete}
         containerProps={{
@@ -266,7 +282,11 @@ class Dialog extends React.Component {
                 <Heading is="h4" size={600} flex="1">
                   {title}
                 </Heading>
-                <IconButton appearance="minimal" icon="cross" onClick={close} />
+                <IconButton
+                  appearance="minimal"
+                  icon="cross"
+                  onClick={() => onCancel(close)}
+                />
               </Pane>
             )}
 

src/dialog/stories/index.stories.js

@@ -4,7 +4,7 @@ import Box from 'ui-box'
 import Component from '@reactions/component'
 import starWarsNames from 'starwars-names'
 import DialogManager from '../docs/DialogManager'
-import { Paragraph } from '../../typography'
+import { Strong, Paragraph } from '../../typography'
 import { Dialog } from '../../dialog'
 import { Button } from '../../buttons'
 import { Combobox } from '../../combobox'
@@ -180,6 +180,30 @@ storiesOf('dialog', module)
           </Box>
         )}
       </DialogManager>
+      <DialogManager>
+        {({ isShown, show, hide }) => (
+          <Box marginBottom={16}>
+            <Dialog
+              isShown={isShown}
+              shouldCloseOnOverlayClick={false}
+              shouldCloseOnEscapePress={false}
+              title="Dialog with Internal Scrolling"
+              onCloseComplete={hide}
+              onCancel={close => {
+                console.log('You canceled')
+                close()
+              }}
+            >
+              <Paragraph>
+                Resistance is futile, you shall not <Strong>esc</Strong>.
+              </Paragraph>
+            </Dialog>
+            <Button onClick={show}>
+              Show Dialog with overlay and escape key disabled
+            </Button>
+          </Box>
+        )}
+      </DialogManager>
     </Box>
   ))
   .add('Dialog with nested Combobox', () => (

src/overlay/src/Overlay.js

@@ -80,6 +80,16 @@ class Overlay extends React.Component {
      */
     containerProps: PropTypes.object,
 
+    /**
+     * Boolean indicating if clicking the overlay should close the overlay.
+     */
+    shouldCloseOnClick: PropTypes.bool,
+
+    /**
+     * Boolean indicating if pressing the esc key should close the overlay.
+     */
+    shouldCloseOnEscapePress: PropTypes.bool,
+
     /**
      * Callback fired before the "exiting" status is applied.
      * type: `Function(node: HtmlElement) -> void`
@@ -133,6 +143,8 @@ class Overlay extends React.Component {
 
   static defaultProps = {
     onHide: () => {},
+    shouldCloseOnClick: true,
+    shouldCloseOnEscapePress: true,
     onExit: () => {},
     onExiting: () => {},
     onExited: () => {},
@@ -227,7 +239,7 @@ class Overlay extends React.Component {
 
   onEsc = e => {
     // Esc key
-    if (e.keyCode === 27) {
+    if (e.keyCode === 27 && this.props.shouldCloseOnEscapePress) {
       this.close()
     }
   }
@@ -259,7 +271,7 @@ class Overlay extends React.Component {
   }
 
   handleBackdropClick = e => {
-    if (e.target !== e.currentTarget) {
+    if (e.target !== e.currentTarget || !this.props.shouldCloseOnClick) {
       return
     }
 

src/side-sheet/src/SideSheet.js

@@ -151,6 +151,16 @@ class SideSheet extends React.Component {
      */
     onOpenComplete: PropTypes.func,
 
+    /**
+     * Boolean indicating if clicking the overlay should close the overlay.
+     */
+    shouldCloseOnOverlayClick: PropTypes.bool,
+
+    /**
+     * Boolean indicating if pressing the esc key should close the overlay.
+     */
+    shouldCloseOnEscapePress: PropTypes.bool,
+
     /**
      * Width of the SideSheet.
      */
@@ -176,6 +186,8 @@ class SideSheet extends React.Component {
     width: 620,
     onCloseComplete: () => {},
     onOpenComplete: () => {},
+    shouldCloseOnOverlayClick: true,
+    shouldCloseOnEscapePress: true,
     position: Position.RIGHT
   }
 
@@ -187,12 +199,16 @@ class SideSheet extends React.Component {
       containerProps,
       onOpenComplete,
       onCloseComplete,
+      shouldCloseOnOverlayClick,
+      shouldCloseOnEscapePress,
       position
     } = this.props
 
     return (
       <Overlay
         isShown={isShown}
+        shouldCloseOnClick={shouldCloseOnOverlayClick}
+        shouldCloseOnEscapePress={shouldCloseOnEscapePress}
         onExited={onCloseComplete}
         onEntered={onOpenComplete}
       >

src/side-sheet/stories/index.stories.js

@@ -253,3 +253,26 @@ storiesOf('side-sheet', module)
       </Manager>
     </Box>
   ))
+  .add('escape + overlay click disabled', () => (
+    <Box padding={40}>
+      {(() => {
+        document.body.style.margin = '0'
+        document.body.style.height = '100vh'
+      })()}
+      <Manager isShown>
+        {({ state, setState }) => (
+          <Box>
+            <SideSheet
+              isShown={state.isShown}
+              shouldCloseOnOverlayClick={false}
+              shouldCloseOnEscapePress={false}
+              onCloseComplete={() => setState({ isShown: false })}
+            />
+            <Button onClick={() => setState({ isShown: true })}>
+              Show Side Sheet
+            </Button>
+          </Box>
+        )}
+      </Manager>
+    </Box>
+  ))