[fixed] ListGroup outputs <ul> or <div> depending on ListGroupItem (defaults to <ul> if no ListGroupItem). ListGroupItem outputs <li> or <a> if href prop is set.

Author: apkiernan

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 (
+      <ul className={classSet(this.props.className, 'list-group')}>
+        {items}
+      </ul>
+    );
+  }
+
+  renderDiv(items) {
     return (
       <div className={classSet(this.props.className, 'list-group')}>
         {items}

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 (
-      <span {...this.props} className={classSet(this.props.className, classes)}>
+      <li
+        {...this.props} className={classSet(this.props.className, classes)}>
         {this.props.header ? this.renderStructuredContent() : this.props.children}
-      </span>
+      </li>
     );
   },
 

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(
       <ListGroupItem>Text</ListGroupItem>
     );
-    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(
       <ListGroupItem href='#test'>Achor</ListGroupItem>
     );
@@ -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/));
   });
-
 });

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(
-      <ListGroup />
+      <ListGroup/>
     );
-    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(
+      <ListGroup>
+        <ListGroupItem>1st Child</ListGroupItem>
+        <ListGroupItem>2nd Child</ListGroupItem>
+      </ListGroup>
+    );
+    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(
+      <ListGroup>
+        <ListGroupItem href="#test">1st Child</ListGroupItem>
+        <ListGroupItem href="#test">2nd Child</ListGroupItem>
+      </ListGroup>
+    );
+    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'));
+  });
 });