From 3fc450757dab3aae2a5588d859250705143c1820 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 15 Nov 2015 23:33:48 +0200
Subject: [PATCH 1/7] Upgrade to React 0.14 #31

---
 fixtures/component-playground/default.js            |  3 ++-
 fixtures/component-playground/selected-fixture.js   |  3 ++-
 package.json                                        | 11 ++++++-----
 src/components/component-playground.jsx             |  4 ++--
 .../component-playground/default/render/dom.js      |  6 +++---
 .../default/transitions/mount.js                    |  6 +++---
 .../selected-fixture-and-editor/events/dom.js       |  9 ++++-----
 .../selected-fixture-and-editor/render/dom.js       |  8 ++++----
 .../selected-fixture/events/dom.js                  | 13 ++++++-------
 .../selected-fixture/events/handlers.js             |  8 ++------
 .../selected-fixture/render/dom.js                  |  6 +++---
 .../selected-fixture/transitions/props.js           |  2 ++
 tests/lib/get-url-props.js                          |  2 +-
 tests/lib/render-component.js                       |  5 +++--
 14 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/fixtures/component-playground/default.js b/fixtures/component-playground/default.js
index 541804b..0f518bf 100644
--- a/fixtures/component-playground/default.js
+++ b/fixtures/component-playground/default.js
@@ -26,7 +26,8 @@ module.exports = {
           children: [
             React.createElement('span', {
               key: '1',
-              children: 'test child'
+              children: 'test child',
+              customProp: function() {}
             })
           ],
           state: {
diff --git a/fixtures/component-playground/selected-fixture.js b/fixtures/component-playground/selected-fixture.js
index 5e73b14..9b1c410 100644
--- a/fixtures/component-playground/selected-fixture.js
+++ b/fixtures/component-playground/selected-fixture.js
@@ -22,7 +22,8 @@ module.exports = _.merge({}, defaultFixture, {
       children: [
         React.createElement('span', {
           key: '1',
-          children: 'test child'
+          children: 'test child',
+          customProp: function() {}
         })
       ]
     },
diff --git a/package.json b/package.json
index 47eb016..7f39fc2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-component-playground",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "Isolated loader for React components",
   "main": "build/bundle.js",
   "repository": {
@@ -10,8 +10,8 @@
   "dependencies": {
     "classnames": "^1.2.0",
     "lodash": "^3.6.0",
-    "react-component-tree": "^0.2.3",
-    "react-querystring-router": "^0.2.0"
+    "react-component-tree": "^0.3.0",
+    "react-querystring-router": "^0.3.0"
   },
   "devDependencies": {
     "babel-core": "^5.0.12",
@@ -36,14 +36,15 @@
     "less": "^2.5.0",
     "less-loader": "^2.2.0",
     "mocha": "^2.2.4",
-    "react": "^0.13.1",
+    "react": "^0.14.2",
+    "react-addons-test-utils": "^0.14.2",
     "sinon": "^1.14.1",
     "sinon-chai": "^2.7.0",
     "style-loader": "^0.12.3",
     "webpack": "^1.8.2"
   },
   "peerDependencies": {
-    "react": "^0.13.1"
+    "react": "^0.14.2"
   },
   "scripts": {
     "pretest": "jscs --esprima=esprima-fb ./",
diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index f6d5d2e..ef15430 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -438,7 +438,7 @@ module.exports = React.createClass({
   },
 
   _focusOnEditor: function() {
-    this.refs.editor.getDOMNode().focus();
+    this.refs.editor.focus();
   },
 
   _injectPreviewChildState: function() {
@@ -454,7 +454,7 @@ module.exports = React.createClass({
       return;
     }
 
-    var contentNode = this.refs.contentFrame.getDOMNode();
+    var contentNode = this.refs.contentFrame;
 
     this.setState({
       orientation: contentNode.offsetHeight > contentNode.offsetWidth ?
diff --git a/tests/components/component-playground/default/render/dom.js b/tests/components/component-playground/default/render/dom.js
index 8a24efb..fe7ce07 100644
--- a/tests/components/component-playground/default/render/dom.js
+++ b/tests/components/component-playground/default/render/dom.js
@@ -19,7 +19,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
     for (var componentName in fixture.components) {
       var nameElement = component.refs['componentName-' + componentName];
 
-      expect($(nameElement.getDOMNode()).text()).to.equal(componentName);
+      expect($(nameElement).text()).to.equal(componentName);
     }
   });
 
@@ -42,7 +42,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
         var fixtureButton = component.refs[
             'fixtureButton-' + componentName + '-' + fixtureName];
 
-        expect($(fixtureButton.getDOMNode()).text()).to.equal(fixtureName);
+        expect($(fixtureButton).text()).to.equal(fixtureName);
       }
     }
   });
@@ -64,7 +64,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
   });
 
   it('should add selected class on home button', function() {
-    expect($(component.refs.homeButton.getDOMNode())
+    expect($(component.refs.homeButton)
            .hasClass(style['selected-button'])).to.be.true;
   });
 });
diff --git a/tests/components/component-playground/default/transitions/mount.js b/tests/components/component-playground/default/transitions/mount.js
index b5ac404..fae64b8 100644
--- a/tests/components/component-playground/default/transitions/mount.js
+++ b/tests/components/component-playground/default/transitions/mount.js
@@ -1,7 +1,7 @@
 var FIXTURE = 'default';
 
 describe(`ComponentPlayground (${FIXTURE}) Transitions Mount`, function() {
-  var React = require('react'),
+  var ReactDOM = require('react-dom'),
       render = require('tests/lib/render-component.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
 
@@ -35,7 +35,7 @@ describe(`ComponentPlayground (${FIXTURE}) Transitions Mount`, function() {
   });
 
   it('should clear fixture update interval on unmount', function() {
-    React.unmountComponentAtNode(container);
+    ReactDOM.unmountComponentAtNode(container);
 
     expect(window.clearInterval).to.have.been.calledWith(timeoutId);
   });
@@ -46,7 +46,7 @@ describe(`ComponentPlayground (${FIXTURE}) Transitions Mount`, function() {
   });
 
   it('should remove window resize listener on unmount', function() {
-    React.unmountComponentAtNode(container);
+    ReactDOM.unmountComponentAtNode(container);
 
     expect(window.removeEventListener).to.have.been.calledWith(
         'resize', component.onWindowResize);
diff --git a/tests/components/component-playground/selected-fixture-and-editor/events/dom.js b/tests/components/component-playground/selected-fixture-and-editor/events/dom.js
index 1e9ef78..e3e9090 100644
--- a/tests/components/component-playground/selected-fixture-and-editor/events/dom.js
+++ b/tests/components/component-playground/selected-fixture-and-editor/events/dom.js
@@ -1,8 +1,7 @@
 var FIXTURE = 'selected-fixture-and-editor';
 
 describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
-  var React = require('react/addons'),
-      utils = React.addons.TestUtils,
+  var utils = require('react-addons-test-utils'),
       render = require('tests/lib/render-component.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
 
@@ -16,11 +15,11 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
   });
 
   it('should focus on editor on fixture click', function() {
-    var editorNode = component.refs.editor.getDOMNode();
+    var editorNode = component.refs.editor;
     sinon.spy(editorNode, 'focus');
 
     utils.Simulate.click(
-        component.refs['fixtureButton-SecondComponent-index'].getDOMNode());
+        component.refs['fixtureButton-SecondComponent-index']);
 
     expect(editorNode.focus).to.have.been.called;
   });
@@ -31,7 +30,7 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
     function triggerEditorEvent(event, eventData) {
       sinon.spy(component, 'setState');
 
-      utils.Simulate[event](component.refs.editor.getDOMNode(), eventData);
+      utils.Simulate[event](component.refs.editor, eventData);
       stateSet = component.setState.lastCall.args[0];
 
       component.setState.restore();
diff --git a/tests/components/component-playground/selected-fixture-and-editor/render/dom.js b/tests/components/component-playground/selected-fixture-and-editor/render/dom.js
index 3730f0d..08dff7c 100644
--- a/tests/components/component-playground/selected-fixture-and-editor/render/dom.js
+++ b/tests/components/component-playground/selected-fixture-and-editor/render/dom.js
@@ -20,12 +20,12 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
   });
 
   it('should add editor class on content frame node', function() {
-    expect($(component.refs.contentFrame.getDOMNode())
+    expect($(component.refs.contentFrame)
            .hasClass(style['with-editor'])).to.be.true;
   });
 
   it('should add selected class on editor button', function() {
-    expect($(component.refs.editorButton.getDOMNode())
+    expect($(component.refs.editorButton)
            .hasClass(style['selected-button'])).to.be.true;
   });
 
@@ -34,7 +34,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
       fixtureUserInput: 'lorem ipsum'
     });
 
-    expect(component.refs.editor.getDOMNode().value).to.equal('lorem ipsum');
+    expect(component.refs.editor.value).to.equal('lorem ipsum');
   });
 
   it('should add invalid class on editor on state flag', function() {
@@ -42,7 +42,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
       isFixtureUserInputValid: false
     });
 
-    expect($(component.refs.editor.getDOMNode())
+    expect($(component.refs.editor)
            .hasClass(style['invalid-syntax'])).to.be.true;
   });
 });
