[Collapsible] animate collapsible max-height property

UNRELEASED.md

@@ -21,6 +21,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed `recolor-icon` Sass mixin to properly scope `$secondary-color` to the child `svg` ([#2298](https://github.com/Shopify/polaris-react/pull/2298))
 - Fixed a regression with the positioning of the `Popover` component ([#2305](https://github.com/Shopify/polaris-react/pull/2305))
 - Fixed Stack Item proportion when shrinking ([#2319](https://github.com/Shopify/polaris-react/pull/2319))
+- Fixed animation of `Collapsible` with children having margins ([#1980](https://github.com/Shopify/polaris-react/pull/1980))
 
 ### Documentation
 

src/components/Collapsible/Collapsible.scss

@@ -2,15 +2,15 @@
 
 .Collapsible {
   overflow: hidden;
-  height: 0;
+  max-height: 0;
   padding-top: 0;
   padding-bottom: 0;
   opacity: 0;
-  will-change: opacity, height;
+  will-change: opacity, max-height;
 }
 
 .animating {
-  transition-property: opacity, height;
+  transition-property: opacity, max-height;
   transition-duration: duration(slow);
   transition-timing-function: easing(out);
 }

src/components/Collapsible/Collapsible.tsx

@@ -130,7 +130,7 @@ class Collapsible extends React.Component<CollapsibleProps, State> {
         <div
           id={id}
           aria-hidden={!open}
-          style={{height: displayHeight}}
+          style={{maxHeight: displayHeight}}
           className={wrapperClassName}
           ref={this.node}
           onTransitionEnd={this.handleTransitionEnd}
@@ -155,11 +155,11 @@ function collapsibleHeight(
   height?: number | null,
 ) {
   if (animationState === 'idle' && open) {
-    return open ? 'auto' : undefined;
+    return open ? 'none' : undefined;
   }
 
   if (animationState === 'measuring') {
-    return open ? undefined : 'auto';
+    return open ? undefined : 'none';
   }
 
   return `${height || 0}px`;