Merge pull request #597 from catho/QTM-402

fix(QTM-402): Correction in the display of emoji instead of the balloon position indicator arrow
catho · Jan 17, 2025 · 191b468 · 191b468
2 parents f7b10c4 + c07e23f
commit 191b468
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/components/Popover/__snapshots__/Popover.unit.test.jsx.snap b/components/Popover/__snapshots__/Popover.unit.test.jsx.snap
@@ -117,7 +117,7 @@ exports[`Popover component should match snapshots 1`] = `
   color: #ffffff;
   font-size: 16px;
   position: absolute;
-  content: '▼';
+  content: '▼︎';
   left: 50%;
   text-shadow: 0px 8px 4px rgba(66,66,66,0.2);
   bottom: 0;
@@ -314,7 +314,7 @@ exports[`Popover component should match snapshots 2`] = `
   color: #ffffff;
   font-size: 16px;
   position: absolute;
-  content: '▼';
+  content: '▼︎';
   left: 50%;
   text-shadow: 0px 8px 4px rgba(66,66,66,0.2);
   bottom: 0;
@@ -515,7 +515,7 @@ exports[`Popover component should match snapshots 3`] = `
   color: #dcedc8;
   font-size: 16px;
   position: absolute;
-  content: '▼';
+  content: '▼︎';
   left: 50%;
   text-shadow: 0px 8px 4px rgba(66,66,66,0.2);
   bottom: 0;
@@ -720,7 +720,7 @@ exports[`Popover component should match snapshots 4`] = `
   color: #ffefd6;
   font-size: 16px;
   position: absolute;
-  content: '▼';
+  content: '▼︎';
   left: 50%;
   text-shadow: 0px 8px 4px rgba(66,66,66,0.2);
   bottom: 0;
@@ -929,7 +929,7 @@ exports[`Popover component should match snapshots 5`] = `
   color: #fff5f5;
   font-size: 16px;
   position: absolute;
-  content: '▼';
+  content: '▼︎';
   left: 50%;
   text-shadow: 0px 8px 4px rgba(66,66,66,0.2);
   bottom: 0;
@@ -1139,7 +1139,7 @@ exports[`Popover component should match snapshots 6`] = `
   font-size: 16px;
   position: absolute;
   top: -4px;
-  content: '▲';
+  content: '▲︎';
   left: 50%;
   text-shadow: 0px -3px 4px rgba(66,66,66,0.2);
   -webkit-transform: translateX(-50%);
@@ -1348,7 +1348,7 @@ exports[`Popover component should match snapshots 7`] = `
   font-size: 16px;
   position: absolute;
   bottom: 50%;
-  content: '▶';
+  content: '▶︎';
   right: -8px;
   text-shadow: 4px 1px 4px rgba(66,66,66,0.2);
 }
@@ -1554,7 +1554,7 @@ exports[`Popover component should match snapshots 8`] = `
   font-size: 16px;
   position: absolute;
   bottom: 50%;
-  content: '◀';
+  content: '◀︎';
   left: -8px;
   text-shadow: -4px 1px 4px rgba(66,66,66,0.2);
 }
@@ -1759,7 +1759,7 @@ exports[`Popover component should match snapshots 9`] = `
   color: #424242;
   font-size: 16px;
   position: absolute;
-  content: '▼';
+  content: '▼︎';
   left: 50%;
   text-shadow: 0px 8px 4px rgba(66,66,66,0.2);
   bottom: 0;

diff --git a/components/Popover/arrowProperties.js b/components/Popover/arrowProperties.js
@@ -6,28 +6,28 @@ const CENTER_POSITION = '50%';
 
 const placementPosition = ({ neutral: { 700: shadowColor } }) => ({
   top: `
-    content: '▼';
+    content: '\u25BC\uFE0E';
     left: ${CENTER_POSITION};
     text-shadow: 0px 8px 4px ${hexToRgba(shadowColor, 0.2)};
     bottom: 0;
     transform: translateX(-${CENTER_POSITION});
   `,
   bottom: `
     top: -4px;
-    content: '▲';
+    content: '\u25B2\uFE0E';
     left: ${CENTER_POSITION};
     text-shadow: 0px -3px 4px ${hexToRgba(shadowColor, 0.2)};
     transform: translateX(-${CENTER_POSITION});
   `,
   right: `
     bottom: ${CENTER_POSITION};
-    content: '◀';
+    content: '\u25C0\uFE0E';
     left: ${SIDE_POSITION_X}px;
     text-shadow: -4px 1px 4px ${hexToRgba(shadowColor, 0.2)};
   `,
   left: `
     bottom: ${CENTER_POSITION};
-    content: '▶';
+    content: '\u25B6\uFE0E';
     right: ${SIDE_POSITION_X}px;
     text-shadow: 4px 1px 4px ${hexToRgba(shadowColor, 0.2)};
   `,