From 61ff5222f67741b9a3c00a36b2406651c1c9b9ec Mon Sep 17 00:00:00 2001
From: William Chau Wei Xuan <55905659+WillCWX@users.noreply.github.com>
Date: Wed, 21 Jun 2023 13:36:33 +0800
Subject: [PATCH 1/3] Fix modal scrollbar to modal body

---
 packages/vue-components/src/Modal.vue         |  7 +++-
 .../__snapshots__/Modal.spec.js.snap          | 40 +++++++++----------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/vue-components/src/Modal.vue b/packages/vue-components/src/Modal.vue
index 126d0df720..b4afa38ee2 100644
--- a/packages/vue-components/src/Modal.vue
+++ b/packages/vue-components/src/Modal.vue
@@ -6,7 +6,6 @@
     v-model="show"
     ssr
     :name="id"
-    classes="allow-overflow"
     :content-class="['modal-dialog', optionalModalSize, optionalCentering]"
     overlay-transition="none"
     :transition="effectClass"
@@ -14,7 +13,7 @@
     esc-to-close
     z-index-base="2000"
   >
-    <div class="modal-content">
+    <div class="modal-content allow-overflow max-height">
       <div v-if="hasHeader" class="modal-header">
         <h5 class="modal-title">
           <slot name="header"></slot>
@@ -131,6 +130,10 @@ export default {
         overflow: auto;
     }
 
