From 0c871280795d2e36179b4421c995db6eff540092 Mon Sep 17 00:00:00 2001
From: Andrew Kiernan <apkiernan@gmail.com>
Date: Tue, 31 Mar 2015 21:22:24 -0400
Subject: [PATCH] [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.

---
 src/ListGroup.js          | 28 ++++++++++++++++++++++++++++
 src/ListGroupItem.js      | 10 ++++++----
 test/ListGroupItemSpec.js |  7 +++----
 test/ListGroupSpec.js     | 31 +++++++++++++++++++++++++++----
 4 files changed, 64 insertions(+), 12 deletions(-)

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