style: move inline style to file

cinnyapp · Apr 13, 2024 · 3557a83 · 3557a83
1 parent 653eefb
commit 3557a83
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 41 deletions.
diff --git a/src/components/pop-out/PopOut.css.ts b/src/components/pop-out/PopOut.css.ts
@@ -0,0 +1,19 @@
+import { style } from "@vanilla-extract/css";
+import { config } from "../../theme";
+
+export const PopOut = style({
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: config.zIndex.Max,
+  ...style,
+});
+
+export const PopOutContainer = style({
+  display: "inline-block",
+  position: "fixed",
+  maxWidth: "100vw",
+  maxHeight: "100vh",
+});
diff --git a/src/components/pop-out/PopOut.tsx b/src/components/pop-out/PopOut.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React, {
   ReactNode,
   RefCallback,
@@ -6,10 +7,10 @@ import React, {
   useLayoutEffect,
   useRef,
 } from "react";
-import { config } from "../../theme";
 import { as } from "../as";
 import { Portal } from "../portal";
 import { Align, getRelativeFixedPosition, Position } from "../util";
+import * as css from "./PopOut.css";
 
 export interface PopOutProps {
   open: boolean;
@@ -24,14 +25,14 @@ export const PopOut = as<"div", PopOutProps>(
   (
     {
       as: AsPopOut = "div",
+      className,
       open,
       position = "Bottom",
       align = "Center",
       offset = 10,
       alignOffset = 0,
       content,
       children,
-      style,
       ...props
     },
     ref
@@ -45,18 +46,18 @@ export const PopOut = as<"div", PopOutProps>(
       if (!anchor) return;
       if (!baseEl) return;
 
-      const css = getRelativeFixedPosition(
+      const pCSS = getRelativeFixedPosition(
         anchor.getBoundingClientRect(),
         baseEl.getBoundingClientRect(),
         position,
         align,
         offset,
         alignOffset
       );
-      baseEl.style.top = css.top ?? "unset";
-      baseEl.style.bottom = css.bottom ?? "unset";
-      baseEl.style.left = css.left ?? "unset";
-      baseEl.style.right = css.right ?? "unset";
+      baseEl.style.top = pCSS.top ?? "unset";
+      baseEl.style.bottom = pCSS.bottom ?? "unset";
+      baseEl.style.left = pCSS.left ?? "unset";
+      baseEl.style.right = pCSS.right ?? "unset";
     }, [position, align, offset, alignOffset]);
 
     useEffect(() => {
@@ -79,28 +80,8 @@ export const PopOut = as<"div", PopOutProps>(
         {children(handleAnchorRef)}
         <Portal>
           {open && (
-            <AsPopOut
-              style={{
-                position: "fixed",
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0,
-                zIndex: config.zIndex.Max,
-                ...style,
-              }}
-              {...props}
-              ref={ref}
-            >
-              <div
-                ref={baseRef}
-                style={{
-                  display: "inline-block",
-                  position: "fixed",
-                  maxWidth: "100vw",
-                  maxHeight: "100vh",
-                }}
-              >
+            <AsPopOut className={classNames(css.PopOut, className)} {...props} ref={ref}>
+              <div ref={baseRef} className={css.PopOutContainer}>
                 {content}
               </div>
             </AsPopOut>

diff --git a/src/components/tooltip/Tooltip.css.ts b/src/components/tooltip/Tooltip.css.ts
@@ -1,4 +1,4 @@
-import { ComplexStyleRule, keyframes } from "@vanilla-extract/css";
+import { ComplexStyleRule, keyframes, style } from "@vanilla-extract/css";
 import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
 import { color } from "../../theme/color.css";
 import { config } from "../../theme/config.css";
@@ -53,3 +53,12 @@ export const Tooltip = recipe({
 });
 
 export type TooltipVariants = RecipeVariants<typeof Tooltip>;
+
+export const TooltipProvider = style({
+  display: "inline-block",
+  position: "fixed",
+  maxWidth: "100vw",
+  maxHeight: "100vh",
+  zIndex: config.zIndex.Max,
+  pointerEvents: "none",
+});
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
@@ -9,7 +9,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { config } from "../../theme";
 import { as } from "../as";
 import { Portal } from "../portal";
 import { Align, getRelativeFixedPosition, Position } from "../util";
@@ -129,14 +128,14 @@ export const TooltipProvider = as<"div", TooltipProviderProps>(
   (
     {
       as: AsTooltipProvider = "div",
+      className,
       position = "Top",
       align = "Center",
       offset = 10,
       alignOffset = 0,
       delay = 200,
       tooltip,
       children,
-      style,
       ...props
     },
     ref
@@ -150,15 +149,7 @@ export const TooltipProvider = as<"div", TooltipProviderProps>(
           <Portal>
             <AsTooltipProvider
               role="tooltip"
-              style={{
-                display: "inline-block",
-                position: "fixed",
-                maxWidth: "100vw",
-                maxHeight: "100vh",
-                zIndex: config.zIndex.Max,
-                pointerEvents: "none",
-                ...style,
-              }}
+              className={classNames(css.TooltipProvider, className)}
               {...props}
               ref={(instance) => {
                 baseRef(instance);