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')); + }); });