refactor: menu vanilla extract (#5688)

Author: lisalupi

.changeset/four-goats-smash.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor component `Menu` to usa vanilla extract instead of Emotion

packages/ui/src/components/Menu/MenuContent.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import styled from '@emotion/styled'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type {
   ButtonHTMLAttributes,
   KeyboardEvent,
@@ -23,82 +23,21 @@ import {
 import { Popup } from '../Popup'
 import { SearchInput } from '../SearchInput'
 import { Stack } from '../Stack'
-import { SIZES } from './constants'
 import { getListItem, searchChildren } from './helpers'
 import { DisclosureContext, useMenu } from './MenuProvider'
+import {
+  heightAvailableSpace,
+  heightMenu,
+  menu,
+  menuContent,
+  menuFooter,
+  menuList,
+  menuSearchInput,
+} from './styles.css'
 import type { MenuProps } from './types'
 
 const SPACE_DISCLOSURE_POPUP = 24 // in px
 
-const StyledPopup = styled(Popup, {
-  shouldForwardProp: prop => !['searchable'].includes(prop),
-})<{ searchable: boolean }>`
-  background-color: ${({ theme }) =>
-    theme.colors.other.elevation.background.raised};
-  box-shadow: ${({ theme }) =>
-    `${theme.shadows.raised[0]}, ${theme.shadows.raised[1]}`};
-  padding: 0;
-
-  &[data-has-arrow='true'] {
-    &::after {
-      border-color: ${({ theme }) =>
-        theme.colors.other.elevation.background.raised}
-        transparent transparent transparent;
-    }
-  }
-
-  min-width: ${SIZES.small};
-  max-width: ${SIZES.large};
-
-  ${({ searchable }) => (searchable ? `min-width: 20rem` : null)};
-  padding: ${({ theme }) => `${theme.space['0.25']} 0`};
-
-`
-
-const Content = styled(Stack)`
-overflow: auto;
-`
-
-const Footer = styled(Stack)`
-  padding: ${({ theme }) => theme.space['1']};
-`
-
-const MenuList = styled(Stack, {
-  shouldForwardProp: prop => !['height', 'heightAvailableSpace'].includes(prop),
-})<{ height: string; heightAvailableSpace: string }>`
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: ${({ theme, height, heightAvailableSpace }) =>
-    `calc(min(${height}, ${heightAvailableSpace}) - ${theme.space['0.5']})`};
-
-  &:after,
-  &:before {
-    border: solid transparent;
-    border-width: 9px;
-    content: ' ';
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-  }
-
-  &:after {
-    border-color: transparent;
-  }
-  &:before {
-    border-color: transparent;
-  }
-  background-color: ${({ theme }) =>
-    theme.colors.other.elevation.background.raised};
-  color: ${({ theme }) => theme.colors.neutral.text};
-  border-radius: ${({ theme }) => theme.radii.default};
-  position: relative;
-`
-
-const StyledSearchInput = styled(SearchInput)`
-  padding: ${({ theme }) => theme.space['1']};
-`
-
 export const Menu = forwardRef(
   (
     {
@@ -274,17 +213,16 @@ export const Menu = forwardRef(
     }, [isVisible, portalTarget, disclosureRef, placement, noShrink])
 
     return (
-      <StyledPopup
+      <Popup
         align={align}
         aria-label={ariaLabel}
-        className={className}
-        data-has-arrow={hasArrow}
+        className={`${className ? `${className} ` : ''}${menu({ arrow: hasArrow, searchable })}`}
         debounceDelay={triggerMethod === 'hover' ? 250 : 0}
         dynamicDomRendering={dynamicDomRendering}
         hasArrow={hasArrow}
         hideOnClickOutside
         id={finalId}
-        maxHeight={maxHeight ?? '30rem'}
+        maxHeight={maxHeight ?? 'fit-content'}
         onClose={() => {
           setIsVisible(false)
           setLocalChild(null)
@@ -298,38 +236,40 @@ export const Menu = forwardRef(
         portalTarget={portalTarget}
         ref={menuRef}
         role="dialog"
-        searchable={searchable}
         tabIndex={-1}
         text={
-          <MenuList
-            className={className}
+          <Stack
+            className={`${className ? `${className} ` : ''}${menuList}`}
             data-testid={dataTestId}
-            height={maxHeight ?? '30rem'}
-            heightAvailableSpace={popupMaxHeight}
             onKeyDown={handleKeyDown}
             onMouseEnter={() => setShouldBeVisible(true)}
             onMouseLeave={() => setShouldBeVisible(false)}
             role="menu"
+            style={assignInlineVars({
+              [heightMenu]: maxHeight ?? '30rem',
+              [heightAvailableSpace]: popupMaxHeight,
+            })}
           >
-            <Content ref={contentRef}>
+            <Stack className={menuContent} ref={contentRef}>
               {searchable && typeof children !== 'function' ? (
-                <StyledSearchInput
+                <SearchInput
+                  className={menuSearchInput}
                   onSearch={onSearch}
                   ref={searchInputRef}
                   size="small"
                 />
               ) : null}
               {finalChild}
-            </Content>
-            {footer ? <Footer>{footer}</Footer> : null}
-          </MenuList>
+            </Stack>
+            {footer ? <Stack className={menuFooter}>{footer}</Stack> : null}
+          </Stack>
         }
         visible={triggerMethod === 'click' ? isVisible : shouldBeVisible}
       >
         <DisclosureContext.Provider value>
           {finalDisclosure}
         </DisclosureContext.Provider>
-      </StyledPopup>
+      </Popup>
     )
   },
 )

packages/ui/src/components/Menu/components/Group.tsx

@@ -1,15 +1,10 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
 import { Children } from 'react'
 import { Stack } from '../../Stack'
 import { Text } from '../../Text'
-
-const Container = styled.span`
-  padding: ${({ theme }) => `${theme.space['0.5']} ${theme.space['1.5']}`};
-  text-align: left;
-`
+import { menuGroup } from '../styles.css'
 
 type GroupProps = {
   label: string
@@ -31,7 +26,7 @@ export const Group = ({
 
   return (
     <>
-      <Container>
+      <span className={menuGroup}>
         <Stack alignItems="center" direction="row" gap={1}>
           <Text
             as="span"
@@ -43,7 +38,7 @@ export const Group = ({
           </Text>
           {labelDescription || null}
         </Stack>
-      </Container>
+      </span>
       {isChildrenEmpty && emptyState ? emptyState : children}
     </>
   )