+    .max-height {
+        max-height: 90vh;
+    }
+
     .modal-zoom {
         -webkit-transform: scale(0.1);
         -moz-transform: scale(0.1);
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
index 325b71e9a6..f65d25dcf6 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
@@ -27,7 +27,7 @@ exports[`Modal can be centered 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -38,7 +38,7 @@ exports[`Modal can be centered 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <div
             class="modal-header"
@@ -99,7 +99,7 @@ exports[`Modal can be large 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -110,7 +110,7 @@ exports[`Modal can be large 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <div
             class="modal-header"
@@ -171,7 +171,7 @@ exports[`Modal can be small 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -182,7 +182,7 @@ exports[`Modal can be small 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <div
             class="modal-header"
@@ -243,7 +243,7 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -254,7 +254,7 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <div
             class="modal-header"
@@ -315,7 +315,7 @@ exports[`Modal should be closable using the ok-text button 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -326,7 +326,7 @@ exports[`Modal should be closable using the ok-text button 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <!---->
            
@@ -383,7 +383,7 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -394,7 +394,7 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <div
             class="modal-header"
@@ -455,7 +455,7 @@ exports[`Modal should not show footer when no footer is given 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -466,7 +466,7 @@ exports[`Modal should not show footer when no footer is given 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <div
             class="modal-header"
@@ -527,7 +527,7 @@ exports[`Modal should not show header when no header is given 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -538,7 +538,7 @@ exports[`Modal should not show header when no header is given 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <!---->
            
@@ -589,7 +589,7 @@ exports[`Modal should show footer when both footer and ok-text are given 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -600,7 +600,7 @@ exports[`Modal should show footer when both footer and ok-text are given 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <!---->
            
@@ -649,7 +649,7 @@ exports[`Modal supports fade effect 1`] = `
     <div
       aria-expanded="false"
       aria-modal="true"
-      class="vfm__container vfm--absolute vfm--inset vfm--outline-none allow-overflow"
+      class="vfm__container vfm--absolute vfm--inset vfm--outline-none"
       data-v-1cd72822=""
       role="dialog"
       style="display: none;"
@@ -660,7 +660,7 @@ exports[`Modal supports fade effect 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content"
+          class="modal-content allow-overflow max-height"
         >
           <!---->
            

From b2a6b1fecb8b6804fd4cfec3a333771a3981e22c Mon Sep 17 00:00:00 2001
From: William Chau Wei Xuan <55905659+WillCWX@users.noreply.github.com>
Date: Sun, 9 Jul 2023 17:15:28 +0800
Subject: [PATCH 2/3] Update max height

---
 packages/vue-components/src/Modal.vue         |  6 +++---
 .../__snapshots__/Modal.spec.js.snap          | 20 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/vue-components/src/Modal.vue b/packages/vue-components/src/Modal.vue
index b4afa38ee2..afb5991a4e 100644
--- a/packages/vue-components/src/Modal.vue
+++ b/packages/vue-components/src/Modal.vue
@@ -13,7 +13,7 @@
     esc-to-close
     z-index-base="2000"
   >
-    <div class="modal-content allow-overflow max-height">
+    <div class="modal-content allow-overflow">
       <div v-if="hasHeader" class="modal-header">
         <h5 class="modal-title">
           <slot name="header"></slot>
@@ -130,8 +130,8 @@ export default {
         overflow: auto;
     }
 
-    .max-height {
-        max-height: 90vh;
+    .modal-content {
+        max-height: 100vh;
     }
 
     .modal-zoom {
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
index f65d25dcf6..32c77706a7 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
@@ -38,7 +38,7 @@ exports[`Modal can be centered 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <div
             class="modal-header"
@@ -110,7 +110,7 @@ exports[`Modal can be large 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <div
             class="modal-header"
@@ -182,7 +182,7 @@ exports[`Modal can be small 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <div
             class="modal-header"
@@ -254,7 +254,7 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <div
             class="modal-header"
@@ -326,7 +326,7 @@ exports[`Modal should be closable using the ok-text button 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <!---->
            
@@ -394,7 +394,7 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <div
             class="modal-header"
@@ -466,7 +466,7 @@ exports[`Modal should not show footer when no footer is given 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <div
             class="modal-header"
@@ -538,7 +538,7 @@ exports[`Modal should not show header when no header is given 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <!---->
            
@@ -600,7 +600,7 @@ exports[`Modal should show footer when both footer and ok-text are given 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <!---->
            
@@ -660,7 +660,7 @@ exports[`Modal supports fade effect 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow max-height"
+          class="modal-content allow-overflow"
         >
           <!---->
            

From 0554a57acf9be9f122a527aceee7bfbb1d757ae6 Mon Sep 17 00:00:00 2001
From: tlylt <liu_yongliang@hotmail.com>
Date: Sat, 15 Jul 2023 23:19:19 +0800
Subject: [PATCH 3/3] adjust styling and update test

---
 packages/vue-components/src/Modal.vue         | 11 ++---
 .../src/__tests__/Modal.spec.js               |  4 +-
 .../__snapshots__/Modal.spec.js.snap          | 40 +++++++++----------
 3 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/packages/vue-components/src/Modal.vue b/packages/vue-components/src/Modal.vue
index afb5991a4e..c3e2049349 100644
--- a/packages/vue-components/src/Modal.vue
+++ b/packages/vue-components/src/Modal.vue
@@ -13,7 +13,7 @@
     esc-to-close
     z-index-base="2000"
   >
-    <div class="modal-content allow-overflow">
+    <div class="modal-content">
       <div v-if="hasHeader" class="modal-header">
         <h5 class="modal-title">
           <slot name="header"></slot>
@@ -26,7 +26,7 @@
         >
         </button>
       </div>
-      <div class="modal-body">
+      <div class="modal-body overflow-auto">
         <slot></slot>
       </div>
       <div v-if="hasFooter || hasOk" class="modal-footer">
@@ -126,12 +126,13 @@ export default {
 };
 </script>
 <style>
-    .allow-overflow {
-        overflow: auto;
+    .modal-dialog {
+        inset: 0;
+        position: absolute;
     }
 
     .modal-content {
-        max-height: 100vh;
+        max-height: 100%;
     }
 
     .modal-zoom {
diff --git a/packages/vue-components/src/__tests__/Modal.spec.js b/packages/vue-components/src/__tests__/Modal.spec.js
index bdcf51af61..43bf9eda04 100644
--- a/packages/vue-components/src/__tests__/Modal.spec.js
+++ b/packages/vue-components/src/__tests__/Modal.spec.js
@@ -88,7 +88,7 @@ describe('Modal', () => {
     // click on trigger
     await trigger.find('span.trigger-click').trigger('click');
     // then click on backdrop
-    await wrapper.find('div.allow-overflow').trigger('click');
+    await wrapper.find('div[role=dialog]').trigger('click');
 
     expect(wrapper.element).toMatchSnapshot();
   });
@@ -109,7 +109,7 @@ describe('Modal', () => {
     // click on trigger
     await trigger.find('span.trigger-click').trigger('click');
     // then click on backdrop
-    await wrapper.find('div.allow-overflow').trigger('click');
+    await wrapper.find('div[role=dialog]').trigger('click');
 
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
index 32c77706a7..240fd9e8d9 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Modal.spec.js.snap
@@ -38,7 +38,7 @@ exports[`Modal can be centered 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <div
             class="modal-header"
@@ -57,7 +57,7 @@ exports[`Modal can be centered 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -110,7 +110,7 @@ exports[`Modal can be large 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <div
             class="modal-header"
@@ -129,7 +129,7 @@ exports[`Modal can be large 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -182,7 +182,7 @@ exports[`Modal can be small 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <div
             class="modal-header"
@@ -201,7 +201,7 @@ exports[`Modal can be small 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -254,7 +254,7 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <div
             class="modal-header"
@@ -273,7 +273,7 @@ exports[`Modal should be closable by clicking the backdrop by default 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -326,12 +326,12 @@ exports[`Modal should be closable using the ok-text button 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <!---->
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -394,7 +394,7 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <div
             class="modal-header"
@@ -413,7 +413,7 @@ exports[`Modal should not be closable by clicking the backdrop if backdrop is se
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -466,7 +466,7 @@ exports[`Modal should not show footer when no footer is given 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <div
             class="modal-header"
@@ -485,7 +485,7 @@ exports[`Modal should not show footer when no footer is given 1`] = `
           </div>
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -538,12 +538,12 @@ exports[`Modal should not show header when no header is given 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <!---->
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -600,12 +600,12 @@ exports[`Modal should show footer when both footer and ok-text are given 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <!---->
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
@@ -660,12 +660,12 @@ exports[`Modal supports fade effect 1`] = `
         data-v-1cd72822=""
       >
         <div
-          class="modal-content allow-overflow"
+          class="modal-content"
         >
           <!---->
            
           <div
-            class="modal-body"
+            class="modal-body overflow-auto"
           >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>