From d720951d4e7d68369ea95cb5694205203670f656 Mon Sep 17 00:00:00 2001
From: Jake 'Sid' Smith <jake@dabapps.com>
Date: Thu, 9 Aug 2018 15:54:40 +0100
Subject: [PATCH 1/8] Additional example

---
 src/ts/components/collapse.examples.md | 51 ++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/src/ts/components/collapse.examples.md b/src/ts/components/collapse.examples.md
index b579128f4..e3541d219 100644
--- a/src/ts/components/collapse.examples.md
+++ b/src/ts/components/collapse.examples.md
@@ -1,5 +1,7 @@
 #### Examples
 
+With lots of content:
+
 ```js
 class CollapseExample extends React.Component {
   constructor (props) {
@@ -45,3 +47,52 @@ class CollapseExample extends React.Component {
 
 <CollapseExample />
 ```
+
+With small content:
+
+```js
+class CollapseExample extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      open: false
+    };
+
+    this.onClickToggleCollapse = this.onClickToggleCollapse.bind(this);
+  }
+
+  onClickToggleCollapse () {
+    const { open } = this.state;
+
+    this.setState({
+      open: !open
+    });
+  }
+
+  render () {
+    const { open } = this.state;
+
+    return (
+      <div>
+        <Collapse
+          open={open}
+          maxCollapsedHeight={100}
+          fadeOut
+          fadeColor="#FFF"
+          fadeHeight={50}
+          animationDuration={200}
+        >
+          <DabIpsum count={1} />
+        </Collapse>
+        <Button className="primary margin-top-base" onClick={this.onClickToggleCollapse}>
+          {open ? 'Collapse' : 'Expand'}
+        </Button>
+      </div>
+    );
+  }
+}
+
+<CollapseExample />
+```
+

From 71e17f1a79f81ca12cdf8340d38646f317b8902e Mon Sep 17 00:00:00 2001
From: Jake 'Sid' Smith <jake@dabapps.com>
Date: Thu, 9 Aug 2018 15:54:59 +0100
Subject: [PATCH 2/8] Use max height instead of height

---
 src/ts/components/collapse.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx
