From 2bc1711cc5f0fa05b1af92fd3b297a4130318548 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Tue, 21 May 2024 11:32:52 -0400
Subject: [PATCH 1/4] feat: add style and transition delay to Collapsible

---
 .changeset/good-eels-swim.md                  |  5 +++
 .../Collapsible/Collapsible.stories.tsx       | 45 +++++++++++++++----
 .../components/Collapsible/Collapsible.tsx    | 14 ++++--
 .../Collapsible/tests/Collapsible.test.tsx    | 25 ++++++++++-
 4 files changed, 76 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/good-eels-swim.md

diff --git a/.changeset/good-eels-swim.md b/.changeset/good-eels-swim.md
new file mode 100644
index 00000000000..c7ae34c4658
--- /dev/null
+++ b/.changeset/good-eels-swim.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added style prop and transition delay to Collapsible
diff --git a/polaris-react/src/components/Collapsible/Collapsible.stories.tsx b/polaris-react/src/components/Collapsible/Collapsible.stories.tsx
index 4c7f34e6a85..9c093b363d5 100644
--- a/polaris-react/src/components/Collapsible/Collapsible.stories.tsx
+++ b/polaris-react/src/components/Collapsible/Collapsible.stories.tsx
@@ -57,6 +57,7 @@ export const Default = {
     );
   },
 };
