[C-3833] Migrate modal to harmony (#7596)

packages/harmony/src/components/index.ts

@@ -14,3 +14,4 @@ export * from './scrollbar'
 export * from './radio'
 export * from './radio-group'
 export * from './popup-menu'
+export * from './modal'

packages/stems/src/components/Modal/Modal.module.css → packages/harmony/src/components/modal/Modal.module.css

@@ -1,4 +1,4 @@
-@value lg-min from "../../assets/styles/breakpoints.css";
+@value xl-min: 1440px;
 
 :global(.bgModal) {
   background-color: rgba(0, 0, 0, 0.6);
@@ -36,7 +36,7 @@
   height: 100%;
   width: 100%;
   pointer-events: none;
-  z-index: var(--layer-modal);
+  z-index: var(--harmony-layer-modal);
   overflow: hidden;
   top: 0;
 }
@@ -47,7 +47,7 @@
   height: 100%;
   width: 100%;
   pointer-events: none;
-  z-index: var(--layer-modal);
+  z-index: var(--harmony-layer-modal);
   overflow: hidden;
   top: 0;
 }
@@ -57,7 +57,7 @@
   top: 0;
   width: 100vw;
   min-height: 100vh;
-  z-index: var(--layer-modal);
+  z-index: var(--harmony-layer-modal);
   user-select: none;
   display: flex;
   justify-content: center;
@@ -66,7 +66,7 @@
 
 .body {
   border-radius: 6px;
-  background-color: var(--white);
+  background-color: var(--harmony-white);
   overflow-y: auto;
   overflow-x: hidden;
   max-height: 85vh;
@@ -104,7 +104,7 @@
 .headerContainer {
   display: flex;
   flex-direction: column;
-  border-bottom: 1px solid var(--neutral-light-6);
+  border-bottom: 1px solid var(--harmony-n-200);
   padding: 20px 0px;
 }
 
@@ -114,18 +114,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
-  color: var(--neutral);
+  font-size: var(--harmony-font-l);
+  font-weight: var(--harmony-font-bold);
+  color: var(--harmony-neutral);
   margin: 0px 16px 0px;
   white-space: nowrap;
 }
 
 /** @deprecated */
 .subtitle {
-  font-size: var(--font-s);
-  font-weight: var(--font-medium);
-  color: var(--neutral-light-4);
+  font-size: var(--harmony-font-s);
+  font-weight: var(--harmony-font-medium);
+  color: var(--harmony-n-400);
   text-align: center;
   line-height: 18px;
 }
@@ -141,7 +141,7 @@
 
 /** @deprecated */
 .dismissButton path {
-  fill: var(--neutral-light-4);
+  fill: var(--harmony-n-400);
 }
 
 .sizeSmall {

packages/stems/src/components/Modal/Modal.tsx → packages/harmony/src/components/modal/Modal.tsx

@@ -8,6 +8,7 @@ import {
   useRef
 } from 'react'
 
+import { useTheme } from '@emotion/react'
 import cn from 'classnames'
 import { capitalize } from 'lodash'
 import uniqueId from 'lodash/uniqueId'
@@ -16,15 +17,14 @@ import ReactDOM from 'react-dom'
 import { animated, useTransition } from 'react-spring'
 import { useEffectOnce } from 'react-use'
 
-import { IconRemove } from 'components/Icons'
 import { useClickOutside } from 'hooks/useClickOutside'
-import { useHotkeys } from 'hooks/useHotKeys'
-import { useScrollLock } from 'hooks/useScrollLock'
-import { findAncestor } from 'utils/findAncestor'
-import { standard } from 'utils/transitions'
+
+import { useHotkeys, useScrollLock } from '../../hooks'
+import { IconClose } from '../../icons'
 
 import styles from './Modal.module.css'
 import { ModalContext } from './ModalContext'
+import { findAncestor } from './findAncestor'
 import { useModalScrollCount } from './hooks'
 import { ModalProps, Anchor } from './types'
 
@@ -149,6 +149,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
     }
   })
 
+  const { spring } = useTheme()
   const id = useMemo(() => modalKey || uniqueId('modal-'), [modalKey])
   const titleId = ariaLabelledbyProp || `${id}-title`
   const subtitleId = ariaDescribedbyProp || `${id}-subtitle`
@@ -207,7 +208,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
       },
     leave: { transform: 'scale(0)', opacity: 0 },
     unique: true,
-    config: standard,
+    config: spring.standard,
     onDestroyed: () => {
       if (!isOpen) {
         setIsDestroyed(false)
@@ -347,7 +348,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
                                 className={styles.dismissButton}
                                 onClick={onClose}
                               >
-                                <IconRemove />
+                                <IconClose />
                               </div>
                             )}
                             <div

packages/stems/src/components/Modal/ModalContent.module.css → packages/harmony/src/components/modal/ModalContent.module.css

@@ -1,5 +1,5 @@
 .modalContentContainer {
-  padding: var(--unit-6);
+  padding: var(--harmony-unit-6);
   overflow-y: auto;
   flex: 1 1 auto;
 }

packages/stems/src/components/Modal/ModalContent.tsx → packages/harmony/src/components/modal/ModalContent.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react'
 
 import cn from 'classnames'
 
