Add numbered ListGroup support (#895)

* Add numbered listgroup property

* Add js test for numbered ListGroup

* Add docs for ListGroup numbered

Co-authored-by: Tom Begley <[email protected]>

Author: glsdown

docs/components_page/components/list_group.md

@@ -33,6 +33,12 @@ Add flush to change some of the styling, including removing borders, and roundin
 
 {{example:components/list_group/flush.py:list_group}}
 
+## Numbered
+
+Add `numbered=True` to create an automatically numbered list group.
+
+{{example:components/list_group/numbered.py:list_group}}
+
 ## Custom content
 
 You can pass any Dash components to the children of `ListGroupItem`.

docs/components_page/components/list_group/numbered.py

@@ -0,0 +1,10 @@
+import dash_bootstrap_components as dbc
+
+list_group = dbc.ListGroup(
+    [
+        dbc.ListGroupItem("Item 1"),
+        dbc.ListGroupItem("Item 2"),
+        dbc.ListGroupItem("Item 3"),
+    ],
+    numbered=True,
+)

src/components/listgroup/ListGroup.js

@@ -34,7 +34,8 @@ const ListGroup = props => {
 };
 
 ListGroup.defaultProps = {
-  tag: 'ul'
+  tag: 'ul',
+  numbered: false
 };
 
 ListGroup.propTypes = {
@@ -111,7 +112,12 @@ ListGroup.propTypes = {
    * Note that horizontal ListGroups cannot be combined with flush ListGroups,
    * so if flush is True then horizontal has no effect.
    */
-  horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+  horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /**
+   * Generate numbered list items.
+   */
+  numbered: PropTypes.bool
 };
 
 export default ListGroup;

src/components/listgroup/__tests__/ListGroup.test.js

@@ -41,4 +41,12 @@ describe('ListGroup', () => {
 
     expect(listGroup).toHaveClass('list-group-flush');
   });
+
+  test('applies numbered styles with "numbered" prop', () => {
+    const {
+      container: {firstChild: listGroup}
+    } = render(<ListGroup numbered />);
+
+    expect(listGroup).toHaveClass('list-group-numbered');
+  });
 });