+
 export const Inline = {
   render() {
     const [open, setOpen] = useState(true);
@@ -70,14 +71,44 @@ export const Inline = {
             <Button
               onClick={handleToggle}
               ariaExpanded={open}
-              ariaControls="basic-collapsible"
+              ariaControls="inline-collapsible"
             >
               Toggle
             </Button>
             <Collapsible open={open} id="inline-collapsible" variant="inline">
-              <p style={{whiteSpace: 'nowrap', backgroundColor: 'red'}}>
-                Non breaking text
-              </p>
+              <p style={{whiteSpace: 'nowrap'}}>Non breaking text</p>
+            </Collapsible>
+          </LegacyStack>
+        </LegacyCard>
+      </div>
+    );
+  },
+};
+
+export const WithDelay = {
+  render() {
+    const [open, setOpen] = useState(true);
+
+    const handleToggle = useCallback(() => setOpen((open) => !open), []);
+
+    return (
+      <div style={{height: '200px'}}>
+        <LegacyCard sectioned>
+          <LegacyStack alignment="center">
+            <Button
+              onClick={handleToggle}
+              ariaExpanded={open}
+              ariaControls="inline-collapsible"
+            >
+              Toggle
+            </Button>
+            <Collapsible
+              open={open}
+              id="inline-collapsible"
+              variant="inline"
+              transition={{delay: '5002'}}
+            >
+              <p style={{whiteSpace: 'nowrap'}}>Non breaking text</p>
             </Collapsible>
           </LegacyStack>
         </LegacyCard>
@@ -119,9 +150,7 @@ export const AnimateIn = {
                 duration: 'var(--p-motion-duration-250)',
               }}
             >
-              <p style={{whiteSpace: 'nowrap', backgroundColor: 'red'}}>
-                Non breaking text
-              </p>
+              <p style={{whiteSpace: 'nowrap'}}>Non breaking text</p>
             </Collapsible>
 
             <Button
@@ -141,7 +170,7 @@ export const AnimateIn = {
             <Box maxWidth="20%">
               <Collapsible
                 open={open}
-                id="inline-collapsible"
+                id="basic-collapsible"
                 transition={{
                   animateIn: true,
                   duration: 'var(--p-motion-duration-250)',
diff --git a/polaris-react/src/components/Collapsible/Collapsible.tsx b/polaris-react/src/components/Collapsible/Collapsible.tsx
index 50928167dd2..25eba5351ec 100644
--- a/polaris-react/src/components/Collapsible/Collapsible.tsx
+++ b/polaris-react/src/components/Collapsible/Collapsible.tsx
@@ -1,4 +1,6 @@
 import React, {useState, useRef, useEffect, useCallback} from 'react';
+import type {ReactNode, CSSProperties, TransitionEvent} from 'react';
+import type {MotionDurationScale} from '@shopify/polaris-tokens';
 
 import {classNames} from '../../utilities/css';
 
@@ -7,6 +9,8 @@ import styles from './Collapsible.module.css';
 interface Transition {
   /** Expand the collpsible on render. */
   animateIn?: boolean;
+  /** Assign a transition delay to the collapsible animation */
+  delay?: MotionDurationScale;
   /** Assign a transition duration to the collapsible animation. */
   duration?: string;
   /** Assign a transition timing function to the collapsible animation */
@@ -30,8 +34,10 @@ export interface CollapsibleProps {
   transition?: boolean | Transition;
   /** Callback when the animation completes. */
   onAnimationEnd?(): void;
+  /** Overriding styles on the collapsible element */
+  style?: CSSProperties;
   /** The content to display inside the collapsible. */
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 type AnimationState = 'idle' | 'measuring' | 'animating';
@@ -43,6 +49,7 @@ export function Collapsible({
   variant = 'block',
   transition = true,
   children,
+  style,
   onAnimationEnd,
 }: CollapsibleProps) {
   const [size, setSize] = useState(0);
@@ -52,7 +59,6 @@ export function Collapsible({
   const [animationState, setAnimationState] = useState<AnimationState>(
     animateIn ? 'measuring' : 'idle',
   );
-
   const isFullyOpen = animationState === 'idle' && open && isOpen;
   const isFullyClosed = animationState === 'idle' && !open && !isOpen;
   const content = expandOnPrint || !isFullyClosed ? children : null;
@@ -69,11 +75,13 @@ export function Collapsible({
   const transitionDisabled = isTransitionDisabled(transition);
 
   const transitionStyles = typeof transition === 'object' && {
+    transitionDelay: `var(--p-motion-duration-${transition.delay})`,
     transitionDuration: transition.duration,
     transitionTimingFunction: transition.timingFunction,
   };
 
   const collapsibleStyles = {
+    ...style,
     ...transitionStyles,
     ...(vertical
       ? {
@@ -87,7 +95,7 @@ export function Collapsible({
   };
 
   const handleCompleteAnimation = useCallback(
-    ({target}: React.TransitionEvent<HTMLDivElement>) => {
+    ({target}: TransitionEvent<HTMLDivElement>) => {
       if (target === collapsibleContainer.current) {
         setAnimationState('idle');
         setIsOpen(open);
diff --git a/polaris-react/src/components/Collapsible/tests/Collapsible.test.tsx b/polaris-react/src/components/Collapsible/tests/Collapsible.test.tsx
index d3149eefaee..e109f82493e 100644
--- a/polaris-react/src/components/Collapsible/tests/Collapsible.test.tsx
+++ b/polaris-react/src/components/Collapsible/tests/Collapsible.test.tsx
@@ -152,7 +152,11 @@ describe('<Collapsible />', () => {
         <Collapsible id="test-collapsible" open transition={{duration}} />,
       );
 
-      expect(collapsible).toHaveReactProps({transition: {duration}});
+      expect(collapsible).toContainReactComponent('div', {
+        style: expect.objectContaining({
+          transitionDuration: duration,
+        }),
+      });
     });
 
     it('passes a timingFunction property', () => {
@@ -165,7 +169,24 @@ describe('<Collapsible />', () => {
         />,
       );
 
-      expect(collapsible).toHaveReactProps({transition: {timingFunction}});
+      expect(collapsible).toContainReactComponent('div', {
+        style: expect.objectContaining({
+          transitionTimingFunction: timingFunction,
+        }),
+      });
+    });
+
+    it('passes a delay property', () => {
+      const delay = '100';
+      const collapsible = mountWithApp(
+        <Collapsible id="test-collapsible" open transition={{delay}} />,
+      );
+
+      expect(collapsible).toContainReactComponent('div', {
+        style: expect.objectContaining({
+          transitionDelay: `var(--p-motion-duration-${delay})`,
+        }),
+      });
     });
 
     const transitionDisabledOptions = [

From 4fcc1127dc1b0dfed86849c1244154698d4560c7 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Tue, 21 May 2024 14:08:11 -0400
Subject: [PATCH 2/4] Update
 polaris-react/src/components/Collapsible/Collapsible.stories.tsx

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 .../src/components/Collapsible/Collapsible.stories.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/Collapsible/Collapsible.stories.tsx b/polaris-react/src/components/Collapsible/Collapsible.stories.tsx
index 9c093b363d5..5968157546f 100644
--- 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: '5002'}}
+              transition={{delay: '5000'}}
             >
               <p style={{whiteSpace: 'nowrap'}}>Non breaking text</p>
             </Collapsible>

From a0e02356c114a9d6349c91e8bf230ec5aa4f650f Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Tue, 21 May 2024 15:36:07 -0400
Subject: [PATCH 3/4] remove style prop

---
 .changeset/good-eels-swim.md                             | 2 +-
 polaris-react/src/components/Collapsible/Collapsible.tsx | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/.changeset/good-eels-swim.md b/.changeset/good-eels-swim.md
index c7ae34c4658..7e5dc795481 100644
--- a/.changeset/good-eels-swim.md
+++ b/.changeset/good-eels-swim.md
@@ -2,4 +2,4 @@
 '@shopify/polaris': minor
 ---
 
-Added style prop and transition delay to Collapsible
+Added transition delay to Collapsible
diff --git a/polaris-react/src/components/Collapsible/Collapsible.tsx b/polaris-react/src/components/Collapsible/Collapsible.tsx
index 25eba5351ec..d3f7224a013 100644
--- a/polaris-react/src/components/Collapsible/Collapsible.tsx
+++ b/polaris-react/src/components/Collapsible/Collapsible.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useRef, useEffect, useCallback} from 'react';
-import type {ReactNode, CSSProperties, TransitionEvent} from 'react';
+import type {ReactNode, TransitionEvent} from 'react';
 import type {MotionDurationScale} from '@shopify/polaris-tokens';
 
 import {classNames} from '../../utilities/css';
@@ -34,8 +34,6 @@ export interface CollapsibleProps {
   transition?: boolean | Transition;
   /** Callback when the animation completes. */
   onAnimationEnd?(): void;
-  /** Overriding styles on the collapsible element */
-  style?: CSSProperties;
   /** The content to display inside the collapsible. */
   children?: ReactNode;
 }
@@ -49,7 +47,6 @@ export function Collapsible({
   variant = 'block',
   transition = true,
   children,
-  style,
   onAnimationEnd,
 }: CollapsibleProps) {
   const [size, setSize] = useState(0);
@@ -81,7 +78,6 @@ export function Collapsible({
   };
 
   const collapsibleStyles = {
-    ...style,
     ...transitionStyles,
     ...(vertical
       ? {

From 405769dd0b2bf8bc46a580e49386e2fbc3c99a3d Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Tue, 21 May 2024 15:48:55 -0400
Subject: [PATCH 4/4] use createVar, reduce example duration

---
 .../src/components/Collapsible/Collapsible.stories.tsx         | 2 +-
 polaris-react/src/components/Collapsible/Collapsible.tsx       | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/polaris-react/src/components/Collapsible/Collapsible.stories.tsx b/polaris-react/src/components/Collapsible/Collapsible.stories.tsx
index 5968157546f..5a14cc4d561 100644
--- 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
index d3f7224a013..b30c2bc2854 100644
--- 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,
   };