From cc38c40c3ed9684edc707f1b133ca11dccfa53c9 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Thu, 21 Mar 2019 18:40:33 +0800
Subject: [PATCH 01/58] =?UTF-8?q?Detect=20=E2=80=9Coutside=20click?=
 =?UTF-8?q?=E2=80=9D=20in=20closable()=20with=20a=20fixed,=20transparent?=
 =?UTF-8?q?=20layer=20instead=20of=20listening=20native=20events.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This allows user to “intercept” click events via React's own mechanism,
by stopping the React SyntheticEvent from propagation.

Touch event handlers are also removed for similar reasons:

Listening only to 'onClick' event help user to intercept.
Besides, 'onClick' is eventually simulated on touch devices.
---
 packages/core/src/mixins/closable.js | 67 +++++++++++++---------------
 1 file changed, 30 insertions(+), 37 deletions(-)

diff --git a/packages/core/src/mixins/closable.js b/packages/core/src/mixins/closable.js
index a0038d3b..795c72d7 100644
--- a/packages/core/src/mixins/closable.js
+++ b/packages/core/src/mixins/closable.js
@@ -5,7 +5,14 @@ import keycode from 'keycode';
 import getComponentName from '../utils/getComponentName';
 
 const ESCAPE = 'Escape';
-const TOUCH_CLOSE_DELAY = 100;
+
+const outerLayerStyle = {
+    position: 'fixed',
+    width: '100vw',
+    height: '100vh',
+    top: 0,
+    left: 0,
+};
 
 /**
  * `closable()` HOC mixin
@@ -51,20 +58,14 @@ const closable = ({
         constructor(props) {
             super(props);
             this.clickedInside = false;
-            this.closeDelayTimeout = null;
         }
 
         componentDidMount() {
             document.addEventListener('keyup', this.handleDocumentKeyup);
-            document.addEventListener('click', this.handleDocumentClickOrTouch);
-            document.addEventListener('touchend', this.handleDocumentClickOrTouch);
         }
 
         componentWillUnmount() {
             document.removeEventListener('keyup', this.handleDocumentKeyup);
-            document.removeEventListener('click', this.handleDocumentClickOrTouch);
-            document.removeEventListener('touchend', this.handleDocumentClickOrTouch);
-            clearTimeout(this.closeDelayTimeout);
         }
 
         getOptions() {
@@ -82,24 +83,8 @@ const closable = ({
         }
 
         /**
-         * Delay slightly to fire child events first
-         * before trigger the `onClose` event.
+         * @param {KeyboardEvent} event
          */
