List group updated to Bootstrap 5

docs/components_page/components/list_group.md

@@ -29,7 +29,7 @@ Pass one of Bootstrap's contextual colors to the `color` argument of `ListGroupI
 
 ## Custom content
 
-You can pass any Dash components to the children of `ListGroupItem`. The components `ListGroupItemHeading` and `ListGroupItemText` automatically apply the relevant CSS classes for styling text content in list groups.
+You can pass any Dash components to the children of `ListGroupItem`.
 
 {{example:components/list_group/content.py:list_group}}
 
@@ -44,7 +44,3 @@ In the below example, the first list group is always horizontal, the second is h
 {{apidoc:src/components/listgroup/ListGroup.js}}
 
 {{apidoc:src/components/listgroup/ListGroupItem.js}}
-
-{{apidoc:src/components/listgroup/ListGroupItemHeading.js}}
-
-{{apidoc:src/components/listgroup/ListGroupItemText.js}}

docs/components_page/components/list_group/colors.py

@@ -2,11 +2,14 @@
 
 list_group = dbc.ListGroup(
     [
+        dbc.ListGroupItem("No color applied"),
         dbc.ListGroupItem("The primary item", color="primary"),
         dbc.ListGroupItem("A secondary item", color="secondary"),
         dbc.ListGroupItem("A successful item", color="success"),
         dbc.ListGroupItem("A warning item", color="warning"),
         dbc.ListGroupItem("A dangerous item", color="danger"),
         dbc.ListGroupItem("An informative item", color="info"),
+        dbc.ListGroupItem("A light item", color="light"),
+        dbc.ListGroupItem("A dark item", color="dark"),
     ]
 )

docs/components_page/components/list_group/content.R

