diff --git a/src/ListGroup.js b/src/ListGroup.js
index 484d287fd1..6d06514e52 100644
--- a/src/ListGroup.js
+++ b/src/ListGroup.js
@@ -9,6 +9,34 @@ class ListGroup extends React.Component {
(item, index) => cloneElement(item, { key: item.key ? item.key : index })
);
+ let child;
+
+ if (this.props.children) {
+ if (Array.isArray(this.props.children)) {
+ child = this.props.children[0];
+ } else {
+ child = this.props.children;
+ }
+ }
+
+ // If child has an href prop, it is an
+ // 'anchor' tag and ListGroup should be a Div.
+ if (child && child.props.href){
+ return this.renderDiv(items);
+ } else {
+ return this.renderUL(items);
+ }
+ }
+
+ renderUL(items) {
+ return (
+
+ );
+ }
+
+ renderDiv(items) {
return (
{items}
diff --git a/src/ListGroupItem.js b/src/ListGroupItem.js
index d0d7b8f171..d9d7c0c6e4 100644
--- a/src/ListGroupItem.js
+++ b/src/ListGroupItem.js
@@ -11,6 +11,7 @@ const ListGroupItem = React.createClass({
active: React.PropTypes.any,
disabled: React.PropTypes.any,
header: React.PropTypes.node,
+ badge: React.PropTypes.node,
onClick: React.PropTypes.func,
eventKey: React.PropTypes.any,
href: React.PropTypes.string,
@@ -32,15 +33,16 @@ const ListGroupItem = React.createClass({
if (this.props.href || this.props.target || this.props.onClick) {
return this.renderAnchor(classes);
} else {
- return this.renderSpan(classes);
+ return this.renderLi(classes);
}
},
- renderSpan(classes) {
+ renderLi(classes) {
return (
-
+
{this.props.header ? this.renderStructuredContent() : this.props.children}
-
+
);
},
diff --git a/test/ListGroupItemSpec.js b/test/ListGroupItemSpec.js
index ece4ded1ee..e3e29c1b45 100644
--- a/test/ListGroupItemSpec.js
+++ b/test/ListGroupItemSpec.js
@@ -4,15 +4,15 @@ import ListGroupItem from '../src/ListGroupItem';
describe('ListGroupItem', function () {
- it('Should output a "span" with the class "list-group-item"', function () {
+ it('Should output a "li" with the class "list-group-item"', function () {
let instance = ReactTestUtils.renderIntoDocument(
Text
);
- assert.equal(instance.getDOMNode().nodeName, 'SPAN');
+ assert.equal(instance.getDOMNode().nodeName, 'LI');
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group-item'));
});
- it('Should output a "anchor" if "href" prop is set', function () {
+ it('Should output an "anchor" if "href" prop is set', function () {
let instance = ReactTestUtils.renderIntoDocument(
Achor
);
@@ -65,5 +65,4 @@ describe('ListGroupItem', function () {
assert.equal(instance.getDOMNode().lastChild.innerText, 'Item text');
assert.ok(instance.getDOMNode().lastChild.className.match(/\blist-group-item-text\b/));
});
-
});
diff --git a/test/ListGroupSpec.js b/test/ListGroupSpec.js
index ea29bcfdd9..6a25f5a483 100644
--- a/test/ListGroupSpec.js
+++ b/test/ListGroupSpec.js
@@ -5,12 +5,11 @@ import ListGroupItem from '../src/ListGroupItem';
describe('ListGroup', function () {
- // TODO: Why div, shouldn't it be a ul?
- it('Should output a "div" with the class "list-group"', function () {
+ it('Should output a "ul" with the class "list-group"', function () {
let instance = ReactTestUtils.renderIntoDocument(
-
+
);
- assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
+ assert.equal(React.findDOMNode(instance).nodeName, 'UL');
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group'));
});
@@ -28,4 +27,28 @@ describe('ListGroup', function () {
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[1], 'list-group-item'));
});
+ it('Should output a "ul" when children are list items', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ 1st Child
+ 2nd Child
+
+ );
+ assert.equal(React.findDOMNode(instance).nodeName, 'UL');
+ assert.equal(React.findDOMNode(instance).firstChild.nodeName, 'LI');
+ });
+
+
+ it('Should output a "div" when "ListGroupItem" children are anchors', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ 1st Child
+ 2nd Child
+
+ );
+ assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
+ assert.equal(React.findDOMNode(instance).firstChild.nodeName, 'A');
+ assert.equal(React.findDOMNode(instance).lastChild.nodeName, 'A');
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group'));
+ });
});