feat(ListGroup): Add horizontal prop (#1715)

docs/lib/Components/ListGroupPage.js

@@ -10,6 +10,7 @@ import ListGroupAnchorsAndButtonsExample from '../examples/ListGroupAnchorsAndBu
 import ListGroupContextualClassesExample from '../examples/ListGroupContextualClasses';
 import ListGroupCustomContentExample from '../examples/ListGroupCustomContent';
 import ListGroupFlushExample from '../examples/ListGroupFlush';
+import ListGroupHorizontalExample from '../examples/ListGroupHorizontal';
 
 const ListGroupBadgeExampleSource = require('!!raw-loader!../examples/ListGroupBadge');
 const ListGroupExampleSource = require('!!raw-loader!../examples/ListGroup');
@@ -18,6 +19,7 @@ const ListGroupAnchorsAndButtonsExampleSource = require('!!raw-loader!../example
 const ListGroupContextualClassesExampleSource = require('!!raw-loader!../examples/ListGroupContextualClasses');
 const ListGroupCustomContentExampleSource = require('!!raw-loader!../examples/ListGroupCustomContent');
 const ListGroupFlushExampleSource = require('!!raw-loader!../examples/ListGroupFlush')
+const ListGroupHorizontalExampleSource = require("!!raw-loader!../examples/ListGroupHorizontal");
 
 export default class ListGroupPage extends React.Component {
   render() {
@@ -40,6 +42,8 @@ export default class ListGroupPage extends React.Component {
     tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     // boolean to render list group items edge-to-edge in a parent container
     flush: PropTypes.bool,
+    // boolean to render list group items horizontal. string for specific breakpoint, or true to be always horizontal
+    horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
     className: PropTypes.string,
     cssModule: PropTypes.object,
   }`
@@ -107,6 +111,16 @@ export default class ListGroupPage extends React.Component {
             {ListGroupFlushExampleSource}
           </PrismCode>
         </pre>
+
+        <legend>Horizontal</legend>
+        <div className="docs-example">
+          <ListGroupHorizontalExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {ListGroupHorizontalExampleSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }

docs/lib/examples/ListGroupHorizontal.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <div>
+      <p>The <code>horizontal</code> prop can be a Boolean or a string specifying one of Bootstrap's breakpoints</p>
+      <ListGroup horizontal>
+        <ListGroupItem tag="a" href="#">Cras justo odio</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+      </ListGroup>
+      <p className="mt-3">This list group is horizontal at the <code>lg</code> breakpoint and up.</p>
+      <ListGroup horizontal="lg">
+        <ListGroupItem tag="a" href="#">Cras justo odio</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+        <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+      </ListGroup>
+      <p className="mt-3">Note that horizontal list groups cannot be combined with flush list groups. If <code>flush</code> is <code>true</code> then <code>horizontal</code> has no effect.</p>
+    </div>
+
+  );
+}
+
+export default Example;

src/ListGroup.js

@@ -8,10 +8,21 @@ const propTypes = {
   flush: PropTypes.bool,
   className: PropTypes.string,
   cssModule: PropTypes.object,
+  horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
 };
 
 const defaultProps = {
-  tag: 'ul'
+  tag: 'ul',
+  horizontal: false
+};
+
+const getHorizontalClass = horizontal => {
+  if (horizontal === false) {
+    return false;
+  } else if (horizontal === true || horizontal === "xs") {
+    return "list-group-horizontal";
+  }
+  return `list-group-horizontal-${horizontal}`;
 };
 
 const ListGroup = (props) => {
@@ -20,12 +31,15 @@ const ListGroup = (props) => {
     cssModule,
     tag: Tag,
     flush,
+    horizontal,
     ...attributes
   } = props;
   const classes = mapToCssModules(classNames(
     className,
     'list-group',
-    flush ? 'list-group-flush' : false
+    // list-group-horizontal cannot currently be mixed with list-group-flush
+    // we only try to apply horizontal classes if flush is false
+    flush ? 'list-group-flush' : getHorizontalClass(horizontal)
   ), cssModule);
 
   return (

src/__tests__/ListGroup.spec.js

@@ -18,6 +18,31 @@ describe('ListGroup', () => {
     expect(wrapper.hasClass('list-group-flush')).toBe(true);
   });
 
+  it('should render with "horizontal"', () => {
+    const wrapper = shallow(<ListGroup horizontal>Yo!</ListGroup>);
+
+    expect(wrapper.text()).toBe("Yo!");
+    expect(wrapper.hasClass("list-group")).toBe(true);
+    expect(wrapper.hasClass("list-group-horizontal")).toBe(true);
+  });
+
+  it('should not render with "horizontal" if flush is true', () => {
+    const wrapper = shallow(<ListGroup flush horizontal>Yo!</ListGroup>);
+
+    expect(wrapper.text()).toBe("Yo!");
+    expect(wrapper.hasClass("list-group")).toBe(true);
+    expect(wrapper.hasClass("list-group-flush")).toBe(true);
+    expect(wrapper.hasClass("list-group-horizontal")).toBe(false);
+  });
+
+  it('should render with "horizontal-{breakpoint}"', () => {
+    const wrapper = shallow(<ListGroup horizontal="lg">Yo!</ListGroup>);
+
+    expect(wrapper.text()).toBe("Yo!");
+    expect(wrapper.hasClass("list-group")).toBe(true);
+    expect(wrapper.hasClass("list-group-horizontal-lg")).toBe(true);
+  });
+
   it('should render additional classes', () => {
     const wrapper = shallow(<ListGroup className="other">Yo!</ListGroup>);