From 41d4813439e28d84610f8764df20a117db654c9d Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Sun, 11 Aug 2024 10:43:14 +0200
Subject: [PATCH 01/28] Remove unnecessary live region mount

from the documentation page. Mounting as part
of the KThemePlugin execution seems to work well
after all.
---
 docs/pages/usekliveregion.vue | 6 +-----
 lib/KThemePlugin.js           | 4 ----
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/docs/pages/usekliveregion.vue b/docs/pages/usekliveregion.vue
index be46710a3..a2729a510 100644
--- a/docs/pages/usekliveregion.vue
+++ b/docs/pages/usekliveregion.vue
@@ -93,7 +93,7 @@
 
   export default {
     setup() {
-      const { _mountLiveRegion, sendPoliteMessage, sendAssertiveMessage } = useKLiveRegion();
+      const { sendPoliteMessage, sendAssertiveMessage } = useKLiveRegion();
 
       const politeMessageInput = ref('Polite hello');
       const updatePoliteMessage = message => {
@@ -106,7 +106,6 @@
       };
 
       return {
-        _mountLiveRegion,
         updatePoliteMessage,
         politeMessageInput,
         updateAssertiveMessage,
@@ -115,9 +114,6 @@
         sendAssertiveMessage,
       };
     },
-    mounted() {
-      this._mountLiveRegion(this.$root.$el);
-    },
   };
 
 </script>
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 8f7e377a4..3e41df74a 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -51,10 +51,6 @@ require('./grids/globalStyles.js'); // global grid styles
  * Also, set up global state, listeners, and styles.
  */
 export default function KThemePlugin(Vue) {
-  // Note that if DOM live regions need to be demostrated
-  // on the KDS website, and therefore attached to the DOM,
-  // just call _mountLiveRegion() in the relevant documentation
-  // page's 'mounted' (see 'docs/pages/usekliveregio.vue' for an example)
   if (!isNuxtServerSideRendering()) {
     const onDomReady = () => {
       _mountLiveRegion();

From 52656ca3eaa7ce2148c826716872f5f6d8bc44c2 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Sun, 11 Aug 2024 10:03:32 +0200
Subject: [PATCH 02/28] Add support for teleporting

that is performant and simple to use.

- The teleport root element is inserted to an application's
  document body during KDS initialization
  - Removes the need for manual insert
  - Ensures we never attach teleported elements, such as tooltips,
    to document.body itself, which is said to cause severe performance
    problems (https://css-tricks.com/dont-attach-tooltips-to-document-body/)
- Adds new `KTeleport` component
  - Wrapper around vue2-teleport with restricted API that only allows
    teleporting to the KDS teleport root element.
- Removes Teleport in favour of KTeleport in KModal
- Adds appendToRoot prop to KTooltip
  - In support of Studio migration to KDS where in a few instances,
    teleport is needed for tooltips to display correctly
  - Contains smaller refactor of Popper.vue to allow the tooltip
    be attached to an element different from document.body
---
 docs/pages/installation.vue                   |  3 +-
 docs/pages/kteleport.vue                      | 29 +++++++++
 docs/pages/usekliveregion.vue                 |  2 +-
 docs/tableOfContents.js                       |  5 ++
 lib/KModal.vue                                | 11 +---
 lib/KTeleport/index.vue                       | 34 +++++++++++
 lib/KThemePlugin.js                           |  5 ++
 lib/KTooltip/Popper.vue                       | 26 ++++----
 lib/KTooltip/index.vue                        | 16 +++++
 .../__tests__/index.spec.js                   | 10 ++++
 lib/composables/_useTeleportRootEl/index.js   | 59 +++++++++++++++++++
 .../useKLiveRegion/__tests__/index.spec.js    |  2 +-
 12 files changed, 180 insertions(+), 22 deletions(-)
 create mode 100644 docs/pages/kteleport.vue
 create mode 100644 lib/KTeleport/index.vue
 create mode 100644 lib/composables/_useTeleportRootEl/__tests__/index.spec.js
 create mode 100644 lib/composables/_useTeleportRootEl/index.js

diff --git a/docs/pages/installation.vue b/docs/pages/installation.vue
index 2dea90431..d1dad171b 100644
--- a/docs/pages/installation.vue
+++ b/docs/pages/installation.vue
@@ -24,7 +24,8 @@
         <li>Installs <code>$themeBrand</code>, <code>$themeTokens</code> <code>$themePalette</code>, and <code>$computedClass</code> helpers on all Vue instances (see <DocsInternalLink href="/colors/#usage" text="Colors" />).</li>
         <li>Provides <code>$coreOutline</code>, <code>$inputModality</code>, <code>$mediaType</code>, and <code>$isPrint</code> computed properties as well as <code>$print</code> method to all Vue instances.</li>
         <li>Globally registers all KDS Vue components.</li>
-        <li>Inserts assertive and polite ARIA live regions to your application's document body (see <DocsInternalLink href="/usekliveregion" text="useKLiveRegion" />).</li>
+        <li>Inserts assertive and polite ARIA live regions <code>#k-live-region</code> to your application's document body (see <DocsInternalLink href="/usekliveregion" text="useKLiveRegion" />).</li>
+        <li>Inserts the teleport root element <code>#k-teleport</code> to your application's document body (see <DocsLibraryLink component="KTeleport" /> or search for <code>appendToRoot</code> prop on components).</li>
       </ul>
     </DocsPageSection>
 
diff --git a/docs/pages/kteleport.vue b/docs/pages/kteleport.vue
new file mode 100644
index 000000000..c6a31e58a
--- /dev/null
+++ b/docs/pages/kteleport.vue
@@ -0,0 +1,29 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>Wrapping a component in <code>KTeleport</code> will teleport it to the teleport root element that is inserted to an application's document body automatically <DocsInternalLink href="/installation#install-plugin" text="during the KDS installation process" />.</p>
+    </DocsPageSection>
+
+    <DocsPageSection title="Usage" anchor="#usage">
+      <p>First, check whether you need <code>KTeleport</code>. Some KDS components already utilize it internally and you only need to instruct them to activate it, typically via the <code>appendToRoot</code> prop.</p>
+
+      <p>If you need to use <code>KTeleport</code>, simply wrap your component in it:</p>
+
+      <DocsShowCode language="html">
+        <KTeleport>
+          <YourComponent />
+        </KTeleport>
+      </DocsShowCode>
+    </DocsPageSection>
+
+    <DocsPageSection title="Related" anchor="#related">
+      <ul>
+        <li>
+          <DocsInternalLink href="/installation#install-plugin" text="KDS installation step" /> that attaches the teleport root element to an application's document body
+        </li>
+      </ul>
+    </DocsPageSection>
+  </DocsPageTemplate>
+
+</template>
diff --git a/docs/pages/usekliveregion.vue b/docs/pages/usekliveregion.vue
index a2729a510..88b273ae6 100644
--- a/docs/pages/usekliveregion.vue
+++ b/docs/pages/usekliveregion.vue
@@ -77,7 +77,7 @@
     <DocsPageSection title="Related" anchor="#related">
       <ul>
         <li>
-          <DocsInternalLink href="/installation#install-plugin" text="KDS installation step" /> that attaches live regions to an application's DOM
+          <DocsInternalLink href="/installation#install-plugin" text="KDS installation step" /> that attaches live regions to an application's document body
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index 3166c255b..01075c89e 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -399,6 +399,11 @@ export default [
         isCode: true,
         keywords: tabsRelatedKeywords,
       }),
+      new Page({
+        path: '/kteleport',
+        title: 'KTeleport',
+        isCode: true,
+      }),
       new Page({
         path: '/ktransition',
         title: 'KTransition',
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 1112d86e7..273345354 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <component :is="wrapper" v-bind="wrapperProps">
+  <component :is="wrapper">
     <!-- Accessibility properties for the overlay -->
     <transition name="modal-fade" appear>
       <div
@@ -103,7 +103,6 @@
 
 <script>
 
-  import Teleport from 'vue2-teleport';
   import debounce from 'lodash/debounce';
   import useKResponsiveWindow from './composables/useKResponsiveWindow';
 
@@ -120,9 +119,6 @@
    */
   export default {
     name: 'KModal',
-    components: {
-      Teleport,
-    },
     setup() {
       const { windowHeight, windowWidth } = useKResponsiveWindow();
       return { windowHeight, windowWidth };
@@ -236,10 +232,7 @@
         };
       },
       wrapper() {
-        return this.appendToRoot ? 'Teleport' : 'div';
-      },
-      wrapperProps() {
-        return this.appendToRoot ? { to: 'body' } : {};
+        return this.appendToRoot ? 'KTeleport' : 'div';
       },
     },
     created() {
diff --git a/lib/KTeleport/index.vue b/lib/KTeleport/index.vue
new file mode 100644
index 000000000..d66065bc4
--- /dev/null
+++ b/lib/KTeleport/index.vue
@@ -0,0 +1,34 @@
+<template>
+
+  <Teleport :to="teleportRootElSelector">
+    <!-- @slot Content to be teleported -->
+    <slot></slot>
+  </Teleport>
+
+</template>
+
+
+<script>
+
+  import Teleport from 'vue2-teleport';
+  import _useTeleportRootEl from '../composables/_useTeleportRootEl';
+
+  /**
+   * Wrapping a component in KTeleport will teleport it to
+   * the teleport root element #k-teleport that is inserted
+   * to an application's document body automatically during
+   * the KDS installation process (see KThemePlugin.js).
+   */
+  export default {
+    name: 'KTeleport',
+    components: {
+      Teleport,
+    },
+    setup() {
+      const { teleportRootElSelector } = _useTeleportRootEl();
+      return { teleportRootElSelector };
+    },
+  };
+
+</script>
+
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 3e41df74a..8c18d3981 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -30,6 +30,7 @@ import KSwitch from './KSwitch';
 import KTabs from './tabs/KTabs';
 import KTabsList from './tabs/KTabsList';
 import KTabsPanel from './tabs/KTabsPanel';
+import KTeleport from './KTeleport';
 import KTextbox from './KTextbox';
 import KTooltip from './KTooltip';
 import KTransition from './KTransition';
@@ -41,8 +42,10 @@ import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styl
 import globalThemeState from './styles/globalThemeState';
 
 import useKLiveRegion from './composables/useKLiveRegion';
+import _useTeleportRootEl from './composables/_useTeleportRootEl';
 
 const { _mountLiveRegion } = useKLiveRegion();
+const { mountTeleportRootEl } = _useTeleportRootEl();
 
 require('./grids/globalStyles.js'); // global grid styles
 
@@ -54,6 +57,7 @@ export default function KThemePlugin(Vue) {
   if (!isNuxtServerSideRendering()) {
     const onDomReady = () => {
       _mountLiveRegion();
+      mountTeleportRootEl();
       document.removeEventListener('DOMContentLoaded', onDomReady);
     };
 
@@ -142,6 +146,7 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTabs', KTabs);
   Vue.component('KTabsList', KTabsList);
   Vue.component('KTabsPanel', KTabsPanel);
+  Vue.component('KTeleport', KTeleport);
   Vue.component('KTextbox', KTextbox);
   Vue.component('KTooltip', KTooltip);
   Vue.component('KTransition', KTransition);
diff --git a/lib/KTooltip/Popper.vue b/lib/KTooltip/Popper.vue
index dc8997ade..d5ea5856f 100644
--- a/lib/KTooltip/Popper.vue
+++ b/lib/KTooltip/Popper.vue
@@ -4,6 +4,11 @@
     Vendored from https://github.com/RobinCK/vue-popper/
     pending
     https://github.com/RobinCK/vue-popper/pull/73
+
+    LE customizations
+     - Allow for appending to a chosen element rather than to body,
+       typically to the teleport root element. 'appendToBody' prop changed
+       to 'appendToEl' and related changes.
   -->
 
 
@@ -89,9 +94,10 @@
         default: false,
       },
       dataValue: { default: null }, // eslint-disable-line
-      appendToBody: {
-        type: Boolean,
-        default: false,
+      /* An HTML element the tooltip should be appended to */
+      appendToEl: {
+        type: Object,
+        default: null,
       },
       visibleArrow: {
         type: Boolean,
@@ -155,7 +161,7 @@
 
     created() {
       this.appendedArrow = false;
-      this.appendedToBody = false;
+      this.isAppendedToEl = false;
       this.popperOptions = Object.assign(this.popperOptions, this.options);
     },
 
@@ -210,9 +216,9 @@
           this.popperJS = null;
         }
 
-        if (this.appendedToBody) {
-          this.appendedToBody = false;
-          document.body.removeChild(this.popper.parentElement);
+        if (this.isAppendedToEl) {
+          this.isAppendedToEl = false;
+          this.appendToEl.removeChild(this.popper.parentElement);
         }
       },
 
@@ -222,9 +228,9 @@
             this.appendArrow(this.popper);
           }
 
-          if (this.appendToBody && !this.appendedToBody) {
-            this.appendedToBody = true;
-            document.body.appendChild(this.popper.parentElement);
+          if (this.appendToEl && !this.isAppendedToEl) {
+            this.isAppendedToEl = true;
+            this.appendToEl.appendChild(this.popper.parentElement);
           }
 
           if (this.popperJS && this.popperJS.destroy) {
diff --git a/lib/KTooltip/index.vue b/lib/KTooltip/index.vue
index 6de8baab0..e70b2202b 100644
--- a/lib/KTooltip/index.vue
+++ b/lib/KTooltip/index.vue
@@ -6,6 +6,7 @@
     :disabled="disabled"
     :visibleArrow="false"
     :options="options"
+    :appendToEl="appendToEl"
     trigger="hover"
   >
     <div
@@ -28,6 +29,7 @@
 <script>
 
   import isArray from 'lodash/isArray';
+  import _useTeleportRootEl from '../composables/_useTeleportRootEl';
   import Popper from './Popper';
 
   /**
@@ -38,6 +40,11 @@
     components: {
       Popper,
     },
+    setup(props) {
+      const { getTeleportRootEl } = _useTeleportRootEl();
+      const appendToEl = props.appendToRoot ? getTeleportRootEl() : null;
+      return { appendToEl };
+    },
     props: {
       /**
        * Name of `ref` element within the parent's `$refs` object. Tooltip will be
@@ -86,6 +93,15 @@
         type: String,
         default: null,
       },
+      /**
+       * Whether or not the tooltip should be teleported
+       * to the root of the document
+       */
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      appendToRoot: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
diff --git a/lib/composables/_useTeleportRootEl/__tests__/index.spec.js b/lib/composables/_useTeleportRootEl/__tests__/index.spec.js
new file mode 100644
index 000000000..bb2049877
--- /dev/null
+++ b/lib/composables/_useTeleportRootEl/__tests__/index.spec.js
@@ -0,0 +1,10 @@
+describe('_useTeleportRootEl', () => {
+  // this is taken care of by KThemePlugin.js that is already registered
+  // in the global jest setup
+  it(`document body contains k-teleport root element upon the KDS plugin initialization`, () => {
+    expect(`
+      <div id="k-teleport">
+      </div>
+    `).toBeInDom();
+  });
+});
diff --git a/lib/composables/_useTeleportRootEl/index.js b/lib/composables/_useTeleportRootEl/index.js
new file mode 100644
index 000000000..bc27c71d7
--- /dev/null
+++ b/lib/composables/_useTeleportRootEl/index.js
@@ -0,0 +1,59 @@
+const TELEPORT_ROOT_EL_ID = 'k-teleport';
+
+/**
+ * A private composable that takes care of everything
+ * related to the teleport root element that is inserted
+ * to an application's document body during the KDS
+ * initialization (see KThemePlugin.js)
+ */
+export default function _useTeleportRootEl() {
+  const teleportRootElSelector = `#${TELEPORT_ROOT_EL_ID}`;
+
+  /**
+   * Inserts the teleport root element to an application's
+   * document body and saves the element to window for later use.
+   * Should be called only once, typically during app
+   * initialization.
+   */
+  function mountTeleportRootEl() {
+    const teleportRootEl = document.getElementById(TELEPORT_ROOT_EL_ID);
+
+    // Already mounted, so don't mount again,
+    // just make sure elements are available in window
+    if (teleportRootEl) {
+      window.teleportRootEl = teleportRootEl;
+      return;
+    }
+
+    const newTeleportRootEl = document.createElement('div');
+    newTeleportRootEl.id = TELEPORT_ROOT_EL_ID;
+
+    document.body.insertBefore(newTeleportRootEl, document.body.firstChild);
+
+    // Save for later use so that we don't need to query
+    // every time we call the 'getTeleportRootEl'
+    // (frequent operation due to the usage from
+    // KTooltip and other components).
+    window.teleportRootEl = newTeleportRootEl;
+  }
+
+  /**
+   * @returns {HTMLElement} The teleport root element
+   */
+  function getTeleportRootEl() {
+    // do not query DOM for performance reasons
+    const teleportRootEl = window.teleportRootEl;
+    // unlikely to happen, but just in case
+    if (!teleportRootEl) {
+      console.error('[KDS] The teleport root element is missing. KDS initialization failed?');
+      return;
+    }
+    return teleportRootEl;
+  }
+
+  return {
+    mountTeleportRootEl,
+    getTeleportRootEl,
+    teleportRootElSelector,
+  };
+}
diff --git a/lib/composables/useKLiveRegion/__tests__/index.spec.js b/lib/composables/useKLiveRegion/__tests__/index.spec.js
index 708000ab5..ade2665cf 100644
--- a/lib/composables/useKLiveRegion/__tests__/index.spec.js
+++ b/lib/composables/useKLiveRegion/__tests__/index.spec.js
@@ -3,7 +3,7 @@ import useKLiveRegion from '../index.js';
 const { sendPoliteMessage, sendAssertiveMessage } = useKLiveRegion();
 
 describe('useKLiveRegion', () => {
-  // this is take care of by KThemePlugin.js that is already registered
+  // this is taken care of by KThemePlugin.js that is already registered
   // in the global jest setup
   it(`document body contains live regions upon the KDS plugin initialization`, () => {
     expect(`

From 422b7faa6317511c23c82885366c5011792ea0c6 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Sun, 11 Aug 2024 15:02:12 +0200
Subject: [PATCH 03/28] Configure sidebar icon to rtl flip

---
 lib/KIcon/iconDefinitions.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
index 84cbc3c12..40a917d4f 100644
--- a/lib/KIcon/iconDefinitions.js
+++ b/lib/KIcon/iconDefinitions.js
@@ -404,6 +404,7 @@ const KolibriIcons = {
   email: { icon: require('./precompiled-icons/material-icons/mail_outline/baseline.vue').default },
   sidebar: {
     icon: require('./precompiled-icons/material-icons/vertical_split/baseline.vue').default,
+    rtlFlip: true,
   },
 
   bookmark: { icon: require('./precompiled-icons/mdi/bookmark.vue').default },

From af100febb59f9850096d1ae88a347024d2b062e2 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Sun, 11 Aug 2024 15:24:25 +0200
Subject: [PATCH 04/28] Update changelog

---
 CHANGELOG.md | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94fb8fb6b..349fdbb94 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,51 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+- [#722]
+  - **Description:** Inserts the teleport root element to an application's document body during KDS initialization.
+  - **Products impact:** KDS initialization
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** Remove any custom teleportation logic and use new KDS components and props instead.
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
+
+- [#722]
+  - **Description:** Adds new `KTeleport` component
+  - **Products impact:** New API
+  - **Addresses:** -
+  - **Components:**  `KTeleport` 
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
+- [#722]
+  - **Description:** Adds new prop, `appendToRoot`, to `KTooltip`
+  - **Products impact:** New API
+  - **Addresses:** -
+  - **Components:**  `KTooltip` 
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
+- [#722]
+  - **Description:** Makes the `sidebar` icon flip in RTL languages
+  - **Products impact:** Bugfix
+  - **Addresses:** -
+  - **Components:**  Icons
+  - **Breaking:** no
+  - **Impacts a11y:** yes
+  - **Guidance:** -
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
 - [#687]
   - **Description:** Adds logic that inserts ARIA live assertive and polite regions to an application's document body during KDS initialization and documents this on the new "Installation" page. Relatedly adds `useKLiveRegion` composable with public methods for updating the live regions with assertive and polite messages. 
   - **Products impact:** new API

From cba0952e0c5308b882848c646d2d8b644dabda42 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Mon, 26 Aug 2024 16:42:25 +0200
Subject: [PATCH 05/28] Rename teleport to overlay

---
 CHANGELOG.md                                  |  8 +--
 docs/pages/installation.vue                   |  4 +-
 docs/pages/koverlay.vue                       | 29 +++++++++
 docs/pages/kteleport.vue                      | 29 ---------
 docs/tableOfContents.js                       |  4 +-
 lib/KModal.vue                                |  2 +-
 lib/KOverlay/index.vue                        | 36 +++++++++++
 lib/KTeleport/index.vue                       | 34 -----------
 lib/KThemePlugin.js                           | 10 +--
 lib/KTooltip/Popper.vue                       |  4 +-
 lib/KTooltip/index.vue                        | 13 ++--
 .../_useOverlay/__tests__/index.spec.js       | 10 +++
 lib/composables/_useOverlay/index.js          | 61 +++++++++++++++++++
 .../__tests__/index.spec.js                   | 10 ---
 lib/composables/_useTeleportRootEl/index.js   | 59 ------------------
 15 files changed, 159 insertions(+), 154 deletions(-)
 create mode 100644 docs/pages/koverlay.vue
 delete mode 100644 docs/pages/kteleport.vue
 create mode 100644 lib/KOverlay/index.vue
 delete mode 100644 lib/KTeleport/index.vue
 create mode 100644 lib/composables/_useOverlay/__tests__/index.spec.js
 create mode 100644 lib/composables/_useOverlay/index.js
 delete mode 100644 lib/composables/_useTeleportRootEl/__tests__/index.spec.js
 delete mode 100644 lib/composables/_useTeleportRootEl/index.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 349fdbb94..b2b590f64 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 ## Upcoming version 5.x.x (`develop` branch)
 
 - [#722]
-  - **Description:** Inserts the teleport root element to an application's document body during KDS initialization.
+  - **Description:** Inserts the overlay container element `#k-overlay` to an application's document body during KDS initialization.
   - **Products impact:** KDS initialization
   - **Addresses:** -
   - **Components:** -
@@ -17,10 +17,10 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 
 - [#722]
-  - **Description:** Adds new `KTeleport` component
+  - **Description:** Adds new `KOverlay` component
   - **Products impact:** New API
   - **Addresses:** -
-  - **Components:**  `KTeleport` 
+  - **Components:**  `KOverlay` 
   - **Breaking:** no
   - **Impacts a11y:** no
   - **Guidance:** -
@@ -28,7 +28,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 [#722]: https://github.com/learningequality/kolibri-design-system/pull/722
 
 - [#722]
-  - **Description:** Adds new prop, `appendToRoot`, to `KTooltip`
+  - **Description:** Adds new prop, `appendToOverlay`, to `KTooltip`
   - **Products impact:** New API
   - **Addresses:** -
   - **Components:**  `KTooltip` 
diff --git a/docs/pages/installation.vue b/docs/pages/installation.vue
index d1dad171b..442731521 100644
--- a/docs/pages/installation.vue
+++ b/docs/pages/installation.vue
@@ -24,8 +24,8 @@
         <li>Installs <code>$themeBrand</code>, <code>$themeTokens</code> <code>$themePalette</code>, and <code>$computedClass</code> helpers on all Vue instances (see <DocsInternalLink href="/colors/#usage" text="Colors" />).</li>
         <li>Provides <code>$coreOutline</code>, <code>$inputModality</code>, <code>$mediaType</code>, and <code>$isPrint</code> computed properties as well as <code>$print</code> method to all Vue instances.</li>
         <li>Globally registers all KDS Vue components.</li>
-        <li>Inserts assertive and polite ARIA live regions <code>#k-live-region</code> to your application's document body (see <DocsInternalLink href="/usekliveregion" text="useKLiveRegion" />).</li>
-        <li>Inserts the teleport root element <code>#k-teleport</code> to your application's document body (see <DocsLibraryLink component="KTeleport" /> or search for <code>appendToRoot</code> prop on components).</li>
+        <li>Inserts assertive and polite ARIA live regions <code>#k-live-region</code> to an application's document body (see <DocsInternalLink href="/usekliveregion" text="useKLiveRegion" />).</li>
+        <li>Inserts the overlay container element <code>#k-overlay</code> to an application's document body (see <DocsLibraryLink component="KOverlay" /> or search for <code>appendToOverlay</code> prop on components).</li>
       </ul>
     </DocsPageSection>
 
diff --git a/docs/pages/koverlay.vue b/docs/pages/koverlay.vue
new file mode 100644
index 000000000..6ae4320dd
--- /dev/null
+++ b/docs/pages/koverlay.vue
@@ -0,0 +1,29 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>Use <code>KOverlay</code> to move an element from its original place in the DOM to the overlay container element <code>#k-overlay</code> that is inserted to an application's document body automatically <DocsInternalLink href="/installation#install-plugin" text="during the KDS installation process" />. This is often useful for modals, tooltips, dropdowns, or other elements that should appear on top of other content.</p>
+    </DocsPageSection>
+
+    <DocsPageSection title="Usage" anchor="#usage">
+      <p>First, check whether you need <code>KOverlay</code>. Some KDS components already utilize it internally and you only need to instruct them to activate it, typically via the <code>appendToOverlay</code> prop.</p>
+
+      <p>If you need to use <code>KOverlay</code>, simply wrap an element or a component in it:</p>
+
+      <DocsShowCode language="html">
+        <KOverlay>
+          <YourComponent />
+        </KOverlay>
+      </DocsShowCode>
+    </DocsPageSection>
+
+    <DocsPageSection title="Related" anchor="#related">
+      <ul>
+        <li>
+          <DocsInternalLink href="/installation#install-plugin" text="KDS installation step" /> that attaches the overlay container element <code>#k-overlay</code> to an application's document body
+        </li>
+      </ul>
+    </DocsPageSection>
+  </DocsPageTemplate>
+
+</template>
diff --git a/docs/pages/kteleport.vue b/docs/pages/kteleport.vue
deleted file mode 100644
index c6a31e58a..000000000
--- a/docs/pages/kteleport.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-
-  <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>Wrapping a component in <code>KTeleport</code> will teleport it to the teleport root element that is inserted to an application's document body automatically <DocsInternalLink href="/installation#install-plugin" text="during the KDS installation process" />.</p>
-    </DocsPageSection>
-
-    <DocsPageSection title="Usage" anchor="#usage">
-      <p>First, check whether you need <code>KTeleport</code>. Some KDS components already utilize it internally and you only need to instruct them to activate it, typically via the <code>appendToRoot</code> prop.</p>
-
-      <p>If you need to use <code>KTeleport</code>, simply wrap your component in it:</p>
-
-      <DocsShowCode language="html">
-        <KTeleport>
-          <YourComponent />
-        </KTeleport>
-      </DocsShowCode>
-    </DocsPageSection>
-
-    <DocsPageSection title="Related" anchor="#related">
-      <ul>
-        <li>
-          <DocsInternalLink href="/installation#install-plugin" text="KDS installation step" /> that attaches the teleport root element to an application's document body
-        </li>
-      </ul>
-    </DocsPageSection>
-  </DocsPageTemplate>
-
-</template>
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index 01075c89e..8e6c12ebf 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -400,8 +400,8 @@ export default [
         keywords: tabsRelatedKeywords,
       }),
       new Page({
-        path: '/kteleport',
-        title: 'KTeleport',
+        path: '/koverlay',
+        title: 'KOverlay',
         isCode: true,
       }),
       new Page({
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 273345354..562bfd52c 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -232,7 +232,7 @@
         };
       },
       wrapper() {
-        return this.appendToRoot ? 'KTeleport' : 'div';
+        return this.appendToRoot ? 'KOverlay' : 'div';
       },
     },
     created() {
diff --git a/lib/KOverlay/index.vue b/lib/KOverlay/index.vue
new file mode 100644
index 000000000..7a1d3eee7
--- /dev/null
+++ b/lib/KOverlay/index.vue
@@ -0,0 +1,36 @@
+<template>
+
+  <Teleport :to="overlayElSelector">
+    <!-- @slot Content to be moved to the overlay container element #k-overlay -->
+    <slot></slot>
+  </Teleport>
+
+</template>
+
+
+<script>
+
+  import Teleport from 'vue2-teleport';
+  import _useOverlay from '../composables/_useOverlay';
+
+  /**
+   * Moves an element from its original place in the DOM
+   * to the overlay container element #k-overlay that is inserted
+   * to an application's document body automatically during
+   * the KDS installation process (see KThemePlugin.js).
+   * This is often useful for modals, tooltips, dropdowns, or other
+   * elements that should appear on top of other content.
+   */
+  export default {
+    name: 'KOverlay',
+    components: {
+      Teleport,
+    },
+    setup() {
+      const { overlayElSelector } = _useOverlay();
+      return { overlayElSelector };
+    },
+  };
+
+</script>
+
diff --git a/lib/KTeleport/index.vue b/lib/KTeleport/index.vue
deleted file mode 100644
index d66065bc4..000000000
--- a/lib/KTeleport/index.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-
-  <Teleport :to="teleportRootElSelector">
-    <!-- @slot Content to be teleported -->
-    <slot></slot>
-  </Teleport>
-
-</template>
-
-
-<script>
-
-  import Teleport from 'vue2-teleport';
-  import _useTeleportRootEl from '../composables/_useTeleportRootEl';
-
-  /**
-   * Wrapping a component in KTeleport will teleport it to
-   * the teleport root element #k-teleport that is inserted
-   * to an application's document body automatically during
-   * the KDS installation process (see KThemePlugin.js).
-   */
-  export default {
-    name: 'KTeleport',
-    components: {
-      Teleport,
-    },
-    setup() {
-      const { teleportRootElSelector } = _useTeleportRootEl();
-      return { teleportRootElSelector };
-    },
-  };
-
-</script>
-
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 8c18d3981..156584e30 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -30,7 +30,7 @@ import KSwitch from './KSwitch';
 import KTabs from './tabs/KTabs';
 import KTabsList from './tabs/KTabsList';
 import KTabsPanel from './tabs/KTabsPanel';
-import KTeleport from './KTeleport';
+import KOverlay from './KOverlay';
 import KTextbox from './KTextbox';
 import KTooltip from './KTooltip';
 import KTransition from './KTransition';
@@ -42,10 +42,10 @@ import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styl
 import globalThemeState from './styles/globalThemeState';
 
 import useKLiveRegion from './composables/useKLiveRegion';
-import _useTeleportRootEl from './composables/_useTeleportRootEl';
+import _useOverlay from './composables/_useOverlay';
 
 const { _mountLiveRegion } = useKLiveRegion();
-const { mountTeleportRootEl } = _useTeleportRootEl();
+const { mountOverlay } = _useOverlay();
 
 require('./grids/globalStyles.js'); // global grid styles
 
@@ -57,7 +57,7 @@ export default function KThemePlugin(Vue) {
   if (!isNuxtServerSideRendering()) {
     const onDomReady = () => {
       _mountLiveRegion();
-      mountTeleportRootEl();
+      mountOverlay();
       document.removeEventListener('DOMContentLoaded', onDomReady);
     };
 
@@ -146,7 +146,7 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTabs', KTabs);
   Vue.component('KTabsList', KTabsList);
   Vue.component('KTabsPanel', KTabsPanel);
-  Vue.component('KTeleport', KTeleport);
+  Vue.component('KOverlay', KOverlay);
   Vue.component('KTextbox', KTextbox);
   Vue.component('KTooltip', KTooltip);
   Vue.component('KTransition', KTransition);
diff --git a/lib/KTooltip/Popper.vue b/lib/KTooltip/Popper.vue
index d5ea5856f..72ecd39ae 100644
--- a/lib/KTooltip/Popper.vue
+++ b/lib/KTooltip/Popper.vue
@@ -7,8 +7,8 @@
 
     LE customizations
      - Allow for appending to a chosen element rather than to body,
-       typically to the teleport root element. 'appendToBody' prop changed
-       to 'appendToEl' and related changes.
+       typically to the overlay container element #k-overlay.
+       'appendToBody' prop changedto 'appendToEl' and related changes.
   -->
 
 
diff --git a/lib/KTooltip/index.vue b/lib/KTooltip/index.vue
index e70b2202b..9f26d189f 100644
--- a/lib/KTooltip/index.vue
+++ b/lib/KTooltip/index.vue
@@ -29,7 +29,7 @@
 <script>
 
   import isArray from 'lodash/isArray';
-  import _useTeleportRootEl from '../composables/_useTeleportRootEl';
+  import _useOverlay from '../composables/_useOverlay';
   import Popper from './Popper';
 
   /**
@@ -40,9 +40,10 @@
     components: {
       Popper,
     },
+
     setup(props) {
-      const { getTeleportRootEl } = _useTeleportRootEl();
-      const appendToEl = props.appendToRoot ? getTeleportRootEl() : null;
+      const { getOverlayEl } = _useOverlay();
+      const appendToEl = props.appendToOverlay ? getOverlayEl() : null;
       return { appendToEl };
     },
     props: {
@@ -94,11 +95,11 @@
         default: null,
       },
       /**
-       * Whether or not the tooltip should be teleported
-       * to the root of the document
+       * Whether or not the tooltip should be moved
+       * to the overlay container element #k-overlay
        */
       // eslint-disable-next-line kolibri/vue-no-unused-properties
-      appendToRoot: {
+      appendToOverlay: {
         type: Boolean,
         default: false,
       },
diff --git a/lib/composables/_useOverlay/__tests__/index.spec.js b/lib/composables/_useOverlay/__tests__/index.spec.js
new file mode 100644
index 000000000..a6b8453f2
--- /dev/null
+++ b/lib/composables/_useOverlay/__tests__/index.spec.js
@@ -0,0 +1,10 @@
+describe('_useOverlay', () => {
+  // this is taken care of by KThemePlugin.js that is already registered
+  // in the global jest setup
+  it(`document body contains the overlay container element #k-overlay upon the KDS plugin initialization`, () => {
+    expect(`
+      <div id="k-overlay">
+      </div>
+    `).toBeInDom();
+  });
+});
diff --git a/lib/composables/_useOverlay/index.js b/lib/composables/_useOverlay/index.js
new file mode 100644
index 000000000..4e23013f6
--- /dev/null
+++ b/lib/composables/_useOverlay/index.js
@@ -0,0 +1,61 @@
+const OVERLAY_EL_ID = 'k-overlay';
+
+/**
+ * A private composable that takes care of everything
+ * related to the overlay container element #k-overlay that is
+ * inserted to an application's document body during the KDS
+ * initialization (see KThemePlugin.js)
+ */
+export default function _useOverlay() {
+  const overlayElSelector = `#${OVERLAY_EL_ID}`;
+
+  /**
+   * Inserts the overlay container element #k-overlay
+   * to an application's document body and saves the element
+   * to window for later use. Should be called only once,
+   * typically during app initialization.
+   */
+  function mountOverlay() {
+    const overlayEl = document.getElementById(OVERLAY_EL_ID);
+
+    // Already mounted, so don't mount again,
+    // just make sure the element is available in window
+    if (overlayEl) {
+      window.overlayEl = overlayEl;
+      return;
+    }
+
+    const newOverlayEl = document.createElement('div');
+    newOverlayEl.id = OVERLAY_EL_ID;
+
+    document.body.insertBefore(newOverlayEl, document.body.firstChild);
+
+    // Save for later use so that we don't need to query
+    // every time we call the 'getOverlayEl'
+    // (frequent operation due to the usage from
+    // KTooltip and other components).
+    window.overlayEl = newOverlayEl;
+  }
+
+  /**
+   * @returns {HTMLElement} The overlay container element #k-overlay
+   */
+  function getOverlayEl() {
+    // do not query DOM for performance reasons
+    const overlayEl = window.overlayEl;
+    // unlikely to happen, but just in case
+    if (!overlayEl) {
+      console.error(
+        '[KDS] The overlay container element #k-overlay is missing. KDS initialization failed?'
+      );
+      return;
+    }
+    return overlayEl;
+  }
+
+  return {
+    mountOverlay,
+    getOverlayEl,
+    overlayElSelector,
+  };
+}
diff --git a/lib/composables/_useTeleportRootEl/__tests__/index.spec.js b/lib/composables/_useTeleportRootEl/__tests__/index.spec.js
deleted file mode 100644
index bb2049877..000000000
--- a/lib/composables/_useTeleportRootEl/__tests__/index.spec.js
+++ /dev/null
@@ -1,10 +0,0 @@
-describe('_useTeleportRootEl', () => {
-  // this is taken care of by KThemePlugin.js that is already registered
-  // in the global jest setup
-  it(`document body contains k-teleport root element upon the KDS plugin initialization`, () => {
-    expect(`
-      <div id="k-teleport">
-      </div>
-    `).toBeInDom();
-  });
-});
diff --git a/lib/composables/_useTeleportRootEl/index.js b/lib/composables/_useTeleportRootEl/index.js
deleted file mode 100644
index bc27c71d7..000000000
--- a/lib/composables/_useTeleportRootEl/index.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const TELEPORT_ROOT_EL_ID = 'k-teleport';
-
-/**
- * A private composable that takes care of everything
- * related to the teleport root element that is inserted
- * to an application's document body during the KDS
- * initialization (see KThemePlugin.js)
- */
-export default function _useTeleportRootEl() {
-  const teleportRootElSelector = `#${TELEPORT_ROOT_EL_ID}`;
-
-  /**
-   * Inserts the teleport root element to an application's
-   * document body and saves the element to window for later use.
-   * Should be called only once, typically during app
-   * initialization.
-   */
-  function mountTeleportRootEl() {
-    const teleportRootEl = document.getElementById(TELEPORT_ROOT_EL_ID);
-
-    // Already mounted, so don't mount again,
-    // just make sure elements are available in window
-    if (teleportRootEl) {
-      window.teleportRootEl = teleportRootEl;
-      return;
-    }
-
-    const newTeleportRootEl = document.createElement('div');
-    newTeleportRootEl.id = TELEPORT_ROOT_EL_ID;
-
-    document.body.insertBefore(newTeleportRootEl, document.body.firstChild);
-
-    // Save for later use so that we don't need to query
-    // every time we call the 'getTeleportRootEl'
-    // (frequent operation due to the usage from
-    // KTooltip and other components).
-    window.teleportRootEl = newTeleportRootEl;
-  }
-
-  /**
-   * @returns {HTMLElement} The teleport root element
-   */
-  function getTeleportRootEl() {
-    // do not query DOM for performance reasons
-    const teleportRootEl = window.teleportRootEl;
-    // unlikely to happen, but just in case
-    if (!teleportRootEl) {
-      console.error('[KDS] The teleport root element is missing. KDS initialization failed?');
-      return;
-    }
-    return teleportRootEl;
-  }
-
-  return {
-    mountTeleportRootEl,
-    getTeleportRootEl,
-    teleportRootElSelector,
-  };
-}

From cb5459c468925e36fc04381669d5f8f7db6ab342 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Wed, 28 Aug 2024 12:51:10 +0200
Subject: [PATCH 06/28] Rename appendToRoot to appendToOverlay

to be consistent with the overlay language
in other components.
---
 CHANGELOG.md   | 11 +++++++++++
 lib/KModal.vue |  7 ++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2b590f64..a091fc4eb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#722]: https://github.com/learningequality/kolibri-design-system/pull/722
 
+- [#722]
+  - **Description:** Renames `KModal`'s `appendToRoot` prop to `appendToOverlay`
+  - **Products impact:** Updated API
+  - **Addresses:** -
+  - **Components:**  `KModal` 
+  - **Breaking:** yes
+  - **Impacts a11y:** no
+  - **Guidance:** Rename `KModal`'s `appendToRoot` prop to `appendToOverlay`
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
 - [#722]
   - **Description:** Adds new prop, `appendToOverlay`, to `KTooltip`
   - **Products impact:** New API
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 562bfd52c..104674dce 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -193,9 +193,10 @@
         required: false,
       },
       /**
-       * Whether or not the modal should be teleported to the root of the document
+       * Whether or not the modal should be moved
+       * to the overlay container element #k-overlay
        */
-      appendToRoot: {
+      appendToOverlay: {
         type: Boolean,
         default: false,
       },
@@ -232,7 +233,7 @@
         };
       },
       wrapper() {
-        return this.appendToRoot ? 'KOverlay' : 'div';
+        return this.appendToOverlay ? 'KOverlay' : 'div';
       },
     },
     created() {

From e40ccf15086dee252a9614c5b2aa2bacd1371003 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Wed, 28 Aug 2024 12:54:27 +0200
Subject: [PATCH 07/28] Nice format in the generated documentation

---
 lib/KModal.vue         | 2 +-
 lib/KOverlay/index.vue | 2 +-
 lib/KTooltip/index.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/KModal.vue b/lib/KModal.vue
index 104674dce..d27755fb0 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -194,7 +194,7 @@
       },
       /**
        * Whether or not the modal should be moved
-       * to the overlay container element #k-overlay
+       * to the overlay container element `#k-overlay`
        */
       appendToOverlay: {
         type: Boolean,
diff --git a/lib/KOverlay/index.vue b/lib/KOverlay/index.vue
index 7a1d3eee7..1d191de95 100644
--- a/lib/KOverlay/index.vue
+++ b/lib/KOverlay/index.vue
@@ -1,7 +1,7 @@
 <template>
 
   <Teleport :to="overlayElSelector">
-    <!-- @slot Content to be moved to the overlay container element #k-overlay -->
+    <!-- @slot Content to be moved to the overlay container element `#k-overlay` -->
     <slot></slot>
   </Teleport>
 
diff --git a/lib/KTooltip/index.vue b/lib/KTooltip/index.vue
index 9f26d189f..fe053cd20 100644
--- a/lib/KTooltip/index.vue
+++ b/lib/KTooltip/index.vue
@@ -96,7 +96,7 @@
       },
       /**
        * Whether or not the tooltip should be moved
-       * to the overlay container element #k-overlay
+       * to the overlay container element `#k-overlay`
        */
       // eslint-disable-next-line kolibri/vue-no-unused-properties
       appendToOverlay: {

From b2085d07a9c5d9ee7a830864454b3a6d6d275f0b Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Wed, 28 Aug 2024 14:19:23 +0200
Subject: [PATCH 08/28] Use correct prop type

Fixes 'Invalid prop: type check failed for prop
"appendToEl". Expected Object, got HTMLDivElement'
---
 lib/KTooltip/Popper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KTooltip/Popper.vue b/lib/KTooltip/Popper.vue
index 72ecd39ae..b68bdcb91 100644
--- a/lib/KTooltip/Popper.vue
+++ b/lib/KTooltip/Popper.vue
@@ -96,7 +96,7 @@
       dataValue: { default: null }, // eslint-disable-line
       /* An HTML element the tooltip should be appended to */
       appendToEl: {
-        type: Object,
+        type: HTMLElement,
         default: null,
       },
       visibleArrow: {

From b0fc5a3b8b1ab09c1357450daf3117c7813ab6ae Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Wed, 28 Aug 2024 14:23:21 +0200
Subject: [PATCH 09/28] Remove the prop type

---
 lib/KTooltip/Popper.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/lib/KTooltip/Popper.vue b/lib/KTooltip/Popper.vue
index b68bdcb91..71de05d44 100644
--- a/lib/KTooltip/Popper.vue
+++ b/lib/KTooltip/Popper.vue
@@ -95,8 +95,12 @@
       },
       dataValue: { default: null }, // eslint-disable-line
       /* An HTML element the tooltip should be appended to */
+      // 'type: HTMLElement' breaks the documentation build (??)
+      // 'type: Object' causes 'Invalid prop: type check failed for prop
+      //        "appendToEl". Expected Object, got HTMLDivElement' warning
+      //        in consumers
       appendToEl: {
-        type: HTMLElement,
+        type: null,
         default: null,
       },
       visibleArrow: {

From 769041bbcdcfc8523998e3911d1e3fa7c8187e13 Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Thu, 15 Feb 2024 13:14:58 +0000
Subject: [PATCH 10/28] Automate changelog updates

---
 .github/pull_request_template.md       |  2 -
 .github/workflows/changelog.yml        | 62 +++++++++++++-------------
 .github/workflows/update_changelog.yml | 57 +++++++++++++++++++++++
 3 files changed, 88 insertions(+), 33 deletions(-)
 create mode 100644 .github/workflows/update_changelog.yml

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 312485865..2c6933da8 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -22,7 +22,6 @@ Addresses #*PR# HERE*
     items in CHANGELOG.md as examples
  -->
 
-- [#PR no]
   - **Description:** Summary of change(s)
   - **Products impact:** Choose from - none (for internal updates) / bugfix / new API / updated API / removed API. If it's 'none', use "-" for all items below to indicate they are not relevant.
   - **Addresses:** Link(s) to GH issue(s) addressed. Include KDS links as well as links to related issues in a consumer product repository too.
@@ -31,7 +30,6 @@ Addresses #*PR# HERE*
   - **Impacts a11y:** Does this change improve a11y or adds new features that can be used to improve it? Choose from: yes / no
   - **Guidance:** Why and how to introduce this update to a consumer? Required for breaking changes, appreciated for changes with a11y impact, and welcomed for non-breaking changes when relevant.
 
-[#PR no]: PR link
 
 ## Steps to test
 
diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index 01e6449a2..dcc17b19d 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -1,34 +1,34 @@
-name: Check Changelog.md
+name: Check PR for Changelog
+
 on:
   pull_request:
-    types: [opened, synchronize, reopened]
+    types: [opened, edited, reopened]
+
 jobs:
-  check-changelog:
-     runs-on: ubuntu-latest
-     permissions: write-all
-     steps:
-          - uses: actions/checkout@v4
-          - name: Fetch changed files
-            id: fetch-changed-files
-            run: |
-              response=$(gh api \
-              -H "Accept: application/vnd.github+json" \
-              -H "X-GitHub-Api-Version: 2022-11-28" \
-               repos/${owner}/${REPO}/pulls/${PULL_NUMBER}/files)
-              echo "$response" | jq '.' > response.json
-              
-          
-            env:
-              GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-              owner: ${{ github.repository_owner }}
-              REPO: ${{ github.event.repository.name }}
-              PULL_NUMBER: ${{ github.event.pull_request.number }}
-          - name: Check if Changelog.md is changed
-            run: |
-              if [[ $(jq '.[].filename' response.json) == *"CHANGELOG.md"* ]]; then
-                echo "Changelog.md is changed"
-                exit 0
-              else
-                echo "Changelog.md is not changed"
-                exit 1
-              fi
+  check-description:
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Check PR Description
+        id: check_description
+        run: |
+          description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH")
+          if [[ "$description" == *"## Changelog"* ]]; then
+            echo "containsChangelog=true" >> $GITHUB_OUTPUT
+          else
+            echo "containsChangelog=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Results
+        run: |
+          if [[ "${{ steps.check_description.outputs.containsChangelog }}" == "true" ]]; then
+            echo "PR contains Changelog section"
+            exit 0
+          else
+            echo "PR does not contain Changelog section"
+            exit 1
+          fi
+          
\ No newline at end of file
diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
new file mode 100644
index 000000000..6cf17b8bf
--- /dev/null
+++ b/.github/workflows/update_changelog.yml
@@ -0,0 +1,57 @@
+name: Update Changelog.md
+
+on:
+  workflow_run:
+    workflows: ["Check PR for Changelog"]
+    types:
+      - completed
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  update-changelog:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    permissions: write-all
+
+    steps:
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Check if PR is from dependabot
+        id: check-dependabot
+        run: |
+          is_dependabot=$(jq -r '.pull_request.user.login' $GITHUB_EVENT_PATH)
+          echo "is_dependabot=$is_dependabot" >> $GITHUB_OUTPUT
+        
+      - name: Extract and update Changelog
+        id: modify-changelog
+        run: |
+          if [ "${{ steps.check-dependabot.outputs.is_dependabot }}" == "dependabot[bot]" ]; then
+          changelog="- **Description:** ${{ github.event.pull_request.title }}\n  - **Products impact:** Dev Dependency upgrade\n  - **Addresses:** -\n  - **Components:** -\n  - **Breaking:** -\n  - **Impacts a11y:** -\n  - **Guidance:** -"
+          else
+            description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH")
+            changelog_section=$(echo "$description" | awk '/## Changelog/{flag=1; next} /##/{flag=0} flag' | sed '/<!--/,/-->/d' | sed '/<!--/,/-->/d' | sed '1d;$d')
+            changelog="${changelog_section}"
+          fi
+
+          pr_number=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
+          pr_link="[#${pr_number}]"
+          pr_link_ref="[#${pr_number}]: ${{ github.event.pull_request.html_url }}"
+
+          echo "- ${pr_link}" > pr_info.txt
+          echo -e "  ${changelog}" >> pr_info.txt
+          echo >> pr_info.txt
+          echo "${pr_link_ref}" >> pr_info.txt
+          echo >> pr_info.txt
+
+          sed -i "/<!-- Put all new updates into this section, please -->/r pr_info.txt" CHANGELOG.md
+        
+      - name: Commit updated CHANGELOG.md
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+            branch: ${{ github.event.pull_request.base.ref }}
+            commit_message: "Update CHANGELOG.md w/ PR #${{ github.event.pull_request.number }}"
+            file_pattern: CHANGELOG.md
\ No newline at end of file

From 6d0e92dc6c2e37be3440e5e45dc6c1bb89b6ce2d Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Wed, 28 Aug 2024 07:51:11 -0700
Subject: [PATCH 11/28] Modify check and update changelog workflows

---
 .github/pull_request_template.md       |  2 ++
 .github/workflows/changelog.yml        | 24 ++++++++++++++++--------
 .github/workflows/update_changelog.yml |  8 ++------
 CHANGELOG.md                           |  2 ++
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 2c6933da8..026492ffc 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -12,6 +12,7 @@ Addresses #*PR# HERE*
 <!-- Insert images here if applicable -->
 
 ## Changelog
+<!-- [DO NOT REMOVE-USED BY GH ACTION] CHANGELOG START -->
 
 <!--
   - Fill in the changelog item(s) below. If there are more groups of closely
@@ -30,6 +31,7 @@ Addresses #*PR# HERE*
   - **Impacts a11y:** Does this change improve a11y or adds new features that can be used to improve it? Choose from: yes / no
   - **Guidance:** Why and how to introduce this update to a consumer? Required for breaking changes, appreciated for changes with a11y impact, and welcomed for non-breaking changes when relevant.
 
+<!-- [DO NOT REMOVE-USED BY GH ACTION] CHANGELOG END -->
 
 ## Steps to test
 
diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index dcc17b19d..c5d1ccf54 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -12,20 +12,28 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Check if PR is from dependabot
+        id: check-dependabot
+        run: |
+          is_dependabot=$(jq -r '.pull_request.user.login' $GITHUB_EVENT_PATH)
+          echo "is_dependabot=$is_dependabot" >> $GITHUB_OUTPUT
+
       - name: Check PR Description
         id: check_description
         run: |
-          description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH")
-          if [[ "$description" == *"## Changelog"* ]]; then
-            echo "containsChangelog=true" >> $GITHUB_OUTPUT
-          else
-            echo "containsChangelog=false" >> $GITHUB_OUTPUT
-          fi
+            description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH" | awk '/## Changelog/{flag=1; next} /##/{flag=0} flag' | grep -m 1 'Description' | sed 's/^[ \t]*//;s/[ \t]*$//' | cut -d':' -f2-)
+            default_description="Summary of change(s)"
+            if [ "$description" != "$default_description" ]; then
+              echo "containsChangelog=true" >> $GITHUB_OUTPUT
+            else
+              echo "containsChangelog=false" >> $GITHUB_OUTPUT
+            fi
+        
 
       - name: Results
         run: |
-          if [[ "${{ steps.check_description.outputs.containsChangelog }}" == "true" ]]; then
-            echo "PR contains Changelog section"
+          if [[ "${{ steps.check_description.outputs.containsChangelog }}" == "true" || ${{ steps.check-dependabot.outputs.is_dependabot }}" == "dependabot[bot] ]]; then
+            echo "PR contains Changelog section/ PR made by Dependabot"
             exit 0
           else
             echo "PR does not contain Changelog section"
diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
index 6cf17b8bf..6b51eae17 100644
--- a/.github/workflows/update_changelog.yml
+++ b/.github/workflows/update_changelog.yml
@@ -1,10 +1,6 @@
 name: Update Changelog.md
 
 on:
-  workflow_run:
-    workflows: ["Check PR for Changelog"]
-    types:
-      - completed
   pull_request:
     types:
       - closed
@@ -33,7 +29,7 @@ jobs:
           changelog="- **Description:** ${{ github.event.pull_request.title }}\n  - **Products impact:** Dev Dependency upgrade\n  - **Addresses:** -\n  - **Components:** -\n  - **Breaking:** -\n  - **Impacts a11y:** -\n  - **Guidance:** -"
           else
             description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH")
-            changelog_section=$(echo "$description" | awk '/## Changelog/{flag=1; next} /##/{flag=0} flag' | sed '/<!--/,/-->/d' | sed '/<!--/,/-->/d' | sed '1d;$d')
+            changelog_section=$(echo "$description" | awk '/<!-- [DO NOT REMOVE-USED BY GH ACTION] CHANGELOG START -->/{flag=1; next} /<!-- [DO NOT REMOVE-USED BY GH ACTION] CHANGELOG END -->/{flag=0} flag' | sed '/<!--/,/-->/d' | sed '/<!--/,/-->/d' | sed '1d;$d')
             changelog="${changelog_section}"
           fi
 
@@ -47,7 +43,7 @@ jobs:
           echo "${pr_link_ref}" >> pr_info.txt
           echo >> pr_info.txt
 
-          sed -i "/<!-- Put all new updates into this section, please -->/r pr_info.txt" CHANGELOG.md
+          sed -i "/<!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->/r pr_info.txt" CHANGELOG.md
         
       - name: Commit updated CHANGELOG.md
         uses: stefanzweifel/git-auto-commit-action@v4
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16f20cec2..d7c5f9ce2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+<!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
+
 - [#753]
   - **Description:** Bump KDS version to 5.0.0-rc3.
   - **Products impact:** -.

From 674678648f3e6abda677785c3cb1ebdccd047d72 Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Sat, 2 Mar 2024 22:54:46 +0000
Subject: [PATCH 12/28] Modify update_changelog workflow

---
 .github/workflows/changelog.yml        | 21 +++++++++++----------
 .github/workflows/update_changelog.yml |  8 ++++----
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index c5d1ccf54..ba2e1d5b7 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -21,22 +21,23 @@ jobs:
       - name: Check PR Description
         id: check_description
         run: |
-            description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH" | awk '/## Changelog/{flag=1; next} /##/{flag=0} flag' | grep -m 1 'Description' | sed 's/^[ \t]*//;s/[ \t]*$//' | cut -d':' -f2-)
-            default_description="Summary of change(s)"
-            if [ "$description" != "$default_description" ]; then
-              echo "containsChangelog=true" >> $GITHUB_OUTPUT
-            else
-              echo "containsChangelog=false" >> $GITHUB_OUTPUT
-            fi
+          description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH" | awk '/## Changelog/{flag=1; next} /##/{flag=0} flag' | grep -m 1 '**Description:' | sed 's/^[[:space:]]*//;s/[[:space:]]*$//' | cut -d':' -f2- | sed 's/^\*\* //'
+          )
+          echo "$description"
+          default_description="Summary of change(s)"
+          if [ "$description" != "$default_description" ]; then
+            echo "containsChangelog=true" >> $GITHUB_OUTPUT
+          else
+            echo "containsChangelog=false" >> $GITHUB_OUTPUT
+          fi
         
 
       - name: Results
         run: |
-          if [[ "${{ steps.check_description.outputs.containsChangelog }}" == "true" || ${{ steps.check-dependabot.outputs.is_dependabot }}" == "dependabot[bot] ]]; then
+          if [[ "${{ steps.check_description.outputs.containsChangelog }}" == "true" || "${{ steps.check-dependabot.outputs.is_dependabot }}" == "dependabot[bot]" ]]; then
             echo "PR contains Changelog section/ PR made by Dependabot"
             exit 0
           else
             echo "PR does not contain Changelog section"
             exit 1
-          fi
-          
\ No newline at end of file
+          fi
\ No newline at end of file
diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
index 6b51eae17..3d04f607b 100644
--- a/.github/workflows/update_changelog.yml
+++ b/.github/workflows/update_changelog.yml
@@ -15,6 +15,8 @@ jobs:
 
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.base.ref }}
 
       - name: Check if PR is from dependabot
         id: check-dependabot
@@ -29,7 +31,7 @@ jobs:
           changelog="- **Description:** ${{ github.event.pull_request.title }}\n  - **Products impact:** Dev Dependency upgrade\n  - **Addresses:** -\n  - **Components:** -\n  - **Breaking:** -\n  - **Impacts a11y:** -\n  - **Guidance:** -"
           else
             description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH")
-            changelog_section=$(echo "$description" | awk '/<!-- [DO NOT REMOVE-USED BY GH ACTION] CHANGELOG START -->/{flag=1; next} /<!-- [DO NOT REMOVE-USED BY GH ACTION] CHANGELOG END -->/{flag=0} flag' | sed '/<!--/,/-->/d' | sed '/<!--/,/-->/d' | sed '1d;$d')
+            changelog_section=$(echo "$description" | awk '/<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG START -->/{flag=1; next} /<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG END -->/{flag=0} flag' | sed '/<!--/,/-->/d')
             changelog="${changelog_section}"
           fi
 
@@ -39,11 +41,9 @@ jobs:
 
           echo "- ${pr_link}" > pr_info.txt
           echo -e "  ${changelog}" >> pr_info.txt
-          echo >> pr_info.txt
           echo "${pr_link_ref}" >> pr_info.txt
           echo >> pr_info.txt
-
-          sed -i "/<!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->/r pr_info.txt" CHANGELOG.md
+          awk '/<!-- \[DO NOT REMOVE-USED BY GH ACTION\] PASTE CHANGELOG -->/{print; system("cat pr_info.txt"); next} 1' CHANGELOG.md > tmpfile && mv tmpfile CHANGELOG.md
         
       - name: Commit updated CHANGELOG.md
         uses: stefanzweifel/git-auto-commit-action@v4

From 545d218db1ddaea2c77cd91aab420099008f05f3 Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Fri, 15 Mar 2024 00:47:48 +0000
Subject: [PATCH 13/28] Modify update_changelog

---
 .github/workflows/update_changelog.yml | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
index 3d04f607b..a6a1300cc 100644
--- a/.github/workflows/update_changelog.yml
+++ b/.github/workflows/update_changelog.yml
@@ -39,10 +39,16 @@ jobs:
           pr_link="[#${pr_number}]"
           pr_link_ref="[#${pr_number}]: ${{ github.event.pull_request.html_url }}"
 
-          echo "- ${pr_link}" > pr_info.txt
-          echo -e "  ${changelog}" >> pr_info.txt
-          echo "${pr_link_ref}" >> pr_info.txt
-          echo >> pr_info.txt
+          while IFS= read -r entry; do
+          if [[ $entry == *"- **Description:"* ]]; then
+              echo -e "- ${pr_link}\n"
+          fi
+          echo -e "\t${entry}"
+          if [[ $entry == *"- **Guidance:"* ]]; then
+              echo -e "\n${pr_link_ref}\n"
+          fi
+          done <<< "$changelog_section" > pr_info.txt
+
           awk '/<!-- \[DO NOT REMOVE-USED BY GH ACTION\] PASTE CHANGELOG -->/{print; system("cat pr_info.txt"); next} 1' CHANGELOG.md > tmpfile && mv tmpfile CHANGELOG.md
         
       - name: Commit updated CHANGELOG.md

From 595852fbfe14d654fb42fe663d8680ce9726d0b7 Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Thu, 21 Mar 2024 13:02:56 +0000
Subject: [PATCH 14/28] Update changelog check action to identify null
 description

---
 .github/workflows/changelog.yml | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index ba2e1d5b7..6cd50b108 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -21,16 +21,14 @@ jobs:
       - name: Check PR Description
         id: check_description
         run: |
-          description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH" | awk '/## Changelog/{flag=1; next} /##/{flag=0} flag' | grep -m 1 '**Description:' | sed 's/^[[:space:]]*//;s/[[:space:]]*$//' | cut -d':' -f2- | sed 's/^\*\* //'
-          )
+          description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH" | awk '/## Changelog/{flag=1; next} /##/{flag=0} flag' | grep -oP '(?<=- \*\*Description:\*\* ).*' | sed 's/^[[:space:]]*//;s/[[:space:]]*$//')
           echo "$description"
           default_description="Summary of change(s)"
-          if [ "$description" != "$default_description" ]; then
+          if [ -n "$description" ] && [ "$description" != "$default_description" ]; then
             echo "containsChangelog=true" >> $GITHUB_OUTPUT
           else
-            echo "containsChangelog=false" >> $GITHUB_OUTPUT
+              echo "containsChangelog=false" >> $GITHUB_OUTPUT
           fi
-        
 
       - name: Results
         run: |
@@ -38,6 +36,6 @@ jobs:
             echo "PR contains Changelog section/ PR made by Dependabot"
             exit 0
           else
-            echo "PR does not contain Changelog section"
+            echo "Changelog section is missing or does not contain the required details"
             exit 1
           fi
\ No newline at end of file

From b830d83e629049623ea24b8f795aa5930762ff1d Mon Sep 17 00:00:00 2001
From: KshitijThareja <kshitijthareja03@gmail.com>
Date: Fri, 22 Mar 2024 15:14:54 +0000
Subject: [PATCH 15/28] Remove is_dependabot step and add explicit check

---
 .github/workflows/changelog.yml        | 8 +-------
 .github/workflows/update_changelog.yml | 8 +-------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index 6cd50b108..6b5c03605 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -12,12 +12,6 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Check if PR is from dependabot
-        id: check-dependabot
-        run: |
-          is_dependabot=$(jq -r '.pull_request.user.login' $GITHUB_EVENT_PATH)
-          echo "is_dependabot=$is_dependabot" >> $GITHUB_OUTPUT
-
       - name: Check PR Description
         id: check_description
         run: |
@@ -32,7 +26,7 @@ jobs:
 
       - name: Results
         run: |
-          if [[ "${{ steps.check_description.outputs.containsChangelog }}" == "true" || "${{ steps.check-dependabot.outputs.is_dependabot }}" == "dependabot[bot]" ]]; then
+          if [[ "${{ steps.check_description.outputs.containsChangelog }}" == "true" || "${{ github.event.pull_request.user.login }}" == "dependabot[bot]" ]]; then
             echo "PR contains Changelog section/ PR made by Dependabot"
             exit 0
           else
diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
index a6a1300cc..6040256ac 100644
--- a/.github/workflows/update_changelog.yml
+++ b/.github/workflows/update_changelog.yml
@@ -18,16 +18,10 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.base.ref }}
 
-      - name: Check if PR is from dependabot
-        id: check-dependabot
-        run: |
-          is_dependabot=$(jq -r '.pull_request.user.login' $GITHUB_EVENT_PATH)
-          echo "is_dependabot=$is_dependabot" >> $GITHUB_OUTPUT
-        
       - name: Extract and update Changelog
         id: modify-changelog
         run: |
-          if [ "${{ steps.check-dependabot.outputs.is_dependabot }}" == "dependabot[bot]" ]; then
+          if [ "${{ github.event.pull_request.user.login }}" == "dependabot[bot]" ]; then
           changelog="- **Description:** ${{ github.event.pull_request.title }}\n  - **Products impact:** Dev Dependency upgrade\n  - **Addresses:** -\n  - **Components:** -\n  - **Breaking:** -\n  - **Impacts a11y:** -\n  - **Guidance:** -"
           else
             description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH")

From 57fe44daf33dfc7736635fa82ad8e4aae97af6d0 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Thu, 8 Aug 2024 14:02:51 -0700
Subject: [PATCH 16/28] Update changelog updating to use custom Github App.
 Trigger from event that has access to secrets. Update changelog formatting by
 converting string manipulation to Python.

---
 .github/workflows/update_changelog.yml | 84 +++++++++++++++++---------
 1 file changed, 54 insertions(+), 30 deletions(-)

diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
index 6040256ac..f88e40468 100644
--- a/.github/workflows/update_changelog.yml
+++ b/.github/workflows/update_changelog.yml
@@ -1,7 +1,7 @@
 name: Update Changelog.md
 
 on:
-  pull_request:
+  pull_request_target:
     types:
       - closed
 
@@ -9,7 +9,6 @@ jobs:
   update-changelog:
     if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
-    permissions: write-all
 
     steps:
 
@@ -17,37 +16,62 @@ jobs:
         uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.base.ref }}
+          fetch-depth: 0
+          # Prevent later git operations from reusing the same authentication
+          persist-credentials: false
 
       - name: Extract and update Changelog
         id: modify-changelog
+        shell: python
         run: |
-          if [ "${{ github.event.pull_request.user.login }}" == "dependabot[bot]" ]; then
-          changelog="- **Description:** ${{ github.event.pull_request.title }}\n  - **Products impact:** Dev Dependency upgrade\n  - **Addresses:** -\n  - **Components:** -\n  - **Breaking:** -\n  - **Impacts a11y:** -\n  - **Guidance:** -"
-          else
-            description=$(jq -r ".pull_request.body" "$GITHUB_EVENT_PATH")
-            changelog_section=$(echo "$description" | awk '/<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG START -->/{flag=1; next} /<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG END -->/{flag=0} flag' | sed '/<!--/,/-->/d')
-            changelog="${changelog_section}"
-          fi
-
-          pr_number=$(jq --raw-output .pull_request.number "$GITHUB_EVENT_PATH")
-          pr_link="[#${pr_number}]"
-          pr_link_ref="[#${pr_number}]: ${{ github.event.pull_request.html_url }}"
-
-          while IFS= read -r entry; do
-          if [[ $entry == *"- **Description:"* ]]; then
-              echo -e "- ${pr_link}\n"
-          fi
-          echo -e "\t${entry}"
-          if [[ $entry == *"- **Guidance:"* ]]; then
-              echo -e "\n${pr_link_ref}\n"
-          fi
-          done <<< "$changelog_section" > pr_info.txt
-
-          awk '/<!-- \[DO NOT REMOVE-USED BY GH ACTION\] PASTE CHANGELOG -->/{print; system("cat pr_info.txt"); next} 1' CHANGELOG.md > tmpfile && mv tmpfile CHANGELOG.md
-        
+          import re
+          if "${{ github.event.pull_request.user.login }}" == "dependabot[bot]":
+              changelog = "  - **Description:** ${{ github.event.pull_request.title }}\n  - **Products impact:** Dev Dependency upgrade\n  - **Addresses:** -\n  - **Components:** -\n  - **Breaking:** -\n  - **Impacts a11y:** -\n  - **Guidance:** -"
+          else:
+              description = """${{ github.event.pull_request.body }}"""
+              capture = re.compile("<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG START -->\s+<!--(\n|.)+?(?=- \*\*Description)(?P<body>(\n|.)+?(?=<!-- \[DO NOT REMOVE-USED BY GH ACTION\] CHANGELOG END -->))")
+              match = capture.search(description)
+              changelog = match.groupdict()["body"].strip()
+
+          final_changelog = "<!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->\n\n"
+
+          pr_number = "${{ github.event.pull_request.number }}"
+          pr_link = "[#{}]".format(pr_number)
+          pr_link_ref = pr_link + ": ${{ github.event.pull_request.html_url }}"
+
+          for changeline in changelog.splitlines():
+              changeline = changeline.strip()
+              if not changeline:
+                  continue
+
+              if changeline.startswith("- **Description:**"):
+                  final_changelog += "\n" + "- " + pr_link + "\n"
+
+              final_changelog += "  " + changeline + "\n"
+
+              if changeline.startswith("- **Guidance:**"):
+                  final_changelog += "\n" + pr_link_ref + "\n"
+
+          with open("CHANGELOG.md", "r") as f:
+              current_changelog = f.read()
+
+          new_changelog = current_changelog.replace("<!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->", final_changelog)
+
+          with open("CHANGELOG.md", "w") as f:
+              f.write(new_changelog)
+      - uses: tibdex/github-app-token@v1
+        id: generate-token
+        with:
+          app_id: ${{ secrets.LE_BOT_APP_ID }}
+          private_key: ${{ secrets.LE_BOT_PRIVATE_KEY }}
       - name: Commit updated CHANGELOG.md
-        uses: stefanzweifel/git-auto-commit-action@v4
+        run: |
+          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add CHANGELOG.md
+          git commit -m "Update CHANGELOG.md for PR #${{ github.event.pull_request.number }}"
+      - name: Push changes
+        uses: ad-m/github-push-action@v0.8.0
         with:
-            branch: ${{ github.event.pull_request.base.ref }}
-            commit_message: "Update CHANGELOG.md w/ PR #${{ github.event.pull_request.number }}"
-            file_pattern: CHANGELOG.md
\ No newline at end of file
+          github_token: ${{ steps.generate-token.outputs.token }}
+          branch: ${{ github.event.pull_request.base.ref }}

From 5db82b97123a680d8137430e57d3af6df350f697 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Thu, 8 Aug 2024 14:23:43 -0700
Subject: [PATCH 17/28] Rerun on synchronize to ensure new commits pass checks.

---
 .github/workflows/changelog.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index 6b5c03605..77baec097 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -2,7 +2,7 @@ name: Check PR for Changelog
 
 on:
   pull_request:
-    types: [opened, edited, reopened]
+    types: [opened, synchronize, edited, reopened]
 
 jobs:
   check-description:
@@ -32,4 +32,4 @@ jobs:
           else
             echo "Changelog section is missing or does not contain the required details"
             exit 1
-          fi
\ No newline at end of file
+          fi

From 1bb31983e1b15b8d2db74e4cf649c17e874f28d7 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Wed, 28 Aug 2024 07:52:14 -0700
Subject: [PATCH 18/28] Update changelog

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7c5f9ce2..c30e4ae20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
+- [547]
+  - **Description:** Automates changelog update process in the pull requests by adding two GitHub actions: (1) to check for the presence of changelog items(s) in the pull request description, (2) to paste the item(s) to CHANGELOG.md after the PR merged.
+  - **Products impact:** none
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/533
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[547]: https://github.com/learningequality/kolibri-design-system/pull/547
+
 - [#753]
   - **Description:** Bump KDS version to 5.0.0-rc3.
   - **Products impact:** -.

From ad7d767c7603b1e6581449b19231e7239c8bda0a Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Wed, 28 Aug 2024 07:52:43 -0700
Subject: [PATCH 19/28] Remove unnecessary PR checkout in PR description
 validation.

---
 .github/workflows/changelog.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
index 77baec097..de43d362b 100644
--- a/.github/workflows/changelog.yml
+++ b/.github/workflows/changelog.yml
@@ -9,9 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
 
-      - name: Checkout code
-        uses: actions/checkout@v4
-
       - name: Check PR Description
         id: check_description
         run: |

From 09215b69c5c07ee12a75450abb5e39785c9720fb Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Wed, 28 Aug 2024 10:48:12 -0700
Subject: [PATCH 20/28] Only insert the new changelog item into the first
 occurrence of the invisible comment placeholder.

---
 .github/workflows/update_changelog.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/update_changelog.yml b/.github/workflows/update_changelog.yml
index f88e40468..8ab504ef9 100644
--- a/.github/workflows/update_changelog.yml
+++ b/.github/workflows/update_changelog.yml
@@ -55,7 +55,7 @@ jobs:
           with open("CHANGELOG.md", "r") as f:
               current_changelog = f.read()
 
-          new_changelog = current_changelog.replace("<!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->", final_changelog)
+          new_changelog = current_changelog.replace("<!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->", final_changelog, 1)
 
           with open("CHANGELOG.md", "w") as f:
               f.write(new_changelog)

From c374890cc1fe9f91e91d8fa998d4c2dda51234b9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 18:25:35 +0000
Subject: [PATCH 21/28] Bump pug from 3.0.2 to 3.0.3

Bumps [pug](https://github.com/pugjs/pug) from 3.0.2 to 3.0.3.
- [Release notes](https://github.com/pugjs/pug/releases)
- [Commits](https://github.com/pugjs/pug/compare/pug@3.0.2...pug@3.0.3)

---
updated-dependencies:
- dependency-name: pug
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 297219939..6207133c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11688,17 +11688,17 @@ pug-attrs@^3.0.0:
     js-stringify "^1.0.2"
     pug-runtime "^3.0.0"
 
-pug-code-gen@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-3.0.2.tgz#ad190f4943133bf186b60b80de483100e132e2ce"
-  integrity sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==
+pug-code-gen@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-3.0.3.tgz#58133178cb423fe1716aece1c1da392a75251520"
+  integrity sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==
   dependencies:
     constantinople "^4.0.1"
     doctypes "^1.1.0"
     js-stringify "^1.0.2"
     pug-attrs "^3.0.0"
-    pug-error "^2.0.0"
-    pug-runtime "^3.0.0"
+    pug-error "^2.1.0"
+    pug-runtime "^3.0.1"
     void-elements "^3.1.0"
     with "^7.0.0"
 
@@ -11707,6 +11707,11 @@ pug-error@^2.0.0:
   resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-2.0.0.tgz#5c62173cb09c34de2a2ce04f17b8adfec74d8ca5"
   integrity sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==
 
+pug-error@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-2.1.0.tgz#17ea37b587b6443d4b8f148374ec27b54b406e55"
+  integrity sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==
+
 pug-filters@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-4.0.0.tgz#d3e49af5ba8472e9b7a66d980e707ce9d2cc9b5e"
@@ -11769,11 +11774,11 @@ pug-walk@^2.0.0:
   integrity sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==
 
 pug@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/pug/-/pug-3.0.2.tgz#f35c7107343454e43bc27ae0ff76c731b78ea535"
-  integrity sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/pug/-/pug-3.0.3.tgz#e18324a314cd022883b1e0372b8af3a1a99f7597"
+  integrity sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==
   dependencies:
-    pug-code-gen "^3.0.2"
+    pug-code-gen "^3.0.3"
     pug-filters "^4.0.0"
     pug-lexer "^5.0.1"
     pug-linker "^4.0.0"

From 7b2acfda820015fd24d5e48379e5ba8b8c6c51d5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 18:41:49 +0000
Subject: [PATCH 22/28] Update CHANGELOG.md for PR #660

---
 CHANGELOG.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c30e4ae20..e379fe053 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,19 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
+
+- [#660]
+  - **Description:** Bump pug from 3.0.2 to 3.0.3
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#660]: https://github.com/learningequality/kolibri-design-system/pull/660
+
+
 - [547]
   - **Description:** Automates changelog update process in the pull requests by adding two GitHub actions: (1) to check for the presence of changelog items(s) in the pull request description, (2) to paste the item(s) to CHANGELOG.md after the PR merged.
   - **Products impact:** none

From 4c517eec24ba50ffcd01f9485519131bba01cfa4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 18:45:28 +0000
Subject: [PATCH 23/28] Bump slackapi/slack-github-action from 1.25.0 to 1.26.0

Bumps [slackapi/slack-github-action](https://github.com/slackapi/slack-github-action) from 1.25.0 to 1.26.0.
- [Release notes](https://github.com/slackapi/slack-github-action/releases)
- [Commits](https://github.com/slackapi/slack-github-action/compare/v1.25.0...v1.26.0)

---
updated-dependencies:
- dependency-name: slackapi/slack-github-action
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/notify_team_new_comment.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/notify_team_new_comment.yml b/.github/workflows/notify_team_new_comment.yml
index cc5ec443e..cbab1b869 100644
--- a/.github/workflows/notify_team_new_comment.yml
+++ b/.github/workflows/notify_team_new_comment.yml
@@ -27,7 +27,7 @@ jobs:
         env:
             SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
             SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
-        uses: slackapi/slack-github-action@v1.25.0
+        uses: slackapi/slack-github-action@v1.26.0
         with:
           payload: |
             {

From 51584b2a5bce861c3102c80975d623e835cbd6f8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 18:46:07 +0000
Subject: [PATCH 24/28] Bump elliptic from 6.5.4 to 6.5.7

Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.4 to 6.5.7.
- [Commits](https://github.com/indutny/elliptic/compare/v6.5.4...v6.5.7)

---
updated-dependencies:
- dependency-name: elliptic
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 6207133c1..ff78f9eaf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5232,9 +5232,9 @@ electron-to-chromium@^1.4.17:
   integrity sha512-fWc/zAThqZzl7fbuLzar+x6bqZBWHrsBXQOqv//yrgdTLY/G3JGTPOWhPKIhbhynJJhqE9QNzKzlpCINUmUMoA==
 
 elliptic@^6.5.3, elliptic@^6.5.4:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  version "6.5.7"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
+  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"

From 2218f3cbeeabcf3414194e1214e9f6a6570bf426 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 20:05:23 +0000
Subject: [PATCH 25/28] Update CHANGELOG.md for PR #739

---
 CHANGELOG.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e379fe053..7e3ca68f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,19 @@ Changelog is rather internal in nature. See release notes for the public overvie
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
 
+- [#739]
+  - **Description:** Bump elliptic from 6.5.4 to 6.5.7
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#739]: https://github.com/learningequality/kolibri-design-system/pull/739
+
+
+
 - [#660]
   - **Description:** Bump pug from 3.0.2 to 3.0.3
   - **Products impact:** Dev Dependency upgrade

From d3d40d2b2ec63e51f509b0eb5221a9fa2770edb3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 20:06:12 +0000
Subject: [PATCH 26/28] Update CHANGELOG.md for PR #626

---
 CHANGELOG.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e3ca68f3..ace60ada6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,19 @@ Changelog is rather internal in nature. See release notes for the public overvie
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
 
+- [#626]
+  - **Description:** Bump slackapi/slack-github-action from 1.25.0 to 1.26.0
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#626]: https://github.com/learningequality/kolibri-design-system/pull/626
+
+
+
 - [#739]
   - **Description:** Bump elliptic from 6.5.4 to 6.5.7
   - **Products impact:** Dev Dependency upgrade

From 1df5fab460212de6f25aec24b4c86c7d76359a30 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Fri, 30 Aug 2024 10:51:46 +0200
Subject: [PATCH 27/28] Remove obsolete changelog items

---
 CHANGELOG.md | 55 ----------------------------------------------------
 1 file changed, 55 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index da0f4c1cd..ace60ada6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,61 +4,6 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
-- [#722]
-  - **Description:** Inserts the overlay container element `#k-overlay` to an application's document body during KDS initialization.
-  - **Products impact:** KDS initialization
-  - **Addresses:** -
-  - **Components:** -
-  - **Breaking:** no
-  - **Impacts a11y:** no
-  - **Guidance:** Remove any custom teleportation logic and use new KDS components and props instead.
-
-[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
-
-
-- [#722]
-  - **Description:** Adds new `KOverlay` component
-  - **Products impact:** New API
-  - **Addresses:** -
-  - **Components:**  `KOverlay` 
-  - **Breaking:** no
-  - **Impacts a11y:** no
-  - **Guidance:** -
-
-[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
-
-- [#722]
-  - **Description:** Renames `KModal`'s `appendToRoot` prop to `appendToOverlay`
-  - **Products impact:** Updated API
-  - **Addresses:** -
-  - **Components:**  `KModal` 
-  - **Breaking:** yes
-  - **Impacts a11y:** no
-  - **Guidance:** Rename `KModal`'s `appendToRoot` prop to `appendToOverlay`
-
-[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
-
-- [#722]
-  - **Description:** Adds new prop, `appendToOverlay`, to `KTooltip`
-  - **Products impact:** New API
-  - **Addresses:** -
-  - **Components:**  `KTooltip` 
-  - **Breaking:** no
-  - **Impacts a11y:** no
-  - **Guidance:** -
-
-[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
-
-- [#722]
-  - **Description:** Makes the `sidebar` icon flip in RTL languages
-  - **Products impact:** Bugfix
-  - **Addresses:** -
-  - **Components:**  Icons
-  - **Breaking:** no
-  - **Impacts a11y:** yes
-  - **Guidance:** -
-
-[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
 

From 759658f017988b5426a0c6945ab11164b690e967 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 30 Aug 2024 08:55:59 +0000
Subject: [PATCH 28/28] Update CHANGELOG.md for PR #722

---
 CHANGELOG.md | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ace60ada6..77ef5524a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,63 @@ Changelog is rather internal in nature. See release notes for the public overvie
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
 
+- [#722]
+  - **Description:** Inserts the overlay container element `#k-overlay` to an application's document body during KDS initialization.
+  - **Products impact:** KDS initialization
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** Remove any custom teleportation logic and use new KDS components and props instead.
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
+- [#722]
+  - **Description:** Adds new `KOverlay` component
+  - **Products impact:** New API
+  - **Addresses:** -
+  - **Components:**  `KOverlay`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
+- [#722]
+  - **Description:** Renames `KModal`'s `appendToRoot` prop to `appendToOverlay`
+  - **Products impact:** Updated API
+  - **Addresses:** -
+  - **Components:**  `KModal`
+  - **Breaking:** yes
+  - **Impacts a11y:** no
+  - **Guidance:** Rename `KModal`'s `appendToRoot` prop to `appendToOverlay`
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
+- [#722]
+  - **Description:** Adds new prop, `appendToOverlay`, to `KTooltip`
+  - **Products impact:** New API
+  - **Addresses:** -
+  - **Components:**  `KTooltip`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
+- [#722]
+  - **Description:** Makes the `sidebar` icon flip in RTL languages
+  - **Products impact:** Bugfix
+  - **Addresses:** -
+  - **Components:**  Icons
+  - **Breaking:** no
+  - **Impacts a11y:** yes
+  - **Guidance:** -
+
+[#722]: https://github.com/learningequality/kolibri-design-system/pull/722
+
+
+
 - [#626]
   - **Description:** Bump slackapi/slack-github-action from 1.25.0 to 1.26.0
   - **Products impact:** Dev Dependency upgrade