fix(Offcanvas): change .modal-backdrop to .offcanvas-backdrop (react-bootstrap#5984)

* fix: changed .modal-backdrop to .offcanvas-backdrop

* Removed modalBsPrefix in Offcanvas

Author: nsi319

src/Offcanvas.tsx

@@ -221,7 +221,6 @@ const Offcanvas: BsPrefixRefForwardingComponent<'div', OffcanvasProps> =
       const handleHide = useEventCallback(onHide);
 
       bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas');
-      const modalBsPrefix = useBootstrapPrefix(undefined, 'modal');
 
       const modalContext = useMemo(
         () => ({
@@ -260,12 +259,12 @@ const Offcanvas: BsPrefixRefForwardingComponent<'div', OffcanvasProps> =
           <div
             {...backdropProps}
             className={classNames(
-              `${modalBsPrefix}-backdrop`,
+              `${bsPrefix}-backdrop`,
               backdropClassName,
             )}
           />
         ),
-        [backdropClassName, modalBsPrefix],
+        [backdropClassName, bsPrefix],
       );
 
       const renderDialog = (dialogProps) => (

test/OffcanvasSpec.js

@@ -65,7 +65,7 @@ describe('<Offcanvas>', () => {
       <Offcanvas show backdropClassName="custom-backdrop" onHide={noOp}>
         <strong>Message</strong>
       </Offcanvas>,
-    ).find('.modal-backdrop.custom-backdrop');
+    ).find('.offcanvas-backdrop.custom-backdrop');
   });
 
   it('Should pass style to the offcanvas', () => {
@@ -114,7 +114,7 @@ describe('<Offcanvas>', () => {
         <strong>Message</strong>
       </Offcanvas>,
     )
-      .find('div.modal-backdrop')
+      .find('div.offcanvas-backdrop')
       .simulate('click');
 
     expect(onHideSpy).to.have.been.called;