Merge pull request #680 from AlexVelezLl/fix-inner-items-size-changes

Fix inner items size changes in KListWithOverflow and add appendToBody prop to KModal
learningequality · Jul 22, 2024 · bb00f46 · bb00f46
2 parents 82ed5e7 + 9dbdbea
commit bb00f46
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 87 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,27 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+
+- [#680]
+  - **Description:** Adds boolean `appendToRoot` prop to teleport the modal to the body element if true.
+  - **Products impact:** new API.
+  - **Addresses:** https://github.com/learningequality/kolibri/issues/12447.
+  - **Components:** KModal.
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** 
+
+- [#680]
+  - **Description:** Fixes the calculation of overflowed items when changes in the size of the list item slots occur.
+  - **Products impact:** bugfix.
+  - **Addresses:** https://github.com/learningequality/kolibri/issues/12447.
+  - **Components:** KListWithOverflow.
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** 
+
+[#680]: https://github.com/learningequality/kolibri-design-system/pull/680
+
 - [#673]
   - **Description:** Remove white space below Ktabs
   - **Products impact:** bugfix.

diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
@@ -101,6 +101,17 @@
       // avoids sharing it across multiple instances, ensuring each component has its own function.
       this.throttledSetOverflowItems = throttle(this.setOverflowItems, 100);
       this.$watch('elementWidth', this.throttledSetOverflowItems);
+
+      // Add resize observer to watch inner list items size changes
+      if (typeof window !== 'undefined' && window.ResizeObserver) {
+        this.resizeObserver = new ResizeObserver(this.throttledSetOverflowItems);
+        this.resizeObserver.observe(this.$refs.list);
+      }
+    },
+    beforeUnmount() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
     },
     methods: {
       getSize(element) {

diff --git a/lib/KModal.vue b/lib/KModal.vue
@@ -1,106 +1,109 @@
 <template>
 
-  <!-- Accessibility properties for the overlay -->
-  <transition name="modal-fade" appear>
-    <div
-      id="modal-window"
-      ref="modal-overlay"
-      class="modal-overlay"
-      @keyup.esc.stop="emitCancelEvent"
-      @keyup.enter="handleEnter"
-    >
-      <!-- KeenUiSelect targets modal by using div.modal selector -->
+  <component :is="wrapper" v-bind="wrapperProps">
+    <!-- Accessibility properties for the overlay -->
+    <transition name="modal-fade" appear>
       <div
-        ref="modal"
-        class="modal"
-        :tabindex="0"
-        role="dialog"
-        aria-labelledby="modal-title"
-        :style="[
-          modalSizeStyles,
-          { background: $themeTokens.surface },
-          containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
-        ]"
+        id="modal-window"
+        ref="modal-overlay"
+        class="modal-overlay"
+        @keyup.esc.stop="emitCancelEvent"
+        @keyup.enter="handleEnter"
       >
-
-        <!-- Modal Title -->
-        <h1
-          id="modal-title"
-          ref="title"
-          class="title"
+        <!-- KeenUiSelect targets modal by using div.modal selector -->
+        <div
+          ref="modal"
+          class="modal"
+          :tabindex="0"
+          role="dialog"
+          aria-labelledby="modal-title"
+          :style="[
+            modalSizeStyles,
+            { background: $themeTokens.surface },
+            containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
+          ]"
         >
-          {{ title }}
-          <!-- Accessible error reporting per @radina -->
-          <span
-            v-if="hasError"
-            class="visuallyhidden"
+
+          <!-- Modal Title -->
+          <h1
+            id="modal-title"
+            ref="title"
+            class="title"
           >
-            {{ errorMessage }}
-          </span>
-        </h1>
-
-        <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
-        <form
-          class="form"
-          @submit.prevent="emitSubmitEvent"
-          @keyup.enter.stop
-        >
-          <!-- Wrapper for main content -->
-          <div
-            ref="content"
-            class="content"
-            :style="[ contentSectionMaxHeight, scrollShadow ? {
-              borderTop: `1px solid ${$themeTokens.fineLine}`,
-              borderBottom: `1px solid ${$themeTokens.fineLine}`,
-            } : {} ]"
-            :class="{
-              'scroll-shadow': scrollShadow,
-              'contains-kselect': containsKSelect
-            }"
+            {{ title }}
+            <!-- Accessible error reporting per @radina -->
+            <span
+              v-if="hasError"
+              class="visuallyhidden"
+            >
+              {{ errorMessage }}
+            </span>
+          </h1>
+
+          <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
+          <form
+            class="form"
+            @submit.prevent="emitSubmitEvent"
+            @keyup.enter.stop
           >
