Dialog clean-up Phase III (#1108)

* Deprecate Drawer
* Rename Modal* to Dialog* (externally visible)
* Rename ModalPortal to just Portal
* Cleaning up some more

Author: Luke Bowerman

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Deprecate use of `Modal` term throughout code base
 - `ModalPortal` is now `Portal`
 - `Modal*` has moved to `Dialog*`
   - `ModalContext` is now `DialogContext`
@@ -51,6 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed
 
+- `ModalHeader` no longer supports `headerIcon`
 - `Drawer` no longer available
 - `ComboboxMultiOption` prop `hideCheckMark` (instead use `indicator={false}`)
 - `CustomizableAttributes` are no longer supported

…/components/src/Dialog/ModalBackdrop.tsx …kages/components/src/Dialog/Backdrop.tsxpackages/components/src/Dialog/ModalBackdrop.tsx renamed to packages/components/src/Dialog/Backdrop.tsx packages/components/src/Dialog/ModalBackdrop.tsx renamed to packages/components/src/Dialog/Backdrop.tsx

@@ -25,16 +25,10 @@
  */
 
 import { CompatibleHTMLProps, reset } from '@looker/design-tokens'
-import {
-  OpacityProps,
-  // opacity,
-  BackgroundColorProps,
-  // backgroundColor,
-  color,
-} from 'styled-system'
+import { OpacityProps, BackgroundColorProps, color } from 'styled-system'
 import styled, { CSSObject } from 'styled-components'
 
-export interface ModalBackdropProps
+export interface BackdropProps
   extends CompatibleHTMLProps<HTMLDivElement>,
     BackgroundColorProps,
     OpacityProps {
@@ -44,9 +38,9 @@ export interface ModalBackdropProps
 
 // Backdrop styles are applied here (rather than using the inline `style={...}` prop) to ensure that
 // transitions will still apply to backdrop
-export const ModalBackdrop = styled.div.attrs((props: ModalBackdropProps) => ({
+export const Backdrop = styled.div.attrs((props: BackdropProps) => ({
   backgroundColor: props.visible ? props.backgroundColor : 'transparent',
-}))<ModalBackdropProps>`
+}))<BackdropProps>`
   ${reset}
   ${color}
 
@@ -67,7 +61,7 @@ export const ModalBackdrop = styled.div.attrs((props: ModalBackdropProps) => ({
   }
 `
 
-ModalBackdrop.defaultProps = {
+Backdrop.defaultProps = {
   backgroundColor: 'ui2',
   opacity: 0.6,
   visible: true,

packages/components/src/Dialog/Confirm/ConfirmLayout.tsx

@@ -25,7 +25,6 @@
  */
 import React, { FC, ReactElement } from 'react'
 import { ButtonProps } from '../../Button'
-import { IconProps } from '../../Icon'
 import { Paragraph } from '../../Text'
 import { DialogContent, DialogFooter, DialogHeader } from '../Layout'
 
@@ -34,12 +33,9 @@ interface ConfirmLayoutProps {
    * Header content
    */
   title: string
+
   /**
-   * Optional icon to display next to the title
-   */
-  titleIcon?: ReactElement<IconProps>
-  /**
-   * Primary modal content
+   * Primary dialog content
    */
   message: ReactElement | string
   /**
@@ -57,13 +53,10 @@ export const ConfirmLayout: FC<ConfirmLayoutProps> = ({
   primaryButton,
   message,
   title,
-  titleIcon = undefined,
 }) => {
   return (
     <>
-      <DialogHeader hideClose headerIcon={titleIcon}>
-        {title}
-      </DialogHeader>
+      <DialogHeader hideClose>{title}</DialogHeader>
       <DialogContent innerProps={{ py: 'none' }}>
         {typeof message === 'string' ? (
           <Paragraph breakword>{message}</Paragraph>

packages/components/src/Dialog/Confirm/ConfirmationDialog.tsx

@@ -27,13 +27,12 @@
 import React, { FC, useCallback, ReactElement } from 'react'
 import { StatefulColor } from '@looker/design-tokens'
 import { Button, ButtonTransparent } from '../../Button'
-import { ManagedModalProps } from '../Modal'
-import { Dialog } from '../Dialog'
+import { Dialog, DialogProps } from '../Dialog'
 import { ConfirmLayout } from './ConfirmLayout'
 
 export type ConfirmationCallback = (close: () => void) => void
 
-export interface ConfirmationProps extends ManagedModalProps {
+export interface ConfirmationProps extends DialogProps {
   /**
    * Cancel button text
    * @default 'Cancel'

packages/components/src/Dialog/Dialog.test.tsx

@@ -0,0 +1,121 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import 'jest-styled-components'
+import React from 'react'
+import {
+  assertSnapshotShallow,
+  mountWithTheme,
+} from '@looker/components-test-utils'
+import { Portal } from '../Portal'
+import { Backdrop } from './Backdrop'
+import { Dialog } from './Dialog'
+import { DialogManager } from './DialogManager'
+
+const simpleContent = (
+  <div>
+    simple content
+    <button>Done</button>
+  </div>
+)
+
+describe('Dialog', () => {
+  test('Active', () => {
+    assertSnapshotShallow(<Dialog isOpen>{simpleContent}</Dialog>)
+  })
+
+  test('Verify initial state', () => {
+    const dialog = mountWithTheme(<Dialog>{simpleContent}</Dialog>)
+
+    expect(dialog.find(Portal).exists()).toEqual(false)
+    expect(dialog.contains(simpleContent)).toBeFalsy()
+  })
+
+  test('Verify "open" prop', () => {
+    const dialog = mountWithTheme(<Dialog isOpen>{simpleContent}</Dialog>)
+
+    expect(dialog.find(Portal).exists()).toEqual(true)
+    expect(dialog.contains(simpleContent)).toBeTruthy()
+  })
+
+  describe('Dialog styled', () => {
+    const dialog = mountWithTheme(
+      <Dialog
+        isOpen
+        backdrop={{ backgroundColor: 'pink' }}
+        surfaceStyles={{ backgroundColor: 'purple' }}
+      >
+        {simpleContent}
+      </Dialog>
+    )
+
+    test('Dialog applies the backdrop styles', () => {
+      const backdrop = dialog.find(Backdrop)
+
+      expect(backdrop.exists()).toBeTruthy()
+
+      expect(backdrop.props().style).toEqual({ backgroundColor: 'pink' })
+    })
+  })
+})
+
+describe('DialogManager - click events', () => {
+  test('Trigger.click renders a backdrop, clicking backdrop closes it', () => {
+    const dialog = mountWithTheme(
+      <DialogManager content={simpleContent}>
+        {({ onClick }) => <a onClick={onClick}>Open Dialog</a>}
+      </DialogManager>
+    )
+
+    // Dialog closed
+    expect(dialog.find(Portal).exists()).toBeFalsy()
+
+    const button = dialog.find('a')
+    expect(button.exists()).toBeTruthy()
+    button.simulate('click') // Click to open
+
+    // Dialog open
+    expect(dialog.find(Portal).exists()).toBeTruthy()
+
+    const backdrop = dialog.find(Backdrop)
+    expect(backdrop.exists()).toBeTruthy()
+    window.document.body.click()
+  })
+})
+
+test('contains the content passed to it', () => {
+  const dialog = mountWithTheme(
+    <DialogManager content={simpleContent}>
+      <a>Open Dialog</a>
+    </DialogManager>
+  )
+
+  const button = dialog.find('a')
+  expect(button.exists()).toBeTruthy()
+  button.simulate('click') // Click to open
+  expect(dialog.contains(simpleContent)).toBeTruthy()
+  window.document.body.click()
+})

packages/components/src/Dialog/Modal.tsx packages/components/src/Dialog/Dialog.tsxpackages/components/src/Dialog/Modal.tsx renamed to packages/components/src/Dialog/Dialog.tsx

@@ -24,26 +24,28 @@
 
  */
 
-import React, { CSSProperties } from 'react'
+import React, { CSSProperties, FC } from 'react'
 import { CSSTransition } from 'react-transition-group'
-import { CSSObject, FlattenSimpleInterpolation } from 'styled-components'
+import { CSSObject } from 'styled-components'
 import { ResponsiveValue } from 'styled-system'
 import { Portal } from '../Portal'
 import { useFocusTrap, useScrollLock } from '../utils'
-import { ModalBackdrop } from './ModalBackdrop'
+import { Backdrop } from './Backdrop'
 import { DialogContext } from './DialogContext'
+import { Surface } from './Surface'
 
-export interface ModalSurfaceStyleProps {
-  animation?: FlattenSimpleInterpolation
-  backgroundColor: string
-  border: string
-  borderColor: string
-  borderRadius: string
-  boxShadow: string
-  color: string
-}
+export interface DialogProps {
+  /**
+   * When true, renders the Backdrop, Surface and it's contained content.
+   * @default false
+   */
+  isOpen?: boolean
+
+  /**
+   * Specify a callback to be called each time this Dialog is closed
+   */
+  onClose?: () => void
 
-export interface ManagedModalProps {
   /**
    * Optional backdrop styles to merge with the Backdrop implementation. These
    * must be a CSSProperty compatible key / value paired object. For example
@@ -66,33 +68,15 @@ export interface ManagedModalProps {
   maxWidth?: ResponsiveValue<string>
 }
 
-export interface ModalProps extends ManagedModalProps {
-  /**
-   * When true, renders the Backdrop, Surface and it's contained content.
-   * @default false
-   */
-  isOpen?: boolean
-  /**
-   * Specify a callback to be called each time this Modal is closed
-   */
-  onClose?: () => void
-}
-
-export interface ModalInternalProps extends ModalProps {
-  /**
-   * To implement Modal the Surface is supplied as a function so it can consume the animationState of the Modal.
-   * animationState will be null, 'exited', 'entering' or 'exiting' and can be used to set CSS class on Surface
-   * element to provide CSS transitions. (See DialogSurface for implementation examples)
-   */
-  render: (animationState: string) => JSX.Element
-}
-
-export function Modal({
+export const Dialog: FC<DialogProps> = ({
   backdrop,
+  children,
   isOpen,
   onClose,
-  render,
-}: ModalInternalProps) {
+  maxWidth,
+  surfaceStyles,
+  width,
+}) => {
   const {
     callbackRef: focusRef,
     disable: disableFocusTrap,
@@ -107,10 +91,14 @@ export function Modal({
     isEnabled: scrollLockEnabled,
   } = useScrollLock(isOpen, false)
 
+  const handleClose = () => {
+    onClose && onClose()
+  }
+
   return (
     <DialogContext.Provider
       value={{
-        closeModal: onClose,
+        closeModal: handleClose,
         disableFocusTrap,
         disableScrollLock,
         enableFocusTrap,
@@ -134,7 +122,7 @@ export function Modal({
               scrollRef(node)
             }}
           >
-            <ModalBackdrop
+            <Backdrop
               className={state}
               onClick={onClose}
               visible={backdrop === undefined ? true : !!backdrop}
@@ -144,7 +132,14 @@ export function Modal({
                   : undefined
               }
             />
-            {render(state)}
+            <Surface
+              style={surfaceStyles}
+              className={state}
+              width={width}
+              maxWidth={maxWidth}
+            >
+              {children}
+            </Surface>
           </Portal>
         )}
       </CSSTransition>