Deprecate Drawer, rename Modal* to Dialog* (#1105)

- Deprecate Drawer
- Rename Layout/Modal* to Layout/Dialog* (externally visible)
- Rename ModalPortal to just Portal
  - Export getPortalRoot and alias to getModalRoot

Author: Luke Bowerman

CHANGELOG.md

@@ -16,6 +16,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- `ModalPortal` is now `Portal`
+- `Modal*` has moved to `Dialog*`
+  - `ModalContext` is now `DialogContext`
+  - `ModalContent` is now `DialogContent`
+  - `ModalFooter` is now `DialogFooter`
+  - `ModalHeader` is now `DialogHeader`
+  - Aliases for the old names are in place to ease the upgrade but these aliases will be deprecated shortly
 - `Badge` now uses generated colors rather than referencing colors.palette
 - `InputText` interface simplified / narrowed
   - No longer supports typography or pseudo props
@@ -39,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed
 
+- `Drawer` no longer available
 - `ComboboxMultiOption` prop `hideCheckMark` (instead use `indicator={false}`)
 - `CustomizableAttributes` are no longer supported
 - `MenuList`, `MenuGroup` & `MenuItem` no longer supports `customizationProps`

…nents/src/Modal/Confirm/Confirm.test.tsx …ents/src/Dialog/Confirm/Confirm.test.tsxpackages/components/src/Modal/Confirm/Confirm.test.tsx renamed to packages/components/src/Dialog/Confirm/Confirm.test.tsx packages/components/src/Modal/Confirm/Confirm.test.tsx renamed to packages/components/src/Dialog/Confirm/Confirm.test.tsx

@@ -27,7 +27,7 @@ import React, { FC, ReactElement } from 'react'
 import { ButtonProps } from '../../Button'
 import { IconProps } from '../../Icon'
 import { Paragraph } from '../../Text'
-import { ModalContent, ModalFooter, ModalHeader } from '../Layout'
+import { DialogContent, DialogFooter, DialogHeader } from '../Layout'
 
 interface ConfirmLayoutProps {
   /**
@@ -61,20 +61,20 @@ export const ConfirmLayout: FC<ConfirmLayoutProps> = ({
 }) => {
   return (
     <>
-      <ModalHeader hideClose headerIcon={titleIcon}>
+      <DialogHeader hideClose headerIcon={titleIcon}>
         {title}
-      </ModalHeader>
-      <ModalContent innerProps={{ py: 'none' }}>
+      </DialogHeader>
+      <DialogContent innerProps={{ py: 'none' }}>
         {typeof message === 'string' ? (
           <Paragraph breakword>{message}</Paragraph>
         ) : (
           message
         )}
-      </ModalContent>
-      <ModalFooter>
+      </DialogContent>
+      <DialogFooter>
         {primaryButton}
         {secondaryButton}
-      </ModalFooter>
+      </DialogFooter>
     </>
   )
 }

…components/src/Modal/Confirm/Confirm.tsx …omponents/src/Dialog/Confirm/Confirm.tsxpackages/components/src/Modal/Confirm/Confirm.tsx renamed to packages/components/src/Dialog/Confirm/Confirm.tsx packages/components/src/Modal/Confirm/Confirm.tsx renamed to packages/components/src/Dialog/Confirm/Confirm.tsx

@@ -30,10 +30,10 @@ import {
   mountWithTheme,
   assertSnapshotShallow,
 } from '@looker/components-test-utils'
-import { ModalFooter, ModalHeader } from '../Layout'
+import { DialogFooter, DialogHeader } from '../Layout'
 import { SimpleContent } from '../modal.test.helpers'
 import { ModalBackdrop } from '../ModalBackdrop'
-import { ModalPortal } from '../../Modal/ModalPortal'
+import { Portal } from '../../Portal'
 import { ModalSurface } from '../ModalSurface'
 import { Dialog } from './Dialog'
 import { DialogManager } from './DialogManager'
@@ -72,15 +72,15 @@ describe('Click events', () => {
       </DialogManager>
     )
 
-    // Drawer closed
-    expect(dialog.find(ModalPortal).exists()).toBeFalsy()
+    // Dialog closed
+    expect(dialog.find(Portal).exists()).toBeFalsy()
 
     const button = dialog.find('a')
     expect(button.exists()).toBeTruthy()
     button.simulate('click') // Click to open
 
-    // Drawer open
-    expect(dialog.find(ModalPortal).exists()).toBeTruthy()
+    // Dialog open
+    expect(dialog.find(Portal).exists()).toBeTruthy()
 
     const backdrop = dialog.find(ModalBackdrop)
     expect(backdrop.exists()).toBeTruthy()
@@ -95,13 +95,13 @@ test('Dialog opens on click', () => {
     </DialogManager>
   )
 
-  expect(dialog.find(ModalPortal).exists()).toBeFalsy()
+  expect(dialog.find(Portal).exists()).toBeFalsy()
 
   const button = dialog.find('a')
   expect(button.exists()).toBeTruthy()
   button.simulate('click')
 
-  expect(dialog.find(ModalPortal).exists()).toBeTruthy()
+  expect(dialog.find(Portal).exists()).toBeTruthy()
 
   const backdrop = dialog.find(ModalBackdrop)
   expect(backdrop.exists()).toEqual(true)
@@ -147,11 +147,11 @@ describe('Dialog Styling', () => {
 test('Confirmation Dialog, Shown', () => {
   assertSnapshotShallow(
     <Dialog isOpen>
-      <ModalHeader>Are you sure you want to delete "Stuff"?</ModalHeader>
-      <ModalFooter>
+      <DialogHeader>Are you sure you want to delete "Stuff"?</DialogHeader>
+      <DialogFooter>
         <button>Yes, Delete "Stuff"</button>
         <button>Cancel</button>
-      </ModalFooter>
+      </DialogFooter>
     </Dialog>
   )
 })