Skip to content

Commit 9b02a31

Browse files
pietervpieterv
committed
Removed bsVaration prop, removed example's bsStyle="default" prop
Added `justified` and `vertical` boolean props, see react-bootstrap#35. Removed unnecessary `bsStyle="default"` definitions. react-bootstrap#36
1 parent 5839845 commit 9b02a31

19 files changed

Lines changed: 97 additions & 64 deletions

‎amd/transpiled/ButtonGroup.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ define(
1212
var ButtonGroup = React.createClass({displayName: 'ButtonGroup',
1313
mixins: [BootstrapMixin],
1414

15+
propTypes: {
16+
vertical: React.PropTypes.bool,
17+
justified: React.PropTypes.bool
18+
},
19+
1520
getDefaultProps: function () {
1621
return {
1722
bsClass: 'button-group'
@@ -20,6 +25,8 @@ define(
2025

2126
render: function () {
2227
var classes = this.getBsClassSet();
28+
classes['btn-group-vertical'] = this.props.vertical;
29+
classes['btn-group-justified'] = this.props.justified;
2330

2431
return this.transferPropsTo(
2532
React.DOM.div(

‎cjs/transpiled/ButtonGroup.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ var Button = require("./Button")["default"];
99
var ButtonGroup = React.createClass({displayName: 'ButtonGroup',
1010
mixins: [BootstrapMixin],
1111

12+
propTypes: {
13+
vertical: React.PropTypes.bool,
14+
justified: React.PropTypes.bool
15+
},
16+
1217
getDefaultProps: function () {
1318
return {
1419
bsClass: 'button-group'
@@ -17,6 +22,8 @@ var ButtonGroup = React.createClass({displayName: 'ButtonGroup',
1722

1823
render: function () {
1924
var classes = this.getBsClassSet();
25+
classes['btn-group-vertical'] = this.props.vertical;
26+
classes['btn-group-justified'] = this.props.justified;
2027

2128
return this.transferPropsTo(
2229
React.DOM.div(

‎dist/react-bootstrap.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-bootstrap.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/bundle.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,11 @@ var Button = require("./Button")["default"];
203203
var ButtonGroup = React.createClass({displayName: 'ButtonGroup',
204204
mixins: [BootstrapMixin],
205205

206+
propTypes: {
207+
vertical: React.PropTypes.bool,
208+
justified: React.PropTypes.bool
209+
},
210+
206211
getDefaultProps: function () {
207212
return {
208213
bsClass: 'button-group'
@@ -211,6 +216,8 @@ var ButtonGroup = React.createClass({displayName: 'ButtonGroup',
211216

212217
render: function () {
213218
var classes = this.getBsClassSet();
219+
classes['btn-group-vertical'] = this.props.vertical;
220+
classes['btn-group-justified'] = this.props.justified;
214221

215222
return this.transferPropsTo(
216223
React.DOM.div(
@@ -296,8 +303,6 @@ var DropdownButton = React.createClass({displayName: 'DropdownButton',
296303
},
297304

298305
handleClick: function (e) {
299-
e.preventDefault();
300-
301306
this.toggle();
302307
},
303308

@@ -1615,12 +1620,12 @@ var ButtonActiveText = "/** @jsx React.DOM */\n\nvar buttonsInstance = (\n <d
16151620
var ButtonDisabledText = "/** @jsx React.DOM */\n\nvar buttonsInstance = (\n <div>\n <Button bsStyle=\"primary\" bsSize=\"large\" disabled>Primary button</Button>\n <Button bsSize=\"large\" disabled>Button</Button>\n </div>\n );\n\nReact.renderComponent(buttonsInstance, mountNode);";
16161621
var ButtonTagTypesText = "/** @jsx React.DOM */\n\nvar buttonsInstance = (\n <div>\n <Button href=\"#\">Link</Button>\n <Button>Button</Button>\n </div>\n );\n\nReact.renderComponent(buttonsInstance, mountNode);";
16171622
var ButtonLoadingText = "/** @jsx React.DOM */\n\nvar LoadingButton = React.createClass({\n getInitialState: function() {\n return {\n isLoading: false\n };\n },\n\n render: function() {\n var isLoading = this.state.isLoading;\n return (\n <Button\n bsStyle=\"primary\"\n disabled={isLoading}\n onClick={!isLoading ? this.handleClick : null}>\n {isLoading ? 'Loading...' : 'Loading state'}\n </Button>\n );\n },\n\n handleClick: function() {\n this.setState({isLoading: true});\n\n // This probably where you would have an `ajax` call\n setTimeout(function() {\n\n // Completed of async action, set loading state back\n this.setState({isLoading: false});\n }.bind(this), 2000);\n }\n});\n\nReact.renderComponent(LoadingButton(), mountNode);";
1618-
var ButtonGroupBasicText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonGroup>\n <Button bsStyle=\"default\">Left</Button>\n <Button bsStyle=\"default\">Middle</Button>\n <Button bsStyle=\"default\">Right</Button>\n </ButtonGroup>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1619-
var ButtonToolbarBasicText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonToolbar>\n <ButtonGroup>\n <Button bsStyle=\"default\">1</Button>\n <Button bsStyle=\"default\">2</Button>\n <Button bsStyle=\"default\">3</Button>\n <Button bsStyle=\"default\">4</Button>\n </ButtonGroup>\n\n <ButtonGroup>\n <Button bsStyle=\"default\">5</Button>\n <Button bsStyle=\"default\">6</Button>\n <Button bsStyle=\"default\">7</Button>\n </ButtonGroup>\n\n <ButtonGroup>\n <Button bsStyle=\"default\">8</Button>\n </ButtonGroup>\n </ButtonToolbar>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1620-
var ButtonGroupSizesText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <div>\n <ButtonToolbar>\n <ButtonGroup bsSize=\"large\">\n <Button bsStyle=\"default\">Left</Button>\n <Button bsStyle=\"default\">Middle</Button>\n <Button bsStyle=\"default\">Right</Button>\n </ButtonGroup>\n </ButtonToolbar>\n\n <ButtonToolbar>\n <ButtonGroup>\n <Button bsStyle=\"default\">Left</Button>\n <Button bsStyle=\"default\">Middle</Button>\n <Button bsStyle=\"default\">Right</Button>\n </ButtonGroup>\n </ButtonToolbar>\n\n <ButtonToolbar>\n <ButtonGroup bsSize=\"small\">\n <Button bsStyle=\"default\">Left</Button>\n <Button bsStyle=\"default\">Middle</Button>\n <Button bsStyle=\"default\">Right</Button>\n </ButtonGroup>\n </ButtonToolbar>\n\n <ButtonToolbar>\n <ButtonGroup bsSize=\"xsmall\">\n <Button bsStyle=\"default\">Left</Button>\n <Button bsStyle=\"default\">Middle</Button>\n <Button bsStyle=\"default\">Right</Button>\n </ButtonGroup>\n </ButtonToolbar>\n </div>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1621-
var ButtonGroupNestedText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonGroup>\n <Button bsStyle=\"default\">1</Button>\n <Button bsStyle=\"default\">2</Button>\n <DropdownButton bsStyle=\"default\" title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n </ButtonGroup>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1622-
var ButtonGroupVerticalText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonGroup bsVariation=\"vertical\">\n <Button bsStyle=\"default\">Button</Button>\n <Button bsStyle=\"default\">Button</Button>\n <DropdownButton bsStyle=\"default\" title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n <Button bsStyle=\"default\">Button</Button>\n <Button bsStyle=\"default\">Button</Button>\n <DropdownButton bsStyle=\"default\" title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n <DropdownButton bsStyle=\"default\" title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n </ButtonGroup>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1623-
var ButtonGroupJustifiedText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonGroup bsVariation=\"justified\">\n <Button href=\"#\" bsStyle=\"default\">Left</Button>\n <Button href=\"#\" bsStyle=\"default\">Middle</Button>\n <DropdownButton href=\"#\" bsStyle=\"default\" title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n </ButtonGroup>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1623+
var ButtonGroupBasicText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonGroup>\n <Button>Left</Button>\n <Button>Middle</Button>\n <Button>Right</Button>\n </ButtonGroup>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1624+
var ButtonToolbarBasicText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonToolbar>\n <ButtonGroup>\n <Button>1</Button>\n <Button>2</Button>\n <Button>3</Button>\n <Button>4</Button>\n </ButtonGroup>\n\n <ButtonGroup>\n <Button>5</Button>\n <Button>6</Button>\n <Button>7</Button>\n </ButtonGroup>\n\n <ButtonGroup>\n <Button>8</Button>\n </ButtonGroup>\n </ButtonToolbar>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1625+
var ButtonGroupSizesText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <div>\n <ButtonToolbar>\n <ButtonGroup bsSize=\"large\">\n <Button>Left</Button>\n <Button>Middle</Button>\n <Button>Right</Button>\n </ButtonGroup>\n </ButtonToolbar>\n\n <ButtonToolbar>\n <ButtonGroup>\n <Button>Left</Button>\n <Button>Middle</Button>\n <Button>Right</Button>\n </ButtonGroup>\n </ButtonToolbar>\n\n <ButtonToolbar>\n <ButtonGroup bsSize=\"small\">\n <Button>Left</Button>\n <Button>Middle</Button>\n <Button>Right</Button>\n </ButtonGroup>\n </ButtonToolbar>\n\n <ButtonToolbar>\n <ButtonGroup bsSize=\"xsmall\">\n <Button>Left</Button>\n <Button>Middle</Button>\n <Button>Right</Button>\n </ButtonGroup>\n </ButtonToolbar>\n </div>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1626+
var ButtonGroupNestedText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonGroup>\n <Button>1</Button>\n <Button>2</Button>\n <DropdownButton title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n </ButtonGroup>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1627+
var ButtonGroupVerticalText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonGroup vertical>\n <Button>Button</Button>\n <Button>Button</Button>\n <DropdownButton title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n <Button>Button</Button>\n <Button>Button</Button>\n <DropdownButton title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n <DropdownButton title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n </ButtonGroup>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
1628+
var ButtonGroupJustifiedText = "/** @jsx React.DOM */\n\nvar buttonGroupInstance = (\n <ButtonGroup justified>\n <Button href=\"#\">Left</Button>\n <Button href=\"#\">Middle</Button>\n <DropdownButton href=\"#\" title=\"Dropdown\">\n <MenuItem key=\"1\">Dropdown link</MenuItem>\n <MenuItem key=\"2\">Dropdown link</MenuItem>\n </DropdownButton>\n </ButtonGroup>\n );\n\nReact.renderComponent(buttonGroupInstance, mountNode);";
16241629

16251630
var ComponentsPage = React.createClass({displayName: 'ComponentsPage',
16261631
render: function () {
@@ -1707,7 +1712,7 @@ var ComponentsPage = React.createClass({displayName: 'ComponentsPage',
17071712
React.DOM.h3( {id:"btn-groups-vertical"}, "Vertical variation"),
17081713
React.DOM.p(null, "Make a set of buttons appear vertically stacked rather than horizontally. ",
17091714
React.DOM.strong( {className:"text-danger"}, "Split button dropdowns are not supported here.")),
1710-
React.DOM.p(null, "Just add ", React.DOM.code(null, "bsVariation=\"vertical\""), " to the ", React.DOM.code(null, '<ButtonGroup />'),"."),
1715+
React.DOM.p(null, "Just add ", React.DOM.code(null, "vertical"), " to the ", React.DOM.code(null, '<ButtonGroup />'),"."),
17111716
ReactPlayground( {codeText:ButtonGroupVerticalText} ),
17121717

17131718
React.DOM.h3( {id:"btn-groups-justified"}, "Justified button groups"),
@@ -1716,7 +1721,7 @@ var ComponentsPage = React.createClass({displayName: 'ComponentsPage',
17161721
React.DOM.h4(null, "Style issues"),
17171722
React.DOM.p(null, "There are some issues and workarounds required when using this property, please see ", React.DOM.a( {href:"http://getbootstrap.com/components/#btn-groups-justified"}, "bootstrap’s button group docs"), " for more specifics.")
17181723
),
1719-
React.DOM.p(null, "Just add ", React.DOM.code(null, "bsVariation=\"justified\""), " to the ", React.DOM.code(null, '<ButtonGroup />'),"."),
1724+
React.DOM.p(null, "Just add ", React.DOM.code(null, "justified"), " to the ", React.DOM.code(null, '<ButtonGroup />'),"."),
17201725
ReactPlayground( {codeText:ButtonGroupJustifiedText} )
17211726
)
17221727
),
@@ -20232,4 +20237,4 @@ module.exports={
2023220237
}
2023320238
}
2023420239

20235-
},{}]},{},[48])
20240+
},{}]},{},[48])

‎docs/components.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)