feat(tabs): Upgrade to new Tabs API

BREAKING CHANGE: (react) React Tab's property tab is now called title Signed-off-by: Matt Royal <mroyal@pivotal.io>
pivotal-cf · Aug 12, 2015 · 01dad2a · 01dad2a
1 parent 340455d
commit 01dad2a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "q": "^1.0.1",
     "react": "0.13.3",
     "react-a11y": "pivotal-cf/react-a11y#dist",
-    "react-bootstrap": "pivotal-cf/react-bootstrap#pui-dist",
+    "react-bootstrap": "pivotal-cf/react-bootstrap#distv0.25-rc",
     "react-fa": "^3.0.0",
     "require-dir": "^0.3.0",
     "run-sequence": "^1.0.2",

diff --git a/spec/pivotal-ui-react/tab/tab_spec.js b/spec/pivotal-ui-react/tab/tab_spec.js
@@ -11,8 +11,8 @@ describe('Tabs', function() {
       React.render(
         (
           <SimpleTabs defaultActiveKey={1}>
-            <Tab eventKey={1} tab="Tab1">Content1</Tab>
-            <Tab eventKey={2} tab="Tab2"/>
+            <Tab eventKey={1} title="Tab1">Content1</Tab>
+            <Tab eventKey={2} title="Tab2"/>
           </SimpleTabs>
         ),
         root
@@ -35,8 +35,8 @@ describe('Tabs', function() {
 
       React.render((
           <SimpleAltTabs defaultActiveKey={1}>,
-            <Tab eventKey={1} tab="Tab1">Content1</Tab>
-            <Tab eventKey={2} tab="Tab2"/>
+            <Tab eventKey={1} title="Tab1">Content1</Tab>
+            <Tab eventKey={2} title="Tab2"/>
           </SimpleAltTabs>
         ),
         root

diff --git a/src/pivotal-ui-react/tabs/tabs.js b/src/pivotal-ui-react/tabs/tabs.js
@@ -1,5 +1,5 @@
 var React = require('react');
-var TabbedArea = require('react-bootstrap').TabbedArea;
+var Tabs = require('react-bootstrap').Tabs;
 
 /**
  * @component SimpleTabs
@@ -28,7 +28,7 @@ var TabbedArea = require('react-bootstrap').TabbedArea;
  */
 var SimpleTabs = React.createClass({
   render() {
-    return <div className="tab-simple"><TabbedArea {...this.props}/></div>;
+    return <div className="tab-simple"><Tabs {...this.props}/></div>;
   }
 });
 
@@ -59,7 +59,7 @@ var SimpleTabs = React.createClass({
  */
 var SimpleAltTabs = React.createClass({
   render() {
-    return <div className="tab-simple-alt"><TabbedArea {...this.props}/></div>;
+    return <div className="tab-simple-alt"><Tabs {...this.props}/></div>;
   }
 });
 
@@ -72,7 +72,7 @@ var SimpleAltTabs = React.createClass({
  * @see [Pivotal UI React](http://styleguide.pivotal.io/react.html#tabs_react)
  * @see [Pivotal UI CSS](http://styleguide.pivotal.io/objects.html#tab)
  */
-var Tab = require('react-bootstrap').TabPane;
+var Tab = require('react-bootstrap').Tab;
 
 module.exports = {
   SimpleTabs,

diff --git a/src/pivotal-ui/components/tabs/tabs.scss b/src/pivotal-ui/components/tabs/tabs.scss
@@ -554,8 +554,8 @@ parent: tabs_react
 
 ```react_example
 <UI.SimpleTabs defaultActiveKey={1}>
-  <UI.Tab eventKey={1} tab="Tab 1">Wow!</UI.Tab>
-  <UI.Tab eventKey={2} tab="Tab 2">
+  <UI.Tab eventKey={1} title="Tab 1">Wow!</UI.Tab>
+  <UI.Tab eventKey={2} title="Tab 2">
     <h2>Neat!</h2>
     <span>So much content.</span>
   </UI.Tab>
@@ -573,8 +573,8 @@ parent: tabs_react
 
 ```react_example
 <UI.SimpleAltTabs defaultActiveKey={2}>
-  <UI.Tab eventKey={1} tab="Tab 1">Wow!</UI.Tab>
-  <UI.Tab eventKey={2} tab="Tab 2">
+  <UI.Tab eventKey={1} title="Tab 1">Wow!</UI.Tab>
+  <UI.Tab eventKey={2} title="Tab 2">
     <h2>Neat!</h2>
     <span>So much content.</span>
   </UI.Tab>