-import { Scrollbar } from 'components/Scrollbar'
+import { Scrollbar } from '../scrollbar'
 
 import styles from './ModalContent.module.css'
 import { ModalContext } from './ModalContext'

packages/stems/src/components/Modal/ModalContentPages.module.css → packages/harmony/src/components/modal/ModalContentPages.module.css

@@ -22,6 +22,6 @@
 }
 
 .nestedModalContent {
-  padding-top: var(--unit-6);
-  padding-bottom: var(--unit-6);
+  padding-top: var(--harmony-unit-6);
+  padding-bottom: var(--harmony-unit-6);
 }

packages/harmony/src/components/modal/ModalContentText.module.css

@@ -0,0 +1,6 @@
+.root {
+  font-size: var(--harmony-font-l);
+  font-weight: var(--harmony-font-medium);
+  line-height: 1.5;
+  color: var(--harmony-neutral);
+}

packages/stems/src/components/Modal/ModalFooter.module.css → packages/harmony/src/components/modal/ModalFooter.module.css

@@ -3,6 +3,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: var(--unit-6);
-  padding-top: var(--unit-6);
+  padding-bottom: var(--harmony-unit-6);
+  padding-top: var(--harmony-unit-6);
 }

packages/harmony/src/components/modal/ModalHeader.module.css

@@ -0,0 +1,63 @@
+.modalContentContainer {
+  padding: var(--harmony-unit-6);
+}
+
+.headerContainer {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--harmony-n-100);
+  padding: var(--harmony-unit-6) 0;
+  margin: 0 var(--harmony-unit-6);
+}
+
+.dismissButton {
+  z-index: 1;
+  position: absolute;
+  color: var(--harmony-n-600);
+}
+
+.titleContainer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: var(--harmony-unit-7);
+  margin-right: var(--harmony-unit-7);
+  color: var(--harmony-n-600);
+}
+
+.titleContainer.noDismissButton {
+  margin-right: var(--harmony-unit-4);
+}
+
+.title {
+  margin: 0;
+  display: inline;
+  font-size: var(--harmony-font-xl);
+  font-weight: var(--harmony-font-heavy);
+  color: var(--harmony-n-600);
+  text-transform: uppercase;
+}
+
+.subtitleContainer {
+  text-align: center;
+  line-height: 18px;
+}
+
+.subtitle {
+  margin: 0;
+  display: inline;
+  font-size: var(--harmony-font-s);
+  font-weight: var(--harmony-font-medium);
+  color: var(--harmony-n-600);
+}
+
+.icon {
+  display: inline;
+  margin-right: 10px;
+}
+
+.icon path {
+  fill: var(--harmony-n-600);
+}

packages/stems/src/components/Modal/ModalHeader.tsx → packages/harmony/src/components/modal/ModalHeader.tsx

@@ -2,8 +2,8 @@ import { useContext, forwardRef, useCallback } from 'react'
 
 import cn from 'classnames'
 
-import { IconButton } from 'components/IconButton/IconButton'
-import { IconRemove } from 'components/Icons'
+import { IconClose } from '../../icons'
+import { IconButton } from '../button'
 
 import { ModalContext } from './ModalContext'
 import styles from './ModalHeader.module.css'
@@ -45,7 +45,7 @@ export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
           <IconButton
             aria-label='dismiss dialog'
             className={cn(styles.dismissButton, dismissButtonClassName)}
-            icon={<IconRemove />}
+            icon={IconClose}
             onClick={handleClose}
           />
         ) : null}

packages/harmony/src/components/modal/findAncestor.ts

@@ -0,0 +1,17 @@
+/**
+ * Legacy browser support for `Element.closest`
+ * @param el
+ * @param selector query selector
+ */
+export const findAncestor = (el: Element | null, selector: string) => {
+  if (el !== null && el.closest) {
+    return el.closest(selector)
+  }
+  // Fall back to just looping back through parents
+  while (
+    (el = el?.parentElement ?? null) &&
+    // @ts-ignore
+    !(el.matches || el.matchesSelector).call(el, selector)
+  );
+  return el
+}

packages/stems/src/components/Modal/types.ts → packages/harmony/src/components/modal/types.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react'
 
-import { ScrollbarProps } from 'components/Scrollbar'
+import { ScrollbarProps } from '../scrollbar'
 
 export enum Anchor {
   CENTER = 'CENTER',

packages/harmony/src/components/scrollbar/Scrollbar.module.css

@@ -5,12 +5,12 @@
 
 .scrollbar :global(.ps__thumb-y) {
   opacity: 0.5;
-  background-color: var(--neutral-dark-3);
+  background-color: var(--harmony-n-950);
 }
 
 .scrollbar :global(.ps__rail-y) {
-  margin-top: var(--unit);
-  margin-bottom: var(--unit);
+  margin-top: var(--harmony-unit-1);
+  margin-bottom: var(--harmony-unit-1);
   transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 

packages/harmony/src/foundations/layers/layers.css

@@ -0,0 +1,7 @@
+:root,
+root {
+  --harmony-layer: 0;
+  --harmony-layer-modal: 10000;
+  --harmony-layer-popup: 20000;
+  --harmony-layer-tooltip: 30000;
+}

packages/harmony/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useClickOutside'
+export * from './useControlled'
+export * from './useHotKeys'
+export * from './useMediaQueryListener'
+export * from './useScrollLock'