Merge pull request #1604 from Shopify/envex/remove-delay

Remove delay when isAnimated: false. Fix Tooltip z-index
Shopify · Nov 14, 2023 · 0298318 · 0298318
2 parents fda1fe2 + f046310
commit 0298318
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 4 deletions.
diff --git a/packages/polaris-viz-core/src/hooks/useSpringConfig.ts b/packages/polaris-viz-core/src/hooks/useSpringConfig.ts
@@ -16,10 +16,12 @@ export function useSpringConfig({
 }: Props) {
   const isMounted = useRef(false);
 
+  const delay = shouldAnimate ? animationDelay : 0;
+
   return {
     config: isMounted.current ? mountedSpringConfig : unmountedSpringConfig,
     default: {immediate: !shouldAnimate},
-    delay: isMounted.current ? 0 : animationDelay,
+    delay: isMounted.current ? 0 : delay,
     onRest: () => (isMounted.current = true),
   };
 }
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Fixed
+
+- Fixed issue where `<BarChart />` would still have a staggered delay when rendering bars/groups if `isAnimated: false`.
 
 ## [9.18.0] - 2023-11-07
 

diff --git a/packages/polaris-viz/src/components/BarChart/stories/DynamicData.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/DynamicData.stories.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import {useState} from 'react';
 
 import {BarChart} from '../BarChart';
 

diff --git a/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.scss b/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.scss
@@ -1,5 +1,8 @@
 .Container {
   position: absolute;
   pointer-events: none;
+  // Matches --p-z-index-12
+  // https://polaris.shopify.com/tokens/z-index
+  z-index: 520;
   max-width: 70%;
 }
diff --git a/packages/polaris-viz/src/hooks/useBarSpringConfig.ts b/packages/polaris-viz/src/hooks/useBarSpringConfig.ts
@@ -13,7 +13,7 @@ export function useBarSpringConfig({animationDelay = 0}: Props) {
   const {shouldAnimate} = useChartContext();
 
   return useSpringConfig({
-    animationDelay,
+    animationDelay: shouldAnimate ? animationDelay : 0,
     shouldAnimate,
     unmountedSpringConfig: BARS_LOAD_ANIMATION_CONFIG,
     mountedSpringConfig: BARS_TRANSITION_CONFIG,