index faa8fa4b8..92a574b43 100644
--- a/src/ts/components/collapse.tsx
+++ b/src/ts/components/collapse.tsx
@@ -125,10 +125,10 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
     const { opening, opened, height } = this.state;
 
     const collapseStyle = {
-      height: opened ? 'auto' : height,
+      maxHeight: opened ? 'auto' : height,
       position: 'relative' as 'relative',
       overflow: 'hidden' as 'hidden',
-      transition: `ease-in-out ${animationDuration}ms height`
+      transition: `ease-in-out ${animationDuration}ms max-height`
     };
 
     const fadeStyle = {

From 11b20a31bc3e4194fd979e3b4e2d460c55367a6e Mon Sep 17 00:00:00 2001
From: Jake 'Sid' Smith <jake@dabapps.com>
Date: Thu, 9 Aug 2018 15:55:33 +0100
Subject: [PATCH 3/8] Add minHeight prop

---
 src/ts/components/collapse.examples.md | 48 ++++++++++++++++++++++++++
 src/ts/components/collapse.tsx         |  7 ++++
 2 files changed, 55 insertions(+)

diff --git a/src/ts/components/collapse.examples.md b/src/ts/components/collapse.examples.md
index e3541d219..f0156822f 100644
--- a/src/ts/components/collapse.examples.md
+++ b/src/ts/components/collapse.examples.md
@@ -96,3 +96,51 @@ class CollapseExample extends React.Component {
 <CollapseExample />
 ```
 
+With minimum height:
+
+```js
+class CollapseExample extends React.Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      open: false
+    };
+
+    this.onClickToggleCollapse = this.onClickToggleCollapse.bind(this);
+  }
+
+  onClickToggleCollapse () {
+    const { open } = this.state;
+
+    this.setState({
+      open: !open
+    });
+  }
+
+  render () {
+    const { open } = this.state;
+
+    return (
+      <div>
+        <Collapse
+          open={open}
+          maxCollapsedHeight={200}
+          minHeight={100}
+          fadeOut
+          fadeColor="#FFF"
+          fadeHeight={50}
+          animationDuration={200}
+        >
+          <DabIpsum count={1} />
+        </Collapse>
+        <Button className="primary margin-top-base" onClick={this.onClickToggleCollapse}>
+          {open ? 'Collapse' : 'Expand'}
+        </Button>
+      </div>
+    );
+  }
+}
+
+<CollapseExample />
+```
diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx
index 92a574b43..c3f8bfb16 100644
--- a/src/ts/components/collapse.tsx
+++ b/src/ts/components/collapse.tsx
@@ -25,6 +25,11 @@ export interface CollapseProps extends ComponentProps, React.HTMLAttributes<HTML
    * @default 0
    */
   maxCollapsedHeight?: number;
+  /**
+   * Minimum height
+   * @default auto
+   */
+  minHeight?: number;
   /**
    * Whether to fade out the content
    * @default false
@@ -117,6 +122,7 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
       fadeHeight = DEFAULT_FADE_HEIGHT,
       open,
       maxCollapsedHeight,
+      minHeight = 'auto',
       animationDuration = DEFAULT_DURATION,
       component: Component = 'div',
       ...remainingProps
@@ -125,6 +131,7 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
     const { opening, opened, height } = this.state;
 
     const collapseStyle = {
+      minHeight,
       maxHeight: opened ? 'auto' : height,
       position: 'relative' as 'relative',
       overflow: 'hidden' as 'hidden',

From ca2c955356c115f28368ccd9567460446b85cc76 Mon Sep 17 00:00:00 2001
From: Jake 'Sid' Smith <jake@dabapps.com>
Date: Thu, 9 Aug 2018 15:57:48 +0100
Subject: [PATCH 4/8] Additional test

---
 tests/collapse.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/tests/collapse.tsx b/tests/collapse.tsx
index d301ac0f4..309f7d52a 100644
--- a/tests/collapse.tsx
+++ b/tests/collapse.tsx
@@ -35,6 +35,14 @@ describe('Collapse', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should match snapshot with custom min height', () => {
+    const tree = renderer.create(
+      <Collapse open={false} minHeight={100} />
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should match snapshot with custom animation duration', () => {
     const tree = renderer.create(
       <Collapse open={false} animationDuration={100} />

From b1fcbe5e6cc7bb4e3e430023ff5caace9047c787 Mon Sep 17 00:00:00 2001
From: Jake 'Sid' Smith <jake@dabapps.com>
Date: Thu, 9 Aug 2018 15:57:52 +0100
Subject: [PATCH 5/8] Update snapshots

---
 tests/__snapshots__/collapse.tsx.snap | 130 +++++++++++++++++---------
 1 file changed, 84 insertions(+), 46 deletions(-)

diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap
index 960f8ed1b..d0fe607b1 100644
--- a/tests/__snapshots__/collapse.tsx.snap
+++ b/tests/__snapshots__/collapse.tsx.snap
@@ -10,10 +10,11 @@ exports[`Collapse should close to custom height 1`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": "auto",
+        "maxHeight": "auto",
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   />
@@ -30,10 +31,11 @@ exports[`Collapse should close to custom height 2`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 500,
+        "maxHeight": 500,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -65,10 +67,11 @@ exports[`Collapse should close to custom height 3`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 100,
+        "maxHeight": 100,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -100,10 +103,11 @@ exports[`Collapse should close to custom height 4`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 100,
+        "maxHeight": 100,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -134,10 +138,11 @@ exports[`Collapse should close to default height 1`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": "auto",
+        "maxHeight": "auto",
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   />
@@ -153,10 +158,11 @@ exports[`Collapse should close to default height 2`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 500,
+        "maxHeight": 500,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -187,10 +193,11 @@ exports[`Collapse should close to default height 3`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -221,10 +228,11 @@ exports[`Collapse should close to default height 4`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -251,10 +259,11 @@ exports[`Collapse should match snapshot when collapsed 1`] = `
   className="clearfix collapse"
   style={
     Object {
-      "height": 0,
+      "maxHeight": 0,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 />
@@ -265,10 +274,11 @@ exports[`Collapse should match snapshot when expanded 1`] = `
   className="clearfix collapse collapse-open"
   style={
     Object {
-      "height": "auto",
+      "maxHeight": "auto",
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 />
@@ -279,10 +289,11 @@ exports[`Collapse should match snapshot with custom animation duration 1`] = `
   className="clearfix collapse"
   style={
     Object {
-      "height": 0,
+      "maxHeight": 0,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 100ms height",
+      "transition": "ease-in-out 100ms max-height",
     }
   }
 />
@@ -293,10 +304,26 @@ exports[`Collapse should match snapshot with custom collapsed height 1`] = `
   className="clearfix collapse"
   style={
     Object {
-      "height": 100,
+      "maxHeight": 100,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
+    }
+  }
+/>
+`;
+
+exports[`Collapse should match snapshot with custom min height 1`] = `
+<div
+  className="clearfix collapse"
+  style={
+    Object {
+      "maxHeight": 0,
+      "minHeight": 100,
+      "overflow": "hidden",
+      "position": "relative",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 />
@@ -307,10 +334,11 @@ exports[`Collapse should match snapshot with customized fade out 1`] = `
   className="clearfix collapse"
   style={
     Object {
-      "height": 0,
+      "maxHeight": 0,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 >
@@ -336,10 +364,11 @@ exports[`Collapse should match snapshot with fade out 1`] = `
   className="clearfix collapse"
   style={
     Object {
-      "height": 0,
+      "maxHeight": 0,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 >
@@ -370,10 +399,11 @@ exports[`Collapse should open from custom height 1`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 100,
+        "maxHeight": 100,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -405,10 +435,11 @@ exports[`Collapse should open from custom height 2`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 100,
+        "maxHeight": 100,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -440,10 +471,11 @@ exports[`Collapse should open from custom height 3`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 500,
+        "maxHeight": 500,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -475,10 +507,11 @@ exports[`Collapse should open from custom height 4`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": "auto",
+        "maxHeight": "auto",
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   />
@@ -494,10 +527,11 @@ exports[`Collapse should open from default height 1`] = `
     className="clearfix collapse"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -528,10 +562,11 @@ exports[`Collapse should open from default height 2`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 0,
+        "maxHeight": 0,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -562,10 +597,11 @@ exports[`Collapse should open from default height 3`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": 500,
+        "maxHeight": 500,
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   >
@@ -596,10 +632,11 @@ exports[`Collapse should open from default height 4`] = `
     className="clearfix collapse collapse-open"
     style={
       Object {
-        "height": "auto",
+        "maxHeight": "auto",
+        "minHeight": "auto",
         "overflow": "hidden",
         "position": "relative",
-        "transition": "ease-in-out 200ms height",
+        "transition": "ease-in-out 200ms max-height",
       }
     }
   />
@@ -611,10 +648,11 @@ exports[`Collapse should take regular element attributes 1`] = `
   className="clearfix collapse my-class"
   style={
     Object {
-      "height": 0,
+      "maxHeight": 0,
+      "minHeight": "auto",
       "overflow": "hidden",
       "position": "relative",
-      "transition": "ease-in-out 200ms height",
+      "transition": "ease-in-out 200ms max-height",
     }
   }
 />

From 1ac1be5d4a9680da3ca5237e1159526736c70b1f Mon Sep 17 00:00:00 2001
From: Jake 'Sid' Smith <jake@dabapps.com>
Date: Thu, 9 Aug 2018 16:31:11 +0100
Subject: [PATCH 6/8] Allow heights to be strings

---
 src/ts/components/collapse.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx
index c3f8bfb16..12d199b82 100644
--- a/src/ts/components/collapse.tsx
+++ b/src/ts/components/collapse.tsx
@@ -24,12 +24,12 @@ export interface CollapseProps extends ComponentProps, React.HTMLAttributes<HTML
    * Maximum height when collapsed
    * @default 0
    */
-  maxCollapsedHeight?: number;
+  maxCollapsedHeight?: number | string;
   /**
    * Minimum height
    * @default auto
    */
-  minHeight?: number;
+  minHeight?: number | string;
   /**
    * Whether to fade out the content
    * @default false
@@ -48,7 +48,7 @@ export interface CollapseProps extends ComponentProps, React.HTMLAttributes<HTML
 }
 
 export interface CollapseState { // tslint:disable-line:no-unused-variable
-  height: number;
+  height: number | string;
   opened: boolean;
   opening: boolean;
 }

From 962c780d78feab07961ff53fb0d8ec51147ac4dc Mon Sep 17 00:00:00 2001
From: Jake 'Sid' Smith <jake@dabapps.com>
Date: Thu, 9 Aug 2018 16:40:20 +0100
Subject: [PATCH 7/8] 0.8.37

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d74f2ba4a..c6cccdab0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.8.36",
+  "version": "0.8.37",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

From 4bfa654b84c4a26c47c14548d5cb8f366c413c94 Mon Sep 17 00:00:00 2001
From: Jake 'Sid' Smith <jake@dabapps.com>
Date: Fri, 10 Aug 2018 09:31:01 +0100
Subject: [PATCH 8/8] 0.9.19

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8b9223985..b327fbd07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.18",
+  "version": "0.9.19",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 8adbf3864..a0e86752a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.18",
+  "version": "0.9.19",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",