diff --git a/tests/components/component-playground/selected-fixture/events/dom.js b/tests/components/component-playground/selected-fixture/events/dom.js
index 2afee06..636f2f1 100644
--- a/tests/components/component-playground/selected-fixture/events/dom.js
+++ b/tests/components/component-playground/selected-fixture/events/dom.js
@@ -1,8 +1,7 @@
 var FIXTURE = 'selected-fixture';
 
 describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
-  var React = require('react/addons'),
-      utils = React.addons.TestUtils,
+  var utils = require('react-addons-test-utils'),
       _ = require('lodash'),
       render = require('tests/lib/render-component.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
@@ -29,26 +28,26 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
   });
 
   it('should route link on home button', function() {
-    utils.Simulate.click(component.refs.homeButton.getDOMNode());
+    utils.Simulate.click(component.refs.homeButton);
 
     expect(component.props.router.routeLink).to.have.been.called;
   });
 
   it('should route link on editor button', function() {
-    utils.Simulate.click(component.refs.editorButton.getDOMNode());
+    utils.Simulate.click(component.refs.editorButton);
 
     expect(component.props.router.routeLink).to.have.been.called;
   });
 
   it('should route link on full screen button', function() {
-    utils.Simulate.click(component.refs.fullScreenButton.getDOMNode());
+    utils.Simulate.click(component.refs.fullScreenButton);
 
     expect(component.props.router.routeLink).to.have.been.called;
   });
 
   it('should route link on new fixture button', function() {
     utils.Simulate.click(
-        component.refs['fixtureButton-FirstComponent-error'].getDOMNode());
+        component.refs['fixtureButton-FirstComponent-error']);
 
     expect(component.props.router.goTo).to.have.been.called;
   });
