feature, Add support to show CTAs button on group tooltips

Shopify · Nov 26, 2024 · 19bf433 · 19bf433
1 parent 4890c5a
commit 19bf433
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 8 deletions.
diff --git a/packages/polaris-viz/src/components/Grid/Grid.tsx b/packages/polaris-viz/src/components/Grid/Grid.tsx
@@ -223,6 +223,23 @@ export function Grid(props: GridProps) {
     };
   };
 
+  const handleBodyClick = useCallback(() => {
+    setGroupSelected(null);
+    handleGroupHover(null);
+  }, [handleGroupHover]);
+
+  useEffect(() => {
+    if (groupSelected) {
+      setTimeout(() => {
+        document.body.addEventListener('click', handleBodyClick);
+      }, 0);
+
+      return () => {
+        document.body.removeEventListener('click', handleBodyClick);
+      };
+    }
+  }, [groupSelected, handleBodyClick]);
+
   const yTicks = useMemo(() => {
     return Array.from({length: gridDimensions.rows}, (_, index) => ({
       value: gridDimensions.rows - 1 - index,

diff --git a/packages/polaris-viz/src/components/Grid/components/Arrows.scss b/packages/polaris-viz/src/components/Grid/components/Arrows.scss
@@ -2,6 +2,10 @@
 
 @import '../utilities/constants';
 
+.Arrow {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
+}
+
 .ArrowShaft {
   stroke-dasharray: 35;
   stroke-dashoffset: 35;

diff --git a/packages/polaris-viz/src/components/Grid/components/Arrows.tsx b/packages/polaris-viz/src/components/Grid/components/Arrows.tsx
@@ -193,6 +193,7 @@ export function Arrows({
         return (
           <g
             key={`arrow-${hoveredGroup?.id}-${sourceGroup.id}-${targetGroupId}`}
+            className={styles.Arrow}
           >
             <path
               className={styles.ArrowShaft}

diff --git a/packages/polaris-viz/src/components/Grid/components/Tooltip.scss b/packages/polaris-viz/src/components/Grid/components/Tooltip.scss
@@ -3,6 +3,36 @@
 @import '../../../styles/common';
 @import '../utilities/constants';
 
+.TooltipActions {
+  margin-top: 12px;
+}
+
+.TooltipAction {
+  display: block;
+  text-decoration: none;
+  color: $color-gray-150;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0;
+  padding: 6px 12px;
+  text-align: center;
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 0 0.5px 0.5px rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.25);
+  background: $color-white;
+}
+
+.TooltipAction span {
+  box-sizing: border-box;
+  display: block;
+}
+
+.TooltipAction:hover {
+  background: rgba(0, 0, 0, 0.025);
+}
+
 .GroupGoal {
   margin: 0;
   font-size: 11px;
@@ -12,8 +42,8 @@
 }
 
 .TooltipTitle {
-  font-weight: 700;
-  font-size: 12px;
+  font-weight: 600;
+  font-size: 13px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -25,13 +55,13 @@
   -webkit-line-clamp: 3;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--p-color-bg-surface-inverse);
+  color: $color-gray-100;
   margin-bottom: 8px;
 }
 
 .TooltipMetricInformation {
   color: $color-gray-150;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .TooltipGoal {
@@ -48,7 +78,7 @@
   font-size: 12px;
   font-family: Inter, -apple-system, system-ui, 'San Francisco', 'Segoe UI',
     Roboto, 'Helvetica Neue', sans-serif;
-  line-height: 1.2;
+  line-height: 1.3;
   padding: 12px;
   background: $color-white;
   border-radius: 12px;
@@ -61,7 +91,7 @@
   z-index: 1;
   top: 0;
   left: 0;
-  width: 250px;
+  width: 280px;
   outline: none;
   @container (max-width: #{$grid-small-breakpoint}) {
     display: none;

diff --git a/packages/polaris-viz/src/components/Grid/components/Tooltip.tsx b/packages/polaris-viz/src/components/Grid/components/Tooltip.tsx
@@ -1,3 +1,4 @@
+import {useLayoutEffect, useState, useRef} from 'react';
 import {createPortal} from 'react-dom';
 
 import type {CellGroup} from '../types';
@@ -15,6 +16,34 @@ interface TooltipProps {
 export function Tooltip({x, y, group}: TooltipProps) {
   const container = useRootContainer(TOOLTIP_ID);
 
+  const [actionsButtonsColumns, setActionsButtonsColumns] = useState(1);
+  const actionsContainerRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (group?.actions?.length && actionsContainerRef.current) {
+      // This is a workaround to determine if the buttons should be displayed in one or two columns depending if the copy fits in one line
+      const buttonsWrapper = actionsContainerRef.current;
+      const actionsButtons = buttonsWrapper.querySelectorAll('a span');
+
+      const heights: Set<number> = new Set();
+      let areWrapping = false;
+      for (const button of actionsButtons) {
+        const wrapping =
+          parseFloat(window.getComputedStyle(button).height) /
+            parseFloat(window.getComputedStyle(button).lineHeight) >
+          1;
+        if (wrapping) {
+          areWrapping = true;
+        }
+        heights.add(button.getBoundingClientRect().height);
+      }
+
+      const haveSameHeight = heights.size === 1;
+      setActionsButtonsColumns(haveSameHeight && !areWrapping ? 2 : 1);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [group?.actions, actionsContainerRef.current]);
+
   if (!group) {
     return null;
   }
@@ -26,6 +55,9 @@ export function Tooltip({x, y, group}: TooltipProps) {
         transform: `translate(${x}px, ${y}px)`,
       }}
       aria-label={group.name}
+      onClick={(event) => {
+        event.stopPropagation();
+      }}
     >
       <div className={styles.Tooltip}>
         <div className={styles.TooltipTitle}>{group.name}</div>
@@ -56,6 +88,40 @@ export function Tooltip({x, y, group}: TooltipProps) {
             <p className={styles.GroupGoal}>{group.goal}</p>
           </div>
         )}
+        {group.actions?.length && (
+          <div className={styles.TooltipActions} ref={actionsContainerRef}>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: `repeat(${actionsButtonsColumns}, 1fr)`,
+                gap: 8,
+              }}
+            >
+              {group.actions?.map((action, index) => {
+                const numActions = group.actions?.length || 0;
+                const oddNumActions = numActions % 2 !== 0;
+                const lastAction = index === numActions - 1;
+                const spanFullWidth = oddNumActions && lastAction;
+                return (
+                  <div
+                    key={`action-${index}`}
+                    style={{
+                      gridColumn: spanFullWidth ? 'span 2' : 'span 1',
+                    }}
+                  >
+                    <a
+                      className={styles.TooltipAction}
+                      href={action.url}
+                      target={action.target}
+                    >
+                      <span>{action.children}</span>
+                    </a>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
       </div>
     </div>,
     container,