From c82a0db0356ccad08b8ea7bf8ece48a7532e3f99 Mon Sep 17 00:00:00 2001 From: Dominik Schab Date: Mon, 26 Feb 2024 16:33:06 -0500 Subject: [PATCH] rename css class Drawer__body--open to Drawer--open --- src/Drawer/Drawer.jsx | 6 +++--- src/Drawer/Drawer.scss | 2 +- src/Drawer/Drawer.test.jsx | 36 ++++++++++++++++++------------------ 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/Drawer/Drawer.jsx b/src/Drawer/Drawer.jsx index 3784514b..df8c9ff1 100644 --- a/src/Drawer/Drawer.jsx +++ b/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; } } diff --git a/src/Drawer/Drawer.scss b/src/Drawer/Drawer.scss index a17d9556..8fd660d4 100644 --- a/src/Drawer/Drawer.scss +++ b/src/Drawer/Drawer.scss @@ -50,7 +50,7 @@ display: flex; flex-direction: column; - &__Body--open { + &--open { overflow: hidden; } diff --git a/src/Drawer/Drawer.test.jsx b/src/Drawer/Drawer.test.jsx index b0aa0c99..3eac6f99 100644 --- a/src/Drawer/Drawer.test.jsx +++ b/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(); 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(); 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(); const body = container.closest('body'); - expect(body.classList).toContain('Drawer__Body--open'); + expect(body.classList).toContain('Drawer--open'); }); describe('when hasBackgroundOverlay is false', () => { @@ -212,12 +212,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(); const body = container.closest('body'); - expect(body.classList).not.toContain('Drawer__Body--open'); + expect(body.classList).not.toContain('Drawer--open'); }); }); }); @@ -225,45 +225,45 @@ describe('Drawer', () => { 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(); 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(); 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(); 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(); 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'); }); }); });