feat(collapsible-motion): add minHeight prop (#1042)

* feat(collapsible-motion): add minHeight prop

* chore: typo

* chore: add test

* chore: story fix

Author: montezume

src/components/collapsible-motion/README.md

@@ -11,4 +11,6 @@ There are [many existing workaround](https://css-tricks.com/using-css-transition
 
 `CollapsibleMotion` uses a nice workaround which allows the browser to run this animation. `CollapsibleMotion` measures the resulting since and then animates between `height: 0` and the resulting size (at 99% of the animation). At the end of the animation, it sets the `height` back to `auto`.
 
+This component also supports passing in a `minHeight` prop. By default this is 0.
+
 Technically, we need to dynamically create the keyframes for this animation.

src/components/collapsible-motion/collapsible-motion.js

@@ -10,23 +10,31 @@ const collapsibleMotionPropTypes = {
   children: PropTypes.func.isRequired,
   isClosed: PropTypes.bool,
   onToggle: PropTypes.func,
+  minHeight: PropTypes.number,
   isDefaultClosed: PropTypes.bool,
 };
 
-const createOpeningAnimation = height =>
+const defaultProps = {
+  minHeight: 0,
+};
+
+const getMinHeight = minHeight =>
+  minHeight !== 0 ? `${minHeight}px` : minHeight;
+
+const createOpeningAnimation = (height, minHeight = 0) =>
   keyframes`
-    0% { height: 0; overflow: hidden; }
+    0% { height: ${getMinHeight(minHeight)}; overflow: hidden; }
     99% { height: ${height}px; overflow: hidden; }
     100% { height: auto; overflow: visible; }
   `;
 
-const createClosingAnimation = height =>
+const createClosingAnimation = (height, minHeight) =>
   keyframes`
     from { height: ${height}px; }
-    to { height: 0; overflow: hidden; }
+    to { height: ${getMinHeight(minHeight)}; overflow: hidden; }
   `;
 
-const useToggleAnimation = (isOpen, toggle) => {
+const useToggleAnimation = (isOpen, toggle, minHeight) => {
   const nodeRef = React.useRef();
   const prevIsOpen = usePrevious(isOpen);
 
@@ -55,15 +63,15 @@ const useToggleAnimation = (isOpen, toggle) => {
 
   const containerStyles = isOpen
     ? { height: 'auto' }
-    : { height: 0, overflow: 'hidden' };
+    : { height: getMinHeight(minHeight), overflow: 'hidden' };
 
   let animation = null;
 
   // if state has changed
   if (typeof prevIsOpen !== 'undefined' && prevIsOpen !== isOpen) {
     animation = isOpen
-      ? createOpeningAnimation(nodeRef.current.clientHeight)
-      : createClosingAnimation(nodeRef.current.clientHeight);
+      ? createOpeningAnimation(nodeRef.current.clientHeight, minHeight)
+      : createClosingAnimation(nodeRef.current.clientHeight, minHeight);
   }
 
   return [animation, containerStyles, handleToggle, nodeRef];
@@ -85,7 +93,7 @@ const ControlledCollapsibleMotion = props => {
     containerStyles,
     animationToggle,
     registerContentNode,
-  ] = useToggleAnimation(!props.isClosed, props.onToggle);
+  ] = useToggleAnimation(!props.isClosed, props.onToggle, props.minHeight);
 
   return (
     <ClassNames>
@@ -128,7 +136,7 @@ const UncontrolledCollapsibleMotion = props => {
     containerStyles,
     animationToggle,
     registerContentNode,
-  ] = useToggleAnimation(isOpen, toggle);
+  ] = useToggleAnimation(isOpen, toggle, props.minHeight);
 
   return (
     <ClassNames>
@@ -160,9 +168,11 @@ const UncontrolledCollapsibleMotion = props => {
   );
 };
 
+UncontrolledCollapsibleMotion.defaultProps = defaultProps;
 UncontrolledCollapsibleMotion.displayName = 'UncontrolledCollapsibleMotion';
 UncontrolledCollapsibleMotion.propTypes = collapsibleMotionPropTypes;
 
+CollapsibleMotion.defaultProps = defaultProps;
 CollapsibleMotion.displayName = 'CollapsibleMotion';
 CollapsibleMotion.propTypes = collapsibleMotionPropTypes;
 

src/components/collapsible-motion/collapsible-motion.spec.js

@@ -66,6 +66,70 @@ describe('uncontrolled mode', () => {
       })
     );
   });
+  describe('with minHeight set', () => {
+    it('should toggle when clicked', async () => {
+      const renderProp = jest.fn(
+        ({ isOpen, toggle, containerStyles, registerContentNode }) => (
+          <div>
+            <button data-testid="button" onClick={toggle}>
+              {isOpen ? 'Close' : 'Open'}
+            </button>
+            <div data-testid="container-node" style={containerStyles}>
+              <div data-testid="content-node" ref={registerContentNode}>
+                Content
+              </div>
+            </div>
+          </div>
+        )
+      );
+
+      const { getByTestId } = render(
+        <CollapsibleMotion minHeight={50}>{renderProp}</CollapsibleMotion>
+      );
+
+      expect(getByTestId('content-node')).toBeVisible();
+      expect(renderProp).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          isOpen: true,
+          // no animation here because the panel is already expanded
+          containerStyles: { height: 'auto' },
+        })
+      );
+
+      // hide the content
+      fireEvent.click(getByTestId('button'));
+
+      // ensure the container gets hidden
+      expect(renderProp).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          isOpen: false,
+          containerStyles: {
+            animation: expect.stringMatching(
+              /^animation-[a-z0-9]+ 200ms forwards$/
+            ),
+            height: '50px',
+            overflow: 'hidden',
+          },
+        })
+      );
+
+      // show the content
+      fireEvent.click(getByTestId('button'));
+
+      // ensure the container gets shown again
+      expect(renderProp).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          isOpen: true,
+          containerStyles: {
+            height: 'auto',
+            animation: expect.stringMatching(
+              /^animation-[a-z0-9]+ 200ms forwards$/
+            ),
+          },
+        })
+      );
+    });
+  });
 });
 
 describe('controlled mode', () => {
@@ -148,4 +212,68 @@ describe('controlled mode', () => {
       })
     );
   });
