tooltip tests

.vscode/tasks.json

@@ -11,7 +11,7 @@
             "detail": "start local dev server",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -31,7 +31,7 @@
             "detail": "start local dev server for POA network",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -51,7 +51,7 @@
             "detail": "start local dev server for Goerli network",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -77,7 +77,7 @@
             },
             "presentation": {
                 "reveal": "never",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -91,7 +91,7 @@
             "detail": "run eslint",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "revealProblems": "onProblem",
             },
             "icon": {
@@ -112,7 +112,7 @@
             "detail": "run visual components tests for current file",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -131,7 +131,7 @@
             "detail": "run visual components tests for current file",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -150,7 +150,7 @@
             "detail": "run visual components tests",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -171,7 +171,7 @@
             "detail": "run jest tests",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -190,7 +190,7 @@
             "detail": "run jest tests in watch mode",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "focus": true,
             },
@@ -210,7 +210,7 @@
             "detail": "run jest tests in watch mode for current file",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "focus": true,
             },
             "icon": {
@@ -230,7 +230,7 @@
             "detail": "build docker image",
             "presentation": {
                 "reveal": "always",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
                 "focus": true,
@@ -251,7 +251,7 @@
             "detail": "run docker container for POA network",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },
@@ -271,7 +271,7 @@
             "detail": "format svg files with svgo",
             "presentation": {
                 "reveal": "silent",
-                "panel": "dedicated",
+                "panel": "shared",
                 "close": true,
                 "revealProblems": "onProblem",
             },

theme/components/Tooltip/Tooltip.pw.tsx

+import { Box, Tooltip, Icon } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+test('base view +@dark-mode', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <Box m={ 10 }>
+        <Tooltip label="Tooltip content">
+          trigger
+        </Tooltip>
+      </Box>
+    </TestApp>,
+  );
+
+  await component.getByText(/trigger/i).hover();
+
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 40, width: 130, height: 64 } });
+});
+
+// was not able to reproduce in tests issue when Icon is used as trigger for tooltip
+// https://github.com/chakra-ui/chakra-ui/issues/7107
+test.skip('with icon', async({ mount, page }) => {
+  const component = await mount(
+    <TestApp>
+      <Box m={ 10 }>
+        <Tooltip label="Tooltip content">
+          <Icon viewBox="0 0 20 20" boxSize={ 5 } aria-label="Trigger">
+            <circle cx="10" cy="10" r="10"/>
+          </Icon>
+        </Tooltip>
+      </Box>
+    </TestApp>,
+  );
+
+  const tooltip = page.getByText(/tooltip content/i);
+  expect(await tooltip.isVisible()).toBe(false);
+
+  await component.locator('svg[aria-label="Trigger"]').hover();
+  expect(await tooltip.isVisible()).toBe(true);
+});

theme/components/Tooltip.ts → theme/components/Tooltip/Tooltip.ts

@@ -2,8 +2,6 @@ import { Tooltip as TooltipComponent } from '@chakra-ui/react';
 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import { mode, cssVar } from '@chakra-ui/theme-tools';
 
-// these cause console warning about kebab-case in naming of css variables
-// but the chakra-ui itself uses the same variable names, and i guess we cannot override them
 const $bg = cssVar('tooltip-bg');
 const $fg = cssVar('tooltip-fg');
 const $arrowBg = cssVar('popper-arrow-bg');
@@ -33,9 +31,9 @@ const baseStyle = defineStyle((props) => {
 
   return {
     bg: $bg.reference,
-    color: mode('white', 'black')(props),
+    color: $fg.reference,
     [$bg.variable]: `colors.${ bg }`,
-    [$fg.reference]: `colors.${ fg }`,
+    [$fg.variable]: `colors.${ fg }`,
     [$arrowBg.variable]: $bg.reference,
     maxWidth: props.maxWidth || props.maxW || 'unset',
   };

theme/components/index.ts

@@ -19,7 +19,7 @@ import Tabs from './Tabs';
 import Tag from './Tag';
 import Text from './Text';
 import Textarea from './Textarea';
-import Tooltip from './Tooltip';
+import Tooltip from './Tooltip/Tooltip';
 
 const components = {
   Alert,