feat: add background color support to list group items

demo/ListGroupExamples.jsx

@@ -21,6 +21,34 @@ const items = [
   },
 ];
 
+const itemsWithBackgrounds = [
+  {
+    title: 'Primary Item',
+    description: 'This is a primary colored list item.',
+    background: 'primary',
+  },
+  {
+    title: 'Success Item',
+    description: 'This is a success colored list item.',
+    background: 'success',
+  },
+  {
+    title: 'Danger Item',
+    description: 'This is a danger colored list item.',
+    background: 'danger',
+  },
+  {
+    title: 'Warning Item',
+    description: 'This is a warning colored list item.',
+    background: 'warning',
+  },
+  {
+    title: 'Info Item',
+    description: 'This is an info colored list item.',
+    background: 'info',
+  },
+];
+
 export function ListGroupExamples() {
   return (
     <div className="row">
@@ -95,6 +123,31 @@ export function ListGroupExamples() {
           linked={true}
         />
       </div>
+      <div className="col-6 mb-3">
+        <h1 className="h4">List group with item backgrounds</h1>
+        <ListGroup
+          items={itemsWithBackgrounds}
+          template={(item) => (
+            <>
+              <strong>{item.title}</strong> <br />
+              {item.description}
+            </>
+          )}
+        />
+      </div>
+      <div className="col-6 mb-3">
+        <h1 className="h4">Linked list group with backgrounds</h1>
+        <ListGroup
+          items={itemsWithBackgrounds}
+          template={(item) => (
+            <>
+              <strong>{item.title}</strong> <br />
+              {item.description}
+            </>
+          )}
+          linked={true}
+        />
+      </div>
     </div>
   );
 }

src/list-group/ListGroup.jsx

@@ -26,6 +26,7 @@ export function ListGroup({
       item={item}
       linked={linked}
       onSelect={onSelect}
+      background={item?.background}
     >
       {template(item, index)}
     </ListGroupItem>

src/list-group/ListGroupItem.jsx

@@ -4,12 +4,13 @@ import PropTypes from 'prop-types';
 import { safeClick } from '../utils/event-handlers';
 import { formatClasses } from '../utils/attributes';
 
-export function ListGroupItem({ index, isActive = false, isDisabled, item, linked, onSelect, children }) {
+export function ListGroupItem({ index, isActive = false, isDisabled, item, linked, onSelect, background, children }) {
   const classes = formatClasses([
     'list-group-item',
     isActive && 'active',
     isDisabled && 'disabled',
     linked && 'list-group-item-action',
+    background && `list-group-item-${background}`,
   ]);
 
   const onClick = safeClick(onSelect, index, item);
@@ -37,4 +38,5 @@ ListGroupItem.propTypes = {
   item: PropTypes.object.isRequired,
   linked: PropTypes.bool.isRequired,
   onSelect: PropTypes.func,
+  background: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']),
 };