@@ -60,7 +59,7 @@ describe(`ComponentPlayground (${FIXTURE}) Events DOM`, function() {
       sinon.spy(component, 'setState');
 
       utils.Simulate.click(
-          component.refs['fixtureButton-FirstComponent-default'].getDOMNode());
+          component.refs['fixtureButton-FirstComponent-default']);
 
       stateSet = component.setState.lastCall.args[0];
     });
diff --git a/tests/components/component-playground/selected-fixture/events/handlers.js b/tests/components/component-playground/selected-fixture/events/handlers.js
index cca77c1..60a3eac 100644
--- a/tests/components/component-playground/selected-fixture/events/handlers.js
+++ b/tests/components/component-playground/selected-fixture/events/handlers.js
@@ -22,18 +22,14 @@ describe(`ComponentPlayground (${FIXTURE}) Events Handlers`, function() {
 
   describe('orientation', function() {
     function simulateWindowResize(width, height) {
-      sinon.stub(component.refs.contentFrame, 'getDOMNode').returns({
+      component.refs.contentFrame = {
         offsetWidth: width,
         offsetHeight: height
-      });
+      };
 
       component.onWindowResize();
     }
 
-    afterEach(function() {
-      component.refs.contentFrame.getDOMNode.restore();
-    });
-
     it('should be set to landscape on width > height', function() {
       simulateWindowResize(300, 200);
 
diff --git a/tests/components/component-playground/selected-fixture/render/dom.js b/tests/components/component-playground/selected-fixture/render/dom.js
index 2a494e0..cda1d2c 100644
--- a/tests/components/component-playground/selected-fixture/render/dom.js
+++ b/tests/components/component-playground/selected-fixture/render/dom.js
@@ -16,20 +16,20 @@ describe(`ComponentPlayground (${FIXTURE}) Render DOM`, function() {
   });
 
   it('should add orientation class on content frame element', function() {
-    var $contentFrame = $(component.refs.contentFrame.getDOMNode());
+    var $contentFrame = $(component.refs.contentFrame);
 
     expect($contentFrame.hasClass(
         style['orientation-' + component.state.orientation])).to.be.true;
   });
 
   it('should add container class on preview element', function() {
-    var $previewContainer = $(component.refs.previewContainer.getDOMNode());
+    var $previewContainer = $(component.refs.previewContainer);
 
     expect($previewContainer.hasClass(fixture.containerClassName)).to.be.true;
   });
 
   it('should remove selected class on home button', function() {
-    expect($(component.refs.homeButton.getDOMNode())
+    expect($(component.refs.homeButton)
            .hasClass(style['selected-button'])).to.be.false;
   });
 
diff --git a/tests/components/component-playground/selected-fixture/transitions/props.js b/tests/components/component-playground/selected-fixture/transitions/props.js
index 526f99a..0db858a 100644
--- a/tests/components/component-playground/selected-fixture/transitions/props.js
+++ b/tests/components/component-playground/selected-fixture/transitions/props.js
@@ -18,6 +18,8 @@ describe(`ComponentPlayground (${FIXTURE}) Transitions Props`, function() {
     sinon.stub(ComponentTree, 'injectState');
     sinon.spy(component, 'setState');
 
+    // TODO: Replace with new render call. Problem is instance changes from one
+    // render to another
     component.setProps({
       component: 'SecondComponent',
       fixture: 'index'
diff --git a/tests/lib/get-url-props.js b/tests/lib/get-url-props.js
index 92b5cdb..73ad1d0 100644
--- a/tests/lib/get-url-props.js
+++ b/tests/lib/get-url-props.js
@@ -2,7 +2,7 @@ var $ = require('jquery'),
     parseLocation = require('react-querystring-router').uri.parseLocation;
 
 module.exports = function(element) {
-  var href = $(element.getDOMNode()).attr('href');
+  var href = $(element).attr('href');
 
   return parseLocation(href);
 };
diff --git a/tests/lib/render-component.js b/tests/lib/render-component.js
index 784b7a7..14f0c0e 100644
--- a/tests/lib/render-component.js
+++ b/tests/lib/render-component.js
@@ -1,4 +1,5 @@
-var $ = require('jquery'),
+var ReactDOM = require('react-dom'),
+    $ = require('jquery'),
     ComponentTree = require('react-component-tree'),
     ComponentPlayground = require('components/component-playground.jsx');
 
@@ -13,7 +14,7 @@ module.exports = function(fixture) {
     container: container
   });
 
-  $component = $(component.getDOMNode());
+  $component = $(ReactDOM.findDOMNode(component));
 
   return {
     container: container,

From af11adcd5c615f5e5bc1d5c47de6e6a4b9c95140 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Sun, 15 Nov 2015 23:34:57 +0200
Subject: [PATCH 2/7] Add note on React compatibility #31

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

diff --git a/README.md b/README.md
index 98b5427..a6e7143 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,10 @@ surfaces any implicit dependencies. It also forces you to define sane inputs
 for every component, making them more predictable and easier to debug down
 the road.
 
+React compatibility:
+- `react-component-playground@0.3` with `react@0.13` and below
+- `react-component-playground@0.4` with `react@0.14` and above
+
 Features include:
 
 - Rendering full-screen components or with the navigation pane on the side.

From 53e15d587aea1e3f78fb466ec2966a08267cd826 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Tue, 17 Nov 2015 23:40:12 +0200
Subject: [PATCH 3/7] Hide long static calls #31

---
 src/components/component-playground.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index ef15430..f7655bd 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -119,7 +119,7 @@ module.exports = React.createClass({
   },
 
   render: function() {
-    var isFixtureSelected = this.constructor.isFixtureSelected(this.props);
+    var isFixtureSelected = this._isFixtureSelected();
 
     var classes = {};
     classes[style['component-playground']] = true;
@@ -211,8 +211,7 @@ module.exports = React.createClass({
     var classes = {};
     classes[style.button] = true;
     classes[style['play-button']] = true;
-    classes[style['selected-button']] =
-      !this.constructor.isFixtureSelected(this.props);
+    classes[style['selected-button']] = !this._isFixtureSelected();
 
     classes = classNames(classes);
 
@@ -386,6 +385,10 @@ module.exports = React.createClass({
     this._updateContentFrameOrientation();
   },
 
+  _isFixtureSelected: function() {
+    return this.constructor.isFixtureSelected(this.props);
+  },
+
   _getPreviewComponentKey: function() {
     return this.props.component + '-' +
            this.props.fixture + '-' +
@@ -450,7 +453,7 @@ module.exports = React.createClass({
   },
 
   _updateContentFrameOrientation: function() {
-    if (!this.constructor.isFixtureSelected(this.props)) {
+    if (!this._isFixtureSelected()) {
       return;
     }
 

From 48101b2417dec90ccd06c3a7ceea03e66657ed5e Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Tue, 17 Nov 2015 23:50:26 +0200
Subject: [PATCH 4/7] Fix Boolean return #31

---
 src/components/component-playground.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/component-playground.jsx b/src/components/component-playground.jsx
index f7655bd..b34da01 100644
--- a/src/components/component-playground.jsx
+++ b/src/components/component-playground.jsx
@@ -29,7 +29,7 @@ module.exports = React.createClass({
 
   statics: {
     isFixtureSelected: function(props) {
-      return props.component && props.fixture;
+      return !!(props.component && props.fixture);
     },
 
     didFixtureChange: function(prevProps, nextProps) {

From 66c6a1d061b4e172e29a9345a647014159dff8d7 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Wed, 18 Nov 2015 00:46:05 +0200
Subject: [PATCH 5/7] Spy instead of stub for more awareness #31

---
 .../component-playground/default/render/children.js           | 4 ++--
 .../component-playground/selected-fixture/render/children.js  | 4 ++--
 tests/setup/{stub-load-child.js => spy-load-child.js}         | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename tests/setup/{stub-load-child.js => spy-load-child.js} (78%)

diff --git a/tests/components/component-playground/default/render/children.js b/tests/components/component-playground/default/render/children.js
index 2c8af7a..ed3e8d0 100644
--- a/tests/components/component-playground/default/render/children.js
+++ b/tests/components/component-playground/default/render/children.js
@@ -3,7 +3,7 @@ var FIXTURE = 'default';
 describe(`ComponentPlayground (${FIXTURE}) Render Children`, function() {
   var loadChild = require('react-component-tree').loadChild,
       render = require('tests/lib/render-component.js'),
-      stubLoadChild = require('tests/setup/stub-load-child.js'),
+      spyLoadChild = require('tests/setup/spy-load-child.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
 
   var component,
@@ -11,7 +11,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render Children`, function() {
       container,
       fixture;
 
-  stubLoadChild();
+  spyLoadChild();
 
   beforeEach(function() {
     ({container, component, $component} = render(fixture));
diff --git a/tests/components/component-playground/selected-fixture/render/children.js b/tests/components/component-playground/selected-fixture/render/children.js
index af971d9..c059ad7 100644
--- a/tests/components/component-playground/selected-fixture/render/children.js
+++ b/tests/components/component-playground/selected-fixture/render/children.js
@@ -3,7 +3,7 @@ var FIXTURE = 'selected-fixture';
 describe(`ComponentPlayground (${FIXTURE}) Render Children`, function() {
   var loadChild = require('react-component-tree').loadChild,
       render = require('tests/lib/render-component.js'),
-      stubLoadChild = require('tests/setup/stub-load-child.js'),
+      spyLoadChild = require('tests/setup/spy-load-child.js'),
       fixture = require(`fixtures/component-playground/${FIXTURE}.js`);
 
   var component,
@@ -12,7 +12,7 @@ describe(`ComponentPlayground (${FIXTURE}) Render Children`, function() {
       fixture,
       childParams;
 
-  stubLoadChild();
+  spyLoadChild();
 
   beforeEach(function() {
     ({container, component, $component} = render(fixture));
diff --git a/tests/setup/stub-load-child.js b/tests/setup/spy-load-child.js
similarity index 78%
rename from tests/setup/stub-load-child.js
rename to tests/setup/spy-load-child.js
index 14c866d..00d5a03 100644
--- a/tests/setup/stub-load-child.js
+++ b/tests/setup/spy-load-child.js
@@ -2,7 +2,7 @@ var ComponentTree = require('react-component-tree');
 
 module.exports = function() {
   beforeEach(function() {
-    sinon.stub(ComponentTree.loadChild, 'loadChild');
+    sinon.spy(ComponentTree.loadChild, 'loadChild');
   });
 
   afterEach(function() {

From 971e442dc581cefcef38d6e14755e39000bb44e2 Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Wed, 18 Nov 2015 00:46:31 +0200
Subject: [PATCH 6/7] Upgrade ComponentTree to support stateless components #31

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

diff --git a/package.json b/package.json
index 7f39fc2..bf2d20f 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "classnames": "^1.2.0",
     "lodash": "^3.6.0",
-    "react-component-tree": "^0.3.0",
+    "react-component-tree": "^0.3.1",
     "react-querystring-router": "^0.3.0"
   },
   "devDependencies": {

From 2039923ddb954d49196a3511055a7abc355b68cf Mon Sep 17 00:00:00 2001
From: Ovidiu Chereches <skidding@gmail.com>
Date: Thu, 19 Nov 2015 00:49:27 +0200
Subject: [PATCH 7/7] Fix button position #31

---
 src/components/component-playground.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/component-playground.less b/src/components/component-playground.less
index cf8a6a0..51572f9 100644
--- a/src/components/component-playground.less
+++ b/src/components/component-playground.less
@@ -60,7 +60,7 @@
       overflow: hidden;
 
       .button {
-        display: inline-block;
+        float: left;
         width: @header-button-size;
         height: @header-button-size;
         border-radius: 100%;