use createVar, reduce example duration

Shopify · May 21, 2024 · 405769d · 405769d
1 parent a0e0235
commit 405769d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/polaris-react/src/components/Collapsible/Collapsible.stories.tsx b/polaris-react/src/components/Collapsible/Collapsible.stories.tsx
@@ -106,7 +106,7 @@ export const WithDelay = {
               open={open}
               id="inline-collapsible"
               variant="inline"
-              transition={{delay: '5000'}}
+              transition={{delay: '500'}}
             >
               <p style={{whiteSpace: 'nowrap'}}>Non breaking text</p>
             </Collapsible>

diff --git a/polaris-react/src/components/Collapsible/Collapsible.tsx b/polaris-react/src/components/Collapsible/Collapsible.tsx
@@ -1,5 +1,6 @@
 import React, {useState, useRef, useEffect, useCallback} from 'react';
 import type {ReactNode, TransitionEvent} from 'react';
+import {createVar} from '@shopify/polaris-tokens';
 import type {MotionDurationScale} from '@shopify/polaris-tokens';
 
 import {classNames} from '../../utilities/css';
@@ -72,7 +73,7 @@ export function Collapsible({
   const transitionDisabled = isTransitionDisabled(transition);
 
   const transitionStyles = typeof transition === 'object' && {
-    transitionDelay: `var(--p-motion-duration-${transition.delay})`,
+    transitionDelay: createVar(`motion-duration-${transition.delay ?? '0'}`),
     transitionDuration: transition.duration,
     transitionTimingFunction: transition.timingFunction,
   };