fix: fixing the tooltip styles (#534)

* fix: removing the css file in favour of createGlobalStyle

* fix: fixing the linting

Author: lloydaf

jest.config.js

@@ -2,8 +2,7 @@ module.exports = {
     roots: ['<rootDir>/src'],
     transform: {
         '^.+\\.tsx?$': 'ts-jest',
-        '^.+\\.svg$': '<rootDir>/svgTransform.js',
-        '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform'
+        '^.+\\.svg$': '<rootDir>/svgTransform.js'
     },
     testRegex: '(test|spec)\\.tsx?$',
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'svg'],

package-lock.json

@@ -132,7 +132,6 @@
         "husky": "^4.2.3",
         "jest": "^26.6.3",
         "jest-axe": "^3.4.0",
-        "jest-css-modules-transform": "^4.4.2",
         "jest-date-mock": "^1.0.8",
         "jest-styled-components": "^7.0.2",
         "jscodeshift": "^0.15.0",

package.json

@@ -1,10 +1,10 @@
 import React from 'react';
+import { createGlobalStyle } from 'styled-components';
+
 import { OverlayArrow, Tooltip as AriaTooltip, TooltipTrigger, Focusable } from 'react-aria-components';
 
 import type { TooltipProps as AriaTooltipProps, TooltipTriggerComponentProps } from 'react-aria-components';
 
-import './tooltip.css';
-
 interface TooltipProps {
     children: any;
     content: string;
@@ -14,6 +14,67 @@ interface TooltipProps {
     triggerProps?: Omit<TooltipTriggerComponentProps, 'children'>;
 }
 
+const TooltipStyles = createGlobalStyle`
+    .react-aria-Tooltip {
+        box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
+        border-radius: 4px;
+        background: var(--wave-exp-color-inverse-surface);
+        color: var(--wave-exp-color-inverse-on-surface);
+        forced-color-adjust: none;
+        outline: none;
+        padding: 2px 8px;
+        max-width: 150px;
+        
+        /* fixes FF gap */
+        transform: translate3d(0, 0, 0);
+        transition: transform 200ms, opacity 200ms;
+
+        & .react-aria-OverlayArrow svg {
+            display: block;
+            fill: var(--wave-exp-color-inverse-surface);
+        }
+
+        &[data-entering],
+        &[data-exiting] {
+            transform: var(--origin);
+            opacity: 0;
+        }
+
+        &[data-placement='top'] {
+            margin-bottom: 8px;
+            
+            --origin: translateY(4px);
+        }
+
+        &[data-placement='bottom'] {
+            margin-top: 8px;
+            
+            --origin: translateY(-4px);
+            & .react-aria-OverlayArrow svg {
+                transform: rotate(180deg);
+            }
+        }
+
+        &[data-placement='right'] {
+            margin-left: 8px;
+            
+            --origin: translateX(-4px);
+            & .react-aria-OverlayArrow svg {
+                transform: rotate(90deg);
+            }
+        }
+
+        &[data-placement='left'] {
+            margin-right: 8px;
+            
+            --origin: translateX(4px);
+            & .react-aria-OverlayArrow svg {
+                transform: rotate(-90deg);
+            }
+        }
+    }
+`;
+
 const Tooltip = ({
     children,
     content,
@@ -22,19 +83,22 @@ const Tooltip = ({
     hideArrow = false,
     customTrigger = false
 }: TooltipProps) => (
-    <TooltipTrigger {...triggerProps}>
-        {customTrigger ? <Focusable>{children}</Focusable> : children}
-        <AriaTooltip {...tooltipProps}>
-            {!hideArrow && (
-                <OverlayArrow>
-                    <svg width={8} height={8} viewBox="0 0 8 8">
-                        <path d="M0 0 L4 4 L8 0" />
-                    </svg>
-                </OverlayArrow>
-            )}
-            {content}
-        </AriaTooltip>
-    </TooltipTrigger>
+    <>
+        <TooltipStyles />
+        <TooltipTrigger {...triggerProps}>
+            {customTrigger ? <Focusable>{children}</Focusable> : children}
+            <AriaTooltip {...tooltipProps}>
+                {!hideArrow && (
+                    <OverlayArrow>
+                        <svg width={8} height={8} viewBox="0 0 8 8">
+                            <path d="M0 0 L4 4 L8 0" />
+                        </svg>
+                    </OverlayArrow>
+                )}
+                {content}
+            </AriaTooltip>
+        </TooltipTrigger>
+    </>
 );
 
 export { Tooltip, TooltipProps };