feat(modal): manage body overflow with SCSS rather than JS

ovh · Jul 29, 2024 · 43afb8e · 43afb8e
1 parent 032ae9f
commit 43afb8e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.scss b/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.scss
@@ -23,6 +23,10 @@
   display: flex;
 }
 
+body:has(dialog[open]) {
+  overflow: hidden;
+}
+
 .ods-modal {
   &__dialog {
     @include modal.ods-modal();

diff --git a/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx b/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx
@@ -21,7 +21,6 @@ export class OdsModal {
 
   @Method()
   async close(): Promise<void> {
-    document.body.style.removeProperty('overflow');
 
     if (this.modalDialog) {
       this.modalDialog.classList.add('ods-modal__dialog--close-animation');
@@ -42,7 +41,6 @@ export class OdsModal {
 
   @Method()
   async open(): Promise<void> {
-    document.body.style.overflow = 'hidden';
     this.isOpen = true;
     this.modalDialog.focus();
     this.odsModalOpen.emit();
@@ -78,7 +76,6 @@ export class OdsModal {
   }
 
   disconnectedCallback(): void {
-    document.body.style.removeProperty('overflow');
     this.modalDialog.close?.();
     this.isOpen = false;
     this.odsModalClose.emit();