+  describe('with minHeight set', () => {
+    it('should toggle when clicked', async () => {
+      const renderProp = jest.fn(
+        ({ isOpen, toggle, containerStyles, registerContentNode }) => (
+          <div>
+            <button data-testid="button" onClick={toggle}>
+              {isOpen ? 'Close' : 'Open'}
+            </button>
+            <div data-testid="container-node" style={containerStyles}>
+              <div data-testid="content-node" ref={registerContentNode}>
+                Content
+              </div>
+            </div>
+          </div>
+        )
+      );
+
+      const { getByTestId } = render(
+        <CollapsibleMotion minHeight={50}>{renderProp}</CollapsibleMotion>
+      );
+
+      expect(getByTestId('content-node')).toBeVisible();
+      expect(renderProp).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          isOpen: true,
+          // no animation here because the panel is already expanded
+          containerStyles: { height: 'auto' },
+        })
+      );
+
+      // hide the content
+      fireEvent.click(getByTestId('button'));
+
+      // ensure the container gets hidden
+      expect(renderProp).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          isOpen: false,
+          containerStyles: {
+            animation: expect.stringMatching(
+              /^animation-[a-z0-9]+ 200ms forwards$/
+            ),
+            height: '50px',
+            overflow: 'hidden',
+          },
+        })
+      );
+
+      // show the content
+      fireEvent.click(getByTestId('button'));
+
+      // ensure the container gets shown again
+      expect(renderProp).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          isOpen: true,
+          containerStyles: {
+            height: 'auto',
+            animation: expect.stringMatching(
+              /^animation-[a-z0-9]+ 200ms forwards$/
+            ),
+          },
+        })
+      );
+    });
+  });
 });

src/components/collapsible-motion/collapsible-motion.story.js

@@ -20,7 +20,15 @@ class CollapsibleMotionStory extends React.Component {
           <h2>Uncontrolled example</h2>
           <div key={isDefaultClosed}>
             <div>Some content before</div>
-            <CollapsibleMotion isDefaultClosed={isDefaultClosed}>
+            <CollapsibleMotion
+              isDefaultClosed={isDefaultClosed}
+              minHeight={number('minHeight (unControlled)', 0, {
+                range: true,
+                min: 0,
+                max: 500,
+                step: 5,
+              })}
+            >
               {({ isOpen, toggle, containerStyles, registerContentNode }) => (
                 <div>
                   <div>
@@ -65,6 +73,12 @@ class CollapsibleMotionStory extends React.Component {
             <CollapsibleMotion
               isClosed={this.state.isClosed}
               onToggle={this.handleToggle}
+              minHeight={number('minHeight (controlled)', 0, {
+                range: true,
+                min: 0,
+                max: 500,
+                step: 5,
+              })}
             >
               {({ toggle, containerStyles, registerContentNode }) => (
                 <div>