refactor(Chip): use vanilla extract (#5532)

Author: matthprost

.changeset/slimy-boats-call.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor `<Chip />` to use vanilla extract

packages/ui/src/components/Chip/ChipContext.tsx

@@ -6,6 +6,6 @@ import { createContext } from 'react'
 type ContextType = {
   isActive: boolean
   disabled: boolean
-  iconRef?: RefObject<HTMLButtonElement | null>
+  iconRef?: RefObject<HTMLDivElement | HTMLButtonElement | null>
 }
 export const ChipContext = createContext<ContextType | undefined>(undefined)

packages/ui/src/components/Chip/ChipIcon.tsx

@@ -1,30 +1,11 @@
 'use client'
 
-import styled from '@emotion/styled'
 import * as Icon from '@ultraviolet/icons'
+import type { RefObject } from 'react'
 import { useContext } from 'react'
 import type { PascalToCamelCaseWithoutSuffix } from 'src/types'
 import { ChipContext } from './ChipContext'
-
-const Container = styled.button`
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  border-radius: ${({ theme }) => theme.radii.default};
-
-  &[data-has-onclick="true"][data-active="false"]:hover{
-      background-color: ${({ theme }) => theme.colors.neutral.backgroundStrongHover};
-  }
-
-  &[data-has-onclick="true"][data-active="true"]:hover{
-      background-color: ${({ theme }) => theme.colors.primary.backgroundStrong};
-  }
-
-  &[data-disabled="true"]{
-    cursor: not-allowed;
-  }
-`
+import { buttonContainer } from './styles.css'
 
 type IconType = PascalToCamelCaseWithoutSuffix<keyof typeof Icon, 'Icon'>
 
@@ -57,27 +38,46 @@ export const ChipIcon = ({
       }Icon` as keyof typeof Icon
     ]
 
+  if (onClick) {
+    return (
+      <button
+        className={buttonContainer}
+        data-active={isActive}
+        data-disabled={disabled}
+        data-has-onclick={!!onClick && !disabled}
+        data-testid={dataTestId}
+        onClick={event => {
+          if (!disabled && onClick) {
+            event.stopPropagation()
+            onClick()
+          }
+        }}
+        ref={iconRef as RefObject<HTMLButtonElement | null>}
+      >
+        <IconUsed
+          disabled={disabled}
+          prominence={isActive ? 'stronger' : 'default'}
+          sentiment="neutral"
+          size="small"
+        />
+      </button>
+    )
+  }
+
   return (
-    <Container
-      as={onClick ? 'button' : 'div'}
+    <div
+      className={buttonContainer}
       data-active={isActive}
       data-disabled={disabled}
-      data-has-onclick={!!onClick && !disabled}
       data-testid={dataTestId}
-      onClick={event => {
-        if (!disabled && onClick) {
-          event.stopPropagation()
-          onClick()
-        }
-      }}
-      ref={iconRef}
+      ref={iconRef as RefObject<HTMLDivElement | null>}
     >
       <IconUsed
         disabled={disabled}
         prominence={isActive ? 'stronger' : 'default'}
         sentiment="neutral"
         size="small"
       />
-    </Container>
+    </div>
   )
 }