refactor: global alert and expandable to use vanilla extract

Author: Matthias

.changeset/strong-cameras-crash.md

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

packages/ui/src/components/Expandable/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,21 +2,13 @@
 
 exports[`expandable > renders correctly opened 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  height: auto;
-}
-
-.emotion-0[data-is-animated="true"] {
-  -webkit-transition: max-height 300ms ease-out,opacity 300ms ease-out;
-  transition: max-height 300ms ease-out,opacity 300ms ease-out;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__mlltm91"
       data-is-animated="false"
+      style="--mlltm90: 300ms;"
     >
       Sample Expandable
     </div>
@@ -26,22 +18,13 @@ exports[`expandable > renders correctly opened 1`] = `
 
 exports[`expandable > renders correctly with animationDuration 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  height: auto;
-}
-
-.emotion-0[data-is-animated="true"] {
-  -webkit-transition: max-height 500ms ease-out,opacity 500ms ease-out;
-  transition: max-height 500ms ease-out,opacity 500ms ease-out;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__mlltm91"
       data-is-animated="false"
-      style="max-height: 0px; overflow: hidden;"
+      style="--mlltm90: 500ms; max-height: 0px; overflow: hidden;"
     >
       Sample Expandable
     </div>
@@ -65,22 +48,13 @@ exports[`expandable > renders correctly with animationDuration set to 0 1`] = `
 
 exports[`expandable > renders correctly with className 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  height: auto;
-}
-
-.emotion-0[data-is-animated="true"] {
-  -webkit-transition: max-height 300ms ease-out,opacity 300ms ease-out;
-  transition: max-height 300ms ease-out,opacity 300ms ease-out;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="test emotion-0 emotion-1"
+      class="test styles__mlltm91"
       data-is-animated="false"
-      style="max-height: 0px; overflow: hidden;"
+      style="--mlltm90: 300ms; max-height: 0px; overflow: hidden;"
     >
       Sample Expandable
     </div>
@@ -90,22 +64,13 @@ exports[`expandable > renders correctly with className 1`] = `
 
 exports[`expandable > renders correctly with default values 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  height: auto;
-}
-
-.emotion-0[data-is-animated="true"] {
-  -webkit-transition: max-height 300ms ease-out,opacity 300ms ease-out;
-  transition: max-height 300ms ease-out,opacity 300ms ease-out;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__mlltm91"
       data-is-animated="false"
-      style="max-height: 0px; overflow: hidden;"
+      style="--mlltm90: 300ms; max-height: 0px; overflow: hidden;"
     >
       Sample Expandable
     </div>
@@ -115,22 +80,13 @@ exports[`expandable > renders correctly with default values 1`] = `
 
 exports[`expandable > renders correctly with minHeight 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  height: auto;
-}
-
-.emotion-0[data-is-animated="true"] {
-  -webkit-transition: max-height 300ms ease-out,opacity 300ms ease-out;
-  transition: max-height 300ms ease-out,opacity 300ms ease-out;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__mlltm91"
       data-is-animated="false"
-      style="max-height: 5px; overflow: hidden;"
+      style="--mlltm90: 300ms; max-height: 5px; overflow: hidden;"
     >
       Sample Expandable
     </div>

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

@@ -1,8 +1,9 @@
 'use client'
 
-import styled from '@emotion/styled'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { ReactNode } from 'react'
 import { useEffect, useRef, useState } from 'react'
+import { animationDurationVar, expandable } from './styles.css'
 
 const ANIMATION_DURATION = 300 // in ms
 
@@ -27,17 +28,6 @@ type ExpandableProps = {
   animationDuration?: number
 }
 
-export const StyledExpandable = styled('div', {
-  shouldForwardProp: prop => !['animationDuration'].includes(prop),
-})<{ animationDuration: number }>`
-  &[data-is-animated="true"] {
-    transition:
-      max-height ${({ animationDuration }) => animationDuration}ms ease-out,
-      opacity ${({ animationDuration }) => animationDuration}ms ease-out;
-    }
-  height: auto;
-`
-
 const NoAnimationExpandable = ({
   children,
   opened,
@@ -137,15 +127,17 @@ export const AnimatedExpandable = ({
   }, [animationDuration, height, minHeight, opened, shouldBeAnimated])
 
   return (
-    <StyledExpandable
-      animationDuration={animationDuration}
-      className={className}
+    <div
+      className={`${className ? `${className} ` : ''}${expandable}`}
       data-is-animated={shouldBeAnimated && !isFirstRender.current}
       data-testid={dataTestId}
       ref={ref}
+      style={assignInlineVars({
+        [animationDurationVar]: `${animationDuration}ms`,
+      })}
     >
       {children}
-    </StyledExpandable>
+    </div>
   )
 }
 

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

@@ -0,0 +1,15 @@
+import { createVar, style } from '@vanilla-extract/css'
+
+export const animationDurationVar = createVar()
+
+export const expandable = style({
+  selectors: {
+    '&[data-is-animated="true"]': {
+      transition: `
+        max-height ${animationDurationVar} ease-out,
+        opacity ${animationDurationVar} ease-out
+      `,
+    },
+  },
+  height: 'auto',
+})