Dialog Improvements (#1427)

* Major refactor of Dialog, DialogManager, Drawer & useDrawer

- `Dialog`
  - now supports all previous `DialogManager` composition capabilities
  - can be used in either an "uncontrolled" or "controlled" manner
  - _temporarily_ supports optional `content` prop until existing call sites can be updated. `content` will become **required** in next significant release.
- `DialogManager` is deprecated and all existing use cases should be replaced with `Dialog`
  - All internal use of `DialogManager` replaced with `Dialog`
- `useDrawer` is nearly a direct pass-through to `useDrawer` with the key exception being `Surface` override
- `Drawer` is nearly a direct pass-through to `Dialog` via `useDrawer` and `DialogRender`
- `useDialog` - all of the power of `Dialog` in a hook!

* Harden test-suite
* Improve storybook examples, rationalize mocks a bit more
* Improve snapshot cropping for Portal components
* Extract DrawerSurface more clearly, fix shadow
* Update DialogSurface references
* Move DOM-mapping of props to useDialog hook
ª Allow button to look "active" based on `aria-expanded` (use this within Dialog)
* Test coverage for "legacy" Dialog user
* Make interface work for "legacy" dialog prop interface as well as
* Keep typing on `controlledIsOpen` consistent

Co-authored-by: mdodgelooker

Author: Luke Bowerman

CHANGELOG.md

@@ -9,26 +9,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Added
 
-- `Select`, `SelectMulti` and `InputSearch` now support `isLoading` and `detail` prop on options
 - `Combobox` and `ComboboxMulti` `openOnClick` prop
 - `ComboboxInput` now supports `freeInput` prop
+- `MenuItem` & `MenuGroup` now use `list-item-style` to suppress bullet for list item when rendered outside of `MenuList` context.
+- `Select`, `SelectMulti` and `InputSearch` now support `isLoading` and `detail` prop on options
 - `Span` - same as `Text` without the annoying `fontSize="medium"` (inherits by default instead)
 - `Truncate` component
+- `useDialog` - all of the power of `Dialog` in a hook!
 - Visual Snapshot test for `MenuItem`, `MenuGroup`, `Status`
-- `MenuItem` & `MenuGroup` now use `list-item-style` to suppress bullet for list item when rendered outside of `MenuList` context.
 
 ## Changed
 
+- `Code`, `CodeBlock` & `Paragraph` now explicitly use `theme.colors.text` as default color
+- `Dialog`
+  - `Backdrop` is now dark (Material-esque)
+  - now supports all previous `DialogManager` composition capabilities
+  - can be used in either an "uncontrolled" or "controlled" manner
+  - _temporarily_ supports optional `content` prop until existing call sites can be updated. `content` will become **required** in next significant release.
+- `DialogManager` is deprecated and all existing use cases should be replaced with `Dialog`
+  - All internal use of `DialogManager` replaced with `Dialog`
+- `Drawer` is nearly a direct pass-through to `Dialog` via `useDrawer` and `DialogRender`
+  - `useDrawer` is nearly a direct pass-through to `useDrawer` with the key exception being `Surface` override
+- `HoverDisclosure` toggles visibility with css rather than inserting elements into the DOM
+- `InputSearch` `onChange` callback argument is now a string rather than an event
+- `InputTimeSelect` supports 20- and 60-minute intervals
+- `Span` replaced all library-internal usage of `Text` with `Span`
 - `TreeItem` now supports text truncation behavior
 - `TreeItem` now wraps long text pleasantly
 - `TreeItem` now defaults to `24px` minimum height (was previously `25px`)
-- `HoverDisclosure` toggles visibility with css rather than inserting elements into the DOM
 - `Tooltip` now has a default `maxWidth` of `30rem` (this can be overridden)
-- `Span` replaced all library-internal usage of `Text` with `Span`
-- `Code`, `CodeBlock` & `Paragraph` now explicitly use `theme.colors.text` as default color
 - `TreeItem`'s detail no longer has padding on the right side
-- `InputSearch` `onChange` callback argument is now a string rather than an event
-- `InputTimeSelect` supports 20- and 60-minute intervals
 - Brand font defaults to Roboto
 
 ### Fixed

packages/components-theme-editor/src/ThemeEditor.tsx

@@ -24,7 +24,7 @@
 
  */
 
-import { IconButton, DialogManager } from '@looker/components'
+import { IconButton, Dialog } from '@looker/components'
 import React, { FC } from 'react'
 import {
   ThemeEditorContent,
@@ -41,7 +41,7 @@ export const ThemeEditor: FC<ThemeEditorProps> = ({
   hasCustomTheme,
   updateTheme,
 }) => (
-  <DialogManager
+  <Dialog
     content={<ThemeEditorContent updateTheme={updateTheme} />}
     width="90%"
     maxWidth="90%"
@@ -53,5 +53,5 @@ export const ThemeEditor: FC<ThemeEditorProps> = ({
       color={hasCustomTheme ? 'key' : 'neutral'}
       size="small"
     />
-  </DialogManager>
+  </Dialog>
 )

packages/components/snapshots/Dialog/Long Content-snap.png

@@ -41,6 +41,7 @@ export const Button = styled(ButtonBase)`
       theme.colors[`${color}Interactive`]};
   }
 
+  &[aria-expanded='true'],
   &:active,
   &.active {
     background: ${({ theme, color = 'key' }) =>

packages/components/snapshots/Dialog/Medium Content-snap.png

@@ -39,6 +39,7 @@ export const ButtonOutline = styled(ButtonBase)`
     color: ${({ theme, color = 'key' }) => theme.colors[`${color}`]};
   }
 
+  &[aria-expanded='true'],
   &:active,
   &.active {
     background: ${({ theme, color = 'key' }) => theme.colors[`${color}Accent`]};

packages/components/snapshots/Dialog/Open-snap.png

@@ -67,6 +67,7 @@ export const ButtonTransparent = styled(ButtonBase)`
       theme.colors[`${color}Subtle`]};
   }
 
+  &[aria-expanded='true'],
   &:active,
   &.active {
     background: ${({ theme, color = 'key' }) => theme.colors[`${color}Accent`]};