Skip to content

Commit e7cf455

Browse files
author
Caroline Taymor
committed
[changed] New Tabs API
* Deprecates TabbedArea and TabPane * Adds Tabs (formerly TabbedArea) and Tab (formerly TabPane) * `tab` attribute is renamed to `title` * Removes tests for TabbedArea and TabPane (because the deprecation warning fails them all) * Update docs to use Tabs and Tab examples Signed-off-by: Kenny Wang <[email protected]> Signed-off-by: Caroline Taymor <[email protected]> Signed-off-by: Dominick Reinhold <[email protected]>
1 parent df1db7b commit e7cf455

17 files changed

+462
-407
lines changed

‎docs/examples/.eslintrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,11 @@
4747
"ProgressBar",
4848
"Row",
4949
"SplitButton",
50+
"Tab",
5051
"TabbedArea",
5152
"Table",
5253
"TabPane",
54+
"Tabs",
5355
"Tooltip",
5456
"Well",
5557
"Thumbnail",

‎docs/examples/TabbedAreaControlled.js

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎docs/examples/TabbedAreaNoAnimation.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎docs/examples/TabbedAreaUncontrolled.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎docs/examples/TabsControlled.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const ControlledTabs = React.createClass({
2+
getInitialState() {
3+
return {
4+
key: 1
5+
};
6+
},
7+
8+
handleSelect(key) {
9+
alert('selected ' + key);
10+
this.setState({key});
11+
},
12+
13+
render() {
14+
return (
15+
<Tabs activeKey={this.state.key} onSelect={this.handleSelect}>
16+
<Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab>
17+
<Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab>
18+
<Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab>
19+
</Tabs>
20+
);
21+
}
22+
});
23+
24+
React.render(<ControlledTabs />, mountNode);

‎docs/examples/TabsNoAnimation.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const tabsInstance = (
2+
<Tabs defaultActiveKey={1} animation={false}>
3+
<Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab>
4+
<Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab>
5+
<Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab>
6+
</Tabs>
7+
);
8+
9+
React.render(tabsInstance, mountNode);

‎docs/examples/TabsUncontrolled.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const tabsInstance = (
2+
<Tabs defaultActiveKey={2}>
3+
<Tab eventKey={1} title='Tab 1'>Tab 1 content</Tab>
4+
<Tab eventKey={2} title='Tab 2'>Tab 2 content</Tab>
5+
<Tab eventKey={3} title='Tab 3' disabled>Tab 3 content</Tab>
6+
</Tabs>
7+
);
8+
9+
React.render(tabsInstance, mountNode);

‎docs/src/ComponentsPage.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -519,15 +519,15 @@ const ComponentsPage = React.createClass({
519519

520520
<h3><Anchor id='tabs-uncontrolled'>Uncontrolled</Anchor></h3>
521521
<p>Allow the component to control its own state.</p>
522-
<ReactPlayground codeText={Samples.TabbedAreaUncontrolled} exampleClassName='bs-example-tabs' />
522+
<ReactPlayground codeText={Samples.TabsUncontrolled} exampleClassName='bs-example-tabs' />
523523

524524
<h3><Anchor id='tabs-controlled'>Controlled</Anchor></h3>
525525
<p>Pass down the active state on render via props.</p>
526-
<ReactPlayground codeText={Samples.TabbedAreaControlled} exampleClassName='bs-example-tabs' />
526+
<ReactPlayground codeText={Samples.TabsControlled} exampleClassName='bs-example-tabs' />
527527

528528
<h3><Anchor id='tabs-no-animation'>No animation</Anchor></h3>
529529
<p>Set the <code>animation</code> prop to <code>false</code></p>
530-
<ReactPlayground codeText={Samples.TabbedAreaNoAnimation} exampleClassName='bs-example-tabs' />
530+
<ReactPlayground codeText={Samples.TabsNoAnimation} exampleClassName='bs-example-tabs' />
531531

532532
<div className='bs-callout bs-callout-info'>
533533
<h4>Extends tabbed navigation</h4>
@@ -536,11 +536,11 @@ const ComponentsPage = React.createClass({
536536

537537
<h3><Anchor id='tabs-props'>Props</Anchor></h3>
538538

539-
<h4><Anchor id='tabs-props-area'>TabbedArea</Anchor></h4>
540-
<PropTable component='TabbedArea'/>
539+
<h4><Anchor id='tabs-props-area'>Tabs</Anchor></h4>
540+
<PropTable component='Tabs'/>
541541

542-
<h4><Anchor id='tabs-props-pane'>TabPane</Anchor></h4>
543-
<PropTable component='TabPane'/>
542+
<h4><Anchor id='tabs-props-pane'>Tab</Anchor></h4>
543+
<PropTable component='Tab'/>
544544
</div>
545545

546546
{/* Pager */}

‎docs/src/ReactPlayground.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ const Portal = require('../../src/Portal');
4646
const ProgressBar = require('../../src/ProgressBar');
4747
const Row = require('../../src/Row');
4848
const SplitButton = require('../../src/SplitButton');
49-
const TabbedArea = require('../../src/TabbedArea');
49+
const Tab = require('../../src/Tab');
5050
const Table = require('../../src/Table');
51-
const TabPane = require('../../src/TabPane');
51+
const Tabs = require('../../src/Tabs');
5252
const Thumbnail = require('../../src/Thumbnail');
5353
const Tooltip = require('../../src/Tooltip');
5454
const Well = require('../../src/Well');

‎docs/src/Samples.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,9 @@ export default {
6161
NavbarBrand: require('fs').readFileSync(__dirname + '/../examples/NavbarBrand.js', 'utf8'),
6262
NavbarCollapsible: require('fs').readFileSync(__dirname + '/../examples/NavbarCollapsible.js', 'utf8'),
6363
CollapsibleNav: require('fs').readFileSync(__dirname + '/../examples/CollapsibleNav.js', 'utf8'),
64-
TabbedAreaUncontrolled: require('fs').readFileSync(__dirname + '/../examples/TabbedAreaUncontrolled.js', 'utf8'),
65-
TabbedAreaControlled: require('fs').readFileSync(__dirname + '/../examples/TabbedAreaControlled.js', 'utf8'),
66-
TabbedAreaNoAnimation: require('fs').readFileSync(__dirname + '/../examples/TabbedAreaNoAnimation.js', 'utf8'),
64+
TabsUncontrolled: require('fs').readFileSync(__dirname + '/../examples/TabsUncontrolled.js', 'utf8'),
65+
TabsControlled: require('fs').readFileSync(__dirname + '/../examples/TabsControlled.js', 'utf8'),
66+
TabsNoAnimation: require('fs').readFileSync(__dirname + '/../examples/TabsNoAnimation.js', 'utf8'),
6767
PagerDefault: require('fs').readFileSync(__dirname + '/../examples/PagerDefault.js', 'utf8'),
6868
PagerAligned: require('fs').readFileSync(__dirname + '/../examples/PagerAligned.js', 'utf8'),
6969
PagerDisabled: require('fs').readFileSync(__dirname + '/../examples/PagerDisabled.js', 'utf8'),

0 commit comments

Comments
 (0)