[Collapsible] Add transition properties

UNRELEASED.md

@@ -5,6 +5,7 @@
 ### Enhancements
 
 - Added optional `onClick` prop to `Tag` ([#2774](https://github.com/Shopify/polaris-react/pull/2774))
+- Added transition properties to `Collapsible` ([#2835](https://github.com/Shopify/polaris-react/pull/2835))
 
 ### Bug fixes
 

src/components/Collapsible/Collapsible.tsx

@@ -9,11 +9,20 @@ import {classNames} from '../../utilities/css';
 
 import styles from './Collapsible.scss';
 
+interface Transition {
+  /** Assign a transition duration to the collapsible animation. */
+  duration?: string;
+  /** Assign a transition timing function to the collapsible animation */
+  timingFunction?: string;
+}
+
 export interface CollapsibleProps {
   /** Assign a unique ID to the collapsible. For accessibility, pass this ID as the value of the triggering component’s aria-controls prop. */
   id: string;
   /** Toggle whether the collapsible is expanded or not. */
   open: boolean;
+  /** Assign transition properties to the collapsible */
+  transition?: Transition;
   /** The content to display inside the collapsible. */
   children?: React.ReactNode;
 }
@@ -104,7 +113,7 @@ class CollapsibleInner extends React.Component<CollapsibleProps, State> {
   }
 
   render() {
-    const {id, open, children} = this.props;
+    const {id, open, children, transition} = this.props;
     const {animationState, height} = this.state;
     const parentCollapsibleExpanding = this.context;
 
@@ -121,6 +130,13 @@ class CollapsibleInner extends React.Component<CollapsibleProps, State> {
 
     const content = animating || open ? children : null;
 
+    const transitionProperties = transition
+      ? {
+          transitionDuration: `${transition.duration}`,
+          transitionTimingFunction: `${transition.timingFunction}`,
+        }
+      : null;
+
     return (
       <ParentCollapsibleExpandingContext.Provider
         value={
@@ -130,7 +146,10 @@ class CollapsibleInner extends React.Component<CollapsibleProps, State> {
         <div
           id={id}
           aria-hidden={!open}
-          style={{maxHeight: displayHeight}}
+          style={{
+            maxHeight: `${displayHeight}`,
+            ...transitionProperties,
+          }}
           className={wrapperClassName}
           ref={this.node}
           onTransitionEnd={this.handleTransitionEnd}

src/components/Collapsible/README.md

@@ -72,7 +72,11 @@ function CollapsibleExample() {
           >
             Toggle
           </Button>
-          <Collapsible open={active} id="basic-collapsible">
+          <Collapsible
+            open={active}
+            id="basic-collapsible"
+            transition={{duration: '150ms', timingFunction: 'ease'}}
+          >
             <TextContainer>
               Your mailing list lets you contact customers or visitors who have
               shown an interest in your store. Reach out to them with exclusive

src/components/Collapsible/tests/Collapsible.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
+import {Tokens} from 'utilities/theme';
 import {Collapsible} from '../Collapsible';
 
 describe('<Collapsible />', () => {
@@ -44,4 +45,28 @@ describe('<Collapsible />', () => {
     expect(hidden.exists()).toBe(false);
     expect(collapsible.contains('content')).toBe(true);
   });
+
+  describe('Transition', () => {
+    it('passes a duration property', () => {
+      const duration = Tokens.duration150;
+      const collapsible = mountWithAppProvider(
+        <Collapsible id="test-collapsible" open transition={{duration}} />,
+      );
+
+      expect(collapsible.props()).toMatchObject({transition: {duration}});
+    });
+
+    it('passes a timingFunction property', () => {
+      const timingFunction = Tokens.ease;
+      const collapsible = mountWithAppProvider(
+        <Collapsible
+          id="test-collapsible"
+          open
+          transition={{timingFunction}}
+        />,
+      );
+
+      expect(collapsible.props()).toMatchObject({transition: {timingFunction}});
+    });
+  });
 });