-        delayedClose = (event) => {
-            this.closeDelayTimeout = setTimeout(
-                () => this.props.onClose(event),
-                TOUCH_CLOSE_DELAY,
-            );
-        }
-
-        captureInsideEvents = (node) => {
-            if (node) {
-                node.addEventListener('click', this.handleInsideClickOrTouch);
-                node.addEventListener('touchend', this.handleInsideClickOrTouch);
-            }
-            this.nodeRef = node;
-        }
-
         handleDocumentKeyup = (event) => {
             const options = this.getOptions();
 
@@ -108,26 +93,26 @@ const closable = ({
             }
         }
 
-        handleDocumentClickOrTouch = (event) => {
+        /**
+         * @param {React.MouseEvent} event
+         */
+        handleOuterLayerClick = (event) => {
             const options = this.getOptions();
 
-            if (this.clickedInside) {
-                // already scheduled close when clicked inside, skip here.
-                this.clickedInside = false;
-                return;
-            }
-
             if (options.onClickOutside) {
-                this.delayedClose(event);
+                this.props.onClose(event);
             }
         }
 
-        handleInsideClickOrTouch = (event) => {
+        /**
+         * @param {React.MouseEvent} event
+         */
+        handleInsideClick = (event) => {
             const options = this.getOptions();
-            this.clickedInside = true;
+            event.stopPropagation();
 
             if (options.onClickInside) {
-                this.delayedClose(event);
+                this.props.onClose(event);
             }
         }
 
@@ -140,8 +125,16 @@ const closable = ({
             } = this.props;
 
             return (
-                <div ref={this.captureInsideEvents} className={className} role="presentation">
-                    <WrappedComponent {...otherProps} />
+                <div
+                    role="presentation"
+                    onClick={this.handleOuterLayerClick}
+                    style={outerLayerStyle}>
+                    <div
+                        className={className}
+                        role="presentation"
+                        onClick={this.handleInsideClick}>
+                        <WrappedComponent {...otherProps} />
+                    </div>
                 </div>
             );
         }

From a2f20e31ce0e22f308f7ba5b5af866047efb2458 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Thu, 21 Mar 2019 18:49:11 +0800
Subject: [PATCH 02/58] Move outer layer style to SCSS for closable()

---
 packages/core/src/mixins/closable.js   | 19 +++++++++----------
 packages/core/src/styles/Closable.scss |  9 +++++++++
 2 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 packages/core/src/styles/Closable.scss

diff --git a/packages/core/src/mixins/closable.js b/packages/core/src/mixins/closable.js
index 795c72d7..84cefc12 100644
--- a/packages/core/src/mixins/closable.js
+++ b/packages/core/src/mixins/closable.js
@@ -2,17 +2,16 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import keycode from 'keycode';
 
+import icBEM from '../utils/icBEM';
+import prefixClass from '../utils/prefixClass';
 import getComponentName from '../utils/getComponentName';
 
-const ESCAPE = 'Escape';
+import '../styles/Closable.scss';
 
-const outerLayerStyle = {
-    position: 'fixed',
-    width: '100vw',
-    height: '100vh',
-    top: 0,
-    left: 0,
-};
+export const COMPONENT_NAME = prefixClass('closable');
+const ROOT_BEM = icBEM(COMPONENT_NAME);
+
+const ESCAPE = 'Escape';
 
 /**
  * `closable()` HOC mixin
@@ -127,8 +126,8 @@ const closable = ({
             return (
                 <div
                     role="presentation"
-                    onClick={this.handleOuterLayerClick}
-                    style={outerLayerStyle}>
+                    className={ROOT_BEM.toString()}
+                    onClick={this.handleOuterLayerClick}>
                     <div
                         className={className}
                         role="presentation"
diff --git a/packages/core/src/styles/Closable.scss b/packages/core/src/styles/Closable.scss
new file mode 100644
index 00000000..099ac1a4
--- /dev/null
+++ b/packages/core/src/styles/Closable.scss
@@ -0,0 +1,9 @@
+@import "./mixins";
+
+.#{$prefix}-closable {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+}

From 93d82a9f28a3a1cf34bf95777a40cb1baa93b9a8 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Thu, 21 Mar 2019 18:59:18 +0800
Subject: [PATCH 03/58] =?UTF-8?q?Move=20=E2=80=9Cinside=20click=E2=80=9D?=
 =?UTF-8?q?=20detection=20to=20component=20that=20uses=20closable()=20HOC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/Popover.js         | 19 ++++++++++++++++++-
 packages/core/src/mixins/closable.js | 10 +++-------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/Popover.js b/packages/core/src/Popover.js
index 27f6352b..c984ff43 100644
--- a/packages/core/src/Popover.js
+++ b/packages/core/src/Popover.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import ListSpacingContext from './contexts/listSpacing';
@@ -24,10 +25,13 @@ export const BEM = {
 };
 
 function Popover({
+    onClick,
     // from anchored()
     placement,
     arrowStyle,
     nodeRef,
+    // from closable()
+    handleInsideClick,
     // React props
     className,
     children,
@@ -36,9 +40,19 @@ function Popover({
     const bemClass = BEM.root.modifier(placement);
     const rootClassName = classNames(bemClass.toString(), className);
 
+    const handleWrapperClick = (event) => {
+        handleInsideClick(event);
+        onClick(event);
+    };
+
     return (
         <ListSpacingContext.Provider value={false}>
-            <div className={rootClassName} ref={nodeRef} {...otherProps}>
+            <div
+                role="presentation"
+                className={rootClassName}
+                ref={nodeRef}
+                onClick={handleWrapperClick}
+                {...otherProps}>
                 <span className={BEM.arrow} style={arrowStyle} />
                 <div className={BEM.container}>
                     {children}
@@ -49,12 +63,15 @@ function Popover({
 }
 
 Popover.propTypes = {
+    onClick: PropTypes.func,
     placement: anchoredPropTypes.placement,
     arrowStyle: anchoredPropTypes.arrowStyle,
     nodeRef: anchoredPropTypes.nodeRef,
+    handleInsideClick: PropTypes.func.isRequired,
 };
 
 Popover.defaultProps = {
+    onClick: () => {},
     placement: ANCHORED_PLACEMENT.BOTTOM,
     arrowStyle: {},
     nodeRef: undefined,
diff --git a/packages/core/src/mixins/closable.js b/packages/core/src/mixins/closable.js
index 84cefc12..5d9fa2c9 100644
--- a/packages/core/src/mixins/closable.js
+++ b/packages/core/src/mixins/closable.js
@@ -119,7 +119,6 @@ const closable = ({
             const {
                 onClose,
                 closable: runtimeOptions,
-                className,
                 ...otherProps
             } = this.props;
 
@@ -128,12 +127,9 @@ const closable = ({
                     role="presentation"
                     className={ROOT_BEM.toString()}
                     onClick={this.handleOuterLayerClick}>
-                    <div
-                        className={className}
-                        role="presentation"
-                        onClick={this.handleInsideClick}>
-                        <WrappedComponent {...otherProps} />
-                    </div>
+                    <WrappedComponent
+                        handleInsideClick={this.handleInsideClick}
+                        {...otherProps} />
                 </div>
             );
         }

From 41ea532abf338a17dff1f5e146c1443595ac9cbc Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 22 Mar 2019 11:45:15 +0800
Subject: [PATCH 04/58] Update tests for closable() HOC

---
 .../src/mixins/__tests__/closable.test.js     | 90 +++++--------------
 1 file changed, 22 insertions(+), 68 deletions(-)

diff --git a/packages/core/src/mixins/__tests__/closable.test.js b/packages/core/src/mixins/__tests__/closable.test.js
index da7058e8..d5fd86d1 100644
--- a/packages/core/src/mixins/__tests__/closable.test.js
+++ b/packages/core/src/mixins/__tests__/closable.test.js
@@ -1,15 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
 import { mount } from 'enzyme';
 import keycode from 'keycode';
 
-import closable from '../closable';
-
-const Foo = () => (
-    <div id="foo">Foo</div>
+import closable, {
+    COMPONENT_NAME as OUTER_LAYER_NAME,
+} from '../closable';
+
+const Foo = ({ handleInsideClick }) => (
+    <div
+        id="foo"
+        role="presentation"
+        onClick={handleInsideClick}>
+        Foo
+    </div>
 );
-
-jest.useFakeTimers();
+Foo.propTypes = {
+    handleInsideClick: PropTypes.func.isRequired,
+};
 
 it('renders without crashing', () => {
     const div = document.createElement('div');
@@ -58,19 +68,9 @@ it('tears down event listeners on unmount', () => {
     const wrapper = mount(<ClosableFoo onClose={handleClose} />);
     wrapper.unmount();
 
-    let event = new KeyboardEvent('keyup', { keyCode: keycode('Escape') });
-    document.dispatchEvent(event);
-    expect(handleClose).not.toHaveBeenCalled();
-
-    event = new MouseEvent('click');
+    const event = new KeyboardEvent('keyup', { keyCode: keycode('Escape') });
     document.dispatchEvent(event);
     expect(handleClose).not.toHaveBeenCalled();
-
-    event = new CustomEvent('touchstart');
-    document.dispatchEvent(event);
-
-    jest.runAllTimers();
-    expect(handleClose).not.toHaveBeenCalled();
 });
 
 describe.each`
@@ -98,7 +98,7 @@ describe.each`
         const handleClose = jest.fn();
         const closableOptions = { onClickInside, onClickOutside };
 
-        const wrapper = mount(
+        mount(
             <ClosableFoo closable={closableOptions} onClose={handleClose} />,
             { attachTo: rootNode },
         );
@@ -112,8 +112,6 @@ describe.each`
         keyEvent = new KeyboardEvent('keyup', { keyCode: keycode('Escape') });
         document.dispatchEvent(keyEvent);
         expect(handleClose).toHaveBeenCalledTimes(shouldBeCalled ? 1 : 0);
-
-        wrapper.unmount();
     });
 });
 
@@ -124,15 +122,6 @@ describe.each`
     ${false}      | ${false}       | ${'should not'}
 `('$desc call onClose() for inside-clicks when onClickInside=$onClickInside', ({ onClickInside, shouldBeCalled }) => {
     const ClosableFoo = closable({ onClickInside })(Foo);
-    const rootNode = document.createElement('div');
-
-    beforeAll(() => {
-        document.body.appendChild(rootNode);
-    });
-
-    afterAll(() => {
-        document.body.removeChild(rootNode);
-    });
 
     it.each([
         { onEscape: true, onClickOutside: true },
@@ -144,24 +133,11 @@ describe.each`
         const closableOptions = { onEscape, onClickOutside };
 
         const wrapper = mount(
-            <ClosableFoo closable={closableOptions} onClose={handleClose} />,
-            { attachTo: rootNode },
+            <ClosableFoo closable={closableOptions} onClose={handleClose} />
         );
 
-        let event = new MouseEvent('click', { bubbles: true });
-        wrapper.instance().nodeRef.dispatchEvent(event);
-
-        jest.runOnlyPendingTimers();
+        wrapper.find('div#foo').simulate('click');
         expect(handleClose).toHaveBeenCalledTimes(shouldBeCalled ? 1 : 0);
-
-        // jsdom doesn't support constructing TouchEvent yet.
-        event = new CustomEvent('touchend', { bubbles: true });
-        wrapper.instance().nodeRef.dispatchEvent(event);
-
-        jest.runOnlyPendingTimers();
-        expect(handleClose).toHaveBeenCalledTimes(shouldBeCalled ? 2 : 0);
-
-        wrapper.unmount();
     });
 });
 
@@ -171,15 +147,6 @@ describe.each`
     ${false}       | ${false}       | ${'should not'}
 `('$desc call onClose() when onClickOutside=$onClickOutside', ({ onClickOutside, shouldBeCalled }) => {
     const ClosableFoo = closable({ onClickOutside })(Foo);
-    const rootNode = document.createElement('div');
-
-    beforeAll(() => {
-        document.body.appendChild(rootNode);
-    });
-
-    afterAll(() => {
-        document.body.removeChild(rootNode);
-    });
 
     it.each([
         { onEscape: true, onClickInside: true },
@@ -191,23 +158,10 @@ describe.each`
         const closableOptions = { onEscape, onClickInside };
 
         const wrapper = mount(
-            <ClosableFoo closable={closableOptions} onClose={handleClose} />,
-            { attachTo: rootNode },
+            <ClosableFoo closable={closableOptions} onClose={handleClose} />
         );
 
-        let event = new MouseEvent('click');
-        document.dispatchEvent(event);
-
-        jest.runOnlyPendingTimers();
+        wrapper.find(`.${OUTER_LAYER_NAME}`).simulate('click');
         expect(handleClose).toHaveBeenCalledTimes(shouldBeCalled ? 1 : 0);
-
-        // jsdom doesn't support constructing TouchEvent yet.
-        event = new CustomEvent('touchend');
-        document.dispatchEvent(event);
-
-        jest.runOnlyPendingTimers();
-        expect(handleClose).toHaveBeenCalledTimes(shouldBeCalled ? 2 : 0);
-
-        wrapper.unmount();
     });
 });

From 1ddf2bd3d6c569830edd9711787a4e726dd8298c Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 22 Mar 2019 11:52:36 +0800
Subject: [PATCH 05/58] Update CHANGELOG about closable() refactor

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bef1a1d1..274c8754 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Changed
+- [Core] Refactored `closable()` mixin to detect inside/outside clicks via React SyntheticEvent mechanism instead of listening native events from DOM.
 
 ## [2.1.0]
 ### Changed

From 7d0c67bbdce8b378b3001fa3cad78c5341776ea8 Mon Sep 17 00:00:00 2001
From: tz5514 <tz5514@gmail.com>
Date: Mon, 25 Mar 2019 14:09:49 +0800
Subject: [PATCH 06/58] setup react-textarea-autosize

---
 packages/form/package.json |  3 ++-
 yarn.lock                  | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/form/package.json b/packages/form/package.json
index 83d8f83a..32450346 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -37,7 +37,8 @@
     "@ichef/gypcrete": "^2.1.0",
     "classnames": "^2.2.5",
     "immutable": "^3.8.2",
-    "keycode": "^2.1.9"
+    "keycode": "^2.1.9",
+    "react-textarea-autosize": "^7.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.0",
diff --git a/yarn.lock b/yarn.lock
index 64a4bb39..4042a666 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9974,6 +9974,11 @@ react-is@^16.6.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.1.tgz#f77b1c3d901be300abe8d58645b7a59e794e5982"
   integrity sha512-wOKsGtvTMYs7WAscmwwdM8sfRRvE17Ym30zFj3n37Qx5tHRfhenPKEPILHaHob6WoLFADmQm1ZNrE5xMCM6sCw==
 
+react-is@^16.8.5:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.5.tgz#c54ac229dd66b5afe0de5acbe47647c3da692ff8"
+  integrity sha512-sudt2uq5P/2TznPV4Wtdi+Lnq3yaYW8LfvPKLM9BKD8jJNBkxMVyB0C9/GmVhLw7Jbdmndk/73n7XQGeN9A3QQ==
+
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -10006,7 +10011,7 @@ react-style-proptype@^3.0.0:
   dependencies:
     prop-types "^15.5.4"
 
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.6.1:
+react-test-renderer@^16.0.0-0:
   version "16.6.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.6.1.tgz#8ea357652be3cf81cbd6b2f686e74ebe67c17b78"
   integrity sha512-sgZwJZYIgQptRi2qk5+gB8FBQGk4gLSs0gmKZPMfhd3dLkdxIUwVLHteLN3Bnj4LokIZd3U+V2NEJUqeV2PT2w==
@@ -10016,6 +10021,16 @@ react-test-renderer@^16.0.0-0, react-test-renderer@^16.6.1:
     react-is "^16.6.1"
     scheduler "^0.11.0"
 
+react-test-renderer@^16.6.1:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.5.tgz#4cba7a8aad73f7e8a0bc4379a0fe21632886a563"
+  integrity sha512-/pFpHYQH4f35OqOae/DgOCXJDxBqD3K3akVfDhLgR0qYHoHjnICI/XS9QDwIhbrOFHWL7okVW9kKMaHuKvt2ng==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.5"
+    scheduler "^0.13.5"
+
 react-textarea-autosize@^7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.0.4.tgz#4e4be649b544a88713e7b5043f76950f35d3d503"
@@ -10023,6 +10038,14 @@ react-textarea-autosize@^7.0.4:
   dependencies:
     prop-types "^15.6.0"
 
+react-textarea-autosize@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.0.tgz#3132cb77e65d94417558d37c0bfe415a5afd3445"
+  integrity sha512-c2FlR/fP0qbxmlrW96SdrbgP/v0XZMTupqB90zybvmDVDutytUgPl7beU35klwcTeMepUIQEpQUn3P3bdshGPg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    prop-types "^15.6.0"
+
 react-transition-group@^2.0.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.0.tgz#70bca0e3546102c4dc5cf3f5f57f73447cce6874"
@@ -10761,6 +10784,14 @@ scheduler@^0.11.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.13.5:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.5.tgz#b7226625167041298af3b98088a9dbbf6d7733a8"
+  integrity sha512-K98vjkQX9OIt/riLhp6F+XtDPtMQhqNcf045vsh+pcuvHq+PHy1xCrH3pq1P40m6yR46lpVvVhKdEOtnimuUJw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"

From 1459ad51134f21d5700e93b434d3919455284663 Mon Sep 17 00:00:00 2001
From: tz5514 <tz5514@gmail.com>
Date: Mon, 25 Mar 2019 15:13:16 +0800
Subject: [PATCH 07/58] refactor TextInputRow for custom input & auto size
 textarea

---
 packages/form/src/TextInputRow.js | 112 +++++++++++-------------------
 1 file changed, 42 insertions(+), 70 deletions(-)

diff --git a/packages/form/src/TextInputRow.js b/packages/form/src/TextInputRow.js
index 174beba0..510a5cbd 100644
--- a/packages/form/src/TextInputRow.js
+++ b/packages/form/src/TextInputRow.js
@@ -1,11 +1,10 @@
+/* eslint-disable class-methods-use-this */
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import {
-    ListRow,
-    TextLabel,
-} from '@ichef/gypcrete';
+import { ListRow, TextLabel } from '@ichef/gypcrete';
+import AutoSizeTextarea from 'react-textarea-autosize';
 
 import prefixClass from '@ichef/gypcrete/lib/utils/prefixClass';
 import icBEM from '@ichef/gypcrete/lib/utils/icBEM';
@@ -21,10 +20,16 @@ export const BEM = {
     input: ROOT_BEM.element('input'),
 };
 
+const isFunction = func => (typeof func === 'function');
+
 class TextInputRow extends PureComponent {
     static propTypes = {
         label: PropTypes.node.isRequired,
         multiLine: PropTypes.bool,
+        minRows: PropTypes.number,
+        maxRows: PropTypes.number,
+        renderInput: PropTypes.func,
+        inputComponent: PropTypes.func,
         // input props
         value: PropTypes.string,
         placeholder: PropTypes.string,
@@ -38,6 +43,10 @@ class TextInputRow extends PureComponent {
 
     static defaultProps = {
         multiLine: false,
+        minRows: 2,
+        maxRows: undefined,
+        renderInput: undefined,
+        inputComponent: undefined,
         value: undefined,
         placeholder: 'Unset',
         onChange: () => {},
@@ -49,44 +58,10 @@ class TextInputRow extends PureComponent {
 
     state = {
         focused: false,
-        inputHeight: 'auto',
     };
 
-    componentDidMount() {
-        this.updateInputHeight(this.getInputRef());
-    }
-
-    componentDidUpdate(prevProps) {
-        if (this.props.value !== prevProps.value) {
-            this.updateInputHeight(this.getInputRef());
-        }
-    }
-
-    setInputRef = (ref) => {
-        this.inputRef = ref;
-    }
-
-    getInputRef = () => this.inputRef;
-
-    /**
-     * Use `getInputRef()` instead.
-     * Should remove in v2.
-     * @deprecated
-     */
-    getInputNode = this.getInputRef;
-
-    updateInputHeight(inputNode) {
-        const newHeight = inputNode.scrollHeight;
-        this.setState({ inputHeight: newHeight });
-    }
-
     handleInputFocus = (event) => {
-        const inputNode = event.target;
-
-        this.setState(
-            { focused: true },
-            () => this.updateInputHeight(inputNode)
-        );
+        this.setState({ focused: true });
         this.props.onFocus(event);
     }
 
@@ -95,55 +70,51 @@ class TextInputRow extends PureComponent {
         this.props.onBlur(event);
     }
 
-    handleInputChange = (event) => {
-        this.updateInputHeight(event.target);
-        this.props.onChange(event);
-    }
-
     renderInput({
         multiLine,
-        style: inputStyle = {},
-        ...inputProps
+        style = {},
+        renderInput,
+        inputComponent,
+        minRows,
+        maxRows,
+        ...otherProps
     }) {
         const sharedProps = {
-            ref: this.setInputRef,
             className: BEM.input.toString(),
+            style,
             onFocus: this.handleInputFocus,
             onBlur: this.handleInputBlur,
+            ...otherProps
         };
 
-        const textareaStyle = {
-            ...inputStyle,
-            height: this.state.inputHeight,
+        if (multiLine) {
+            const textareaProps = {
+                ...sharedProps,
+                minRows,
+                maxRows,
+            };
+
+            return <AutoSizeTextarea {...textareaProps} />;
+        }
+
+        const inputProps = {
+            type: 'text',
+            ...sharedProps,
         };
 
-        if (multiLine) {
-            return (
-                <textarea
-                    style={textareaStyle}
-                    onChange={this.handleInputChange}
-                    {...sharedProps}
-                    {...inputProps} />
-            );
+        if (isFunction(renderInput)) {
+            return renderInput(inputProps);
         }
 
-        return (
-            <input
-                type="text"
-                onChange={this.props.onChange}
-                {...sharedProps}
-                {...inputProps} />
+        return React.createElement(
+            isFunction(inputComponent) ? inputComponent : 'input',
+            inputProps
         );
     }
 
     render() {
         const {
             label,
-            // multiLine,
-            // input props
-            // value,
-            // placeholder,
-            onChange,
             onFocus,
             onBlur,
             // row props
@@ -171,7 +142,8 @@ class TextInputRow extends PureComponent {
             <ListRow className={rootClassName} {...rowProps}>
                 <TextLabel
                     basic={keyLabel}
-                    aside={input} />
+                    aside={input}
+                />
                 {children}
             </ListRow>
         );

From debb90e924438ba7803a989876b129a1658792bd Mon Sep 17 00:00:00 2001
From: tz5514 <tz5514@gmail.com>
Date: Mon, 25 Mar 2019 15:24:19 +0800
Subject: [PATCH 08/58] fix tests for TextInputRow

---
 .../form/src/__tests__/TextInputRow.test.js   | 52 ++++---------------
 1 file changed, 10 insertions(+), 42 deletions(-)

diff --git a/packages/form/src/__tests__/TextInputRow.test.js b/packages/form/src/__tests__/TextInputRow.test.js
index 9ab31e03..aadc1bf9 100644
--- a/packages/form/src/__tests__/TextInputRow.test.js
+++ b/packages/form/src/__tests__/TextInputRow.test.js
@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import { mount } from 'enzyme';
 
 import { ListRow } from '@ichef/gypcrete';
+import AutoSizeTextarea from 'react-textarea-autosize';
+
 import TextInputRow, { PureTextInputRow, BEM } from '../TextInputRow';
 
 /**
@@ -86,45 +88,20 @@ describe('Pure <TextInputRow>', () => {
         expect(wrapper.find(ListRow).hasClass(focusedModifier)).toBeFalsy();
     });
 
-    it('auto-grows on mount, on focus and on change under multiLine mode', () => {
+    it('pass minRows & maxRows props to <AutoSizeTextarea> when multiLine is true', () => {
         const uncontrolledWrapper = mount(
             <PatchedRow
                 multiLine
                 label="foo"
-                defaultValue="bar" />
+                defaultValue="bar"
+                minRows={5}
+                maxRows={10}
+            />
         );
 
-        // componentDidMount()
-        expect(uncontrolledWrapper.find('textarea').prop('style')).toEqual({ height: 30 });
-
-        // handleInputFocus()
-        uncontrolledWrapper.find('textarea').simulate('focus', {
-            target: { scrollHeight: 40 },
-        });
-        expect(uncontrolledWrapper.find('textarea').prop('style')).toEqual({ height: 40 });
-
-        // handleInputChange()
-        uncontrolledWrapper.find('textarea').simulate('change', {
-            target: { scrollHeight: 90 },
-        });
-        expect(uncontrolledWrapper.find('textarea').prop('style')).toEqual({ height: 90 });
-    });
-
-    it('auto-grows on controlled value change under multiLine mode', () => {
-        const controlledWrapper = mount(
-            <PatchedRow
-                multiLine
-                label="foo"
-                value="bar" />
-        );
-
-        // componentDidMount()
-        expect(controlledWrapper.find('textarea').prop('style')).toEqual({ height: 30 });
-
-        // componentDidUpdate()
-        controlledWrapper.setProps({ value: 'more bar' });
-        controlledWrapper.update();
-        expect(controlledWrapper.find('textarea').prop('style')).toEqual({ height: 60 });
+        const textareaWrapper = uncontrolledWrapper.find(AutoSizeTextarea);
+        expect(textareaWrapper.exists()).toBeTruthy();
+        expect(textareaWrapper.props()).toMatchObject({ minRows: 5, maxRows: 10 });
     });
 
     it('accepts additional children', () => {
@@ -136,13 +113,4 @@ describe('Pure <TextInputRow>', () => {
 
         expect(wrapper.containsMatchingElement(<span data-foo />)).toBeTruthy();
     });
-
-    it('keeps a ref to the <input> inside', () => {
-        const wrapper = mount(
-            <PureTextInputRow label="foo" />
-        );
-
-        const inputRef = wrapper.instance().getInputNode();
-        expect(inputRef).toBeInstanceOf(HTMLInputElement);
-    });
 });

From df4aea23321ed7daa2694f5d6812d6d13edae26f Mon Sep 17 00:00:00 2001
From: tz5514 <tz5514@gmail.com>
Date: Mon, 25 Mar 2019 15:28:18 +0800
Subject: [PATCH 09/58] update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bef1a1d1..908d48dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Changed
+- [Form] Enhance `<TextInputRow>`:
+    - Can render custom input by `renderInput` or `inputComponent` prop.
+    - Can specify textarea autosize rules by `minRows` and `maxRows` props.
 
 ## [2.1.0]
 ### Changed

From a6ddc9ef014b613020447061bbfbc41c8a68d047 Mon Sep 17 00:00:00 2001
From: tz5514 <tz5514@gmail.com>
Date: Mon, 25 Mar 2019 16:39:17 +0800
Subject: [PATCH 10/58] make TextInputRow prop inputComponent be 'input'

---
 packages/form/src/TextInputRow.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/form/src/TextInputRow.js b/packages/form/src/TextInputRow.js
index 510a5cbd..c26e27ec 100644
--- a/packages/form/src/TextInputRow.js
+++ b/packages/form/src/TextInputRow.js
@@ -29,7 +29,10 @@ class TextInputRow extends PureComponent {
         minRows: PropTypes.number,
         maxRows: PropTypes.number,
         renderInput: PropTypes.func,
-        inputComponent: PropTypes.func,
+        inputComponent: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.string,
+        ]),
         // input props
         value: PropTypes.string,
         placeholder: PropTypes.string,
@@ -46,7 +49,7 @@ class TextInputRow extends PureComponent {
         minRows: 2,
         maxRows: undefined,
         renderInput: undefined,
-        inputComponent: undefined,
+        inputComponent: 'input',
         value: undefined,
         placeholder: 'Unset',
         onChange: () => {},
@@ -106,10 +109,7 @@ class TextInputRow extends PureComponent {
             return renderInput(inputProps);
         }
 
-        return React.createElement(
-            isFunction(inputComponent) ? inputComponent : 'input',
-            inputProps
-        );
+        return React.createElement(inputComponent, inputProps);
     }
 
     render() {

From 0b6fdb1a664169d97652061932d41bd277089ee1 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Mon, 25 Mar 2019 14:49:40 +0800
Subject: [PATCH 11/58] Rename 'handleInsideClick' from 'closable()' to
 'onInsideClick'

---
 packages/core/src/Popover.js                        | 6 +++---
 packages/core/src/mixins/__tests__/closable.test.js | 6 +++---
 packages/core/src/mixins/closable.js                | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/Popover.js b/packages/core/src/Popover.js
index c984ff43..cc510d07 100644
--- a/packages/core/src/Popover.js
+++ b/packages/core/src/Popover.js
@@ -31,7 +31,7 @@ function Popover({
     arrowStyle,
     nodeRef,
     // from closable()
-    handleInsideClick,
+    onInsideClick,
     // React props
     className,
     children,
@@ -41,7 +41,7 @@ function Popover({
     const rootClassName = classNames(bemClass.toString(), className);
 
     const handleWrapperClick = (event) => {
-        handleInsideClick(event);
+        onInsideClick(event);
         onClick(event);
     };
 
@@ -67,7 +67,7 @@ Popover.propTypes = {
     placement: anchoredPropTypes.placement,
     arrowStyle: anchoredPropTypes.arrowStyle,
     nodeRef: anchoredPropTypes.nodeRef,
-    handleInsideClick: PropTypes.func.isRequired,
+    onInsideClick: PropTypes.func.isRequired,
 };
 
 Popover.defaultProps = {
diff --git a/packages/core/src/mixins/__tests__/closable.test.js b/packages/core/src/mixins/__tests__/closable.test.js
index d5fd86d1..344440e2 100644
--- a/packages/core/src/mixins/__tests__/closable.test.js
+++ b/packages/core/src/mixins/__tests__/closable.test.js
@@ -9,16 +9,16 @@ import closable, {
     COMPONENT_NAME as OUTER_LAYER_NAME,
 } from '../closable';
 
-const Foo = ({ handleInsideClick }) => (
+const Foo = ({ onInsideClick }) => (
     <div
         id="foo"
         role="presentation"
-        onClick={handleInsideClick}>
+        onClick={onInsideClick}>
         Foo
     </div>
 );
 Foo.propTypes = {
-    handleInsideClick: PropTypes.func.isRequired,
+    onInsideClick: PropTypes.func.isRequired,
 };
 
 it('renders without crashing', () => {
diff --git a/packages/core/src/mixins/closable.js b/packages/core/src/mixins/closable.js
index 5d9fa2c9..aed494c4 100644
--- a/packages/core/src/mixins/closable.js
+++ b/packages/core/src/mixins/closable.js
@@ -128,7 +128,7 @@ const closable = ({
                     className={ROOT_BEM.toString()}
                     onClick={this.handleOuterLayerClick}>
                     <WrappedComponent
-                        handleInsideClick={this.handleInsideClick}
+                        onInsideClick={this.handleInsideClick}
                         {...otherProps} />
                 </div>
             );

From f1550e5a200031b8cab1fc5454ab3de89abe630c Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Tue, 26 Mar 2019 13:56:50 +0800
Subject: [PATCH 12/58] Allow event from inside click to bubble up; ignore in
 outside handler

---
 packages/core/src/mixins/closable.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/mixins/closable.js b/packages/core/src/mixins/closable.js
index aed494c4..a041d9cf 100644
--- a/packages/core/src/mixins/closable.js
+++ b/packages/core/src/mixins/closable.js
@@ -98,6 +98,12 @@ const closable = ({
         handleOuterLayerClick = (event) => {
             const options = this.getOptions();
 
+            if (this.clickedInside) {
+                // ignoring click events bubbling up from inside
+                this.clickedInside = false;
+                return;
+            }
+
             if (options.onClickOutside) {
                 this.props.onClose(event);
             }
@@ -108,7 +114,7 @@ const closable = ({
          */
         handleInsideClick = (event) => {
             const options = this.getOptions();
-            event.stopPropagation();
+            this.clickedInside = true;
 
             if (options.onClickInside) {
                 this.props.onClose(event);

From a302b93181624372c682ecb4bfbefae29b7c88cc Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Tue, 2 Apr 2019 19:17:54 +0800
Subject: [PATCH 13/58] 'closable()' now intercepts events by default, can
 opt-out in config

---
 .../src/mixins/__tests__/closable.test.js     | 25 ++++++++++++
 packages/core/src/mixins/closable.js          | 38 ++++++++++---------
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/packages/core/src/mixins/__tests__/closable.test.js b/packages/core/src/mixins/__tests__/closable.test.js
index 344440e2..9f97d4dc 100644
--- a/packages/core/src/mixins/__tests__/closable.test.js
+++ b/packages/core/src/mixins/__tests__/closable.test.js
@@ -38,6 +38,7 @@ it('has default configs', () => {
         onEscape: true,
         onClickOutside: false,
         onClickInside: false,
+        stopEventPropagation: true,
     });
 });
 
@@ -48,6 +49,7 @@ it('takes runtime options', () => {
             closable={{
                 onEscape: false,
                 onClickOutside: true,
+                stopEventPropagation: false,
             }} />
     );
 
@@ -55,6 +57,7 @@ it('takes runtime options', () => {
         onEscape: false,
         onClickOutside: true,
         onClickInside: false,
+        stopEventPropagation: false,
     });
 });
 
@@ -73,6 +76,28 @@ it('tears down event listeners on unmount', () => {
     expect(handleClose).not.toHaveBeenCalled();
 });
 
+it('intercepts event propagation if instructed', () => {
+    const ClosableFoo = closable()(Foo);
+    const handleClick = jest.fn();
+
+    let wrapper = mount(
+        <div role="presentation" onClick={handleClick}>
+            <ClosableFoo closable={{ stopEventPropagation: true }} />
+        </div>
+    );
+    wrapper.find('div#foo').simulate('click');
+    expect(handleClick).not.toHaveBeenCalled();
+
+    wrapper = mount(
+        <div role="presentation" onClick={handleClick}>
+            <ClosableFoo closable={{ stopEventPropagation: false }} />
+        </div>
+    );
+
+    wrapper.find('div#foo').simulate('click');
+    expect(handleClick).toHaveBeenCalled();
+});
+
 describe.each`
     onEscape | shouldBeCalled | desc
     ${true}  | ${true}        | ${'should'}
diff --git a/packages/core/src/mixins/closable.js b/packages/core/src/mixins/closable.js
index a041d9cf..148880d6 100644
--- a/packages/core/src/mixins/closable.js
+++ b/packages/core/src/mixins/closable.js
@@ -20,19 +20,22 @@ const ESCAPE = 'Escape';
  * binding event listeners on `document`.
  *
  * Formerlly `escapable()`.
- *
- * @param {object} options
- * @param {boolean=} options.onEscape
- * @param {boolean=} options.onClickOutside
- * @param {boolean=} options.onClickInside
  */
 const closable = ({
     onEscape = true,
     onClickOutside = false,
     onClickInside = false,
+    stopEventPropagation = true,
 } = {}) => (WrappedComponent) => {
     const componentName = getComponentName(WrappedComponent);
 
+    const mixinConfigs = {
+        onEscape,
+        onClickOutside,
+        onClickInside,
+        stopEventPropagation,
+    };
+
     class Closable extends PureComponent {
         static displayName = `closable(${componentName})`;
 
@@ -42,16 +45,13 @@ const closable = ({
                 onEscape: PropTypes.bool,
                 onClickOutside: PropTypes.bool,
                 onClickInside: PropTypes.bool,
+                stopEventPropagation: PropTypes.bool,
             }),
         };
 
         static defaultProps = {
             onClose: () => {},
-            closable: {
-                onEscape,
-                onClickInside,
-                onClickOutside,
-            },
+            closable: mixinConfigs,
         };
 
         constructor(props) {
@@ -68,17 +68,15 @@ const closable = ({
         }
 
         getOptions() {
-            const configuredOptions = {
-                onEscape,
-                onClickInside,
-                onClickOutside,
-            };
-            const runtimeOptions = this.props.closable;
+            const { closable: runtimeOptions } = this.props;
 
-            return {
-                ...configuredOptions,
+            /** @type {typeof mixinDefaults} */
+            const actualOptions = {
+                ...mixinConfigs,
                 ...runtimeOptions,
             };
+
+            return actualOptions;
         }
 
         /**
@@ -98,6 +96,10 @@ const closable = ({
         handleOuterLayerClick = (event) => {
             const options = this.getOptions();
 
+            if (options.stopEventPropagation) {
+                event.stopPropagation();
+            }
+
             if (this.clickedInside) {
                 // ignoring click events bubbling up from inside
                 this.clickedInside = false;

From e974e38c639a787f0086805455df10140d7592ff Mon Sep 17 00:00:00 2001
From: chenesan <pipio1994@gmail.com>
Date: Tue, 9 Apr 2019 14:25:38 +0800
Subject: [PATCH 14/58] Fix mangled component name in storybook build

---
 .../storybook/.storybook/webpack.config.js    |  17 +++
 packages/storybook/package.json               |   3 +-
 yarn.lock                                     | 125 +++++++++++++++++-
 3 files changed, 143 insertions(+), 2 deletions(-)

diff --git a/packages/storybook/.storybook/webpack.config.js b/packages/storybook/.storybook/webpack.config.js
index ae266f74..fe0bff58 100644
--- a/packages/storybook/.storybook/webpack.config.js
+++ b/packages/storybook/.storybook/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const autoprefixer = require('autoprefixer');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const includePath = path.resolve(__dirname, '../..'); // gypcrete/packages
 const excludePath = /node_modules/;
@@ -10,6 +11,22 @@ module.exports = (baseConfig, env, defaultConfig) => {
         path.join(__dirname, '..')
     );
 
+    // By default storybook will minify js with default terser plugin
+    // https://webpack.js.org/configuration/optimization/#optimizationminimize
+    // That will mangle the function name so we couldn't read original
+    // component name in published storybook.
+    // Following config customize the TerserPlugin to remove the mangling.
+    // Note that this will make the total bundle size increase a little (2.9MB => 3.2MB).
+    // Consider storybook is for developer this should be fine.
+    // eslint-disable-next-line no-param-reassign
+    defaultConfig.optimization.minimizer = [new TerserPlugin({
+        cache: true,
+        parallel: true,
+        terserOptions: {
+            mangle: false,
+        }
+    })];
+
     // Ref: Storybook webpack dev config https://git.io/fpJ6h
     const babelLoaderRule = defaultConfig.module.rules[0];
     babelLoaderRule.include.push(includePath);
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index c62570c1..47826b7d 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -31,6 +31,7 @@
     "autoprefixer": "^7.2.5",
     "prop-types": "^15.6.2",
     "react": "^16.6.1",
-    "react-dom": "^16.6.1"
+    "react-dom": "^16.6.1",
+    "terser-webpack-plugin": "^1.2.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 4042a666..2fb493a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2338,6 +2338,11 @@ bluebird@^3.5.1:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.2.tgz#1be0908e054a751754549c270489c1505d4ab15a"
   integrity sha512-dhHTWMI7kMx5whMQntl7Vr9C6BvV10lFXDAasnqnrMYhXVCzzk6IO9Fo2L75jXHT07WrOngL1WDXOp+yYS91Yg==
 
+bluebird@^3.5.3:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.4.tgz#d6cc661595de30d5b3af5fcedd3c0b3ef6ec5714"
+  integrity sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw==
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
@@ -2610,6 +2615,26 @@ cacache@^10.0.4:
     unique-filename "^1.1.0"
     y18n "^4.0.0"
 
+cacache@^11.0.2:
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.2.tgz#2d81e308e3d258ca38125b676b98b2ac9ce69bfa"
+  integrity sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==
+  dependencies:
+    bluebird "^3.5.3"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.2"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
+    y18n "^4.0.0"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -2842,6 +2867,11 @@ chownr@^1.0.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
   integrity sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=
 
+chownr@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
+  integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
+
 chrome-trace-event@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.0.tgz#45a91bd2c20c9411f0963b5aaeb9a1b95e09cc48"
@@ -5085,6 +5115,11 @@ fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
+figgy-pudding@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
+  integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
+
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
@@ -5636,6 +5671,18 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
+  integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-modules@1.0.0, global-modules@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
@@ -5746,7 +5793,7 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
   integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
 
-graceful-fs@^4.1.9:
+graceful-fs@^4.1.15, graceful-fs@^4.1.9:
   version "4.1.15"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
   integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
@@ -7814,6 +7861,13 @@ lru-cache@^4.0.1, lru-cache@^4.1.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
@@ -8136,6 +8190,22 @@ mississippi@^2.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
+mississippi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
+  integrity sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^3.0.0"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
 mixin-deep@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
@@ -9700,6 +9770,14 @@ pump@^2.0.1:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
 pumpify@^1.3.3:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.3.6.tgz#00d40e5ded0a3bf1e0788b1c0cf426a42882ab64"
@@ -11144,6 +11222,14 @@ source-map-support@^0.5.6:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-support@~0.5.10:
+  version "0.5.12"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.12.tgz#b4f3b10d51857a5af0138d3ce8003b201613d599"
+  integrity sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
@@ -11243,6 +11329,13 @@ ssri@^5.2.4:
   dependencies:
     safe-buffer "^5.1.1"
 
+ssri@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
+  integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
+  dependencies:
+    figgy-pudding "^3.5.1"
+
 stack-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"
@@ -11735,6 +11828,29 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
+terser-webpack-plugin@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.3.tgz#3f98bc902fac3e5d0de730869f50668561262ec8"
+  integrity sha512-GOK7q85oAb/5kE12fMuLdn2btOS9OBZn4VsecpHDywoUC/jLhSAKOiYo0ezx7ss2EXPMzyEWFoE0s1WLE+4+oA==
+  dependencies:
+    cacache "^11.0.2"
+    find-cache-dir "^2.0.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    terser "^3.16.1"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
+terser@^3.16.1:
+  version "3.17.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
+  integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
+  dependencies:
+    commander "^2.19.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.10"
+
 test-exclude@^4.2.1:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.3.tgz#a9a5e64474e4398339245a0a769ad7c2f4a97c20"
@@ -12086,6 +12202,13 @@ unique-filename@^1.1.0:
   dependencies:
     unique-slug "^2.0.0"
 
+unique-filename@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
+  integrity sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==
+  dependencies:
+    unique-slug "^2.0.0"
+
 unique-slug@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.0.tgz#db6676e7c7cc0629878ff196097c78855ae9f4ab"

From 79ef9e4b49a0a1ed221d8f455214e58c432d4030 Mon Sep 17 00:00:00 2001
From: chenesan <pipio1994@gmail.com>
Date: Tue, 9 Apr 2019 14:26:35 +0800
Subject: [PATCH 15/58] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 908d48dc..e7943c7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - [Form] Enhance `<TextInputRow>`:
     - Can render custom input by `renderInput` or `inputComponent` prop.
     - Can specify textarea autosize rules by `minRows` and `maxRows` props.
+- [Storybook] Fix mangled component name in storybook build. (#203)
 
 ## [2.1.0]
 ### Changed

From 9f1dff01c7de9a9e0035763411bb1dc1e669cdf0 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Thu, 11 Apr 2019 18:34:51 +0800
Subject: [PATCH 16/58] Add 'vertical reverse' mode for <Text> that swap
 position of basic/aside

---
 packages/core/src/Text.js           | 12 +++++++++++-
 packages/core/src/mixins/rowComp.js | 18 ++++++++++++++++--
 packages/core/src/styles/Text.scss  | 10 ++++++++++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/Text.js b/packages/core/src/Text.js
index b2031f56..bfd7299e 100644
--- a/packages/core/src/Text.js
+++ b/packages/core/src/Text.js
@@ -41,9 +41,18 @@ const CENTER = 'center';
 const RIGHT = 'right';
 export const TEXT_ALIGN = { LEFT, CENTER, RIGHT };
 
+export const VERTICAL_ORDER = {
+    NORMAL: 'normal',
+    REVERSE: 'reverse',
+};
+
 class Text extends PureComponent {
     static propTypes = {
         align: PropTypes.oneOf(Object.values(TEXT_ALIGN)),
+        verticalOrder: PropTypes.oneOf([
+            VERTICAL_ORDER.NORMAL,
+            VERTICAL_ORDER.REVERSE,
+        ]),
         aside: PropTypes.node,
         basicRow: PropTypes.element,
         noGrow: PropTypes.bool,
@@ -109,10 +118,11 @@ class Text extends PureComponent {
     }
 
     render() {
-        const { align, noGrow, bold, className } = this.props;
+        const { align, verticalOrder, noGrow, bold, className } = this.props;
 
         const bemClass = BEM.root
             .modifier(align)
+            .modifier(`v-${verticalOrder}`)
             .modifier('no-grow', noGrow)
             .modifier('bold', bold);
 
diff --git a/packages/core/src/mixins/rowComp.js b/packages/core/src/mixins/rowComp.js
index 19911e13..75e00b4e 100644
--- a/packages/core/src/mixins/rowComp.js
+++ b/packages/core/src/mixins/rowComp.js
@@ -45,7 +45,7 @@ import getStateClassnames from '../utils/getStateClassnames';
 import { statusPropTypes } from './withStatus';
 
 import Icon from '../Icon';
-import Text from '../Text';
+import Text, { VERTICAL_ORDER } from '../Text';
 
 import { STATUS_CODE } from '../StatusIcon';
 
@@ -98,6 +98,7 @@ export function getTextLayoutProps(compAlign, hasIcon) {
 const rowComp = ({
     defaultMinified = false,
     defaultAlign = LEFT,
+    defaultVerticalOrder = VERTICAL_ORDER.NORMAL,
 } = {}) => (WrappedComponent) => {
     const componentName = getComponentName(WrappedComponent);
 
@@ -108,7 +109,16 @@ const rowComp = ({
             minified: PropTypes.bool,
 
             // Text label props
-            align: PropTypes.oneOf(Object.values(ROW_COMP_ALIGN)),
+            align: PropTypes.oneOf([
+                ROW_COMP_ALIGN.LEFT,
+                ROW_COMP_ALIGN.CENTER,
+                ROW_COMP_ALIGN.RIGHT,
+                ROW_COMP_ALIGN.REVERSE,
+            ]),
+            verticalOrder: PropTypes.oneOf([
+                VERTICAL_ORDER.NORMAL,
+                VERTICAL_ORDER.REVERSE,
+            ]),
             icon: PropTypes.oneOfType([
                 PropTypes.string,
                 PropTypes.element
@@ -133,6 +143,7 @@ const rowComp = ({
             minified: defaultMinified,
 
             align: defaultAlign,
+            verticalOrder: defaultVerticalOrder,
             icon: null,
             basic: null,
             aside: null,
@@ -182,6 +193,7 @@ const rowComp = ({
         renderContent() {
             const {
                 align,
+                verticalOrder,
                 icon,
                 basic,
                 aside,
@@ -198,6 +210,7 @@ const rowComp = ({
                 iconElement,
                 <Text
                     key="comp-text"
+                    verticalOrder={verticalOrder}
                     {...textProps}
                     {...textLayoutProps} />
             ];
@@ -208,6 +221,7 @@ const rowComp = ({
                 minified,
 
                 align,
+                verticalOrder,
                 icon,
                 basic,
                 aside,
diff --git a/packages/core/src/styles/Text.scss b/packages/core/src/styles/Text.scss
index 7b480f64..94476382 100644
--- a/packages/core/src/styles/Text.scss
+++ b/packages/core/src/styles/Text.scss
@@ -68,4 +68,14 @@
             flex-direction: row-reverse;
         }
     }
+
+    &--v-reverse {
+        .#{$prefix}-text__basic {
+            order: 2;
+        }
+
+        .#{$prefix}-text__aside {
+            order: 1;
+        }
+    }
 }

From ff46396d907da417d5fd2f117691bb9c256ab23c Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 14:58:48 +0800
Subject: [PATCH 17/58] Update tests for <Text> for new 'verticalOrder' prop

---
 packages/core/src/Text.js                | 1 +
 packages/core/src/__tests__/Text.test.js | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/core/src/Text.js b/packages/core/src/Text.js
index bfd7299e..c16a9e39 100644
--- a/packages/core/src/Text.js
+++ b/packages/core/src/Text.js
@@ -70,6 +70,7 @@ class Text extends PureComponent {
 
     static defaultProps = {
         align: LEFT,
+        verticalOrder: VERTICAL_ORDER.NORMAL,
         aside: undefined,
         basicRow: <BasicRow />,
         noGrow: false,
diff --git a/packages/core/src/__tests__/Text.test.js b/packages/core/src/__tests__/Text.test.js
index ad535477..76225357 100644
--- a/packages/core/src/__tests__/Text.test.js
+++ b/packages/core/src/__tests__/Text.test.js
@@ -106,4 +106,12 @@ describe('Pure <Text>', () => {
 
         expect(wrapper.hasClass('gyp-text--bold')).toBeTruthy();
     });
+
+    it('can render in vertical-order reverse mode', () => {
+        const wrapper = shallow(<PureText basic="foo" />);
+        expect(wrapper.hasClass('gyp-text--v-normal')).toBeTruthy();
+
+        wrapper.setProps({ verticalOrder: 'reverse' });
+        expect(wrapper.hasClass('gyp-text--v-reverse')).toBeTruthy();
+    });
 });

From d53463b9b0e25a7d60734baa85dbab348c510259 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Thu, 11 Apr 2019 19:11:57 +0800
Subject: [PATCH 18/58] Refactor rowComp() mixin to provide props for <Text>
 via context

---
 packages/core/src/mixins/rowComp.js | 66 ++++++++++++++++++-----------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/mixins/rowComp.js b/packages/core/src/mixins/rowComp.js
index 75e00b4e..8a4bfb29 100644
--- a/packages/core/src/mixins/rowComp.js
+++ b/packages/core/src/mixins/rowComp.js
@@ -60,6 +60,16 @@ const RIGHT = 'right';
 const REVERSE = 'reverse';
 export const ROW_COMP_ALIGN = { LEFT, CENTER, RIGHT, REVERSE };
 
+export const textPropTypes = {
+    align: PropTypes.string,
+    noGrow: PropTypes.bool,
+    verticalOrder: PropTypes.string,
+    basic: PropTypes.node,
+    aside: PropTypes.node,
+    tag: PropTypes.node,
+    bold: PropTypes.bool,
+};
+
 /**
  * Determine alignment for pre-configured <Text> based on
  * <RowComp> align and icon existence.
@@ -84,9 +94,8 @@ function determineTextAlign(compAlign, hasIcon) {
  * Get 'align' and 'noGrow' layout props for <Text>
  * as it would receive if rendered by rowComp().
  *
- * @param  {String} compAlign
- * @param  {Bool}   hasIcon
- * @return {Object} layoutProps
+ * @param  {string} compAlign
+ * @param  {boolean}   hasIcon
  */
 export function getTextLayoutProps(compAlign, hasIcon) {
     return {
@@ -160,7 +169,7 @@ const rowComp = ({
         };
 
         static childContextTypes = {
-            align: PropTypes.oneOf(Object.values(ROW_COMP_ALIGN)),
+            textProps: PropTypes.shape(textPropTypes),
             ...statusPropTypes,
             // status,
             // statusOptions,
@@ -168,13 +177,38 @@ const rowComp = ({
         };
 
         getChildContext() {
-            const { align, status, statusOptions, errorMsg } = this.props;
+            const { status, statusOptions, errorMsg } = this.props;
+            const textProps = this.getTextProps();
 
             return {
                 status,
                 statusOptions,
                 errorMsg,
-                align, // for <TextInput>
+                // for <TextInput>
+                textProps,
+            };
+        }
+
+        getTextProps() {
+            const {
+                align,
+                verticalOrder,
+                icon,
+                basic,
+                aside,
+                tag,
+                bold,
+            } = this.props;
+
+            const textLayoutProps = getTextLayoutProps(align, !!icon);
+
+            return {
+                verticalOrder,
+                basic,
+                aside,
+                tag,
+                bold,
+                ...textLayoutProps,
             };
         }
 
@@ -191,28 +225,12 @@ const rowComp = ({
         }
 
         renderContent() {
-            const {
-                align,
-                verticalOrder,
-                icon,
-                basic,
-                aside,
-                tag,
-                bold,
-            } = this.props;
-            const textProps = { basic, aside, tag, bold };
-            const textLayoutProps = getTextLayoutProps(align, !!icon);
-
-            // Render icon element
             const iconElement = this.renderIconElement();
+            const textProps = this.getTextProps();
 
             return [
                 iconElement,
-                <Text
-                    key="comp-text"
-                    verticalOrder={verticalOrder}
-                    {...textProps}
-                    {...textLayoutProps} />
+                <Text key="comp-text" {...textProps} />
             ];
         }
 

From 64a5552d9e79dcf4cbb91fa33c05a23b86996f33 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 14:56:19 +0800
Subject: [PATCH 19/58] Update tests for 'rowComp()' mixin for new prop and
 updated context

---
 .../core/src/mixins/__tests__/rowComp.test.js | 91 +++++++++++--------
 1 file changed, 51 insertions(+), 40 deletions(-)

diff --git a/packages/core/src/mixins/__tests__/rowComp.test.js b/packages/core/src/mixins/__tests__/rowComp.test.js
index f6707ebb..13cf00ad 100644
--- a/packages/core/src/mixins/__tests__/rowComp.test.js
+++ b/packages/core/src/mixins/__tests__/rowComp.test.js
@@ -24,6 +24,7 @@ it('renders <Text> into wrapped component', () => {
     const wrapper = shallow(
         <RowCompFoo
             bold
+            verticalOrder="reverse"
             basic="Basic text"
             tag="Tag"
             aside="Aside text" />
@@ -31,10 +32,13 @@ it('renders <Text> into wrapped component', () => {
     const textWrapper = wrapper.find(Foo).shallow().find(Text);
 
     expect(textWrapper.exists()).toBeTruthy();
-    expect(textWrapper.prop('bold')).toBeTruthy();
-    expect(textWrapper.prop('basic')).toBe('Basic text');
-    expect(textWrapper.prop('tag')).toBe('Tag');
-    expect(textWrapper.prop('aside')).toBe('Aside text');
+    expect(textWrapper.props()).toMatchObject({
+        verticalOrder: 'reverse',
+        basic: 'Basic text',
+        aside: 'Aside text',
+        tag: 'Tag',
+        bold: true,
+    });
 });
 
 it('renders <Icon> and <Text> into wrapped component', () => {
@@ -60,41 +64,40 @@ it('takes a React Element as icon', () => {
 });
 
 it('renders <Text> with adjusted alignment', () => {
-    const leftWrapper = shallow(<RowCompFoo align="left" basic="Basic" />);
-    const centerWrapper = shallow(<RowCompFoo align="center" basic="Basic" />);
-    const centerIconWrapper = shallow(<RowCompFoo align="center" basic="Basic" icon="add" />);
-    const rightWrapper = shallow(<RowCompFoo align="right" basic="Basic" />);
-    const reverseWrapper = shallow(<RowCompFoo align="reverse" basic="Basic" />);
-
-    expect(
-        leftWrapper
-            .find(Foo).shallow()
-            .find(Text).prop('align')
-    ).toBe('left');
-
-    expect(
-        centerWrapper
-            .find(Foo).shallow()
-            .find(Text).prop('align')
-    ).toBe('center');
-
-    expect(
-        centerIconWrapper
-            .find(Foo).shallow()
-            .find(Text).prop('align')
-    ).toBe('left');
-
-    expect(
-        rightWrapper
-            .find(Foo).shallow()
-            .find(Text).prop('align')
-    ).toBe('right');
-
-    expect(
-        reverseWrapper
-            .find(Foo).shallow()
-            .find(Text).prop('align')
-    ).toBe('right');
+    // Left-aligned
+    const wrapper = shallow(<RowCompFoo align="left" basic="Basic" />);
+    expect(wrapper.find(Text).props()).toMatchObject({
+        align: 'left',
+        noGrow: false,
+    });
+
+    // Center-aligned
+    wrapper.setProps({ align: 'center' });
+    expect(wrapper.find(Text).props()).toMatchObject({
+        align: 'center',
+        noGrow: true,
+    });
+
+    // Center-aligned with Icon
+    wrapper.setProps({ align: 'center', icon: 'add' });
+    expect(wrapper.find(Text).props()).toMatchObject({
+        align: 'left',
+        noGrow: true,
+    });
+
+    // Right-aligned
+    wrapper.setProps({ align: 'right' });
+    expect(wrapper.find(Text).props()).toMatchObject({
+        align: 'right',
+        noGrow: false,
+    });
+
+    // Reverse-aligned
+    wrapper.setProps({ align: 'reverse' });
+    expect(wrapper.find(Text).props()).toMatchObject({
+        align: 'right',
+        noGrow: false,
+    });
 });
 
 it('passes down other props to wrapped component', () => {
@@ -116,10 +119,18 @@ it('holds context for children components', () => {
     const context = wrapper.instance().getChildContext();
 
     expect(context).toMatchObject({
-        align: 'right',
         status: 'success',
         statusOptions: { autoHide: true },
         errorMsg: 'foo-bar',
+        textProps: {
+            align: 'right',
+            basic: null,
+            aside: null,
+            tag: null,
+            bold: false,
+            noGrow: false,
+            verticalOrder: 'normal',
+        },
     });
 });
 

From 968253cc81fab28e5727827837602ad7cd26514c Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Thu, 11 Apr 2019 19:43:20 +0800
Subject: [PATCH 20/58] Revise <TextInput> to match latest design

---
 packages/core/src/TextInput.js                | 92 ++++++++++++-------
 packages/core/src/styles/RowComp.scss         |  1 +
 packages/core/src/styles/Text.scss            |  2 +
 packages/core/src/styles/TextInput.scss       | 21 +++++
 .../examples/core/TextInput/BasicUsage.js     | 16 +++-
 5 files changed, 96 insertions(+), 36 deletions(-)
 create mode 100644 packages/core/src/styles/TextInput.scss

diff --git a/packages/core/src/TextInput.js b/packages/core/src/TextInput.js
index f1f40fee..64e15f42 100644
--- a/packages/core/src/TextInput.js
+++ b/packages/core/src/TextInput.js
@@ -3,62 +3,92 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import prefixClass from './utils/prefixClass';
-import rowComp, { getTextLayoutProps, ROW_COMP_ALIGN } from './mixins/rowComp';
+import icBEM from './utils/icBEM';
+import rowComp from './mixins/rowComp';
 
-import EditableText from './EditableText';
+import { PureText, TEXT_ALIGN, VERTICAL_ORDER } from './Text';
+import './styles/TextInput.scss';
 
 export const COMPONENT_NAME = prefixClass('text-input');
+const ROOT_BEM = icBEM(COMPONENT_NAME);
+
+export const BEM = {
+    label: ROOT_BEM.element('label'),
+    input: ROOT_BEM.element('input'),
+};
 
 /**
- * <TextInput>
- * ===========
- * The row component holding an editable `<input>` as its main part.
+ * A `<TextInput>` is a specialized `<TextLabel>`, which holds an editable `<input>`
+ * as its main part.
  * All unknown props are expected to be passed into the underlying `<input>`.
  *
- * What's different from other row component is: _basic text_ is not allowed
- * on a `<TextInput>`, since that place is occupied by an `<input>`.
+ * What's different from other row component is - it does not have a _basic text_
+ * not a _aside text_. Instead it holds a `label` and `value` (or `defaultValue`).
  *
  * @example
- * ```jsx
- * <TextInput
- *     value="Hello world"
- *     placeholder="(Unset)"
- *     onChange={event => console.log(event.target.value)} />
- * ```
+```jsx
+<TextInput
+    label="Welcome msg"
+    value="Hello world"
+    placeholder="(Unset)"
+    onChange={event => console.log(event.target.value)} />
+```
  */
 
-function TextInput(props, { align }) {
-    const {
-        wrapperProps,
-        // React props
-        className,
-        children, // strip out from component
-        ...editableTextProps
-    } = props;
-
+function TextInput({
+    label,
+    readOnly,
+    disabled,
+    // React props
+    className,
+    children,
+    ...inputProps
+}, context) {
     const rootClassName = classNames(className, COMPONENT_NAME);
-    const textLayoutProps = getTextLayoutProps(align, false);
+    const { textProps } = context;
+
+    const isEditable = !(readOnly || disabled);
+
+    const input = (
+        <input
+            className={BEM.input.toString()}
+            readOnly={readOnly}
+            disabled={disabled}
+            placeholder="Unset"
+            {...inputProps}
+        />
+    );
 
     return (
-        <div className={rootClassName} {...wrapperProps}>
-            <EditableText
-                {...textLayoutProps}
-                {...editableTextProps} />
+        <div className={rootClassName}>
+            <PureText
+                bold={isEditable}
+                align={textProps.align}
+                verticalOrder={textProps.verticalOrder}
+                basic={input}
+                aside={label}
+            />
         </div>
     );
 }
 
 TextInput.propTypes = {
-    wrapperProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    label: PropTypes.node,
+    readOnly: PropTypes.bool,
+    disabled: PropTypes.bool,
 };
 
 TextInput.defaultProps = {
-    wrapperProps: {},
+    label: undefined,
+    readOnly: false,
+    disabled: false,
 };
 
 TextInput.contextTypes = {
-    align: PropTypes.oneOf(Object.values(ROW_COMP_ALIGN)),
+    textProps: PropTypes.shape({
+        align: PropTypes.oneOf(Object.values(TEXT_ALIGN)),
+    }),
 };
 
 export { TextInput as PureTextInput };
-export default rowComp({ defaultAlign: ROW_COMP_ALIGN.REVERSE })(TextInput);
+export default rowComp({ defaultVerticalOrder: VERTICAL_ORDER.REVERSE })(TextInput);
diff --git a/packages/core/src/styles/RowComp.scss b/packages/core/src/styles/RowComp.scss
index 100817bf..cd8a5231 100644
--- a/packages/core/src/styles/RowComp.scss
+++ b/packages/core/src/styles/RowComp.scss
@@ -1,4 +1,5 @@
 @import "./mixins";
+@import "./states";
 
 .#{$prefix}-row-comp {
     font-size: rem($basic-text-font-size);
diff --git a/packages/core/src/styles/Text.scss b/packages/core/src/styles/Text.scss
index 94476382..844e4df1 100644
--- a/packages/core/src/styles/Text.scss
+++ b/packages/core/src/styles/Text.scss
@@ -60,12 +60,14 @@
     &--center {
         .#{$prefix}-text__row {
             justify-content: center;
+            text-align: center;
         }
     }
 
     &--right {
         .#{$prefix}-text__row {
             flex-direction: row-reverse;
+            text-align: right;
         }
     }
 
diff --git a/packages/core/src/styles/TextInput.scss b/packages/core/src/styles/TextInput.scss
new file mode 100644
index 00000000..5612ff02
--- /dev/null
+++ b/packages/core/src/styles/TextInput.scss
@@ -0,0 +1,21 @@
+@import "./mixins";
+
+.#{$prefix}-text-input {
+    ::placeholder {
+        color: $c-black-30;
+    }
+
+    // Elements
+    &__input {
+        width: 100%;
+        background: none;
+        color: currentColor;
+        font-weight: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        text-align: inherit;
+        border: none;
+        padding: 0;
+        outline: none;
+    }
+}
diff --git a/packages/storybook/examples/core/TextInput/BasicUsage.js b/packages/storybook/examples/core/TextInput/BasicUsage.js
index 58e4523d..113587a0 100644
--- a/packages/storybook/examples/core/TextInput/BasicUsage.js
+++ b/packages/storybook/examples/core/TextInput/BasicUsage.js
@@ -8,31 +8,37 @@ function BasicUsage() {
     return (
         <div>
             <DebugBox>
-                <TextInput onChange={action('change')} />
+                <TextInput label="Label" onChange={action('change')} />
             </DebugBox>
 
             <DebugBox>
                 <TextInput
-                    value="Controlled input"
+                    align="reverse"
+                    label="Controlled input"
+                    value="Input Value"
                     onChange={action('change')} />
             </DebugBox>
 
             <DebugBox>
                 <TextInput
-                    defaultValue="Uncontrolled input"
+                    label="Uncontrolled input"
+                    defaultValue="Input Value"
                     onChange={action('change')} />
             </DebugBox>
 
             <DebugBox>
                 <TextInput
                     readOnly
-                    value="Read-only input" />
+                    label="Read-only input"
+                    value="Input Value" />
             </DebugBox>
 
             <DebugBox>
                 <TextInput
                     disabled
-                    value="Disabled input" />
+                    label="Disabled input"
+                    value="Input Value"
+                    onChange={action('change')} />
             </DebugBox>
         </div>
     );

From 080f7b9f57e924588bc083c6c6960daa6caadeb3 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 12:08:37 +0800
Subject: [PATCH 21/58] Remove unwanted flex wrapper around input in
 <TextInput>

---
 packages/core/src/TextInput.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/TextInput.js b/packages/core/src/TextInput.js
index 64e15f42..0b831dc2 100644
--- a/packages/core/src/TextInput.js
+++ b/packages/core/src/TextInput.js
@@ -17,6 +17,22 @@ export const BEM = {
     input: ROOT_BEM.element('input'),
 };
 
+function TextInputBasicRow({ basic, className }) {
+    return (
+        <div className={className}>
+            {basic}
+        </div>
+    );
+}
+
+TextInputBasicRow.propTypes = {
+    basic: PropTypes.node,
+};
+
+TextInputBasicRow.defaultProps = {
+    basic: undefined,
+};
+
 /**
  * A `<TextInput>` is a specialized `<TextLabel>`, which holds an editable `<input>`
  * as its main part.
@@ -62,9 +78,9 @@ function TextInput({
     return (
         <div className={rootClassName}>
             <PureText
+                {...textProps}
+                basicRow={<TextInputBasicRow />}
                 bold={isEditable}
-                align={textProps.align}
-                verticalOrder={textProps.verticalOrder}
                 basic={input}
                 aside={label}
             />

From 69b316b82dc6ffaeb7bc27c0e2768c741afd7d3f Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 12:09:11 +0800
Subject: [PATCH 22/58] Remove examples for <TextInput> with status as it's
 limitedly supported

---
 packages/core/src/TextInput.js                |  5 +--
 .../examples/core/TextInput/BasicUsage.js     |  8 +++++
 .../examples/core/TextInput/WithStatus.js     | 32 -------------------
 .../examples/core/TextInput/index.js          |  2 --
 4 files changed, 11 insertions(+), 36 deletions(-)
 delete mode 100644 packages/storybook/examples/core/TextInput/WithStatus.js

diff --git a/packages/core/src/TextInput.js b/packages/core/src/TextInput.js
index 0b831dc2..e761a7c6 100644
--- a/packages/core/src/TextInput.js
+++ b/packages/core/src/TextInput.js
@@ -38,8 +38,9 @@ TextInputBasicRow.defaultProps = {
  * as its main part.
  * All unknown props are expected to be passed into the underlying `<input>`.
  *
- * What's different from other row component is - it does not have a _basic text_
- * not a _aside text_. Instead it holds a `label` and `value` (or `defaultValue`).
+ * What's different from other row component is:
+ *   1. It doesn't have `basic` nor `aside`. Instead it holds `label` and `value`/`defaultValue`.
+ *   2. It doesn't support status icons, error message nor tags
  *
  * @example
 ```jsx
diff --git a/packages/storybook/examples/core/TextInput/BasicUsage.js b/packages/storybook/examples/core/TextInput/BasicUsage.js
index 113587a0..296a17ae 100644
--- a/packages/storybook/examples/core/TextInput/BasicUsage.js
+++ b/packages/storybook/examples/core/TextInput/BasicUsage.js
@@ -26,6 +26,14 @@ function BasicUsage() {
                     onChange={action('change')} />
             </DebugBox>
 
+            <DebugBox>
+                <TextInput
+                    label="Error input"
+                    defaultValue="Input Value"
+                    status="error"
+                    onChange={action('change')} />
+            </DebugBox>
+
             <DebugBox>
                 <TextInput
                     readOnly
diff --git a/packages/storybook/examples/core/TextInput/WithStatus.js b/packages/storybook/examples/core/TextInput/WithStatus.js
deleted file mode 100644
index a845b97a..00000000
--- a/packages/storybook/examples/core/TextInput/WithStatus.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import TextInput from '@ichef/gypcrete/src/TextInput';
-import DebugBox from 'utils/DebugBox';
-
-function WithStatus() {
-    return (
-        <div>
-            <DebugBox>
-                <TextInput status="loading" />
-            </DebugBox>
-
-            <DebugBox>
-                <TextInput
-                    defaultValue="Living room TV"
-                    status="success"
-                    statusOptions={{ autohide: false }} />
-            </DebugBox>
-
-            <DebugBox>
-                <TextInput
-                    value="Kitchen Printer"
-                    status="error"
-                    errorMsg="Network failure"
-                    onChange={action('change')} />
-            </DebugBox>
-        </div>
-    );
-}
-
-export default WithStatus;
diff --git a/packages/storybook/examples/core/TextInput/index.js b/packages/storybook/examples/core/TextInput/index.js
index cb8df9f1..40d94caf 100644
--- a/packages/storybook/examples/core/TextInput/index.js
+++ b/packages/storybook/examples/core/TextInput/index.js
@@ -5,12 +5,10 @@ import TextInput, { PureTextInput } from '@ichef/gypcrete/src/TextInput';
 import getPropTables from 'utils/getPropTables';
 
 import BasicUsage from './BasicUsage';
-import WithStatus from './WithStatus';
 import MultiLines from './MultiLines';
 
 storiesOf('@ichef/gypcrete|TextInput', module)
     .add('Basic usage', withInfo()(BasicUsage))
-    .add('With status', withInfo()(WithStatus))
     .add('Multiple lines', withInfo()(MultiLines))
     // Props table
     .add('props', getPropTables([PureTextInput, TextInput]));

From fa0f9489d8d3947b825ff42fdb92099ea2aeda7c Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 14:43:00 +0800
Subject: [PATCH 23/58] Add multi-line mode for core <TextInput>

---
 packages/core/package.json                    |  3 +-
 packages/core/src/TextInput.js                | 50 +++++++++++++++----
 .../examples/core/TextInput/MultiLines.js     | 31 ++++++++----
 3 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 2bf8ed5f..ce1d6f93 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -39,7 +39,8 @@
     "create-react-context": "^0.2.3",
     "document-offset": "^1.0.4",
     "keycode": "^2.1.9",
-    "memoize-one": "^4.0.3"
+    "memoize-one": "^4.0.3",
+    "react-textarea-autosize": "^7.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.0",
diff --git a/packages/core/src/TextInput.js b/packages/core/src/TextInput.js
index e761a7c6..e6958422 100644
--- a/packages/core/src/TextInput.js
+++ b/packages/core/src/TextInput.js
@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import AutoSizeTextarea from 'react-textarea-autosize';
+
 import prefixClass from './utils/prefixClass';
 import icBEM from './utils/icBEM';
 import rowComp from './mixins/rowComp';
@@ -56,6 +58,10 @@ function TextInput({
     label,
     readOnly,
     disabled,
+    // multi-line mode
+    multiLine,
+    minRows,
+    maxRows,
     // React props
     className,
     children,
@@ -64,17 +70,35 @@ function TextInput({
     const rootClassName = classNames(className, COMPONENT_NAME);
     const { textProps } = context;
 
-    const isEditable = !(readOnly || disabled);
+    const input = (function renderInput() {
+        const sharedProps = {
+            className: BEM.input.toString(),
+            placeholder: 'Unset',
+            readOnly,
+            disabled,
+        };
+
+        if (multiLine) {
+            return (
+                <AutoSizeTextarea
+                    minRows={minRows}
+                    maxRows={maxRows}
+                    {...sharedProps}
+                    {...inputProps}
+                />
+            );
+        }
+
+        return (
+            <input
+                type="text"
+                {...sharedProps}
+                {...inputProps}
+            />
+        );
+    }());
 
-    const input = (
-        <input
-            className={BEM.input.toString()}
-            readOnly={readOnly}
-            disabled={disabled}
-            placeholder="Unset"
-            {...inputProps}
-        />
-    );
+    const isEditable = !(readOnly || disabled);
 
     return (
         <div className={rootClassName}>
@@ -93,12 +117,18 @@ TextInput.propTypes = {
     label: PropTypes.node,
     readOnly: PropTypes.bool,
     disabled: PropTypes.bool,
+    multiLine: PropTypes.bool,
+    minRows: PropTypes.number,
+    maxRows: PropTypes.number,
 };
 
 TextInput.defaultProps = {
     label: undefined,
     readOnly: false,
     disabled: false,
+    multiLine: false,
+    minRows: 2,
+    maxRows: undefined,
 };
 
 TextInput.contextTypes = {
diff --git a/packages/storybook/examples/core/TextInput/MultiLines.js b/packages/storybook/examples/core/TextInput/MultiLines.js
index b7b076c0..1f17e4ae 100644
--- a/packages/storybook/examples/core/TextInput/MultiLines.js
+++ b/packages/storybook/examples/core/TextInput/MultiLines.js
@@ -9,36 +9,47 @@ function MultiLines() {
         <div>
             <DebugBox>
                 <TextInput
-                    inputTag="textarea"
-                    onChange={action('change')} />
+                    multiLine
+                    label="Empty Textarea"
+                    onChange={action('change')}
+                />
             </DebugBox>
 
             <DebugBox>
                 <TextInput
-                    inputTag="textarea"
+                    multiLine
+                    label="Controlled Textarea"
                     value={'Controlled input\nin multiple lines'}
-                    onChange={action('change')} />
+                    onChange={action('change')}
+                />
             </DebugBox>
 
             <DebugBox>
                 <TextInput
-                    inputTag="textarea"
+                    multiLine
+                    label="Uncontrolled Textarea"
                     defaultValue={'Uncontrolled input\nin multiple lines'}
-                    onChange={action('change')} />
+                    onChange={action('change')}
+                />
             </DebugBox>
 
             <DebugBox>
                 <TextInput
+                    multiLine
                     readOnly
-                    inputTag="textarea"
-                    value={'Read-only input\nin multiple lines'} />
+                    label="Read-only Textarea"
+                    value={'Read-only input\nin multiple lines'}
+                />
             </DebugBox>
 
             <DebugBox>
                 <TextInput
+                    multiLine
                     disabled
-                    inputTag="textarea"
-                    value={'Disabled input\nin multiple lines'} />
+                    label="Disabled Textarea"
+                    value={'Disabled input\nin multiple lines'}
+                    onChange={action('change')}
+                />
             </DebugBox>
         </div>
     );

From 4ede44b14c768cdbdc75fa4dd4eba4081c09bc51 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 16:29:55 +0800
Subject: [PATCH 24/58] Rewrite tests for <TextInput>

---
 packages/core/src/TextInput.js                |   3 +-
 packages/core/src/__tests__/TextInput.test.js | 152 ++++++++++++++----
 2 files changed, 118 insertions(+), 37 deletions(-)

diff --git a/packages/core/src/TextInput.js b/packages/core/src/TextInput.js
index e6958422..f9516bdd 100644
--- a/packages/core/src/TextInput.js
+++ b/packages/core/src/TextInput.js
@@ -15,11 +15,10 @@ export const COMPONENT_NAME = prefixClass('text-input');
 const ROOT_BEM = icBEM(COMPONENT_NAME);
 
 export const BEM = {
-    label: ROOT_BEM.element('label'),
     input: ROOT_BEM.element('input'),
 };
 
-function TextInputBasicRow({ basic, className }) {
+export function TextInputBasicRow({ basic, className }) {
     return (
         <div className={className}>
             {basic}
diff --git a/packages/core/src/__tests__/TextInput.test.js b/packages/core/src/__tests__/TextInput.test.js
index 14510cf1..209689ac 100644
--- a/packages/core/src/__tests__/TextInput.test.js
+++ b/packages/core/src/__tests__/TextInput.test.js
@@ -2,9 +2,24 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { shallow } from 'enzyme';
 
-import { getTextLayoutProps, ROW_COMP_ALIGN } from '../mixins/rowComp';
-import EditableText from '../EditableText';
-import TextInput, { PureTextInput } from '../TextInput';
+import AutoSizeTextarea from 'react-textarea-autosize';
+
+import { PureText } from '../Text';
+import TextInput, { PureTextInput, TextInputBasicRow, BEM } from '../TextInput';
+
+describe('<TextInputBasicRow> helper component', () => {
+    it('renders "basic" with a simple wrapper', () => {
+        const wrapper = shallow(
+            <TextInputBasicRow
+                basic={<div data-target />}
+                className="foo-row"
+            />
+        );
+
+        expect(wrapper.hasClass('foo-row')).toBeTruthy();
+        expect(wrapper.children().matchesElement(<div data-target />));
+    });
+});
 
 describe('rowComp(TextInput)', () => {
     it('renders without crashing', () => {
@@ -14,59 +29,126 @@ describe('rowComp(TextInput)', () => {
         ReactDOM.render(element, div);
     });
 
-    it('reverse-aligns by default', () => {
+    it('has reversed vertical order by default', () => {
         const wrapper = shallow(<div><TextInput /></div>);
 
-        expect(wrapper.childAt(0).prop('align')).toBe('reverse');
+        expect(wrapper.childAt(0).prop('verticalOrder')).toBe('reverse');
     });
 });
 
 describe('pure <TextInput>', () => {
-    it('renders with a proper-named wrapper', () => {
+    it('renders a <PureText> with a named wrapper', () => {
         const wrapper = shallow(<PureTextInput />);
 
         expect(wrapper.hasClass('gyp-text-input')).toBeTruthy();
+        expect(wrapper.find(PureText).exists()).toBeTruthy();
     });
 
-    it('can set props to div-wrapper via wrapperProps', () => {
+    it('sets props for <PureText> from context', () => {
+        const mockedTextProps = { foo: 'bar' };
         const wrapper = shallow(
-            <PureTextInput
-                wrapperProps={{ disabled: true, 'data-foo': 'bar' }} />
+            <PureTextInput />,
+            { context: { textProps: mockedTextProps } },
         );
-
-        expect(wrapper.is('div')).toBeTruthy();
-        expect(wrapper.prop('disabled')).toBeTruthy();
-        expect(wrapper.prop('data-foo')).toBe('bar');
+        expect(wrapper.find(PureText).prop('foo')).toBe('bar');
     });
 
-    it('renders <EditableText> and ignores chidlren from parent mixin', () => {
-        const wrapper = shallow(
-            <PureTextInput>
-                <span data-foo />
-                Bar content
-            </PureTextInput>
-        );
+    it('customizes <PureText> rendering', () => {
+        const wrapper = shallow(<PureTextInput label="Foo" />);
 
-        expect(wrapper.text()).toBe('<withStatus(EditableText) />');
-        expect(wrapper.containsMatchingElement(<span data-foo />)).toBeFalsy();
-    });
+        expect(wrapper.find(PureText).prop('bold')).toBeTruthy();
+        expect(wrapper.find(PureText).prop('basicRow')).toEqual(<TextInputBasicRow />);
+        expect(wrapper.find(PureText).prop('aside')).toBe('Foo');
 
-    it('renders <EditableText> with layout props the same as rowComp()', () => {
-        const wrapper = shallow(<PureTextInput />, { context: { align: 'left' } });
+        wrapper.setProps({ readOnly: true });
+        expect(wrapper.find(PureText).prop('bold')).toBeFalsy();
 
-        Object.values(ROW_COMP_ALIGN).forEach((alignment) => {
-            const layoutProps = getTextLayoutProps(alignment, false);
-            wrapper.setContext({ align: alignment });
+        wrapper.setProps({ readOnly: false, disabled: true });
+        expect(wrapper.find(PureText).prop('bold')).toBeFalsy();
+    });
 
-            expect(wrapper.find(EditableText).prop('align')).toBe(layoutProps.align);
-            expect(wrapper.find(EditableText).prop('noGrow')).toBe(layoutProps.noGrow);
-        });
+    it('renders an <input type="text"> by default', () => {
+        const wrapper = shallow(<PureTextInput />);
+
+        expect(wrapper.find(PureText).prop('basic')).toMatchObject(
+            <input type="text" />
+        );
     });
 
-    it('passes unknown props to <EditableText>', () => {
-        const wrapper = shallow(<PureTextInput className="foo" foo="bar" />);
+    it('renders an <AutoSizeTextarea> with defaults in multi-line mode', () => {
+        const wrapper = shallow(<PureTextInput multiLine />);
+        expect(wrapper.find(PureText).prop('basic')).toMatchObject(
+            <AutoSizeTextarea minRows={2} />
+        );
 
-        expect(wrapper.find(EditableText).prop('className')).toBeUndefined();
-        expect(wrapper.find(EditableText).prop('foo')).toBe('bar');
+        wrapper.setProps({
+            minRows: 5,
+            maxRows: 9,
+        });
+        expect(wrapper.find(PureText).prop('basic')).toMatchObject(
+            <AutoSizeTextarea minRows={5} maxRows={9} />
+        );
     });
 });
+
+describe.each([false, true])(
+    'input behavior when multiLine=%p',
+    (multiLine) => {
+        it('has shared props', () => {
+            const wrapper = shallow(<PureTextInput multiLine={multiLine} />);
+
+            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
+                props: {
+                    className: BEM.input.toString(),
+                    placeholder: 'Unset',
+                    readOnly: false,
+                    disabled: false,
+                },
+            });
+        });
+
+        it('is forwarded with props that is unknown for <TextInput>', () => {
+            const handleChange = jest.fn();
+            const wrapper = shallow(
+                <PureTextInput
+                    multiLine={multiLine}
+                    placeholder="(Empty)"
+                    onChange={handleChange}
+                />
+            );
+
+            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
+                props: {
+                    placeholder: '(Empty)',
+                    onChange: handleChange,
+                },
+            });
+        });
+
+        it('reflects readOnly or disabled props', () => {
+            const wrapper = shallow(<PureTextInput multiLine={multiLine} />);
+            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
+                props: {
+                    readOnly: false,
+                    disabled: false,
+                },
+            });
+
+            wrapper.setProps({ readOnly: true });
+            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
+                props: {
+                    readOnly: true,
+                    disabled: false,
+                },
+            });
+
+            wrapper.setProps({ readOnly: false, disabled: true });
+            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
+                props: {
+                    readOnly: false,
+                    disabled: true,
+                },
+            });
+        });
+    }
+);

From be33cf70339af4c43e96f50915b17a2548ec2590 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 17:31:46 +0800
Subject: [PATCH 25/58] Update form <TextInputRow> to render a core <TextInput>
 instead

---
 packages/form/src/TextInputRow.js             | 172 +++---------------
 .../form/src/__tests__/TextInputRow.test.js   | 124 +++++--------
 .../examples/form/TextInputRow/BasicUsage.js  |  17 +-
 3 files changed, 83 insertions(+), 230 deletions(-)

diff --git a/packages/form/src/TextInputRow.js b/packages/form/src/TextInputRow.js
index c26e27ec..e4a25f30 100644
--- a/packages/form/src/TextInputRow.js
+++ b/packages/form/src/TextInputRow.js
@@ -1,154 +1,36 @@
 /* eslint-disable class-methods-use-this */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
-import { ListRow, TextLabel } from '@ichef/gypcrete';
-import AutoSizeTextarea from 'react-textarea-autosize';
-
-import prefixClass from '@ichef/gypcrete/lib/utils/prefixClass';
-import icBEM from '@ichef/gypcrete/lib/utils/icBEM';
+import { ListRow, TextInput } from '@ichef/gypcrete';
 
 import formRow, { rowPropTypes } from './mixins/formRow';
-import './styles/TextInputRow.scss';
-
-export const COMPONENT_NAME = prefixClass('form-text-input');
-const ROOT_BEM = icBEM(COMPONENT_NAME);
-export const BEM = {
-    root: ROOT_BEM,
-    label: ROOT_BEM.element('label'),
-    input: ROOT_BEM.element('input'),
-};
-
-const isFunction = func => (typeof func === 'function');
-
-class TextInputRow extends PureComponent {
-    static propTypes = {
-        label: PropTypes.node.isRequired,
-        multiLine: PropTypes.bool,
-        minRows: PropTypes.number,
-        maxRows: PropTypes.number,
-        renderInput: PropTypes.func,
-        inputComponent: PropTypes.oneOfType([
-            PropTypes.func,
-            PropTypes.string,
-        ]),
-        // input props
-        value: PropTypes.string,
-        placeholder: PropTypes.string,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        // from formRow()
-        ineditable: PropTypes.bool,
-        rowProps: rowPropTypes,
-    };
-
-    static defaultProps = {
-        multiLine: false,
-        minRows: 2,
-        maxRows: undefined,
-        renderInput: undefined,
-        inputComponent: 'input',
-        value: undefined,
-        placeholder: 'Unset',
-        onChange: () => {},
-        onFocus: () => {},
-        onBlur: () => {},
-        ineditable: false,
-        rowProps: {},
-    };
-
-    state = {
-        focused: false,
-    };
-
-    handleInputFocus = (event) => {
-        this.setState({ focused: true });
-        this.props.onFocus(event);
-    }
-
-    handleInputBlur = (event) => {
-        this.setState({ focused: false });
-        this.props.onBlur(event);
-    }
-
-    renderInput({
-        multiLine,
-        style = {},
-        renderInput,
-        inputComponent,
-        minRows,
-        maxRows,
-        ...otherProps
-    }) {
-        const sharedProps = {
-            className: BEM.input.toString(),
-            style,
-            onFocus: this.handleInputFocus,
-            onBlur: this.handleInputBlur,
-            ...otherProps
-        };
 
-        if (multiLine) {
-            const textareaProps = {
-                ...sharedProps,
-                minRows,
-                maxRows,
-            };
-
-            return <AutoSizeTextarea {...textareaProps} />;
-        }
-
-        const inputProps = {
-            type: 'text',
-            ...sharedProps,
-        };
-
-        if (isFunction(renderInput)) {
-            return renderInput(inputProps);
-        }
-
-        return React.createElement(inputComponent, inputProps);
-    }
-
-    render() {
-        const {
-            label,
-            onFocus,
-            onBlur,
-            // row props
-            ineditable,
-            rowProps,
-            // React props
-            className,
-            children,
-            ...renderInputProps
-        } = this.props;
-
-        const bemClass = BEM.root
-            .modifier('focused', this.state.focused)
-            .modifier('ineditable', ineditable);
-        const rootClassName = classNames(bemClass.toString(), className);
-
-        const keyLabel = (
-            <span className={BEM.label.toString()}>
-                {label}
-            </span>
-        );
-        const input = this.renderInput(renderInputProps);
-
-        return (
-            <ListRow className={rootClassName} {...rowProps}>
-                <TextLabel
-                    basic={keyLabel}
-                    aside={input}
-                />
-                {children}
-            </ListRow>
-        );
-    }
+function TextInputRow({
+    // from formRow()
+    ineditable, // unwanted prop
+    readOnly,
+    disabled,
+    rowProps,
+    ...inputProps
+}) {
+    return (
+        <ListRow {...rowProps}>
+            <TextInput
+                readOnly={readOnly}
+                disabled={disabled}
+                {...inputProps}
+            />
+        </ListRow>
+    );
 }
 
+TextInputRow.propTypes = {
+    // from formRow()
+    readOnly: PropTypes.bool.isRequired,
+    disabled: PropTypes.bool.isRequired,
+    rowProps: rowPropTypes.isRequired,
+};
+
 export { TextInputRow as PureTextInputRow };
-export default formRow({ withRef: true })(TextInputRow);
+export default formRow()(TextInputRow);
diff --git a/packages/form/src/__tests__/TextInputRow.test.js b/packages/form/src/__tests__/TextInputRow.test.js
index aadc1bf9..c74170d0 100644
--- a/packages/form/src/__tests__/TextInputRow.test.js
+++ b/packages/form/src/__tests__/TextInputRow.test.js
@@ -1,21 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 
-import { ListRow } from '@ichef/gypcrete';
-import AutoSizeTextarea from 'react-textarea-autosize';
+import { ListRow, TextInput } from '@ichef/gypcrete';
 
-import TextInputRow, { PureTextInputRow, BEM } from '../TextInputRow';
-
-/**
- * Patch `this.getInputRef` on component instance
- * so we can see if the value gets applied on lifecycle methods.
- */
-class PatchedRow extends PureTextInputRow {
-    getInputRef = jest.fn()
-        .mockReturnValueOnce({ scrollHeight: 30 })
-        .mockReturnValueOnce({ scrollHeight: 60 });
-}
+import TextInputRow, { PureTextInputRow } from '../TextInputRow';
 
 describe('formRow(TextInputRow)', () => {
     it('renders without crashing', () => {
@@ -31,86 +20,59 @@ describe('formRow(TextInputRow)', () => {
 });
 
 describe('Pure <TextInputRow>', () => {
-    it('renders a <ListRow> to wrap everything', () => {
-        const wrapper = mount(
+    it("renders a <ListRow> as wrapper, taking props from 'rowProps'", () => {
+        const mockedRowProps = {
+            foo: 'foo',
+            bar: 'bar',
+        };
+        const wrapper = shallow(
             <PureTextInputRow
-                label="foo"
-                defaultValue="bar" />
+                readOnly={false}
+                disabled={false}
+                rowProps={mockedRowProps}
+            />
         );
-        expect(wrapper.children().is(ListRow));
+        expect(wrapper.is(ListRow));
+        expect(wrapper.props()).toMatchObject(mockedRowProps);
     });
 
-    it('renders an <input> inside with all unknown props', () => {
-        const wrapper = mount(
-            <PureTextInputRow
-                label="foo"
-                defaultValue="bar" />
-        );
-        expect(wrapper.find('input').exists()).toBeTruthy();
-
-        wrapper.setProps({ id: 'foo', tabIndex: 3 });
-        expect(wrapper.find('input').prop('id')).toBe('foo');
-        expect(wrapper.find('input').prop('tabIndex')).toBe(3);
-    });
 
-    it('renders a <textarea> inside with unknown props under multiLine mode', () => {
-        const wrapper = mount(
+    it('renders an <TextInput> inside with readOnly/disable props', () => {
+        const wrapper = shallow(
             <PureTextInputRow
-                multiLine
-                label="foo"
-                defaultValue="bar" />
+                readOnly={false}
+                disabled
+                rowProps={{}}
+            />
         );
-        expect(wrapper.find('textarea').exists()).toBeTruthy();
 
-        wrapper.setProps({ id: 'foo', tabIndex: 3 });
-        expect(wrapper.find('textarea').prop('id')).toBe('foo');
-        expect(wrapper.find('textarea').prop('tabIndex')).toBe(3);
+        expect(wrapper.containsMatchingElement(
+            <TextInput
+                readOnly={false}
+                disabled
+            />
+        )).toBeTruthy();
     });
 
-    it('enters and leaves focused state on input events', () => {
-        const focusedModifier = BEM.root
-            .modifier('focused')
-            .toString({ stripBlock: true });
-
-        const wrapper = mount(
+    it('forwards unknown props to <TextInput>', () => {
+        const handleChange = jest.fn();
+        const wrapper = shallow(
             <PureTextInputRow
-                label="foo"
-                defaultValue="bar" />
-        );
-        expect(wrapper.state('focused')).toBeFalsy();
-
-        wrapper.find('input').simulate('focus');
-        expect(wrapper.state('focused')).toBeTruthy();
-        expect(wrapper.find(ListRow).hasClass(focusedModifier)).toBeTruthy();
-
-        wrapper.find('input').simulate('blur');
-        expect(wrapper.state('focused')).toBeFalsy();
-        expect(wrapper.find(ListRow).hasClass(focusedModifier)).toBeFalsy();
-    });
-
-    it('pass minRows & maxRows props to <AutoSizeTextarea> when multiLine is true', () => {
-        const uncontrolledWrapper = mount(
-            <PatchedRow
-                multiLine
-                label="foo"
-                defaultValue="bar"
-                minRows={5}
-                maxRows={10}
+                readOnly
+                disabled={false}
+                rowProps={{}}
+                label="Foo"
+                onChange={handleChange}
             />
         );
 
-        const textareaWrapper = uncontrolledWrapper.find(AutoSizeTextarea);
-        expect(textareaWrapper.exists()).toBeTruthy();
-        expect(textareaWrapper.props()).toMatchObject({ minRows: 5, maxRows: 10 });
-    });
-
-    it('accepts additional children', () => {
-        const wrapper = mount(
-            <PureTextInputRow label="foo">
-                <span data-foo />
-            </PureTextInputRow>
-        );
-
-        expect(wrapper.containsMatchingElement(<span data-foo />)).toBeTruthy();
+        expect(wrapper.containsMatchingElement(
+            <TextInput
+                readOnly
+                disabled={false}
+                label="Foo"
+                onChange={handleChange}
+            />
+        )).toBeTruthy();
     });
 });
diff --git a/packages/storybook/examples/form/TextInputRow/BasicUsage.js b/packages/storybook/examples/form/TextInputRow/BasicUsage.js
index 8bab7388..405af305 100644
--- a/packages/storybook/examples/form/TextInputRow/BasicUsage.js
+++ b/packages/storybook/examples/form/TextInputRow/BasicUsage.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 
 import List from '@ichef/gypcrete/src/List';
 import TextInputRow from '@ichef/gypcrete-form/src/TextInputRow';
@@ -9,26 +10,34 @@ function BasicUsage() {
         <List title="Configs">
             <TextInputRow
                 label="Module name"
-                defaultValue="Points module" />
+                defaultValue="Points module"
+                onChange={action('change')}
+            />
 
             <ControlledRow initValue="Points module" />
 
             <TextInputRow
                 disabled
                 label="Disabled row"
-                value="Points module" />
+                value="Points module"
+                onChange={action('change')}
+            />
 
             <TextInputRow
                 readOnly
                 label="Read-only row"
-                value="Points module" />
+                value="Points module"
+                onChange={action('change')}
+            />
 
 
             <TextInputRow
                 label="Secret code"
                 value="Foo bar"
+                onChange={action('change')}
                 status="error"
-                errorMsg="Cannot authenticate with this code." />
+                errorMsg="Cannot authenticate with this code."
+            />
         </List>
     );
 }

From 04a60aeb41973b516b8add4dd223dfa551f022da Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 19:51:08 +0800
Subject: [PATCH 26/58] Add custom input render function to <TextInput>

---
 packages/core/src/TextInput.js                | 22 +++--
 packages/core/src/__tests__/TextInput.test.js | 85 +++++++++++--------
 2 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/packages/core/src/TextInput.js b/packages/core/src/TextInput.js
index f9516bdd..f33b5bd3 100644
--- a/packages/core/src/TextInput.js
+++ b/packages/core/src/TextInput.js
@@ -57,6 +57,7 @@ function TextInput({
     label,
     readOnly,
     disabled,
+    renderInput,
     // multi-line mode
     multiLine,
     minRows,
@@ -69,21 +70,25 @@ function TextInput({
     const rootClassName = classNames(className, COMPONENT_NAME);
     const { textProps } = context;
 
-    const input = (function renderInput() {
-        const sharedProps = {
+    const input = (() => {
+        const sharedInputProps = {
             className: BEM.input.toString(),
             placeholder: 'Unset',
             readOnly,
             disabled,
+            ...inputProps,
         };
 
+        if (renderInput) {
+            return renderInput(sharedInputProps);
+        }
+
         if (multiLine) {
             return (
                 <AutoSizeTextarea
                     minRows={minRows}
                     maxRows={maxRows}
-                    {...sharedProps}
-                    {...inputProps}
+                    {...sharedInputProps}
                 />
             );
         }
@@ -91,11 +96,10 @@ function TextInput({
         return (
             <input
                 type="text"
-                {...sharedProps}
-                {...inputProps}
+                {...sharedInputProps}
             />
         );
-    }());
+    })();
 
     const isEditable = !(readOnly || disabled);
 
@@ -116,6 +120,8 @@ TextInput.propTypes = {
     label: PropTypes.node,
     readOnly: PropTypes.bool,
     disabled: PropTypes.bool,
+    renderInput: PropTypes.func,
+    // multi-line mode
     multiLine: PropTypes.bool,
     minRows: PropTypes.number,
     maxRows: PropTypes.number,
@@ -125,6 +131,8 @@ TextInput.defaultProps = {
     label: undefined,
     readOnly: false,
     disabled: false,
+    renderInput: undefined,
+    // multi-line mode
     multiLine: false,
     minRows: 2,
     maxRows: undefined,
diff --git a/packages/core/src/__tests__/TextInput.test.js b/packages/core/src/__tests__/TextInput.test.js
index 209689ac..d278d555 100644
--- a/packages/core/src/__tests__/TextInput.test.js
+++ b/packages/core/src/__tests__/TextInput.test.js
@@ -91,63 +91,78 @@ describe('pure <TextInput>', () => {
     });
 });
 
-describe.each([false, true])(
-    'input behavior when multiLine=%p',
-    (multiLine) => {
+(describe.each`
+    type         | multiLine    | desc
+    ${'default'} | ${false}     | ${'in single-line mode'}
+    ${'default'} | ${true}      | ${'in multi-line mode'}
+    ${'custom'}  | ${undefined} | ${'from render function'}
+`)(
+    '$type input behavior $desc',
+    ({ type, multiLine }) => {
+        function buildWrapper(element) {
+            if (type === 'default') {
+                const wrapper = shallow(React.cloneElement(element, { multiLine }));
+                const getInputProps = () => wrapper.find(PureText).prop('basic').props;
+
+                return [wrapper, getInputProps];
+            }
+
+            const mockedRenderInput = jest.fn(() => null);
+            const wrapper = shallow(React.cloneElement(element, {
+                renderInput: mockedRenderInput,
+            }));
+            const getInputProps = () => {
+                const { calls: funcCalls } = mockedRenderInput.mock;
+                const lastCall = funcCalls[funcCalls.length - 1];
+                return lastCall[0];
+            };
+
+            return [wrapper, getInputProps];
+        }
+
         it('has shared props', () => {
-            const wrapper = shallow(<PureTextInput multiLine={multiLine} />);
-
-            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
-                props: {
-                    className: BEM.input.toString(),
-                    placeholder: 'Unset',
-                    readOnly: false,
-                    disabled: false,
-                },
+            const [, getInputProps] = buildWrapper(<PureTextInput />);
+
+            expect(getInputProps()).toMatchObject({
+                className: BEM.input.toString(),
+                placeholder: 'Unset',
+                readOnly: false,
+                disabled: false,
             });
         });
 
         it('is forwarded with props that is unknown for <TextInput>', () => {
             const handleChange = jest.fn();
-            const wrapper = shallow(
+            const [, getInputProps] = buildWrapper(
                 <PureTextInput
-                    multiLine={multiLine}
                     placeholder="(Empty)"
                     onChange={handleChange}
                 />
             );
 
-            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
-                props: {
-                    placeholder: '(Empty)',
-                    onChange: handleChange,
-                },
+            expect(getInputProps()).toMatchObject({
+                placeholder: '(Empty)',
+                onChange: handleChange,
             });
         });
 
         it('reflects readOnly or disabled props', () => {
-            const wrapper = shallow(<PureTextInput multiLine={multiLine} />);
-            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
-                props: {
-                    readOnly: false,
-                    disabled: false,
-                },
+            const [wrapper, getInputProps] = buildWrapper(<PureTextInput />);
+            expect(getInputProps()).toMatchObject({
+                readOnly: false,
+                disabled: false,
             });
 
             wrapper.setProps({ readOnly: true });
-            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
-                props: {
-                    readOnly: true,
-                    disabled: false,
-                },
+            expect(getInputProps()).toMatchObject({
+                readOnly: true,
+                disabled: false,
             });
 
             wrapper.setProps({ readOnly: false, disabled: true });
-            expect(wrapper.find(PureText).prop('basic')).toMatchObject({
-                props: {
-                    readOnly: false,
-                    disabled: true,
-                },
+            expect(getInputProps()).toMatchObject({
+                readOnly: false,
+                disabled: true,
             });
         });
     }

From c43f2c3adb6585134bc65c2a1962634779515407 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 20:02:26 +0800
Subject: [PATCH 27/58] Add custom rendering example for new <TextInput>

---
 packages/core/src/TextInput.js                | 17 ++++++++++++++++
 .../core/TextInput/CustomRendering.js         | 20 +++++++++++++++++++
 .../examples/core/TextInput/index.js          |  2 ++
 3 files changed, 39 insertions(+)
 create mode 100644 packages/storybook/examples/core/TextInput/CustomRendering.js

diff --git a/packages/core/src/TextInput.js b/packages/core/src/TextInput.js
index f33b5bd3..1990be2e 100644
--- a/packages/core/src/TextInput.js
+++ b/packages/core/src/TextInput.js
@@ -45,11 +45,28 @@ TextInputBasicRow.defaultProps = {
  *
  * @example
 ```jsx
+# Single-line mode
 <TextInput
     label="Welcome msg"
     value="Hello world"
     placeholder="(Unset)"
     onChange={event => console.log(event.target.value)} />
+
+# Multi-line mode
+<TextInput
+    multiLine
+    minRows={5}
+    maxRows={10}
+    label="Comments"
+/>
+
+# Custom rendering
+<TextInput
+    label="Pick a color"
+    renderInput={inputProps => (
+        <input type="color" {...inputProps} />
+    )}
+/>
 ```
  */
 
diff --git a/packages/storybook/examples/core/TextInput/CustomRendering.js b/packages/storybook/examples/core/TextInput/CustomRendering.js
new file mode 100644
index 00000000..f158ea4d
--- /dev/null
+++ b/packages/storybook/examples/core/TextInput/CustomRendering.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import TextInput from '@ichef/gypcrete/src/TextInput';
+import DebugBox from 'utils/DebugBox';
+
+export default function CustomRendering() {
+    return (
+        <DebugBox>
+            <TextInput
+                label="Pick a color"
+                defaultValue="#d94e41"
+                renderInput={inputProps => (
+                    <input type="color" {...inputProps} />
+                )}
+                onChange={action('change')}
+            />
+        </DebugBox>
+    );
+}
diff --git a/packages/storybook/examples/core/TextInput/index.js b/packages/storybook/examples/core/TextInput/index.js
index 40d94caf..5212763e 100644
--- a/packages/storybook/examples/core/TextInput/index.js
+++ b/packages/storybook/examples/core/TextInput/index.js
@@ -6,9 +6,11 @@ import getPropTables from 'utils/getPropTables';
 
 import BasicUsage from './BasicUsage';
 import MultiLines from './MultiLines';
+import CustomRendering from './CustomRendering';
 
 storiesOf('@ichef/gypcrete|TextInput', module)
     .add('Basic usage', withInfo()(BasicUsage))
     .add('Multiple lines', withInfo()(MultiLines))
+    .add('Custom rendering', withInfo()(CustomRendering))
     // Props table
     .add('props', getPropTables([PureTextInput, TextInput]));

From 295b5433562766f0058f02fd563695a062ea6344 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 12 Apr 2019 20:03:56 +0800
Subject: [PATCH 28/58] Update CHANGELOG about new <TextInput> and new prop in
 <Text>

---
 CHANGELOG.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21de7491..967cea69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,12 +5,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Breaking
+- [Core] Add `verticalOrder` prop to `<Text>` so you can swap the position of `basic` and `aside`. Also applied to `rowComp()` mixin.
+- [Core] Rewrite `<TextInput>` to match latest design, offering single-line `<input>`, multi-line `<textarea>` and supports custom rendering via render prop.
+- [Form] `<TextInputRow>` now renders the new `<TextInput>` and forwards almost every prop to it, **without** a ref to its inner input.
+
 ### Changed
 - [Core] Refactored `closable()` mixin to detect inside/outside clicks via React SyntheticEvent mechanism instead of listening native events from DOM.
-- [Form] Enhance `<TextInputRow>`:
-    - Can render custom input by `renderInput` or `inputComponent` prop.
-    - Can specify textarea autosize rules by `minRows` and `maxRows` props.
 - [Storybook] Fix mangled component name in storybook build. (#203)
+- [Storybook] Update examples for core `<TextInput>` and form `<TextInputRow>`. (#203)
 
 ## [2.1.0]
 ### Changed

From a7e7fd219fd170e5980d7ea640ae7aca7024f381 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Mon, 15 Apr 2019 17:20:20 +0800
Subject: [PATCH 29/58] Extract input rendering to a function component in core
 <TextInput>

---
 packages/core/src/TextInput.js                | 105 ++++++----
 packages/core/src/__tests__/TextInput.test.js | 184 +++++++++---------
 2 files changed, 167 insertions(+), 122 deletions(-)

diff --git a/packages/core/src/TextInput.js b/packages/core/src/TextInput.js
index 1990be2e..3546cae8 100644
--- a/packages/core/src/TextInput.js
+++ b/packages/core/src/TextInput.js
@@ -18,6 +18,11 @@ export const BEM = {
     input: ROOT_BEM.element('input'),
 };
 
+
+// --------------------
+//  Helper components
+// --------------------
+
 export function TextInputBasicRow({ basic, className }) {
     return (
         <div className={className}>
@@ -34,6 +39,51 @@ TextInputBasicRow.defaultProps = {
     basic: undefined,
 };
 
+export function InnerInput({
+    multiLine,
+    minRows,
+    maxRows,
+    renderInput,
+    inputProps,
+}) {
+    if (renderInput) {
+        return renderInput(inputProps);
+    }
+
+    if (multiLine) {
+        return (
+            <AutoSizeTextarea
+                minRows={minRows}
+                maxRows={maxRows}
+                {...inputProps}
+            />
+        );
+    }
+
+    return (
+        <input
+            type="text"
+            {...inputProps}
+        />
+    );
+}
+
+InnerInput.propTypes = {
+    multiLine: PropTypes.bool,
+    minRows: PropTypes.number,
+    maxRows: PropTypes.number,
+    renderInput: PropTypes.func,
+    inputProps: PropTypes.objectOf(PropTypes.any),
+};
+
+InnerInput.defaultProps = {
+    multiLine: false,
+    minRows: 2,
+    maxRows: undefined,
+    renderInput: undefined,
+    inputProps: {},
+};
+
 /**
  * A `<TextInput>` is a specialized `<TextLabel>`, which holds an editable `<input>`
  * as its main part.
@@ -74,8 +124,8 @@ function TextInput({
     label,
     readOnly,
     disabled,
+    // <InnerInput> props
     renderInput,
-    // multi-line mode
     multiLine,
     minRows,
     maxRows,
@@ -87,36 +137,21 @@ function TextInput({
     const rootClassName = classNames(className, COMPONENT_NAME);
     const { textProps } = context;
 
-    const input = (() => {
-        const sharedInputProps = {
-            className: BEM.input.toString(),
-            placeholder: 'Unset',
-            readOnly,
-            disabled,
-            ...inputProps,
-        };
-
-        if (renderInput) {
-            return renderInput(sharedInputProps);
-        }
-
-        if (multiLine) {
-            return (
-                <AutoSizeTextarea
-                    minRows={minRows}
-                    maxRows={maxRows}
-                    {...sharedInputProps}
-                />
-            );
-        }
-
-        return (
-            <input
-                type="text"
-                {...sharedInputProps}
-            />
-        );
-    })();
+    const input = (
+        <InnerInput
+            multiLine={multiLine}
+            minRows={minRows}
+            maxRows={maxRows}
+            renderInput={renderInput}
+            inputProps={{
+                className: BEM.input.toString(),
+                placeholder: 'Unset',
+                readOnly,
+                disabled,
+                ...inputProps,
+            }}
+        />
+    );
 
     const isEditable = !(readOnly || disabled);
 
@@ -137,8 +172,8 @@ TextInput.propTypes = {
     label: PropTypes.node,
     readOnly: PropTypes.bool,
     disabled: PropTypes.bool,
+    // <InnerInput> props
     renderInput: PropTypes.func,
-    // multi-line mode
     multiLine: PropTypes.bool,
     minRows: PropTypes.number,
     maxRows: PropTypes.number,
@@ -148,10 +183,10 @@ TextInput.defaultProps = {
     label: undefined,
     readOnly: false,
     disabled: false,
+    // <InnerInput> props
     renderInput: undefined,
-    // multi-line mode
-    multiLine: false,
-    minRows: 2,
+    multiLine: undefined,
+    minRows: undefined,
     maxRows: undefined,
 };
 
diff --git a/packages/core/src/__tests__/TextInput.test.js b/packages/core/src/__tests__/TextInput.test.js
index d278d555..ea6b383f 100644
--- a/packages/core/src/__tests__/TextInput.test.js
+++ b/packages/core/src/__tests__/TextInput.test.js
@@ -5,7 +5,12 @@ import { shallow } from 'enzyme';
 import AutoSizeTextarea from 'react-textarea-autosize';
 
 import { PureText } from '../Text';
-import TextInput, { PureTextInput, TextInputBasicRow, BEM } from '../TextInput';
+import TextInput, {
+    PureTextInput,
+    TextInputBasicRow,
+    InnerInput,
+    BEM,
+} from '../TextInput';
 
 describe('<TextInputBasicRow> helper component', () => {
     it('renders "basic" with a simple wrapper', () => {
@@ -21,6 +26,51 @@ describe('<TextInputBasicRow> helper component', () => {
     });
 });
 
+describe('<InnerInput> helper component', () => {
+    it('renders an <input type="text"> by default, with inputProps', () => {
+        const wrapper = shallow(<InnerInput inputProps={{ foo: 'bar' }} />);
+
+        expect(wrapper.matchesElement(
+            <input type="text" foo="bar" />
+        )).toBeTruthy();
+    });
+
+    it('renders an <AutoSizeTextarea> with defaults in multi-line mode, with inputProps', () => {
+        const wrapper = shallow(<InnerInput multiLine />);
+
+        expect(wrapper.matchesElement(
+            <AutoSizeTextarea minRows={2} />
+        )).toBeTruthy();
+
+        wrapper.setProps({
+            minRows: 5,
+            maxRows: 9,
+        });
+        expect(wrapper.matchesElement(
+            <AutoSizeTextarea minRows={5} maxRows={9} />
+        )).toBeTruthy();
+
+        wrapper.setProps({
+            inputProps: { foo: 'bar' },
+        });
+        expect(wrapper.matchesElement(
+            <AutoSizeTextarea minRows={5} maxRows={9} foo="bar" />
+        )).toBeTruthy();
+    });
+
+    it('allows custom input rendering via "renderInput" prop', () => {
+        const mockedRenderer = jest.fn(() => null);
+        shallow(
+            <InnerInput
+                inputProps={{ foo: 'bar' }}
+                renderInput={mockedRenderer}
+            />
+        );
+
+        expect(mockedRenderer).toHaveBeenLastCalledWith({ foo: 'bar' });
+    });
+});
+
 describe('rowComp(TextInput)', () => {
     it('renders without crashing', () => {
         const div = document.createElement('div');
@@ -67,103 +117,63 @@ describe('pure <TextInput>', () => {
         expect(wrapper.find(PureText).prop('bold')).toBeFalsy();
     });
 
-    it('renders an <input type="text"> by default', () => {
-        const wrapper = shallow(<PureTextInput />);
+    it('renders a customized <InnerInput> on basic prop of <PureText>', () => {
+        const mockedRenderer = jest.fn(() => null);
 
-        expect(wrapper.find(PureText).prop('basic')).toMatchObject(
-            <input type="text" />
+        const wrapper = shallow(
+            <PureTextInput
+                multiLine
+                readOnly
+                minRows={5}
+                maxRows={9}
+                renderInput={mockedRenderer}
+            />
         );
-    });
 
-    it('renders an <AutoSizeTextarea> with defaults in multi-line mode', () => {
-        const wrapper = shallow(<PureTextInput multiLine />);
         expect(wrapper.find(PureText).prop('basic')).toMatchObject(
-            <AutoSizeTextarea minRows={2} />
+            <InnerInput
+                multiLine
+                minRows={5}
+                maxRows={9}
+                renderInput={mockedRenderer}
+                inputProps={{
+                    className: BEM.input.toString(),
+                    placeholder: 'Unset',
+                    readOnly: true,
+                    disabled: false,
+                }}
+            />
         );
 
         wrapper.setProps({
-            minRows: 5,
-            maxRows: 9,
+            multiLine: false,
+            readOnly: false,
+            disabled: true,
         });
-        expect(wrapper.find(PureText).prop('basic')).toMatchObject(
-            <AutoSizeTextarea minRows={5} maxRows={9} />
-        );
-    });
-});
 
-(describe.each`
-    type         | multiLine    | desc
-    ${'default'} | ${false}     | ${'in single-line mode'}
-    ${'default'} | ${true}      | ${'in multi-line mode'}
-    ${'custom'}  | ${undefined} | ${'from render function'}
-`)(
-    '$type input behavior $desc',
-    ({ type, multiLine }) => {
-        function buildWrapper(element) {
-            if (type === 'default') {
-                const wrapper = shallow(React.cloneElement(element, { multiLine }));
-                const getInputProps = () => wrapper.find(PureText).prop('basic').props;
-
-                return [wrapper, getInputProps];
-            }
-
-            const mockedRenderInput = jest.fn(() => null);
-            const wrapper = shallow(React.cloneElement(element, {
-                renderInput: mockedRenderInput,
-            }));
-            const getInputProps = () => {
-                const { calls: funcCalls } = mockedRenderInput.mock;
-                const lastCall = funcCalls[funcCalls.length - 1];
-                return lastCall[0];
-            };
-
-            return [wrapper, getInputProps];
-        }
-
-        it('has shared props', () => {
-            const [, getInputProps] = buildWrapper(<PureTextInput />);
-
-            expect(getInputProps()).toMatchObject({
-                className: BEM.input.toString(),
-                placeholder: 'Unset',
+        expect(wrapper.find(PureText).prop('basic').props).toMatchObject({
+            multiLine: false,
+            inputProps: {
                 readOnly: false,
-                disabled: false,
-            });
-        });
-
-        it('is forwarded with props that is unknown for <TextInput>', () => {
-            const handleChange = jest.fn();
-            const [, getInputProps] = buildWrapper(
-                <PureTextInput
-                    placeholder="(Empty)"
-                    onChange={handleChange}
-                />
-            );
-
-            expect(getInputProps()).toMatchObject({
-                placeholder: '(Empty)',
-                onChange: handleChange,
-            });
+                disabled: true,
+            },
         });
+    });
 
-        it('reflects readOnly or disabled props', () => {
-            const [wrapper, getInputProps] = buildWrapper(<PureTextInput />);
-            expect(getInputProps()).toMatchObject({
-                readOnly: false,
-                disabled: false,
-            });
-
-            wrapper.setProps({ readOnly: true });
-            expect(getInputProps()).toMatchObject({
-                readOnly: true,
-                disabled: false,
-            });
+    it('forwards unknown props to <InnerInput> via "inputProps" prop', () => {
+        const handleChange = jest.fn();
+        const wrapper = shallow(
+            <PureTextInput
+                foo="bar"
+                onChange={handleChange}
+            />
+        );
 
-            wrapper.setProps({ readOnly: false, disabled: true });
-            expect(getInputProps()).toMatchObject({
-                readOnly: false,
-                disabled: true,
-            });
+        expect(wrapper.find(PureText).prop('basic').props).toMatchObject({
+            inputProps: {
+                foo: 'bar',
+                onChange: handleChange,
+            },
         });
-    }
-);
+    });
+});

From 4c1e32aa1f6b0aea2e71d1ed8b374fd111f83631 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Mon, 15 Apr 2019 17:32:23 +0800
Subject: [PATCH 30/58] Revise alignment tests for core 'rowComp()' mixin into
 small tests

---
 .../core/src/mixins/__tests__/rowComp.test.js | 57 ++++++++++---------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/packages/core/src/mixins/__tests__/rowComp.test.js b/packages/core/src/mixins/__tests__/rowComp.test.js
index 13cf00ad..0a83841d 100644
--- a/packages/core/src/mixins/__tests__/rowComp.test.js
+++ b/packages/core/src/mixins/__tests__/rowComp.test.js
@@ -63,40 +63,45 @@ it('takes a React Element as icon', () => {
     expect(fooWrapper.find('[data-foo]')).toHaveLength(1);
 });
 
-it('renders <Text> with adjusted alignment', () => {
-    // Left-aligned
-    const wrapper = shallow(<RowCompFoo align="left" basic="Basic" />);
-    expect(wrapper.find(Text).props()).toMatchObject({
-        align: 'left',
-        noGrow: false,
+describe('it renders <Text> with adjusted alignment', () => {
+    test('left-aligned', () => {
+        const wrapper = shallow(<RowCompFoo align="left" basic="Basic" />);
+        expect(wrapper.find(Text).props()).toMatchObject({
+            align: 'left',
+            noGrow: false,
+        });
     });
 
-    // Center-aligned
-    wrapper.setProps({ align: 'center' });
-    expect(wrapper.find(Text).props()).toMatchObject({
-        align: 'center',
-        noGrow: true,
+    test('center-aligned', () => {
+        const wrapper = shallow(<RowCompFoo align="center" basic="Basic" />);
+        expect(wrapper.find(Text).props()).toMatchObject({
+            align: 'center',
+            noGrow: true,
+        });
     });
 
-    // Center-aligned with Icon
-    wrapper.setProps({ align: 'center', icon: 'add' });
-    expect(wrapper.find(Text).props()).toMatchObject({
-        align: 'left',
-        noGrow: true,
+    test('center-aligned with Icon', () => {
+        const wrapper = shallow(<RowCompFoo align="center" icon="add" basic="Basic" />);
+        expect(wrapper.find(Text).props()).toMatchObject({
+            align: 'left',
+            noGrow: true,
+        });
     });
 
-    // Right-aligned
-    wrapper.setProps({ align: 'right' });
-    expect(wrapper.find(Text).props()).toMatchObject({
-        align: 'right',
-        noGrow: false,
+    test('right-aligned', () => {
+        const wrapper = shallow(<RowCompFoo align="right" basic="Basic" />);
+        expect(wrapper.find(Text).props()).toMatchObject({
+            align: 'right',
+            noGrow: false,
+        });
     });
 
-    // Reverse-aligned
-    wrapper.setProps({ align: 'reverse' });
-    expect(wrapper.find(Text).props()).toMatchObject({
-        align: 'right',
-        noGrow: false,
+    test('reverse-aligned', () => {
+        const wrapper = shallow(<RowCompFoo align="reverse" basic="Basic" />);
+        expect(wrapper.find(Text).props()).toMatchObject({
+            align: 'right',
+            noGrow: false,
+        });
     });
 });
 

From 82defce312d0f4d13f5ac35dff936ee6b89e2b80 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Mon, 15 Apr 2019 18:16:51 +0800
Subject: [PATCH 31/58] Simplify tests of core <TextInput>

---
 packages/core/src/__tests__/TextInput.test.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/core/src/__tests__/TextInput.test.js b/packages/core/src/__tests__/TextInput.test.js
index ea6b383f..82bbd092 100644
--- a/packages/core/src/__tests__/TextInput.test.js
+++ b/packages/core/src/__tests__/TextInput.test.js
@@ -45,12 +45,6 @@ describe('<InnerInput> helper component', () => {
         wrapper.setProps({
             minRows: 5,
             maxRows: 9,
-        });
-        expect(wrapper.matchesElement(
-            <AutoSizeTextarea minRows={5} maxRows={9} />
-        )).toBeTruthy();
-
-        wrapper.setProps({
             inputProps: { foo: 'bar' },
         });
         expect(wrapper.matchesElement(

From ff88daf03d2471572927c96dd4e53b9f31526ce1 Mon Sep 17 00:00:00 2001
From: chenesan <pipio1994@gmail.com>
Date: Wed, 24 Apr 2019 11:54:45 +0800
Subject: [PATCH 32/58] Fix yarn start not work due to adding minimizer in dev
 env

---
 .../storybook/.storybook/webpack.config.js     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/storybook/.storybook/webpack.config.js b/packages/storybook/.storybook/webpack.config.js
index fe0bff58..44ac99d8 100644
--- a/packages/storybook/.storybook/webpack.config.js
+++ b/packages/storybook/.storybook/webpack.config.js
@@ -18,14 +18,16 @@ module.exports = (baseConfig, env, defaultConfig) => {
     // Following config customize the TerserPlugin to remove the mangling.
     // Note that this will make the total bundle size increase a little (2.9MB => 3.2MB).
     // Consider storybook is for developer this should be fine.
-    // eslint-disable-next-line no-param-reassign
-    defaultConfig.optimization.minimizer = [new TerserPlugin({
-        cache: true,
-        parallel: true,
-        terserOptions: {
-            mangle: false,
-        }
-    })];
+    if (defaultConfig.optimization && env === 'PRODUCTION') {
+        // eslint-disable-next-line no-param-reassign
+        defaultConfig.optimization.minimizer = [new TerserPlugin({
+            cache: true,
+            parallel: true,
+            terserOptions: {
+                mangle: false,
+            }
+        })];
+    }
 
     // Ref: Storybook webpack dev config https://git.io/fpJ6h
     const babelLoaderRule = defaultConfig.module.rules[0];

From 8789a566e8db1751e66758b6afcb664c1eb41fdb Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Thu, 25 Apr 2019 18:18:51 +0800
Subject: [PATCH 33/58] Add a basic Avatar component

---
 packages/core/src/Avatar.js                   | 28 +++++++++++++++++++
 packages/core/src/index.js                    |  2 ++
 packages/core/src/styles/Avatar.scss          | 25 +++++++++++++++++
 .../examples/core/Avatar/BasicAvatar.js       | 15 ++++++++++
 .../storybook/examples/core/Avatar/index.js   | 12 ++++++++
 5 files changed, 82 insertions(+)
 create mode 100644 packages/core/src/Avatar.js
 create mode 100644 packages/core/src/styles/Avatar.scss
 create mode 100644 packages/storybook/examples/core/Avatar/BasicAvatar.js
 create mode 100644 packages/storybook/examples/core/Avatar/index.js

diff --git a/packages/core/src/Avatar.js b/packages/core/src/Avatar.js
new file mode 100644
index 00000000..1d4ae6e5
--- /dev/null
+++ b/packages/core/src/Avatar.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import './styles/Avatar.scss';
+
+import icBEM from './utils/icBEM';
+import prefixClass from './utils/prefixClass';
+
+const COMPONENT_NAME = prefixClass('avatar');
+const ROOT_BEM = icBEM(COMPONENT_NAME);
+
+function Avatar({ className, src, alt }) {
+    const rootClass = classNames(`${ROOT_BEM.toString()}`, className);
+
+    return (
+        <div className={rootClass}>
+            <img alt={alt} src={src} />
+        </div>
+    );
+}
+
+Avatar.propTypes = {
+    src: PropTypes.bool.isRequired,
+    alt: PropTypes.bool.isRequired,
+};
+
+export default Avatar;
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
index 1a8c6946..d285a1b2 100644
--- a/packages/core/src/index.js
+++ b/packages/core/src/index.js
@@ -6,6 +6,7 @@ import EditableBasicRow from './EditableBasicRow';
 import Icon from './Icon';
 import StatusIcon from './StatusIcon';
 import Tag from './Tag';
+import Avatar from './Avatar';
 import Text from './Text';
 import EditableText from './EditableText';
 import Tooltip from './Tooltip';
@@ -49,6 +50,7 @@ export {
     StatusIcon,
     Tag,
     Text,
+    Avatar,
     EditableText,
     Tooltip,
     SwitchIcon,
diff --git a/packages/core/src/styles/Avatar.scss b/packages/core/src/styles/Avatar.scss
new file mode 100644
index 00000000..e9f00af8
--- /dev/null
+++ b/packages/core/src/styles/Avatar.scss
@@ -0,0 +1,25 @@
+@import "./mixins";
+
+// -------------------------------------
+//   Component Block
+// -------------------------------------
+.#{$prefix}-avatar {
+    width: 2.2rem;
+    height: 2.2rem;
+    overflow: hidden;
+    margin: .2rem .25rem;
+
+    > img {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        object-fit: cover;
+    }
+}
+
+// Override the default left margin on <ListRow>
+.#{$prefix}-list-row > .#{$prefix}-avatar {
+    &:first-child {
+        margin-left: 0;
+    }
+}
diff --git a/packages/storybook/examples/core/Avatar/BasicAvatar.js b/packages/storybook/examples/core/Avatar/BasicAvatar.js
new file mode 100644
index 00000000..c8d364ab
--- /dev/null
+++ b/packages/storybook/examples/core/Avatar/BasicAvatar.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Avatar from '@ichef/gypcrete/src/Avatar';
+
+function BasicAvatarExample() {
+    return (
+        <>
+            <Avatar src="https://api.adorable.io/avatars/285/design@ichef.tw" />
+            <Avatar src="https://api.adorable.io/avatars/285/rd@ichef.tw" />
+            <Avatar src="https://api.adorable.io/avatars/285/marketing@ichef.tw" />
+        </>
+    );
+}
+
+export default BasicAvatarExample;
diff --git a/packages/storybook/examples/core/Avatar/index.js b/packages/storybook/examples/core/Avatar/index.js
new file mode 100644
index 00000000..b06bdf46
--- /dev/null
+++ b/packages/storybook/examples/core/Avatar/index.js
@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import Avatar from '@ichef/gypcrete/src/Avatar';
+import getPropTables from 'utils/getPropTables';
+
+import BasicAvatar from './BasicAvatar';
+
+storiesOf('@ichef/gypcrete|Avatar', module)
+    .add('basic usage', withInfo()(BasicAvatar))
+    // Props table
+    .add('props', getPropTables([Avatar]));

From ba7e9d1102b1a6284d0a54911dc6840370c23a74 Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Fri, 26 Apr 2019 12:17:52 +0800
Subject: [PATCH 34/58] Add different types of avatars

Fix the proptypes of Avatar
---
 packages/core/src/Avatar.js                   | 28 +++++++++++++++----
 packages/core/src/styles/Avatar.scss          | 19 +++++++++++++
 .../examples/core/Avatar/BasicAvatar.js       | 12 ++++----
 3 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/Avatar.js b/packages/core/src/Avatar.js
index 1d4ae6e5..13a723ff 100644
--- a/packages/core/src/Avatar.js
+++ b/packages/core/src/Avatar.js
@@ -10,19 +10,37 @@ import prefixClass from './utils/prefixClass';
 const COMPONENT_NAME = prefixClass('avatar');
 const ROOT_BEM = icBEM(COMPONENT_NAME);
 
-function Avatar({ className, src, alt }) {
-    const rootClass = classNames(`${ROOT_BEM.toString()}`, className);
+const SQUARE = 'square';
+const ROUNDED = 'rounded';
+const CIRCLE = 'circle';
+export const AVATAR_TYPE = { SQUARE, ROUNDED, CIRCLE };
+
+function Avatar({
+    className,
+    src,
+    alt,
+    type,
+    ...otherProps
+}) {
+    const bemClass = ROOT_BEM.modifier(type);
+
+    const rootClassName = classNames(className, `${bemClass}`);
 
     return (
-        <div className={rootClass}>
+        <div className={rootClassName} {...otherProps}>
             <img alt={alt} src={src} />
         </div>
     );
 }
 
 Avatar.propTypes = {
-    src: PropTypes.bool.isRequired,
-    alt: PropTypes.bool.isRequired,
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(Object.values(AVATAR_TYPE)),
+};
+
+Avatar.defaultProps = {
+    type: SQUARE,
 };
 
 export default Avatar;
diff --git a/packages/core/src/styles/Avatar.scss b/packages/core/src/styles/Avatar.scss
index e9f00af8..3e4a9e6c 100644
--- a/packages/core/src/styles/Avatar.scss
+++ b/packages/core/src/styles/Avatar.scss
@@ -8,7 +8,26 @@
     height: 2.2rem;
     overflow: hidden;
     margin: .2rem .25rem;
+    background-color: $c-gray;
 
+    // ----------------------
+    //  <Avatar> variants
+    // ----------------------
+    &--square {
+        border-radius: 0;
+    }
+
+    &--rounded {
+        border-radius: 6px;
+    }
+
+    &--circle {
+        border-radius: 50%;
+    }
+
+    // ----------------------
+    //  Inner image
+    // ----------------------
     > img {
         width: 100%;
         height: 100%;
diff --git a/packages/storybook/examples/core/Avatar/BasicAvatar.js b/packages/storybook/examples/core/Avatar/BasicAvatar.js
index c8d364ab..f7667bcc 100644
--- a/packages/storybook/examples/core/Avatar/BasicAvatar.js
+++ b/packages/storybook/examples/core/Avatar/BasicAvatar.js
@@ -1,14 +1,16 @@
 import React from 'react';
 
 import Avatar from '@ichef/gypcrete/src/Avatar';
+import FlexRow from 'utils/FlexRow';
 
 function BasicAvatarExample() {
     return (
-        <>
-            <Avatar src="https://api.adorable.io/avatars/285/design@ichef.tw" />
-            <Avatar src="https://api.adorable.io/avatars/285/rd@ichef.tw" />
-            <Avatar src="https://api.adorable.io/avatars/285/marketing@ichef.tw" />
-        </>
+        <FlexRow>
+            <Avatar alt="Avatar of Design" src="https://api.adorable.io/avatars/285/design@ichef.tw" />
+            <Avatar type="square" alt="Avatar of RD" src="https://api.adorable.io/avatars/285/rd@ichef.tw" />
+            <Avatar type="rounded" alt="Avatar of Marketing" src="https://api.adorable.io/avatars/285/marketing@ichef.tw" />
+            <Avatar type="circle" alt="Avatar of Customer Service" src="https://api.adorable.io/avatars/285/customer_service@ichef.tw" />
+        </FlexRow>
     );
 }
 

From 2ab148409e013a45a83bbca7b757d2115c14fde8 Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Fri, 26 Apr 2019 12:18:02 +0800
Subject: [PATCH 35/58] Add tests for Avatar

---
 packages/core/src/__tests__/Avatar.test.js | 28 ++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 packages/core/src/__tests__/Avatar.test.js

diff --git a/packages/core/src/__tests__/Avatar.test.js b/packages/core/src/__tests__/Avatar.test.js
new file mode 100644
index 00000000..42c8ca5a
--- /dev/null
+++ b/packages/core/src/__tests__/Avatar.test.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+
+import Avatar from '../Avatar';
+
+describe('<Avatar>', () => {
+    it('renders without crashing', () => {
+        const div = document.createElement('div');
+        const element = <Avatar src="LINK" alt="ALT" />;
+
+        ReactDOM.render(element, div);
+    });
+
+    it('handles type modifiers', () => {
+        let wrapper = shallow(<Avatar src="LINK" alt="ALT" />);
+        expect(wrapper.hasClass('gyp-avatar--square')).toBeTruthy();
+
+        wrapper = shallow(<Avatar type="square" src="LINK" alt="ALT" />);
+        expect(wrapper.hasClass('gyp-avatar--square')).toBeTruthy();
+
+        wrapper = shallow(<Avatar type="rounded" src="LINK" alt="ALT" />);
+        expect(wrapper.hasClass('gyp-avatar--rounded')).toBeTruthy();
+
+        wrapper = shallow(<Avatar type="circle" src="LINK" alt="ALT" />);
+        expect(wrapper.hasClass('gyp-avatar--circle')).toBeTruthy();
+    });
+});

From c34bbfef3fff3b968252adceb4f3ea3534204b4d Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Fri, 26 Apr 2019 16:29:52 +0800
Subject: [PATCH 36/58] Adjust the styles of Avatar

---
 packages/core/src/styles/Avatar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/styles/Avatar.scss b/packages/core/src/styles/Avatar.scss
index 3e4a9e6c..943335a9 100644
--- a/packages/core/src/styles/Avatar.scss
+++ b/packages/core/src/styles/Avatar.scss
@@ -7,7 +7,7 @@
     width: 2.2rem;
     height: 2.2rem;
     overflow: hidden;
-    margin: .2rem .25rem;
+    margin: .2rem .45rem .2rem .25rem;
     background-color: $c-gray;
 
     // ----------------------

From b8df563642bc31338e10dad007a507ac960d065d Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Fri, 26 Apr 2019 16:30:45 +0800
Subject: [PATCH 37/58] Add the avatar to rowComp

---
 packages/core/src/mixins/rowComp.js                    |  5 ++++-
 .../storybook/examples/core/Checkbox/BasicCheckbox.js  | 10 ++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/mixins/rowComp.js b/packages/core/src/mixins/rowComp.js
index 8a4bfb29..cdc83e9c 100644
--- a/packages/core/src/mixins/rowComp.js
+++ b/packages/core/src/mixins/rowComp.js
@@ -133,6 +133,7 @@ const rowComp = ({
                 PropTypes.element
             ]),
             basic: PropTypes.node,
+            avatar: PropTypes.node,
             aside: PropTypes.node,
             tag: PropTypes.node,
             bold: PropTypes.bool,
@@ -155,6 +156,7 @@ const rowComp = ({
             verticalOrder: defaultVerticalOrder,
             icon: null,
             basic: null,
+            avatar: null,
             aside: null,
             tag: null,
             bold: false,
@@ -237,7 +239,7 @@ const rowComp = ({
         render() {
             const {
                 minified,
-
+                avatar,
                 align,
                 verticalOrder,
                 icon,
@@ -276,6 +278,7 @@ const rowComp = ({
 
             return (
                 <WrappedComponent className={wrapperClassName} {...otherProps}>
+                    {avatar}
                     {children || this.renderContent()}
                 </WrappedComponent>
             );
diff --git a/packages/storybook/examples/core/Checkbox/BasicCheckbox.js b/packages/storybook/examples/core/Checkbox/BasicCheckbox.js
index a21416fa..51590c5d 100644
--- a/packages/storybook/examples/core/Checkbox/BasicCheckbox.js
+++ b/packages/storybook/examples/core/Checkbox/BasicCheckbox.js
@@ -1,9 +1,12 @@
 import React from 'react';
 
 import Checkbox from '@ichef/gypcrete/src/Checkbox';
+import Avatar from '@ichef/gypcrete/src/Avatar';
 import DebugBox from 'utils/DebugBox';
 
 function BasicCheckboxExample() {
+    const rdAvatar = <Avatar type="square" alt="Avatar of RD" src="https://api.adorable.io/avatars/285/rd@ichef.tw" />;
+
     return (
         <div>
             <DebugBox>
@@ -18,6 +21,13 @@ function BasicCheckboxExample() {
                     tag="New" />
             </DebugBox>
 
+            <DebugBox>
+                <Checkbox
+                    defaultChecked
+                    basic="Join pilot program"
+                    avatar={rdAvatar} />
+            </DebugBox>
+
             <DebugBox>
                 <Checkbox
                     defaultChecked

From b425c3318f13c214a1654acc4f513c573d35a13b Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Fri, 26 Apr 2019 17:38:53 +0800
Subject: [PATCH 38/58] Add Avatar to the SelectOption

---
 packages/form/src/SelectOption.js             |  2 ++
 .../examples/form/SelectRow/WithAvatar.js     | 26 +++++++++++++++++++
 .../examples/form/SelectRow/index.js          |  2 ++
 3 files changed, 30 insertions(+)
 create mode 100644 packages/storybook/examples/form/SelectRow/WithAvatar.js

diff --git a/packages/form/src/SelectOption.js b/packages/form/src/SelectOption.js
index 14005cf2..d6795c92 100644
--- a/packages/form/src/SelectOption.js
+++ b/packages/form/src/SelectOption.js
@@ -17,6 +17,7 @@ export const TYPE_SYMBOL = Symbol('SelectOption');
 function SelectOption({
     label,
     value,
+    avatar,
     readOnly,
     checked,
     onChange,
@@ -32,6 +33,7 @@ function SelectOption({
                 checked={checked}
                 disabled={readOnly}
                 basic={label}
+                avatar={avatar}
                 onChange={handleCheckboxChange}
                 {...checkboxProps} />
         </ListRow>
diff --git a/packages/storybook/examples/form/SelectRow/WithAvatar.js b/packages/storybook/examples/form/SelectRow/WithAvatar.js
new file mode 100644
index 00000000..0f32c0c8
--- /dev/null
+++ b/packages/storybook/examples/form/SelectRow/WithAvatar.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import Avatar from '@ichef/gypcrete/src/Avatar';
+import List from '@ichef/gypcrete/src/List';
+import SelectRow from '@ichef/gypcrete-form/src/SelectRow';
+import Option from '@ichef/gypcrete-form/src/SelectOption';
+
+function WithAvatar() {
+    const rdAvatar = <Avatar type="square" alt="Avatar of RD" src="https://api.adorable.io/avatars/285/rd@ichef.tw" />;
+    const designAvatar = <Avatar alt="Avatar of Design" src="https://api.adorable.io/avatars/285/design@ichef.tw" />;
+
+    return (
+        <List title="Switch rows">
+            <SelectRow
+                desc="Default is off"
+                defaultValues={['RD']}
+                onChange={action('change')}>
+                <Option label="RD" value="RD" avatar={rdAvatar} />
+                <Option label="Design" value="Design" avatar={designAvatar} />
+            </SelectRow>
+        </List>
+    );
+}
+
+export default WithAvatar;
diff --git a/packages/storybook/examples/form/SelectRow/index.js b/packages/storybook/examples/form/SelectRow/index.js
index 7b249c8b..b1287559 100644
--- a/packages/storybook/examples/form/SelectRow/index.js
+++ b/packages/storybook/examples/form/SelectRow/index.js
@@ -6,11 +6,13 @@ import getPropTables from 'utils/getPropTables';
 
 import BasicUsage from './BasicUsage';
 import MultipleValues from './MultipleValues';
+import WithAvatar from './WithAvatar';
 import Customize from './Customize';
 
 storiesOf('@ichef/gypcrete-form|SelectRow', module)
     .add('basic usage', withInfo()(BasicUsage))
     .add('multiple selection', withInfo()(MultipleValues))
+    .add('with avatar', withInfo()(WithAvatar))
     .add('customize labels', withInfo()(Customize))
     // Props table
     .add('props', getPropTables([SelectRow]));

From 225d7562595c40021e4ccb15f4d13ed5e81bd52d Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Fri, 26 Apr 2019 17:55:43 +0800
Subject: [PATCH 39/58] Add Avatar to SelectRow

---
 packages/core/src/styles/Avatar.scss |  6 ++++++
 packages/form/src/SelectRow.js       | 30 ++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/packages/core/src/styles/Avatar.scss b/packages/core/src/styles/Avatar.scss
index 943335a9..3dac76ba 100644
--- a/packages/core/src/styles/Avatar.scss
+++ b/packages/core/src/styles/Avatar.scss
@@ -42,3 +42,9 @@
         margin-left: 0;
     }
 }
+
+.#{$prefix}-list-row__body > .#{$prefix}-avatar {
+    &:first-child {
+        margin-left: 0;
+    }
+}
diff --git a/packages/form/src/SelectRow.js b/packages/form/src/SelectRow.js
index 5bbb0433..0d56da42 100644
--- a/packages/form/src/SelectRow.js
+++ b/packages/form/src/SelectRow.js
@@ -50,6 +50,22 @@ function getValueLabelMap(fromChildren = []) {
     return resultMap;
 }
 
+/**
+ * Generate a value-avatar map from all `<SelectOption>`s.
+ *
+ * @param {array} fromOptions
+ * @return {Map}
+ */
+function getValueAvatarMap(fromChildren = []) {
+    const resultMap = new Map();
+    const options = parseSelectOptions(fromChildren);
+
+    options.forEach(
+        option => resultMap.set(option.value, option.avatar)
+    );
+    return resultMap;
+}
+
 class SelectRow extends PureComponent {
     static propTypes = {
         label: PropTypes.node.isRequired,
@@ -85,12 +101,14 @@ class SelectRow extends PureComponent {
     state = {
         popoverOpen: false,
         valueLabelMap: getValueLabelMap(this.props.children),
+        avatarLabelMap: getValueAvatarMap(this.props.children),
         cachedValues: this.props.values || this.props.defaultValues,
     };
 
     componentWillReceiveProps(nextProps) {
         this.setState({
             valueLabelMap: getValueLabelMap(nextProps.children),
+            avatarLabelMap: getValueAvatarMap(nextProps.children),
         });
 
         if (this.getIsControlled(nextProps)) {
@@ -156,6 +174,17 @@ class SelectRow extends PureComponent {
             .join(asideSeparator);
     }
 
+    renderAvatar() {
+        const { cachedValues, avatarLabelMap } = this.state;
+
+        if (cachedValues.length === 0) {
+            return null;
+        }
+
+        return cachedValues
+            .map(value => avatarLabelMap.get(value));
+    }
+
     render() {
         const {
             label,
@@ -189,6 +218,7 @@ class SelectRow extends PureComponent {
 
         return (
             <ListRow className={wrapperClassName} {...rowProps}>
+                {this.renderAvatar()}
                 <Content minified={false} disabled={disabled} {...contentProps}>
                     <Text
                         bold={!ineditable}

From 927eb1edff20eefb60c2a5359b912226c580d9c5 Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Fri, 26 Apr 2019 18:06:29 +0800
Subject: [PATCH 40/58] Refine the examples of the avatars

---
 .../storybook/examples/core/List/NormalList.js     |  6 ++++++
 .../examples/form/SelectRow/WithAvatar.js          | 14 ++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/storybook/examples/core/List/NormalList.js b/packages/storybook/examples/core/List/NormalList.js
index 416e0051..1b957b2e 100644
--- a/packages/storybook/examples/core/List/NormalList.js
+++ b/packages/storybook/examples/core/List/NormalList.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Avatar from '@ichef/gypcrete/src/Avatar';
 import List from '@ichef/gypcrete/src/List';
 import ListRow from '@ichef/gypcrete/src/ListRow';
 
@@ -13,6 +14,11 @@ function NormalList() {
     return (
         <DebugBox width="30rem">
             <List variant="normal" title="List title" desc="Help text here">
+                <ListRow>
+                    <Avatar alt="iCHEF" src="https://api.adorable.io/avatars/285/hello@ichef.tw" />
+                    <TextLabel basic="Hello World" />
+                </ListRow>
+
                 <ListRow>
                     <TextLabel icon="tickets" basic="Hello World" />
                 </ListRow>
diff --git a/packages/storybook/examples/form/SelectRow/WithAvatar.js b/packages/storybook/examples/form/SelectRow/WithAvatar.js
index 0f32c0c8..111f9dfa 100644
--- a/packages/storybook/examples/form/SelectRow/WithAvatar.js
+++ b/packages/storybook/examples/form/SelectRow/WithAvatar.js
@@ -7,17 +7,19 @@ import SelectRow from '@ichef/gypcrete-form/src/SelectRow';
 import Option from '@ichef/gypcrete-form/src/SelectOption';
 
 function WithAvatar() {
-    const rdAvatar = <Avatar type="square" alt="Avatar of RD" src="https://api.adorable.io/avatars/285/rd@ichef.tw" />;
-    const designAvatar = <Avatar alt="Avatar of Design" src="https://api.adorable.io/avatars/285/design@ichef.tw" />;
+    const loveAvatar = <Avatar alt="Love" src="https://api.adorable.io/avatars/285/love@ichef.tw" />;
+    const trumpsAvatar = <Avatar alt="Trumps" src="https://api.adorable.io/avatars/285/trumps@ichef.tw" />;
+    const hateAvatar = <Avatar alt="Hate" src="https://api.adorable.io/avatars/285/hate@ichef.tw" />;
 
     return (
         <List title="Switch rows">
             <SelectRow
-                desc="Default is off"
-                defaultValues={['RD']}
+                desc="Select One Avatar"
+                defaultValues={['Love']}
                 onChange={action('change')}>
-                <Option label="RD" value="RD" avatar={rdAvatar} />
-                <Option label="Design" value="Design" avatar={designAvatar} />
+                <Option label="Love" value="Love" avatar={loveAvatar} />
+                <Option label="Trumps" value="Trumps" avatar={trumpsAvatar} />
+                <Option label="Hate" value="Hate" avatar={hateAvatar} />
             </SelectRow>
         </List>
     );

From e7d5c893e5dc2a2341f869325b9d4bd12e4064d7 Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Fri, 26 Apr 2019 18:19:59 +0800
Subject: [PATCH 41/58] Add the avatar test for SelectRow

---
 packages/form/src/__tests__/SelectRow.test.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/form/src/__tests__/SelectRow.test.js b/packages/form/src/__tests__/SelectRow.test.js
index bc2706d0..09cfaa1e 100644
--- a/packages/form/src/__tests__/SelectRow.test.js
+++ b/packages/form/src/__tests__/SelectRow.test.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { shallow } from 'enzyme';
 
 import {
+    Avatar,
     Button,
     Popover,
     Text,
@@ -182,6 +183,23 @@ describe('Pure <SelectRow>: Data', () => {
         expect(wrapper.find(Text).prop('aside')).toBe('All');
     });
 
+    it('renders the avatar', () => {
+        const fooAvatar = <Avatar alt="foo" src="FOO_SRC" />;
+        const barAvatar = <Avatar alt="bar" src="BAR_SRC" />;
+
+        const wrapper = shallow(
+            <PureSelectRow label="Select" values={['foo']}>
+                <Option label="foo" value="foo" avatar={fooAvatar} />
+                <Option label="bar" value="bar" avatar={barAvatar} />
+            </PureSelectRow>
+        );
+
+        expect(wrapper.find(Avatar).prop('src')).toEqual('FOO_SRC');
+
+        wrapper.setProps({ values: ['bar'] });
+        expect(wrapper.find(Avatar).prop('src')).toEqual('BAR_SRC');
+    });
+
     it('can customize aside labels', () => {
         const wrapper = shallow(
             <PureSelectRow multiple label="Select" values={[]} asideNone="None">

From 22ba40eba1a8b8822722aebfd8c423adfd41d20a Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Fri, 26 Apr 2019 18:52:08 +0800
Subject: [PATCH 42/58] Add CHANGELOG for Avatar

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 967cea69..9269bee6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,11 +9,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - [Core] Add `verticalOrder` prop to `<Text>` so you can swap the position of `basic` and `aside`. Also applied to `rowComp()` mixin.
 - [Core] Rewrite `<TextInput>` to match latest design, offering single-line `<input>`, multi-line `<textarea>` and supports custom rendering via render prop.
 - [Form] `<TextInputRow>` now renders the new `<TextInput>` and forwards almost every prop to it, **without** a ref to its inner input.
+- [Core] Add `<Avatar>` to display an image.
 
 ### Changed
 - [Core] Refactored `closable()` mixin to detect inside/outside clicks via React SyntheticEvent mechanism instead of listening native events from DOM.
 - [Storybook] Fix mangled component name in storybook build. (#203)
 - [Storybook] Update examples for core `<TextInput>` and form `<TextInputRow>`. (#203)
+- [Core] Change `rowComp()` to allow the appearance of `<Avatar>` alongside the text. (#208)
+- [Core] Change `<Checkbox>` to display `<Avatar>`. (#208)
+- [Form] Change `<SelectRow>` and `<Checkbox>` to display `<Avatar>`. (#208)
+- [Storybook] Add examples for `<Avatar>` and the list components with `<Avatar>`s. (#208)
 
 ## [2.1.0]
 ### Changed

From a0c7eee3cb859b75c34b77345fb9acf960e9f56c Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Mon, 29 Apr 2019 11:44:58 +0800
Subject: [PATCH 43/58] Prevent the avatar from shrinking

---
 packages/core/src/styles/Avatar.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/src/styles/Avatar.scss b/packages/core/src/styles/Avatar.scss
index 3dac76ba..082e65c6 100644
--- a/packages/core/src/styles/Avatar.scss
+++ b/packages/core/src/styles/Avatar.scss
@@ -9,6 +9,7 @@
     overflow: hidden;
     margin: .2rem .45rem .2rem .25rem;
     background-color: $c-gray;
+    flex-shrink: 0;
 
     // ----------------------
     //  <Avatar> variants

From edf8feeae75ba27b665f99c846f3f3543d3d6ad8 Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Tue, 30 Apr 2019 14:58:14 +0800
Subject: [PATCH 44/58] Refine the CSS styles by using the parent selector

---
 packages/core/src/styles/Avatar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/styles/Avatar.scss b/packages/core/src/styles/Avatar.scss
index 082e65c6..2e5f9d72 100644
--- a/packages/core/src/styles/Avatar.scss
+++ b/packages/core/src/styles/Avatar.scss
@@ -29,7 +29,7 @@
     // ----------------------
     //  Inner image
     // ----------------------
-    > img {
+    & > img {
         width: 100%;
         height: 100%;
         text-align: center;

From 847c0926b5a68028a66a6b6f6a74baf0cb56a51f Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Tue, 30 Apr 2019 14:58:26 +0800
Subject: [PATCH 45/58] Refine the example avatar

---
 packages/storybook/examples/core/Checkbox/BasicCheckbox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/storybook/examples/core/Checkbox/BasicCheckbox.js b/packages/storybook/examples/core/Checkbox/BasicCheckbox.js
index 51590c5d..6cde8e91 100644
--- a/packages/storybook/examples/core/Checkbox/BasicCheckbox.js
+++ b/packages/storybook/examples/core/Checkbox/BasicCheckbox.js
@@ -5,7 +5,7 @@ import Avatar from '@ichef/gypcrete/src/Avatar';
 import DebugBox from 'utils/DebugBox';
 
 function BasicCheckboxExample() {
-    const rdAvatar = <Avatar type="square" alt="Avatar of RD" src="https://api.adorable.io/avatars/285/rd@ichef.tw" />;
+    const rdAvatar = <Avatar type="square" alt="John Doe" src="https://api.adorable.io/avatars/285/johndoe@example.com" />;
 
     return (
         <div>

From ad3cee0ff2fef813300513ac40b6c4407992a14f Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Tue, 30 Apr 2019 14:58:50 +0800
Subject: [PATCH 46/58] Add the missing PropTypes

---
 packages/form/src/SelectOption.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/form/src/SelectOption.js b/packages/form/src/SelectOption.js
index d6795c92..f406d897 100644
--- a/packages/form/src/SelectOption.js
+++ b/packages/form/src/SelectOption.js
@@ -43,6 +43,7 @@ function SelectOption({
 SelectOption.propTypes = {
     label: PropTypes.node.isRequired,
     value: valueType,
+    avatar: PropTypes.node,
     readOnly: PropTypes.bool,
     // Set by <SelectList>
     checked: PropTypes.bool,
@@ -51,6 +52,7 @@ SelectOption.propTypes = {
 
 SelectOption.defaultProps = {
     value: null,
+    avatar: null,
     readOnly: false,
     checked: false,
     onChange: () => {},

From 880938c2f9f8bd631e08b289aeab5fb8367836ce Mon Sep 17 00:00:00 2001
From: garfieldduck <garfieldduck@gmail.com>
Date: Tue, 30 Apr 2019 16:22:50 +0800
Subject: [PATCH 47/58] Merge the ways to get labels and avatars

Remove console.log
---
 packages/form/src/SelectRow.js | 44 +++++++++++++++-------------------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/form/src/SelectRow.js b/packages/form/src/SelectRow.js
index 0d56da42..12faf64f 100644
--- a/packages/form/src/SelectRow.js
+++ b/packages/form/src/SelectRow.js
@@ -40,28 +40,18 @@ const CLOSABLE_CONFIG = {
  * @param {array} fromOptions
  * @return {Map}
  */
-function getValueLabelMap(fromChildren = []) {
+function getValueToLabelAvatarMap(fromChildren = []) {
     const resultMap = new Map();
     const options = parseSelectOptions(fromChildren);
 
     options.forEach(
-        option => resultMap.set(option.value, option.label)
-    );
-    return resultMap;
-}
-
-/**
- * Generate a value-avatar map from all `<SelectOption>`s.
- *
- * @param {array} fromOptions
- * @return {Map}
- */
-function getValueAvatarMap(fromChildren = []) {
-    const resultMap = new Map();
-    const options = parseSelectOptions(fromChildren);
-
-    options.forEach(
-        option => resultMap.set(option.value, option.avatar)
+        (option) => {
+            const { label, avatar } = option;
+            resultMap.set(option.value, {
+                label,
+                avatar,
+            });
+        }
     );
     return resultMap;
 }
@@ -100,15 +90,13 @@ class SelectRow extends PureComponent {
 
     state = {
         popoverOpen: false,
-        valueLabelMap: getValueLabelMap(this.props.children),
-        avatarLabelMap: getValueAvatarMap(this.props.children),
+        valueLabelMap: getValueToLabelAvatarMap(this.props.children),
         cachedValues: this.props.values || this.props.defaultValues,
     };
 
     componentWillReceiveProps(nextProps) {
         this.setState({
-            valueLabelMap: getValueLabelMap(nextProps.children),
-            avatarLabelMap: getValueAvatarMap(nextProps.children),
+            valueLabelMap: getValueToLabelAvatarMap(nextProps.children),
         });
 
         if (this.getIsControlled(nextProps)) {
@@ -170,19 +158,25 @@ class SelectRow extends PureComponent {
         }
 
         return cachedValues
-            .map(value => valueLabelMap.get(value))
+            .map((value) => {
+                const valueMap = valueLabelMap.get(value) || {};
+                return valueMap.label;
+            })
             .join(asideSeparator);
     }
 
     renderAvatar() {
-        const { cachedValues, avatarLabelMap } = this.state;
+        const { cachedValues, valueLabelMap } = this.state;
 
         if (cachedValues.length === 0) {
             return null;
         }
 
         return cachedValues
-            .map(value => avatarLabelMap.get(value));
+            .map((value) => {
+                const valueMap = valueLabelMap.get(value) || {};
+                return valueMap.avatar;
+            });
     }
 
     render() {

From 4658338ae416593087f7ad7fb46ffddacaafe203 Mon Sep 17 00:00:00 2001
From: Zet Chou <tz5514@gmail.com>
Date: Thu, 2 May 2019 18:33:56 +0800
Subject: [PATCH 48/58] add getImageCanvas() and could be controlled for 
 ImageEditor

---
 .../imageeditor/src/__tests__/index.test.js   | 32 +++++++++++++++----
 packages/imageeditor/src/index.js             | 25 +++++++++------
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/packages/imageeditor/src/__tests__/index.test.js b/packages/imageeditor/src/__tests__/index.test.js
index 76943121..87ddb8fb 100644
--- a/packages/imageeditor/src/__tests__/index.test.js
+++ b/packages/imageeditor/src/__tests__/index.test.js
@@ -109,7 +109,7 @@ it('notifies new cropping rect whenever <AvatarEditor> think it changes', () =>
     );
 
     // mock <AvatarEditor> instance API
-    wrapper.instance().setCanvasRef({ getCroppingRect });
+    wrapper.instance().editorRef.current = { getCroppingRect };
 
     wrapper.find(AvatarEditor).simulate('imageChange');
     expect(handleCropChange).toHaveBeenLastCalledWith(CROP_RECT_FOO);
@@ -147,7 +147,7 @@ it('notifies imgInfo and cropping rect when image successfully loaded', () => {
     );
 
     // mock <AvatarEditor> instance API
-    wrapper.instance().setCanvasRef({ getCroppingRect });
+    wrapper.instance().editorRef.current = { getCroppingRect };
 
     wrapper.find(AvatarEditor).simulate('loadSuccess', MOCKED_IMG_INFO);
     expect(handleLoadSuccess).toHaveBeenLastCalledWith(MOCKED_IMG_INFO, MOCKED_CROP_RECT);
@@ -199,11 +199,29 @@ it('resets cached scale and position when image changes', () => {
     expect(wrapper.find(AvatarEditor).prop('position')).toEqual(DEFAULT_POSITION);
 });
 
-it('offers accessor method to ref to inner <AvatarEditor>', () => {
-    const MOCKED_REF = { getCroppingRect: () => {} };
+it('can get current image canvas via "getImageCanvas" method', () => {
+    const MOCKED_REF = { getImage: () => 'foo' };
     const wrapper = shallow(<ImageEditor image={TRANSPARENT_IMAGE} />);
 
-    // mock reference first as it does not happend under shallow rendering
-    wrapper.instance().setCanvasRef(MOCKED_REF);
-    expect(wrapper.instance().getCanvasRef()).toBe(MOCKED_REF);
+    wrapper.instance().editorRef.current = MOCKED_REF;
+    expect(wrapper.instance().getImageCanvas()).toBe('foo');
+});
+
+it('can be controlled by "scale" & "onScaleChange" props', () => {
+    const mockedHandleScaleChange = jest.fn();
+    const wrapper = shallow(
+        <ImageEditor
+            control
+            image={TRANSPARENT_IMAGE}
+            scale={0.87}
+            onScaleChange={mockedHandleScaleChange}
+        />
+    );
+
+    expect(wrapper.find(AvatarEditor).prop('scale')).toBe(0.87);
+
+    wrapper.find('input[type="range"]').simulate('change', {
+        target: { value: 1.5 },
+    });
+    expect(mockedHandleScaleChange).toBeCalledWith(1.5);
 });
diff --git a/packages/imageeditor/src/index.js b/packages/imageeditor/src/index.js
index a7a54175..c77280a6 100644
--- a/packages/imageeditor/src/index.js
+++ b/packages/imageeditor/src/index.js
@@ -49,6 +49,7 @@ export const BEM = {
  */
 class ImageEditor extends PureComponent {
     static propTypes = {
+        scale: PropTypes.number,
         minScale: PropTypes.number,
         maxScale: PropTypes.number,
         initCropRect: PropTypes.shape({
@@ -57,6 +58,7 @@ class ImageEditor extends PureComponent {
             width: PropTypes.number,
             height: PropTypes.number,
         }),
+        onScaleChange: PropTypes.func,
         onCropChange: PropTypes.func,
         onLoadSuccess: PropTypes.func,
         // appearance configs
@@ -73,9 +75,11 @@ class ImageEditor extends PureComponent {
     };
 
     static defaultProps = {
+        scale: undefined,
         minScale: 0.5,
         maxScale: 5,
         initCropRect: undefined,
+        onScaleChange: () => {},
         onCropChange: () => {},
         onLoadSuccess: () => {},
         // appearance configs
@@ -96,6 +100,8 @@ class ImageEditor extends PureComponent {
         position: getInitPosition(this.props.initCropRect) || DEFAULT_POSITION,
     };
 
+    editorRef = React.createRef();
+
     componentWillReceiveProps(nextProps) {
         // Consider current `scale`, `position` and `initCropRect` outdated when image changes
         if (nextProps.image !== this.props.image) {
@@ -113,16 +119,13 @@ class ImageEditor extends PureComponent {
      *
      * Setting ref with instance method doesn't break. It's just MAGIC.
      */
-    setCanvasRef = (ref) => {
-        this.canvasRef = ref;
-    }
-
-    getCanvasRef = () => this.canvasRef;
+    getImageCanvas = () => this.editorRef.current.getImage();
 
     handleSliderChange = (event) => {
         const newScale = Number(event.target.value);
 
         this.setState({ scale: newScale });
+        this.props.onScaleChange(newScale);
     }
 
     handleCanvasPosChange = (newPos) => {
@@ -136,7 +139,7 @@ class ImageEditor extends PureComponent {
 
     handleCanvasImageChange = () => {
         if (!this.props.readOnly) {
-            const newCropRect = this.canvasRef && this.canvasRef.getCroppingRect();
+            const newCropRect = this.editorRef.current && this.editorRef.current.getCroppingRect();
             this.props.onCropChange(newCropRect);
         }
 
@@ -145,7 +148,7 @@ class ImageEditor extends PureComponent {
     }
 
     handleCanvasLoadSuccess = (imgInfo) => {
-        const cropRect = this.canvasRef && this.canvasRef.getCroppingRect();
+        const cropRect = this.editorRef.current && this.editorRef.current.getCroppingRect();
 
         this.props.onLoadSuccess(imgInfo, cropRect);
     }
@@ -156,6 +159,7 @@ class ImageEditor extends PureComponent {
         }
 
         const {
+            scale,
             minScale,
             maxScale,
             image,
@@ -168,7 +172,7 @@ class ImageEditor extends PureComponent {
             <div className={BEM.control.toString()}>
                 <input
                     type="range"
-                    value={this.state.scale}
+                    value={scale || this.state.scale}
                     className={BEM.slider.toString()}
                     disabled={shouldDisable}
                     step="0.1"
@@ -192,6 +196,7 @@ class ImageEditor extends PureComponent {
             readOnly,
             loading,
             // props for <AvatarEditor>
+            scale,
             image,
             width,
             height,
@@ -221,11 +226,11 @@ class ImageEditor extends PureComponent {
         );
         const canvas = (
             <AvatarEditor
-                ref={this.setCanvasRef}
+                ref={this.editorRef}
                 image={image}
                 width={width}
                 height={height}
-                scale={this.state.scale}
+                scale={scale || this.state.scale}
                 position={this.state.position}
                 onImageChange={this.handleCanvasImageChange}
                 onPositionChange={this.handleCanvasPosChange}

From a20f58ce79f474be56376a73f83675f1c2cc14ba Mon Sep 17 00:00:00 2001
From: Zet Chou <tz5514@gmail.com>
Date: Thu, 2 May 2019 18:34:38 +0800
Subject: [PATCH 49/58] update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 967cea69..13f8447c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - [Form] `<TextInputRow>` now renders the new `<TextInput>` and forwards almost every prop to it, **without** a ref to its inner input.
 
 ### Changed
+- [ImageEditor] Add new instance method `getImageCanvas()` to get current image canvas element.
+- [ImageEditor] Add new props `scale` & `onScaleChange` to make scale value of editor can be controlled.
 - [Core] Refactored `closable()` mixin to detect inside/outside clicks via React SyntheticEvent mechanism instead of listening native events from DOM.
 - [Storybook] Fix mangled component name in storybook build. (#203)
 - [Storybook] Update examples for core `<TextInput>` and form `<TextInputRow>`. (#203)

From e98cf4b24a6a69891a0c02be080113a428202f4d Mon Sep 17 00:00:00 2001
From: Zet Chou <tz5514@gmail.com>
Date: Fri, 3 May 2019 15:07:37 +0800
Subject: [PATCH 50/58] ignore unused prop for AvatarEditor

---
 packages/imageeditor/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/imageeditor/src/index.js b/packages/imageeditor/src/index.js
index c77280a6..4c3e6982 100644
--- a/packages/imageeditor/src/index.js
+++ b/packages/imageeditor/src/index.js
@@ -202,6 +202,7 @@ class ImageEditor extends PureComponent {
             height,
             onImageChange,
             onPositionChange,
+            onScaleChange,
             // react props
             className,
             style,

From 4b8a5acaa92fdf9e5c9d636be569f30005c35f54 Mon Sep 17 00:00:00 2001
From: Zet Chou <tz5514@gmail.com>
Date: Mon, 6 May 2019 11:56:08 +0800
Subject: [PATCH 51/58] add image editor border styles

---
 packages/imageeditor/src/styles/index.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/imageeditor/src/styles/index.scss b/packages/imageeditor/src/styles/index.scss
index 72625696..11bcd510 100644
--- a/packages/imageeditor/src/styles/index.scss
+++ b/packages/imageeditor/src/styles/index.scss
@@ -14,6 +14,13 @@ $placeholder-border-color: rgba(0, 0, 0, .1);
     // elements
     &__canvas {
         position: relative;
+
+        & > canvas {
+            border: 1px solid #707070;
+            border-radius: 8px;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
     }
 
     &__control {

From 6dd7084b9af10a203b1331762553cc796f20e5b3 Mon Sep 17 00:00:00 2001
From: Zet Chou <tz5514@gmail.com>
Date: Mon, 6 May 2019 17:05:27 +0800
Subject: [PATCH 52/58] update image editor canvas styles

---
 packages/imageeditor/src/styles/index.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/imageeditor/src/styles/index.scss b/packages/imageeditor/src/styles/index.scss
index 11bcd510..f738e26e 100644
--- a/packages/imageeditor/src/styles/index.scss
+++ b/packages/imageeditor/src/styles/index.scss
@@ -14,6 +14,9 @@ $placeholder-border-color: rgba(0, 0, 0, .1);
     // elements
     &__canvas {
         position: relative;
+        background-color: #fff;
+        border-radius: 8px;
+        overflow: hidden;
 
         & > canvas {
             border: 1px solid #707070;

From e69c734e9b13a52b7f539db3d2257f87b5408fa1 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Thu, 9 May 2019 15:53:32 +0800
Subject: [PATCH 53/58] Update README on how to release beta

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index db6d7d80..bf8f1b74 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ Gypcrete does not publish develop builds to the `dist` branch anymore. It now pu
 When releasing a new build for Gypcrete, follow the steps:
 
 1. Create a release branch `release/x.y.z`
-2. *(Optionally)* release beta builds with `yarn release:beta`.
+2. *(Optionally)* release beta builds with `yarn release:beta --cd-version=prepatch` (or preminor/premajor).
 3. Bump version for `package.json` and `CHANGELOG`.
 4. Bump children packages version with script:
    ```sh

From 1b3a13f0ef71a641906bb642eb3cf82a1266268c Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Thu, 9 May 2019 15:57:03 +0800
Subject: [PATCH 54/58] Release 3.0.0-beta.0

---
 lerna.json                        | 2 +-
 packages/core/package.json        | 2 +-
 packages/form/package.json        | 4 ++--
 packages/imageeditor/package.json | 4 ++--
 packages/storybook/package.json   | 8 ++++----
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/lerna.json b/lerna.json
index 9ee5876c..7cb493ee 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,7 +3,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.1.0",
+  "version": "3.0.0-beta.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "commands": {
diff --git a/packages/core/package.json b/packages/core/package.json
index ce1d6f93..8642c3df 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete",
-  "version": "2.1.0",
+  "version": "3.0.0-beta.0",
   "description": "iCHEF web components library, built with React.",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/core",
diff --git a/packages/form/package.json b/packages/form/package.json
index 32450346..13f4a186 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete-form",
-  "version": "2.1.0",
+  "version": "3.0.0-beta.0",
   "description": "Form components built on Gypcrete",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/form",
@@ -34,7 +34,7 @@
     "react": "^16.6.0"
   },
   "dependencies": {
-    "@ichef/gypcrete": "^2.1.0",
+    "@ichef/gypcrete": "^3.0.0-beta.0",
     "classnames": "^2.2.5",
     "immutable": "^3.8.2",
     "keycode": "^2.1.9",
diff --git a/packages/imageeditor/package.json b/packages/imageeditor/package.json
index a30bf287..a1e6b95d 100644
--- a/packages/imageeditor/package.json
+++ b/packages/imageeditor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete-imageeditor",
-  "version": "2.1.0",
+  "version": "3.0.0-beta.0",
   "description": "Image cropper built with Gypcrete",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/imageeditor",
@@ -34,7 +34,7 @@
     "react": "^16.6.0"
   },
   "dependencies": {
-    "@ichef/gypcrete": "^2.1.0",
+    "@ichef/gypcrete": "^3.0.0-beta.0",
     "classnames": "^2.2.5",
     "react-avatar-editor": "^11.0.2"
   },
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 47826b7d..2e43a9f1 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete-storybook",
-  "version": "2.1.0",
+  "version": "3.0.0-beta.0",
   "description": "React Storybook for Gypcrete",
   "private": true,
   "repository": "iCHEF/gypcrete",
@@ -20,9 +20,9 @@
     "ghpages": "npm run clean && npm run build:storybook"
   },
   "dependencies": {
-    "@ichef/gypcrete": "^2.1.0",
-    "@ichef/gypcrete-form": "^2.1.0",
-    "@ichef/gypcrete-imageeditor": "^2.1.0",
+    "@ichef/gypcrete": "^3.0.0-beta.0",
+    "@ichef/gypcrete-form": "^3.0.0-beta.0",
+    "@ichef/gypcrete-imageeditor": "^3.0.0-beta.0",
     "@storybook/addon-actions": "^4.0.0",
     "@storybook/addon-info": "^4.0.0",
     "@storybook/addon-options": "^4.0.0",

From d78b83eb0c6539004f55219abc2db2f07802468a Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 10 May 2019 11:19:46 +0800
Subject: [PATCH 55/58] Allow passing children to <TextInputRow>

---
 packages/form/src/TextInputRow.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/form/src/TextInputRow.js b/packages/form/src/TextInputRow.js
index e4a25f30..102f7417 100644
--- a/packages/form/src/TextInputRow.js
+++ b/packages/form/src/TextInputRow.js
@@ -12,6 +12,7 @@ function TextInputRow({
     readOnly,
     disabled,
     rowProps,
+    children,
     ...inputProps
 }) {
     return (
@@ -21,6 +22,7 @@ function TextInputRow({
                 disabled={disabled}
                 {...inputProps}
             />
+            {children}
         </ListRow>
     );
 }

From 2ad905b881f3ce1b98377f7db9db5ea2c30ec14e Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 10 May 2019 11:43:41 +0800
Subject: [PATCH 56/58] Update tests for <TextInputRow>

---
 .../form/src/__tests__/TextInputRow.test.js    | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/form/src/__tests__/TextInputRow.test.js b/packages/form/src/__tests__/TextInputRow.test.js
index c74170d0..f9c85fcb 100644
--- a/packages/form/src/__tests__/TextInputRow.test.js
+++ b/packages/form/src/__tests__/TextInputRow.test.js
@@ -54,6 +54,24 @@ describe('Pure <TextInputRow>', () => {
         )).toBeTruthy();
     });
 
+    it('allows additional children', () => {
+        const wrapper = shallow(
+            <PureTextInputRow
+                readOnly={false}
+                disabled
+                rowProps={{}}
+            >
+                <div data-target />
+            </PureTextInputRow>
+        );
+
+        expect(
+            wrapper.children().containsMatchingElement(
+                <div data-target />
+            )
+        ).toBeTruthy();
+    });
+
     it('forwards unknown props to <TextInput>', () => {
         const handleChange = jest.fn();
         const wrapper = shallow(

From d86b203385d8896a2d9899f30039c7e2c03d90cb Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Fri, 10 May 2019 14:30:23 +0800
Subject: [PATCH 57/58] Release 3.0.0 beta 1

---
 lerna.json                        | 2 +-
 packages/core/package.json        | 2 +-
 packages/form/package.json        | 4 ++--
 packages/imageeditor/package.json | 4 ++--
 packages/storybook/package.json   | 8 ++++----
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/lerna.json b/lerna.json
index 7cb493ee..0b3660f7 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,7 +3,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "commands": {
diff --git a/packages/core/package.json b/packages/core/package.json
index 8642c3df..bdd3219c 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "description": "iCHEF web components library, built with React.",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/core",
diff --git a/packages/form/package.json b/packages/form/package.json
index 13f4a186..608675f1 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete-form",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "description": "Form components built on Gypcrete",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/form",
@@ -34,7 +34,7 @@
     "react": "^16.6.0"
   },
   "dependencies": {
-    "@ichef/gypcrete": "^3.0.0-beta.0",
+    "@ichef/gypcrete": "^3.0.0-beta.1",
     "classnames": "^2.2.5",
     "immutable": "^3.8.2",
     "keycode": "^2.1.9",
diff --git a/packages/imageeditor/package.json b/packages/imageeditor/package.json
index a1e6b95d..45423c2f 100644
--- a/packages/imageeditor/package.json
+++ b/packages/imageeditor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete-imageeditor",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "description": "Image cropper built with Gypcrete",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/imageeditor",
@@ -34,7 +34,7 @@
     "react": "^16.6.0"
   },
   "dependencies": {
-    "@ichef/gypcrete": "^3.0.0-beta.0",
+    "@ichef/gypcrete": "^3.0.0-beta.1",
     "classnames": "^2.2.5",
     "react-avatar-editor": "^11.0.2"
   },
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 2e43a9f1..3468834a 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete-storybook",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "description": "React Storybook for Gypcrete",
   "private": true,
   "repository": "iCHEF/gypcrete",
@@ -20,9 +20,9 @@
     "ghpages": "npm run clean && npm run build:storybook"
   },
   "dependencies": {
-    "@ichef/gypcrete": "^3.0.0-beta.0",
-    "@ichef/gypcrete-form": "^3.0.0-beta.0",
-    "@ichef/gypcrete-imageeditor": "^3.0.0-beta.0",
+    "@ichef/gypcrete": "^3.0.0-beta.1",
+    "@ichef/gypcrete-form": "^3.0.0-beta.1",
+    "@ichef/gypcrete-imageeditor": "^3.0.0-beta.1",
     "@storybook/addon-actions": "^4.0.0",
     "@storybook/addon-info": "^4.0.0",
     "@storybook/addon-options": "^4.0.0",

From dc830684560f824c7a53f94a215331615236d493 Mon Sep 17 00:00:00 2001
From: Teng-hao Chang <zhusee2@gmail.com>
Date: Tue, 14 May 2019 13:58:37 +0800
Subject: [PATCH 58/58] Bump version to 3.0 release

---
 CHANGELOG.md                      | 3 +++
 lerna.json                        | 2 +-
 packages/core/package.json        | 2 +-
 packages/form/package.json        | 4 ++--
 packages/imageeditor/package.json | 4 ++--
 packages/storybook/package.json   | 8 ++++----
 6 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cfd773e0..41f96a16 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+N/A
+
+## [3.0.0]
 ### Breaking
 - [Core] Add `verticalOrder` prop to `<Text>` so you can swap the position of `basic` and `aside`. Also applied to `rowComp()` mixin.
 - [Core] Rewrite `<TextInput>` to match latest design, offering single-line `<input>`, multi-line `<textarea>` and supports custom rendering via render prop.
diff --git a/lerna.json b/lerna.json
index 0b3660f7..b0add661 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,7 +3,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "commands": {
diff --git a/packages/core/package.json b/packages/core/package.json
index bdd3219c..48e411e8 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "description": "iCHEF web components library, built with React.",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/core",
diff --git a/packages/form/package.json b/packages/form/package.json
index 608675f1..2ef8a848 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete-form",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "description": "Form components built on Gypcrete",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/form",
@@ -34,7 +34,7 @@
     "react": "^16.6.0"
   },
   "dependencies": {
-    "@ichef/gypcrete": "^3.0.0-beta.1",
+    "@ichef/gypcrete": "^3.0.0",
     "classnames": "^2.2.5",
     "immutable": "^3.8.2",
     "keycode": "^2.1.9",
diff --git a/packages/imageeditor/package.json b/packages/imageeditor/package.json
index 45423c2f..a8071def 100644
--- a/packages/imageeditor/package.json
+++ b/packages/imageeditor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete-imageeditor",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "description": "Image cropper built with Gypcrete",
   "homepage": "https://ichef.github.io/gypcrete",
   "repository": "https://github.com/iCHEF/gypcrete/tree/master/packages/imageeditor",
@@ -34,7 +34,7 @@
     "react": "^16.6.0"
   },
   "dependencies": {
-    "@ichef/gypcrete": "^3.0.0-beta.1",
+    "@ichef/gypcrete": "^3.0.0",
     "classnames": "^2.2.5",
     "react-avatar-editor": "^11.0.2"
   },
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 3468834a..ff432e49 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ichef/gypcrete-storybook",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "description": "React Storybook for Gypcrete",
   "private": true,
   "repository": "iCHEF/gypcrete",
@@ -20,9 +20,9 @@
     "ghpages": "npm run clean && npm run build:storybook"
   },
   "dependencies": {
-    "@ichef/gypcrete": "^3.0.0-beta.1",
-    "@ichef/gypcrete-form": "^3.0.0-beta.1",
-    "@ichef/gypcrete-imageeditor": "^3.0.0-beta.1",
+    "@ichef/gypcrete": "^3.0.0",
+    "@ichef/gypcrete-form": "^3.0.0",
+    "@ichef/gypcrete-imageeditor": "^3.0.0",
     "@storybook/addon-actions": "^4.0.0",
     "@storybook/addon-info": "^4.0.0",
     "@storybook/addon-options": "^4.0.0",