feat(Toast): add bg property (#5877)

* feat(v5): Added bg property to Toast Component

* added test

src/Toast.tsx

@@ -14,6 +14,7 @@ import {
   BsPrefixRefForwardingComponent,
   TransitionComponent,
 } from './helpers';
+import { Variant } from './types';
 
 export interface ToastProps
   extends BsPrefixProps,
@@ -24,6 +25,7 @@ export interface ToastProps
   onClose?: () => void;
   show?: boolean;
   transition?: TransitionComponent;
+  bg?: Variant;
 }
 
 const propTypes = {
@@ -61,6 +63,13 @@ const propTypes = {
    * A `react-transition-group` Transition component used to animate the Toast on dismissal.
    */
   transition: PropTypes.elementType,
+
+  /**
+   * Sets Toast background
+   *
+   * @type {('primary'|'secondary'|'success'|'danger'|'warning'|'info'|'dark'|'light')}
+   */
+  bg: PropTypes.string,
 };
 
 const Toast: BsPrefixRefForwardingComponent<'div', ToastProps> =
@@ -75,6 +84,7 @@ const Toast: BsPrefixRefForwardingComponent<'div', ToastProps> =
         delay = 5000,
         autohide = false,
         onClose,
+        bg,
         ...props
       },
       ref,
@@ -121,6 +131,7 @@ const Toast: BsPrefixRefForwardingComponent<'div', ToastProps> =
           className={classNames(
             bsPrefix,
             className,
+            bg && `bg-${bg}`,
             !hasAnimation && (show ? 'show' : 'hide'),
           )}
           role="alert"

test/ToastSpec.js

@@ -13,6 +13,10 @@ describe('<Toast>', () => {
     clock.restore();
   });
 
+  it('should apply bg prop', () => {
+    mount(<Toast bg="primary">Card</Toast>).assertSingle('.toast.bg-primary');
+  });
+
   it('should render an entire toast', () => {
     mount(
       <Toast>

www/src/examples/Toast/Contextual.js

@@ -0,0 +1,21 @@
+[
+  'Primary',
+  'Secondary',
+  'Success',
+  'Danger',
+  'Warning',
+  'Info',
+  'Light',
+  'Dark',
+].map((variant, idx) => (
+  <Toast className="d-inline-block m-1" bg={variant.toLowerCase()} key={idx}>
+    <Toast.Header>
+      <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />
+      <strong className="me-auto">Bootstrap</strong>
+      <small>11 mins ago</small>
+    </Toast.Header>
+    <Toast.Body className={variant === 'Dark' && 'text-white'}>
+      Hello, world! This is a toast message.
+    </Toast.Body>
+  </Toast>
+));

www/src/pages/components/toasts.mdx

@@ -10,6 +10,7 @@ import ToastStacking from '../../examples/Toast/Stacking';
 import ToastPlacement from '../../examples/Toast/Placement';
 import ToastPlacementMulti from '../../examples/Toast/PlacementMulti';
 import ToastAutohide from '../../examples/Toast/Autohide';
+import ToastContextual from '../../examples/Toast/Contextual';
 
 # Toasts
 
@@ -55,6 +56,12 @@ A Toast can also automatically hide after X milliseconds. For that, use the `aut
 
 <ReactPlayground codeText={ToastAutohide} />
 
+### Contextual variations
+
+Add any of the below mentioned modifier classes to change the appearance of a toast.
+
+<ReactPlayground codeText={ToastContextual} />
+
 ## API
 
 <ComponentApi metadata={props.data.Toast} />