refactor: dialog vanilla extract (#5705)

Author: lisalupi

.changeset/nice-showers-bet.md

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

packages/ui/src/components/Dialog/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import styled from '@emotion/styled'
 import { AlertCircleIcon, CheckIcon } from '@ultraviolet/icons'
 import type { ComponentProps } from 'react'
 import { useMemo } from 'react'
@@ -15,20 +14,10 @@ import { DialogCancelButton } from './components/CancelButton'
 import { DialogStack } from './components/Stack'
 import { DialogText } from './components/Text'
 import type { DialogSentiment } from './constants'
+import { dialogTitle, dialogXsmall } from './styles.css'
 
 const DIALOG_SIZE = 'xsmall'
 
-const StyledTextTitle = styled(Text)`
-  margin-top: ${({ theme }) => theme.space['2']};
-  margin-bottom: ${({ theme }) => theme.space['1']};
-`
-
-const StyledModal = styled(Modal)`
-    &[data-size="${DIALOG_SIZE}"] {
-      width: 32.5rem; // size is on purpose different than a modal
-    }
-`
-
 type DialogProps = Pick<
   ComponentProps<typeof Modal>,
   | 'ariaLabel'
@@ -75,13 +64,14 @@ export const BaseDialog = ({
           <CheckIcon />
         )}
       </Bullet>
-      <StyledTextTitle
+      <Text
         as="h2"
+        className={dialogTitle}
         sentiment="neutral"
         variant="headingSmallStronger"
       >
         {title}
-      </StyledTextTitle>
+      </Text>
     </>
   )
 
@@ -93,9 +83,9 @@ export const BaseDialog = ({
   )
 
   return (
-    <StyledModal
+    <Modal
       ariaLabel={ariaLabel}
-      className={className}
+      className={`${className ? `${className} ` : ''}${dialogXsmall}`}
       data-testid={dataTestId}
       disclosure={disclosure}
       hideOnClickOutside={hideOnClickOutside}
@@ -121,7 +111,7 @@ export const BaseDialog = ({
           </DialogContext.Provider>
         )
       }
-    </StyledModal>
+    </Modal>
   )
 }
 

packages/ui/src/components/Dialog/styles.css.ts

@@ -0,0 +1,9 @@
+import { theme } from '@ultraviolet/themes'
+import { style } from '@vanilla-extract/css'
+
+export const dialogTitle = style({
+  marginTop: theme.space[2],
+  marginBottom: theme.space[1],
+})
+
+export const dialogXsmall = style({ width: '32.5rem' })