Migrate Menu component from emotion styled-components to vanilla-extract

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

@@ -1,6 +1,6 @@
 'use client'
 
-import styled from '@emotion/styled'
+import { theme } from '@ultraviolet/themes'
 import type {
   ButtonHTMLAttributes,
   KeyboardEvent,
@@ -26,79 +26,17 @@ import { Stack } from '../Stack'
 import { SIZES } from './constants'
 import { getListItem, searchChildren } from './helpers'
 import { DisclosureContext, useMenu } from './MenuProvider'
+import {
+  content,
+  footer,
+  menuList,
+  styledPopup,
+  styledSearchInput,
+} 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,10 +212,10 @@ export const Menu = forwardRef(
     }, [isVisible, portalTarget, disclosureRef, placement, noShrink])
 
     return (
-      <StyledPopup
+      <Popup
         align={align}
         aria-label={ariaLabel}
-        className={className}
+        className={`${styledPopup({ searchable })} ${className || ''}`.trim()}
         data-has-arrow={hasArrow}
         debounceDelay={triggerMethod === 'hover' ? 250 : 0}
         dynamicDomRendering={dynamicDomRendering}
@@ -298,38 +236,40 @@ export const Menu = forwardRef(
         portalTarget={portalTarget}
         ref={menuRef}
         role="dialog"
-        searchable={searchable}
         tabIndex={-1}
         text={
-          <MenuList
-            className={className}
+          <Stack
+            className={menuList()}
             data-testid={dataTestId}
-            height={maxHeight ?? '30rem'}
-            heightAvailableSpace={popupMaxHeight}
             onKeyDown={handleKeyDown}
             onMouseEnter={() => setShouldBeVisible(true)}
             onMouseLeave={() => setShouldBeVisible(false)}
             role="menu"
+            style={{
+              maxHeight: `calc(min(${maxHeight ?? '30rem'}, ${popupMaxHeight}) - ${theme.space['0.5']})`,
+              padding: `${theme.space['0.25']} 0`,
+            }}
           >
-            <Content ref={contentRef}>
+            <Stack className={content} ref={contentRef}>
               {searchable && typeof children !== 'function' ? (
-                <StyledSearchInput
+                <SearchInput
+                  className={styledSearchInput}
                   onSearch={onSearch}
                   ref={searchInputRef}
                   size="small"
                 />
               ) : null}
               {finalChild}
-            </Content>
-            {footer ? <Footer>{footer}</Footer> : null}
-          </MenuList>
+            </Stack>
+            {footer ? <Stack className={footer}>{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 { groupContainer } from '../styles.css'
 
 type GroupProps = {
   label: string
@@ -31,7 +26,7 @@ export const Group = ({
 
   return (
     <>
-      <Container>
+      <span className={groupContainer}>
         <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}
     </>
   )

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

@@ -1,7 +1,5 @@
 'use client'
 
-import type { Theme } from '@emotion/react'
-import styled from '@emotion/styled'
 import { ArrowRightIcon } from '@ultraviolet/icons'
 import type {
   KeyboardEvent,
@@ -15,105 +13,10 @@ import { Stack } from '../../Stack'
 import { Tooltip } from '../../Tooltip'
 import { getListItem } from '../helpers'
 import { useDisclosureContext, useMenu } from '../MenuProvider'
+import { itemContainer, styledItem, styledLinkItem } from '../styles.css'
 
 type MenuItemSentiment = 'neutral' | 'primary' | 'danger'
 
-const ANIMATION_DURATION = 200 // in ms
-
-const itemCoreStyle = ({
-  theme,
-  sentiment,
-  disabled,
-}: {
-  theme: Theme
-  borderless: boolean
-  sentiment: MenuItemSentiment
-  disabled: boolean
-}) => `
-  display: flex;
-  justify-content: start;
-  text-align: left;
-  align-items: center;
-  min-height: ${theme.sizing['400']};
-  max-height: ${theme.sizing['500']};
-  font-size: ${theme.typography.bodySmall.fontSize};
-  line-height: ${theme.typography.bodySmall.lineHeight};
-  font-weight: inherit;
-  padding: ${`${theme.space['0.5']} ${theme.space['1']}`};
-  border: none;
-  cursor: pointer;
-  min-width: 6.875rem;
-  width: 100%;
-  border-radius: ${theme.radii.default};
-  transition: background-color ${ANIMATION_DURATION}ms, color ${ANIMATION_DURATION}ms;
-
-  color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  svg {
-    fill: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
-  }
-
-  ${
-    disabled
-      ? `
-        cursor: not-allowed;
-      `
-      : `
-          &:hover,
-          &:focus-visible, &[data-active='true'] {
-            background-color: ${theme.colors[sentiment].backgroundHover};
-            color: ${theme.colors[sentiment].textHover};
-            svg {
-              fill: ${theme.colors[sentiment].textHover};
-            }
-          }`
-  }
-`
-
-const Container = styled('div', {
-  shouldForwardProp: prop => !['borderless'].includes(prop),
-})<{ borderless: boolean }>`
-  ${({ theme, borderless }) =>
-    borderless
-      ? ''
-      : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
-  padding: ${({ theme, borderless }) =>
-    `${borderless ? theme.space['0.25'] : theme.space['0.5']} ${
-      theme.space['0.5']
-    }`};
-  &:last-child {
-    border: none;
-  }
-  width: 100%;
-`
-
-const StyledItem = styled('button', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-})<{
-  borderless: boolean
-  disabled: boolean
-  sentiment: MenuItemSentiment
-}>`
-  ${({ theme, borderless, sentiment, disabled }) =>
-    itemCoreStyle({ borderless, disabled, sentiment, theme })}
-  background: none;
-`
-
-const StyledLinkItem = styled('a', {
-  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
-})<{
-  borderless: boolean
-  disabled: boolean
-  sentiment: MenuItemSentiment
-}>`
-  ${({ theme, borderless, sentiment, disabled }) =>
-    itemCoreStyle({ borderless, disabled, sentiment, theme })}
-  text-decoration: none;
-
-  &:focus {
-    text-decoration: none;
-  }
-`
-
 type ItemProps = {
   href?: HTMLAnchorElement['href']
   target?: HTMLAnchorElement['target']
@@ -221,23 +124,20 @@ const Item = forwardRef<HTMLElement, ItemProps>(
 
     if (href && !disabled) {
       return (
-        <Container borderless={borderless} data-search-text={searchText}>
+        <div className={itemContainer({ borderless })} data-search-text={searchText}>
           <Tooltip text={tooltip}>
-            <StyledLinkItem
-              borderless
-              className={className}
+            <a
+              className={`${styledLinkItem({ sentiment, disabled })} ${className || ''}`.trim()}
               data-active={active}
               data-is-disclosure={isDisclosure}
               data-is-menu-item
               data-testid={dataTestId}
-              disabled={disabled}
               href={href}
               onClick={onClickHandle}
               onKeyDown={handleKeyDown}
               ref={ref as Ref<HTMLAnchorElement>}
               rel={rel}
               role="menuitem"
-              sentiment={sentiment}
               target={target}
             >
               {isDisclosure ? (
@@ -252,18 +152,17 @@ const Item = forwardRef<HTMLElement, ItemProps>(
               ) : (
                 children
               )}
-            </StyledLinkItem>
+            </a>
           </Tooltip>
-        </Container>
+        </div>
       )
     }
 
     return (
-      <Container borderless={borderless} data-search-text={searchText}>
+      <div className={itemContainer({ borderless })} data-search-text={searchText}>
         <Tooltip text={tooltip}>
-          <StyledItem
-            borderless={borderless}
-            className={className}
+          <button
+            className={`${styledItem({ sentiment, disabled })} ${className || ''}`.trim()}
             data-active={active || (isVisible && isDisclosure)}
             data-is-disclosure={isDisclosure}
             data-is-menu-item
@@ -278,7 +177,6 @@ const Item = forwardRef<HTMLElement, ItemProps>(
             onKeyDown={handleKeyDown}
             ref={ref as Ref<HTMLButtonElement>}
             role="menuitem"
-            sentiment={sentiment}
             type="button"
           >
             {isDisclosure ? (
@@ -293,9 +191,9 @@ const Item = forwardRef<HTMLElement, ItemProps>(
             ) : (
               children
             )}
-          </StyledItem>
+          </button>
         </Tooltip>
-      </Container>
+      </div>
     )
   },
 )