-            <!-- @slot Main content of modal -->
-            <slot></slot>
-          </div>
+            <!-- Wrapper for main content -->
+            <div
+              ref="content"
+              class="content"
+              :style="[ contentSectionMaxHeight, scrollShadow ? {
+                borderTop: `1px solid ${$themeTokens.fineLine}`,
+                borderBottom: `1px solid ${$themeTokens.fineLine}`,
+              } : {} ]"
+              :class="{
+                'scroll-shadow': scrollShadow,
+                'contains-kselect': containsKSelect
+              }"
+            >
+              <!-- @slot Main content of modal -->
+              <slot></slot>
+            </div>
 
-          <div
-            ref="actions"
-            class="actions"
-          >
-            <!-- @slot Alternative buttons and actions below main content -->
-            <slot
-              v-if="$slots.actions"
-              name="actions"
+            <div
+              ref="actions"
+              class="actions"
             >
-            </slot>
-            <template v-else>
-              <KButton
-                v-if="cancelText"
-                name="cancel"
-                :text="cancelText"
-                appearance="flat-button"
-                :disabled="cancelDisabled || $attrs.disabled"
-                @click="emitCancelEvent"
-              />
-              <KButton
-                v-if="submitText"
-                name="submit"
-                :text="submitText"
-                :primary="true"
-                :disabled="submitDisabled || $attrs.disabled"
-                type="submit"
-              />
-            </template>
-          </div>
-        </form>
+              <!-- @slot Alternative buttons and actions below main content -->
+              <slot
+                v-if="$slots.actions"
+                name="actions"
+              >
+              </slot>
+              <template v-else>
+                <KButton
+                  v-if="cancelText"
+                  name="cancel"
+                  :text="cancelText"
+                  appearance="flat-button"
+                  :disabled="cancelDisabled || $attrs.disabled"
+                  @click="emitCancelEvent"
+                />
+                <KButton
+                  v-if="submitText"
+                  name="submit"
+                  :text="submitText"
+                  :primary="true"
+                  :disabled="submitDisabled || $attrs.disabled"
+                  type="submit"
+                />
+              </template>
+            </div>
+          </form>
+        </div>
       </div>
-    </div>
-  </transition>
+    </transition>
+  </component>
 
 </template>
 
 
 <script>
 
+  import Teleport from 'vue2-teleport';
   import debounce from 'lodash/debounce';
   import useKResponsiveWindow from './composables/useKResponsiveWindow';
 
@@ -117,6 +120,9 @@
    */
   export default {
     name: 'KModal',
+    components: {
+      Teleport,
+    },
     setup() {
       const { windowHeight, windowWidth } = useKResponsiveWindow();
       return { windowHeight, windowWidth };
@@ -182,11 +188,21 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * Error message to be displayed in title
+       */
       errorMessage: {
         type: String,
         default: null,
         required: false,
       },
+      /**
+       * Whether or not the modal should be teleported to the root of the document
+       */
+      appendToRoot: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -231,6 +247,12 @@
           height: `${this.contentHeight}px`,
         };
       },
+      wrapper() {
+        return this.appendToRoot ? 'Teleport' : 'div';
+      },
+      wrapperProps() {
+        return this.appendToRoot ? { to: 'body' } : {};
+      },
     },
     created() {
       if (this.$props.cancelText && !this.$listeners.cancel) {

diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "purecss": "2.2.0",
     "tippy.js": "4.2.1",
     "vue-intl": "3.1.0",
+    "vue2-teleport": "1.1.4",
     "xstate": "4.38.3"
   },
   "peerDependencies": {},

diff --git a/yarn.lock b/yarn.lock
@@ -14695,6 +14695,11 @@ [email protected], vue-template-es2015-compiler@^1.6.0, vue-tem
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+[email protected]:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.1.4.tgz#30c84b1005bf9c208b1c05f4b6147300c54ee846"
+  integrity sha512-mGTszyQP6k3sSSk7MBq+PZdVojHYLwg5772hl3UVpu5uaLBqWIZ5eNP6/TjkDrf1XUTTxybvpXC6inpjwO+i/Q==
+
 vue@^2.6.11:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"