diff --git a/docs/lib/Components/ListGroupPage.js b/docs/lib/Components/ListGroupPage.js
index 9d3054cf6..bdd21b9ed 100644
--- a/docs/lib/Components/ListGroupPage.js
+++ b/docs/lib/Components/ListGroupPage.js
@@ -11,6 +11,7 @@ import ListGroupContextualClassesExample from '../examples/ListGroupContextualCl
import ListGroupCustomContentExample from '../examples/ListGroupCustomContent';
import ListGroupFlushExample from '../examples/ListGroupFlush';
import ListGroupHorizontalExample from '../examples/ListGroupHorizontal';
+import ListGroupNumberedExample from '../examples/ListGroupNumbered';
const ListGroupBadgeExampleSource = require('!!raw-loader!../examples/ListGroupBadge');
const ListGroupExampleSource = require('!!raw-loader!../examples/ListGroup');
@@ -20,6 +21,7 @@ const ListGroupContextualClassesExampleSource = require('!!raw-loader!../example
const ListGroupCustomContentExampleSource = require('!!raw-loader!../examples/ListGroupCustomContent');
const ListGroupFlushExampleSource = require('!!raw-loader!../examples/ListGroupFlush')
const ListGroupHorizontalExampleSource = require("!!raw-loader!../examples/ListGroupHorizontal");
+const ListGroupNumberedExampleSource = require("!!raw-loader!../examples/ListGroupNumbered");
export default class ListGroupPage extends React.Component {
render() {
@@ -121,6 +123,16 @@ export default class ListGroupPage extends React.Component {
{ListGroupHorizontalExampleSource}
+
+
+
+
+
+
+
+ {ListGroupNumberedExampleSource}
+
+
);
}
diff --git a/docs/lib/examples/ListGroupNumbered.js b/docs/lib/examples/ListGroupNumbered.js
new file mode 100644
index 000000000..4317d089a
--- /dev/null
+++ b/docs/lib/examples/ListGroupNumbered.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+
+
The numbered
prop can be used to opt into numbered list group items.
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+
+ );
+}
+
+export default Example;
diff --git a/src/ListGroup.js b/src/ListGroup.js
index 0e539a053..354b14cc1 100644
--- a/src/ListGroup.js
+++ b/src/ListGroup.js
@@ -8,12 +8,14 @@ const propTypes = {
flush: PropTypes.bool,
className: PropTypes.string,
cssModule: PropTypes.object,
- horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+ horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+ numbered: PropTypes.bool
};
const defaultProps = {
tag: 'ul',
- horizontal: false
+ horizontal: false,
+ numbered: false
};
const getHorizontalClass = horizontal => {
@@ -32,6 +34,7 @@ const ListGroup = (props) => {
tag: Tag,
flush,
horizontal,
+ numbered,
...attributes
} = props;
const classes = mapToCssModules(classNames(
@@ -39,7 +42,10 @@ const ListGroup = (props) => {
'list-group',
// 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)
+ flush ? 'list-group-flush' : getHorizontalClass(horizontal),
+ {
+ 'list-group-numbered': numbered
+ }
), cssModule);
return (
diff --git a/src/__tests__/ListGroup.spec.js b/src/__tests__/ListGroup.spec.js
index f2de17693..b06e886ef 100644
--- a/src/__tests__/ListGroup.spec.js
+++ b/src/__tests__/ListGroup.spec.js
@@ -43,6 +43,14 @@ describe('ListGroup', () => {
expect(wrapper.hasClass("list-group-horizontal-lg")).toBe(true);
});
+ it('should render with "numbered"', () => {
+ const wrapper = shallow(Yo!);
+
+ expect(wrapper.text()).toBe("Yo!");
+ expect(wrapper.hasClass("list-group")).toBe(true);
+ expect(wrapper.hasClass("list-group-numbered")).toBe(true);
+ });
+
it('should render additional classes', () => {
const wrapper = shallow(Yo!);
diff --git a/types/lib/ListGroup.d.ts b/types/lib/ListGroup.d.ts
index c6902f4ef..b51fc56ef 100644
--- a/types/lib/ListGroup.d.ts
+++ b/types/lib/ListGroup.d.ts
@@ -6,6 +6,7 @@ export interface ListGroupProps extends React.HTMLAttributes {
tag?: React.ElementType;
flush?: boolean;
horizontal?: boolean | string;
+ numbered?: boolean;
cssModule?: CSSModule;
}