Add soft scale animations to Tooltip and Popover

src/@next/Popover/PopoverStyle.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+import { StyledPopover } from './PopoverStyle';
+
+describe('StyledPopover motion', () => {
+  test('uses the soft-scale animation for entry and exit', () => {
+    const sheet = new ServerStyleSheet();
+
+    renderToString(sheet.collectStyles(<StyledPopover />));
+
+    const css = sheet.getStyleTags();
+    sheet.seal();
+
+    expect(css).toContain('240ms cubic-bezier(0.2,1.45,0.4,1)');
+    expect(css).toContain('90ms ease-in');
+    expect(css).toContain('scale:0.88');
+    expect(css).toContain('scale:none');
+    expect(css).toContain('scale:0.96');
+    expect(css).toContain('.Polaris-Popover__PopoverOverlay .Polaris-Popover');
+    expect(css).toContain('@media (prefers-reduced-motion:reduce)');
+  });
+});

src/@next/Popover/PopoverStyle.ts

@@ -14,32 +14,46 @@ export const StyledPopover: any = createGlobalStyle`
   will-change: left, top;
 }
 
-.Polaris-Popover__PopoverOverlay {
+.Polaris-Popover__PopoverOverlay .Polaris-Popover {
   opacity: 0;
-  transition: opacity 100ms ease,
-    transform 100ms ease;
+  scale: 0.88;
+  transition:
+    opacity 140ms ease-out,
+    scale 240ms cubic-bezier(0.2, 1.45, 0.4, 1),
+    transform 240ms cubic-bezier(0.2, 1.45, 0.4, 1);
   transform: translateY(-0.3125rem);
 }
 
-.Polaris-Popover__PopoverOverlay--entering {
+.Polaris-Popover__PopoverOverlay--entering .Polaris-Popover {
   opacity: 1;
+  scale: 1;
   transform: translateY(0);
 }
 
-.Polaris-Popover__PopoverOverlay--open {
+.Polaris-Popover__PopoverOverlay--open .Polaris-Popover {
   opacity: 1;
+  scale: none;
   transform: none;
 }
 
-.Polaris-Popover__PopoverOverlay--exiting {
-  opacity: 1;
+.Polaris-Popover__PopoverOverlay--exiting .Polaris-Popover {
+  opacity: 0;
+  scale: 0.96;
   transform: translateY(0);
-  transition-duration: 0ms;
+  transition: opacity 90ms ease-in, scale 90ms ease-in;
 }
 
 .Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting) {
   opacity: 0;
-  transform: translateY(-0.3125rem);
+  scale: none;
+  transform: none;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Polaris-Popover__PopoverOverlay .Polaris-Popover {
+    transition-duration: 0.01ms;
+  }
 }
 
 .Polaris-Popover--fullWidth {

src/@next/Tooltip/Tooltip.tsx

@@ -237,8 +237,16 @@ export const Tooltip = ({
 
   useEffect(() => {
     if (isActive) {
+      const tooltipElement = tooltipRef.current;
+      const tooltipRect = tooltipElement?.getClientRects()[0];
       tooltipPositionsHandlerRef.current(
-        tooltipRef?.current?.getClientRects()[0],
+        tooltipRect &&
+          new DOMRect(
+            tooltipRect.x,
+            tooltipRect.y,
+            tooltipElement.offsetWidth,
+            tooltipElement.offsetHeight
+          ),
         elRef?.current?.getClientRects()[0],
         position
       );
@@ -285,7 +293,7 @@ export const Tooltip = ({
       timeoutRef.current = setTimeout(() => {
         setIsActive(false);
         setAnimate(false);
-      }, 370); // animation is 400ms, make this slightly lower to prevent visual glitch
+      }, 110); // Unmount just before the 120ms exit animation completes.
     }, timeout);
   };
 

src/@next/Tooltip/TooltipStyle.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+import { StyledTooltip } from './TooltipStyle';
+
+describe('StyledTooltip motion', () => {
+  test('uses the soft-scale animation for entry and exit', () => {
+    const sheet = new ServerStyleSheet();
+
+    renderToString(
+      sheet.collectStyles(<StyledTooltip className="closed-animation" />)
+    );
+
+    const css = sheet.getStyleTags();
+    sheet.seal();
+
+    expect(css).toContain('240ms cubic-bezier(0.2,1.45,0.4,1)');
+    expect(css).toContain('120ms ease-in');
+    expect(css).toContain('scale:0.88');
+    expect(css).toContain('scale:none');
+    expect(css).toContain('scale:0.96');
+    expect(css).toContain('@media (prefers-reduced-motion:reduce)');
+  });
+});

src/@next/Tooltip/TooltipStyle.ts

@@ -131,30 +131,38 @@ export const StyledTooltip = styled.div<{ zIndex?: number }>`
     bottom: ${nonCentralArrowMargin};
   }
 
-  animation: fade-in-tooltip 400ms ease-in forwards;
+  animation: soft-scale-in-tooltip 240ms cubic-bezier(0.2, 1.45, 0.4, 1);
+
   &.closed-animation {
-    animation: fade-out-tooltip 400ms ease-out forwards;
+    animation: soft-scale-out-tooltip 120ms ease-in forwards;
   }
-  animation-fill-mode: forwards;
 
-  @keyframes fade-in-tooltip {
+  @keyframes soft-scale-in-tooltip {
     0% {
       opacity: 0;
+      scale: 0.88;
     }
     100% {
       opacity: 1;
+      scale: none;
     }
   }
 
-  @keyframes fade-out-tooltip {
+  @keyframes soft-scale-out-tooltip {
     0% {
       opacity: 1;
+      scale: none;
     }
     100% {
       opacity: 0;
+      scale: 0.96;
     }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+  }
+
   @media (max-width: ${Breakpoints.large}) {
     min-width: 69px;
   }