@@ -4,14 +4,32 @@ list_group <- dbcListGroup(
   list(
     dbcListGroupItem(
       list(
-        dbcListGroupItemHeading("This item has a heading"),
-        dbcListGroupItemText("And some text underneath")
+        htmlDiv(
+            list(
+                htmlH5("This item has a heading", class_name="mb-1"),
+                htmlSmall("Yay!", class_name="text-success"),
+            ),
+            class_name="d-flex w-100 justify-content-between",
+        ),
+        htmlP("And some text underneath", class_name="mb-1"),
+        htmlSmall("Plus some small print.", class_name="text-muted"),
       )
     ),
     dbcListGroupItem(
       list(
-        dbcListGroupItemHeading("This item also has a heading"),
-        dbcListGroupItemText("And some more text underneath too")
+        htmlDiv(
+              list(
+                  htmlH5(
+                      "This item also has a heading", class_name="mb-1"
+                  ),
+                  htmlSmall("Ok!", class_name="text-warning"),
+              ),
+              class_name="d-flex w-100 justify-content-between",
+          ),
+          htmlP("And some more text underneath too", class_name="mb-1"),
+          htmlSmall(
+              "Plus even more small print.", class_name="text-muted"
+          ),
       )
     )
   )

docs/components_page/components/list_group/content.jl

@@ -1,12 +1,30 @@
-using DashBootstrapComponents
+using DashBootstrapComponents, DashHtmlComponents
 
 list_group = dbc_listgroup([
     dbc_listgroupitem([
-        dbc_listgroupitemheading("This item has a heading"),
-        dbc_listgroupitemtext("And some text underneath"),
+        html_div(
+            [
+                html_h5("This item has a heading", class_name="mb-1"),
+                html_small("Yay!", class_name="text-success"),
+            ],
+            class_name="d-flex w-100 justify-content-between",
+        ),
+        html_p("And some text underneath", class_name="mb-1"),
+        html_small("Plus some small print.", class_name="text-muted"),
     ]),
     dbc_listgroupitem([
-        dbc_listgroupitemheading("This item also has a heading"),
-        dbc_listgroupitemtext("And some more text underneath too"),
+        html_div(
+            [
+                html_h5(
+                    "This item also has a heading", class_name="mb-1"
+                ),
+                html_small("Ok!", class_name="text-warning"),
+            ],
+            class_name="d-flex w-100 justify-content-between",
+        ),
+        html_p("And some more text underneath too", class_name="mb-1"),
+        html_small(
+            "Plus even more small print.", class_name="text-muted"
+        ),
     ]),
 ]);

docs/components_page/components/list_group/content.py

@@ -1,17 +1,36 @@
 import dash_bootstrap_components as dbc
+import dash_html_components as html
 
 list_group = dbc.ListGroup(
     [
         dbc.ListGroupItem(
             [
-                dbc.ListGroupItemHeading("This item has a heading"),
-                dbc.ListGroupItemText("And some text underneath"),
+                html.Div(
+                    [
+                        html.H5("This item has a heading", class_name="mb-1"),
+                        html.Small("Yay!", class_name="text-success"),
+                    ],
+                    class_name="d-flex w-100 justify-content-between",
+                ),
+                html.P("And some text underneath", class_name="mb-1"),
+                html.Small("Plus some small print.", class_name="text-muted"),
             ]
         ),
         dbc.ListGroupItem(
             [
-                dbc.ListGroupItemHeading("This item also has a heading"),
-                dbc.ListGroupItemText("And some more text underneath too"),
+                html.Div(
+                    [
+                        html.H5(
+                            "This item also has a heading", class_name="mb-1"
+                        ),
+                        html.Small("Ok!", class_name="text-warning"),
+                    ],
+                    class_name="d-flex w-100 justify-content-between",
+                ),
+                html.P("And some more text underneath too", class_name="mb-1"),
+                html.Small(
+                    "Plus even more small print.", class_name="text-muted"
+                ),
             ]
         ),
     ]

docs/demos/theme_explorer/list_group.py

@@ -13,8 +13,8 @@
                 dbc.ListGroupItem("Item 3"),
                 dbc.ListGroupItem(
                     [
-                        dbc.ListGroupItemHeading("Item 4 heading"),
-                        dbc.ListGroupItemText("Item 4 text"),
+                        html.H5("Item 4 heading"),
+                        html.P("Item 4 text"),
                     ]
                 ),
             ]

src/components/listgroup/ListGroup.js

@@ -1,25 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import {ListGroup as RSListGroup} from 'reactstrap';
+import {default as RBListGroup} from 'react-bootstrap/ListGroup';
 
 /**
  * Bootstrap list groups are a flexible way to display a series of content. Use
  * in conjunction with `ListGroupItem`, `ListGroupItemHeading` and
  * `ListGroupItemText`.
  */
-const ListGroup = (props) => {
-  const {children, loading_state, className, class_name, ...otherProps} = props;
+const ListGroup = props => {
+  const {
+    children,
+    loading_state,
+    className,
+    class_name,
+    flush,
+    tag,
+    ...otherProps
+  } = props;
   return (
-    <RSListGroup
+    <RBListGroup
       className={class_name || className}
+      variant={flush ? 'flush' : null}
+      as={tag}
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
     >
       {children}
-    </RSListGroup>
+    </RBListGroup>
   );
 };
 
@@ -87,7 +97,7 @@ ListGroup.propTypes = {
     /**
      * Holds the name of the component that is loading
      */
-    component_name: PropTypes.string,
+    component_name: PropTypes.string
   }),
 
   /**
@@ -97,7 +107,7 @@ 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])
 };
 
 export default ListGroup;

src/components/listgroup/ListGroupItem.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import {ListGroupItem as RSListGroupItem} from 'reactstrap';
+import {default as RBListGroup} from 'react-bootstrap/ListGroup';
 import Link from '../../private/Link';
 import {bootstrapColors} from '../../private/BootstrapColors';
 
 /**
  * Create a single item in a `ListGroup`.
  */
-const ListGroupItem = (props) => {
+const ListGroupItem = props => {
   let {
     children,
     disabled,
@@ -27,7 +27,7 @@ const ListGroupItem = (props) => {
     if (!disabled && setProps) {
       setProps({
         n_clicks: n_clicks + 1,
-        n_clicks_timestamp: Date.now(),
+        n_clicks_timestamp: Date.now()
       });
     }
   };
@@ -36,11 +36,11 @@ const ListGroupItem = (props) => {
   otherProps[useLink ? 'preOnClick' : 'onClick'] = incrementClicks;
 
   return (
-    <RSListGroupItem
-      tag={useLink ? Link : 'li'}
+    <RBListGroup.Item
+      as={useLink ? Link : 'li'}
       target={useLink && target}
       disabled={disabled}
-      color={isBootstrapColor ? color : null}
+      variant={isBootstrapColor ? color : null}
       style={!isBootstrapColor ? {backgroundColor: color, ...style} : style}
       className={class_name || className}
       {...omit(['n_clicks_timestamp'], otherProps)}
@@ -49,13 +49,13 @@ const ListGroupItem = (props) => {
       }
     >
       {children}
-    </RSListGroupItem>
+    </RBListGroup.Item>
   );
 };
 
 ListGroupItem.defaultProps = {
   n_clicks: 0,
-  n_clicks_timestamp: -1,
+  n_clicks_timestamp: -1
 };
 
 ListGroupItem.propTypes = {
@@ -166,13 +166,13 @@ ListGroupItem.propTypes = {
     /**
      * Holds the name of the component that is loading
      */
-    component_name: PropTypes.string,
+    component_name: PropTypes.string
   }),
 
   /**
    * Target attribute to pass on to the link. Only applies to external links.
    */
-  target: PropTypes.string,
+  target: PropTypes.string
 };
 
 export default ListGroupItem;