From 0f7cfab7f90c8d3c88c1fa2d221fa5f917931989 Mon Sep 17 00:00:00 2001
From: Eric Fields <ericdfields@gmail.com>
Date: Wed, 15 Apr 2015 15:04:24 -0400
Subject: [PATCH 1/2] added support for optional custom class names

---
 lib/components/{Tab.js => Tab.jsx}           |  6 ++++++
 lib/components/TabList.js                    | 14 -------------
 lib/components/TabList.jsx                   | 21 ++++++++++++++++++++
 lib/components/{TabPanel.js => TabPanel.jsx} |  6 ++++++
 lib/components/{Tabs.js => Tabs.jsx}         |  7 ++++++-
 package.json                                 |  4 +---
 6 files changed, 40 insertions(+), 18 deletions(-)
 rename lib/components/{Tab.js => Tab.jsx} (84%)
 delete mode 100644 lib/components/TabList.js
 create mode 100644 lib/components/TabList.jsx
 rename lib/components/{TabPanel.js => TabPanel.jsx} (74%)
 rename lib/components/{Tabs.js => Tabs.jsx} (96%)

diff --git a/lib/components/Tab.js b/lib/components/Tab.jsx
similarity index 84%
rename from lib/components/Tab.js
rename to lib/components/Tab.jsx
index 4ac3afb762..9a18cfb66c 100644
--- a/lib/components/Tab.js
+++ b/lib/components/Tab.jsx
@@ -1,5 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
+var classNames = require('classnames');
 
 function syncNodeAttributes(node, props) {
 	if (props.selected) {
@@ -34,10 +35,15 @@ module.exports = React.createClass({
 		syncNodeAttributes(this.getDOMNode(), this.props);
 	},
 
+	getClassNames: function() {
+		this.props.classNames ? classNames(this.props.classNames) : false
+	},
+
 	render: function () {
 		return (
 			<li role="tab"
 				id={this.props.id}
+				classNames={this.getClassNames()}
 				aria-selected={this.props.selected ? 'true' : 'false'}
 				aria-expanded={this.props.selected ? 'true' : 'false'}
 				aria-controls={this.props.panelId}
diff --git a/lib/components/TabList.js b/lib/components/TabList.js
deleted file mode 100644
index d17a20c606..0000000000
--- a/lib/components/TabList.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/** @jsx React.DOM */
-var React = require('react');
-
-module.exports = React.createClass({
-	displayName: 'TabList',
-
-	render: function () {
-		return (
-			<ul role="tablist">
-				{this.props.children}
-			</ul>
-		);
-	}
-});
diff --git a/lib/components/TabList.jsx b/lib/components/TabList.jsx
new file mode 100644
index 0000000000..b86e13c9ed
--- /dev/null
+++ b/lib/components/TabList.jsx
@@ -0,0 +1,21 @@
+/** @jsx React.DOM */
+var React = require('react');
+var classNames = require('classnames');
+
+module.exports = React.createClass({
+	displayName: 'TabList',
+
+  getClassNames: function() {
+    this.props.classNames ? classNames(this.props.classNames) : false
+  },
+
+	render: function () {
+		return (
+			<ul role="tablist"
+        className={this.getClassNames()}
+      >
+				{this.props.children}
+			</ul>
+		);
+	}
+});
diff --git a/lib/components/TabPanel.js b/lib/components/TabPanel.jsx
similarity index 74%
rename from lib/components/TabPanel.js
rename to lib/components/TabPanel.jsx
index b9a3f5aeb0..32bc0984ac 100644
--- a/lib/components/TabPanel.js
+++ b/lib/components/TabPanel.jsx
@@ -1,5 +1,6 @@
 /** @jsx React.DOM */
 var React = require('react');
+var classNames = require('classnames');
 
 module.exports = React.createClass({
 	displayName: 'TabPanel',
@@ -12,6 +13,10 @@ module.exports = React.createClass({
 		};
 	},
 
+	getClassNames: function() {
+		this.props.classNames ? classNames(this.props.classNames) : false
+	},
+
 	render: function () {
     var children = this.props.selected ? this.props.children : null;
 
@@ -20,6 +25,7 @@ module.exports = React.createClass({
 				id={this.props.id}
 				aria-labeledby={this.props.tabId}
 				style={{display: this.props.selected ? '' : 'none'}}
+				className={this.getClassNames}
       >
         {children}
       </div>
diff --git a/lib/components/Tabs.js b/lib/components/Tabs.jsx
similarity index 96%
rename from lib/components/Tabs.js
rename to lib/components/Tabs.jsx
index 0f41aa6385..7c75d61f4e 100644
--- a/lib/components/Tabs.js
+++ b/lib/components/Tabs.jsx
@@ -3,6 +3,7 @@ var React = require('react/addons');
 var invariant = require('react/lib/invariant');
 var jss = require('js-stylesheet');
 var uuid = require('../helpers/uuid');
+var classNames = require('classnames');
 
 // Determine if a node from event.target is a Tab element
 function isTabNode(node) {
@@ -200,9 +201,13 @@ module.exports = React.createClass({
 
   },
 
+  getClassNames: function() {
+  	classNames('react-tabs',this.props.classNames)
+  },
+
 	render: function () {	
 		return (
-			<div className="react-tabs"
+			<div className={this.className()}
 				onClick={this.handleClick}
 				onKeyDown={this.handleKeyDown}
       >
diff --git a/package.json b/package.json
index 68eeee177e..938b59802a 100644
--- a/package.json
+++ b/package.json
@@ -28,9 +28,6 @@
     "a11y",
     "react-component"
   ],
-  "browserify": {
-    "transform": [ "reactify" ]
-  },
   "devDependencies": {
     "envify": "^3.2.0",
     "jsx-loader": "^0.12.2",
@@ -38,6 +35,7 @@
     "reactify": "^0.17.1"
   },
   "dependencies": {
+    "classnames": "^1.2.0",
     "js-stylesheet": "0.0.1",
     "react": "^0.12.1"
   }

From 22d1c5cee97fa45e927a87c1755432ac85c090ad Mon Sep 17 00:00:00 2001
From: Eric Fields <ericdfields@gmail.com>
Date: Wed, 15 Apr 2015 15:09:09 -0400
Subject: [PATCH 2/2] multiline props breaking

---
 lib/components/Tab.jsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/lib/components/Tab.jsx b/lib/components/Tab.jsx
index 9a18cfb66c..9d61814b55 100644
--- a/lib/components/Tab.jsx
+++ b/lib/components/Tab.jsx
@@ -41,13 +41,7 @@ module.exports = React.createClass({
 
 	render: function () {
 		return (
-			<li role="tab"
-				id={this.props.id}
-				classNames={this.getClassNames()}
-				aria-selected={this.props.selected ? 'true' : 'false'}
-				aria-expanded={this.props.selected ? 'true' : 'false'}
-				aria-controls={this.props.panelId}
-      >
+			<li role="tab" id={this.props.id} classNames={this.getClassNames()} aria-selected={this.props.selected ? 'true' : 'false'} aria-expanded={this.props.selected ? 'true' : 'false'} aria-controls={this.props.panelId}>
         {this.props.children}
       </li>
 		);