[C-3811] Migrate popup to harmony (#7576)

packages/harmony/src/components/index.ts

@@ -13,3 +13,4 @@ export * from './segmented-control'
 export * from './scrollbar'
 export * from './radio'
 export * from './radio-group'
+export * from './popup-menu'

packages/harmony/src/components/layout/Popup/Popup.module.css

@@ -1,19 +1,19 @@
 .root {
   font-family: var(--harmony-font-family);
   position: absolute;
+  z-index: 20000;
 }
 
 .popup {
   background-color: var(--harmony-white);
   border-radius: var(--harmony-unit-2);
   border: 1px solid var(--harmony-neutral-light-7);
-  box-shadow: 0 16px 20px 0 var(--harmony-tile-shadow-1-alt);
   user-select: none;
 }
 
 .header {
   border: none;
-  margin-bottom: var(--harmony-unit-1);
+  margin-bottom: var(--harmony-spacing-m);
   padding-bottom: 0;
   display: flex;
   align-items: center;

packages/harmony/src/components/layout/Popup/Popup.tsx

@@ -193,6 +193,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
     anchorRef,
     checkIfClickInside,
     children,
+    className,
     isVisible,
     onAfterClose,
     onClose,
@@ -204,9 +205,11 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
     title,
     zIndex,
     containerRef,
-    portalLocation = document.body
+    portalLocation = document.body,
+    shadow = 'mid',
+    fixed
   } = props
-  const theme = useTheme()
+  const { spring, shadows } = useTheme()
 
   const handleClose = useCallback(() => {
     onClose?.()
@@ -354,11 +357,11 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
       transform: `scale(0)`,
       opacity: 0
     },
-    config: theme.spring.standard,
+    config: spring.standard,
     unique: true
   })
 
-  const rootStyle = zIndex ? { zIndex } : {}
+  const rootStyle = { zIndex, position: fixed ? ('fixed' as const) : undefined }
 
   const handleMouseLeave = useCallback(() => {
     if (dismissOnMouseLeave) {
@@ -379,7 +382,8 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
           {transitions.map(({ item, key, props }) =>
             item ? (
               <animated.div
-                className={styles.popup}
+                className={cn(styles.popup, className)}
+                css={{ boxShadow: shadows[shadow] }}
                 ref={popupRef}
                 key={key}
                 style={{

packages/harmony/src/components/layout/Popup/index.ts

@@ -1 +1,2 @@
 export { Popup } from './Popup'
+export type { PopupProps, Origin } from './types'

packages/harmony/src/components/layout/Popup/types.ts

@@ -1,11 +1,14 @@
 import type { MutableRefObject, ReactChild } from 'react'
 
+import { ShadowOptions } from 'foundations'
+
 export type Origin = {
   vertical: 'top' | 'center' | 'bottom'
   horizontal: 'left' | 'center' | 'right'
 }
 
 export type PopupProps = {
+  className?: string
   /**
    * A ref to the element whose position will be used to anchor the Popup
    */
@@ -89,4 +92,6 @@ export type PopupProps = {
    * @default document.body
    */
   portalLocation?: HTMLElement
+  shadow?: ShadowOptions
+  fixed?: boolean
 }

packages/harmony/src/components/popup-menu/PopupMenu.module.css

@@ -0,0 +1,41 @@
+.popup {
+  margin: var(--harmony-spacing-s);
+  padding: var(--harmony-spacing-s);
+}
+
+.menu {
+  all: unset;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--harmony-unit-2);
+  padding: var(--harmony-unit-2) var(--harmony-unit-3);
+  border-radius: var(--harmony-unit);
+  font-size: var(--harmony-font-m);
+  font-weight: var(--harmony-font-demi-bold);
+  color: var(--harmony-neutral);
+}
+
+.item .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--harmony-unit-5);
+  height: var(--harmony-unit-5);
+}
+
+.item path {
+  fill: var(--harmony-neutral);
+}
+
+.item:hover {
+  cursor: pointer;
+  color: var(--harmony-white);
+  background: var(--harmony-secondary);
+}
+
+.item:hover path {
+  fill: var(--harmony-white);
+}

packages/stems/src/components/PopupMenu/PopupMenu.tsx → packages/harmony/src/components/popup-menu/PopupMenu.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useCallback, useRef, useState, MouseEvent } from 'react'
 
 import cn from 'classnames'
 
-import { Popup } from 'components/Popup'
+import { Popup } from '../layout/Popup'
 
 import styles from './PopupMenu.module.css'
 import { PopupMenuItem, PopupMenuProps } from './types'
@@ -16,19 +16,17 @@ export const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(
       items,
       onClose,
       renderMenu,
-      position,
       renderTrigger,
       dismissOnMouseLeave,
       hideCloseButton,
       title,
-      titleClassName,
-      wrapperClassName,
       className,
       zIndex,
       containerRef,
       anchorOrigin,
       transformOrigin,
-      id
+      id,
+      fixed
     } = props
     const clickInsideRef = useRef<any>()
     const anchorRef = useRef<HTMLElement>(null)
@@ -81,17 +79,15 @@ export const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(
           showHeader={Boolean(title)}
           hideCloseButton={hideCloseButton}
           onClose={handlePopupClose}
-          position={position}
           ref={ref}
           title={title || ''}
-          titleClassName={titleClassName}
           zIndex={zIndex}
           containerRef={containerRef}
           transformOrigin={transformOrigin}
           anchorOrigin={anchorOrigin}
-          wrapperClassName={cn(styles.popup, wrapperClassName)}
-          className={className}
+          className={cn(styles.popup, className)}
           dismissOnMouseLeave={dismissOnMouseLeave}
+          fixed={fixed}
         >
           {renderMenu ? (
             renderMenu(items)

packages/stems/src/components/PopupMenu/types.tsx → packages/harmony/src/components/popup-menu/types.tsx

@@ -1,19 +1,17 @@
 import { ComponentProps, MouseEvent } from 'react'
 
-import { PopupProps } from '../Popup'
+import { PopupProps } from '../layout/Popup'
 
 type ApplicablePopupProps = Pick<
   PopupProps,
-  | 'position'
   | 'title'
-  | 'titleClassName'
-  | 'wrapperClassName'
   | 'className'
   | 'hideCloseButton'
   | 'zIndex'
   | 'containerRef'
   | 'transformOrigin'
   | 'anchorOrigin'
+  | 'fixed'
 >
 
 export type PopupMenuProps = {