[tooltip] added test for arrow colors

semrush · Jul 10, 2024 · 21d84b6 · 21d84b6
1 parent 1c1ed67
commit 21d84b6
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/.../__image_snapshots__/tooltip-renders-correctly-with-changed-color-for-arrow.png b/.../__image_snapshots__/tooltip-renders-correctly-with-changed-color-for-arrow.png
diff --git a/semcore/tooltip/__tests__/index.test.jsx b/semcore/tooltip/__tests__/index.test.jsx
@@ -70,6 +70,21 @@ describe('Tooltip', () => {
 
     await expect(await snapshot(component)).toMatchImageSnapshot(task);
   });
+
+  test.concurrent('Renders correctly with changed color for arrow', async ({ task }) => {
+    const component = (
+      <div style={{ width: '100px', height: '100px' }}>
+        <Tooltip visible disablePortal>
+          <Tooltip.Trigger>
+            <button type='button'>Test</button>
+          </Tooltip.Trigger>
+          <Tooltip.Popper arrowBgColor={'green'} arrowShadowColor={'grey'}>text text text</Tooltip.Popper>
+        </Tooltip>
+      </div>
+    );
+
+    await expect(await snapshot(component)).toMatchImageSnapshot(task);
+  });
 });
 
 describe('Tooltip.Trigger', () => {

diff --git a/semcore/tooltip/src/Tooltip.jsx b/semcore/tooltip/src/Tooltip.jsx
@@ -180,7 +180,7 @@ function TooltipPopper(props) {
             data-popper-arrow
             use:theme={resolveColor(theme)}
             bgColor={arrowBgColor}
-            shadowColor={arrowShadowColor}
+            shadowColor={arrowShadowColor ?? arrowBgColor}
           />
         </STooltip>
       </STooltipPortalledWrapper>

diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css
@@ -72,11 +72,11 @@ SArrow[theme='warning'] {
   }
 }
 
-SArrow[bgColor] {
-  border-color: var(--bgColor);
+SArrow[bgColor][shadowColor] {
+  border-color: var(--shadowColor);
 
   &::before {
-    border-color: var(--shadowColor, --bgColor);
+    border-color: var(--bgColor);
   }
 }