rename css class Drawer__body--open to Drawer--open

src/Drawer/Drawer.jsx

@@ -62,16 +62,16 @@ const Drawer = ({
   useEffect(() => {
     // isCurrentlyOpen ref accounts for a case where you could have multiple drawers
     // on one page and you try to access one of them via their url. Without using ref, the
-    // Drawer__Body--open would be potentially removed via other
+    // Drawer--open would be potentially removed via other
     // closed drawer because of a race condition
     function disableBackgroundScrolling() {
       if (visible && !isCurrentlyOpen.current) {
-        document.body.classList.add('Drawer__Body--open');
+        document.body.classList.add('Drawer--open');
         isCurrentlyOpen.current = true;
       }
 
       if (!visible && isCurrentlyOpen.current) {
-        document.body.classList.remove('Drawer__Body--open');
+        document.body.classList.remove('Drawer--open');
         isCurrentlyOpen.current = false;
       }
     }

src/Drawer/Drawer.scss

@@ -50,7 +50,7 @@
   display: flex;
   flex-direction: column;
 
-  &__Body--open {
+  &--open {
     overflow: hidden;
   }
 

src/Drawer/Drawer.test.jsx

@@ -144,11 +144,11 @@ describe('Drawer', () => {
         expect(onRequestClose).not.toHaveBeenCalled();
       });
 
-      it('body tag does not have Drawer__Body--open', () => {
+      it('body tag does not have Drawer--open', () => {
         const { container } = render(<SetupDrawerWithChildren visible={false} />);
         const body = container.closest('body');
 
-        expect(body.classList).not.toContain('Drawer__Body--open');
+        expect(body.classList).not.toContain('Drawer--open');
       });
 
       describe('when hasBackgroundOverlay is false', () => {
@@ -158,12 +158,12 @@ describe('Drawer', () => {
           expect(elements.drawerOverlay.query()).not.toBeInTheDocument();
         });
 
-        it('body tag does not have Drawer__Body--open', () => {
+        it('body tag does not have Drawer--open', () => {
           // eslint-disable-next-line max-len
           const { container } = render(<SetupDrawerWithChildren hasBackgroundOverlay={false} visible={false} />);
           const body = container.closest('body');
 
-          expect(body.classList).not.toContain('Drawer__Body--open');
+          expect(body.classList).not.toContain('Drawer--open');
         });
       });
     });
@@ -198,11 +198,11 @@ describe('Drawer', () => {
         expect(onRequestClose).toHaveBeenCalled();
       });
 
-      it('body tag has Drawer__Body--open', () => {
+      it('body tag has Drawer--open', () => {
         const { container } = render(<SetupDrawerWithChildren visible />);
         const body = container.closest('body');
 
-        expect(body.classList).toContain('Drawer__Body--open');
+        expect(body.classList).toContain('Drawer--open');
       });
 
       describe('when hasBackgroundOverlay is false', () => {
@@ -212,58 +212,58 @@ describe('Drawer', () => {
           expect(elements.drawerOverlay.query()).not.toBeInTheDocument();
         });
 
-        it('body tag does not have Drawer__Body--open', () => {
+        it('body tag does not have Drawer--open', () => {
           // eslint-disable-next-line max-len
           const { container } = render(<SetupDrawerWithChildren hasBackgroundOverlay={false} visible />);
           const body = container.closest('body');
 
-          expect(body.classList).not.toContain('Drawer__Body--open');
+          expect(body.classList).not.toContain('Drawer--open');
         });
       });
     });
   });
 
   describe('When component renders multiple Drawers', () => {
     describe('with drawerOne visible by default', () => {
-      it('body tag has Drawer__Body--open', () => {
+      it('body tag has Drawer--open', () => {
         const { container } = render(<SetupMultipleDrawers drawerOneVisibleDefault />);
         const body = container.closest('body');
 
-        expect(body.classList).toContain('Drawer__Body--open');
+        expect(body.classList).toContain('Drawer--open');
       });
 
       describe('when user clicks on drawerOne toggle visibility button', () => {
-        it('body tag does not have Drawer__body--open after click', () => {
+        it('body tag does not have Drawer--open after click', () => {
           const { container } = render(<SetupMultipleDrawers drawerOneVisibleDefault />);
           const body = container.closest('body');
 
-          expect(body.classList).toContain('Drawer__Body--open');
+          expect(body.classList).toContain('Drawer--open');
 
           userEvent.click(elements.drawerOneToggleVisibilityButton.get());
 
-          expect(body.classList).not.toContain('Drawer__Body--open');
+          expect(body.classList).not.toContain('Drawer--open');
         });
       });
     });
 
     describe('with no drawers visible by default', () => {
-      it('body tag does not have Drawer__body--open', () => {
+      it('body tag does not have Drawer--open', () => {
         const { container } = render(<SetupMultipleDrawers />);
         const body = container.closest('body');
 
-        expect(body.classList).not.toContain('Drawer__Body--open');
+        expect(body.classList).not.toContain('Drawer--open');
       });
 
       describe('when user clicks on drawerOne toggle visibility button', () => {
-        it('body tag has Drawer__body--open after click', () => {
+        it('body tag has Drawer--open after click', () => {
           const { container } = render(<SetupMultipleDrawers />);
           const body = container.closest('body');
 
-          expect(body.classList).not.toContain('Drawer__Body--open');
+          expect(body.classList).not.toContain('Drawer--open');
 
           userEvent.click(elements.drawerOneToggleVisibilityButton.get());
 
-          expect(body.classList).toContain('Drawer__Body--open');
+          expect(body.classList).toContain('Drawer--open');
         });
       });
     });