Merge pull request #580 from rtibbles/remove_deprecation_warnings

Remove use of KResponsiveWindowMixin within KDS
learningequality · Mar 20, 2024 · 3e50547 · 3e50547
2 parents 59a56e0 + 9758591
commit 3e50547
Show file tree

Hide file tree

Showing 17 changed files with 178 additions and 115 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#580]
+  - **Description:** Remove use of KResponsiveWindowMixin internally
+  - **Products impact:** - none
+  - **Addresses:** -
+  - **Components:** KDateRange, KModal, KPageContainer, KGrid, KFixedGrid, KGridItem, KFixedGridItem
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** Updates all components to use the useKResponsiveWindow composable
+
+[#580]: https://github.com/learningequality/kolibri-design-system/pull/580
+
 - [#415]
   - **Description:** Upgrade purecss from 0.6.2 to 2.2.0
   - **Products impact:** Updates for base styling for all elements

diff --git a/docs/pages/layout/index.vue b/docs/pages/layout/index.vue
@@ -175,7 +175,7 @@
         </KGrid>
       </DocsShow>
       <p>
-        Note that an additional complexity not shown in the example above is that conditional styling sometimes needs to be applied using <code>KResponsiveWindowMixin</code> properties. See the source code of this page for details.
+        Note that an additional complexity not shown in the example above is that conditional styling sometimes needs to be applied using <code>useKResponsiveWindow</code> properties. See the source code of this page for details.
       </p>
       <p>
         Also note that grid containers have a <code>debug</code> property that will show helpful visual information about columns and grid items when set to <code>true</code>.
@@ -210,10 +210,13 @@
 
 <script>
 
-  import responsiveWindowMixin from '~~/lib/KResponsiveWindowMixin.js';
+  import useKResponsiveWindow from '~~/lib/composables/useKResponsiveWindow';
 
   export default {
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsLarge } = useKResponsiveWindow();
+      return { windowIsLarge };
+    },
   };
 
 </script>
diff --git a/jest.conf/testUtils.js b/jest.conf/testUtils.js
@@ -0,0 +1,21 @@
+import 'mock-match-media/jest-setup.cjs';
+import { setMedia } from 'mock-match-media';
+
+export const resizeWindow = (width, height = 768) => {
+  window.innerWidth = width;
+  window.innerHeight = height;
+  window.dispatchEvent(new Event('resize'));
+  setMedia({
+    width: `${width}px`,
+    height: `${height}px`,
+  });
+};
+
+export const testAfterResize = testFunction => {
+  let animationFrameId;
+  const assertAfterResize = () => {
+    testFunction();
+    animationFrameId = cancelAnimationFrame(animationFrameId);
+  };
+  animationFrameId = requestAnimationFrame(assertAfterResize);
+};
diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue
@@ -64,7 +64,6 @@
   import get from 'lodash/get';
   import debounce from 'lodash/debounce';
   import KModal from '../KModal';
-  import KResponsiveWindowMixin from '../KResponsiveWindowMixin';
   import KDateCalendar from './KDateCalendar';
   import KDateInput from './KDateInput';
   import { validationMachine, initialContext } from './ValidationMachine';
@@ -77,7 +76,6 @@
       KDateInput,
       KDateCalendar,
     },
-    mixins: [KResponsiveWindowMixin],
     props: {
       /**
        * Constrains the selection to after this date, disabling dates prior

diff --git a/lib/KModal.vue b/lib/KModal.vue
@@ -102,7 +102,7 @@
 <script>
 
   import debounce from 'lodash/debounce';
-  import KResponsiveWindowMixin from './KResponsiveWindowMixin';
+  import useKResponsiveWindow from './composables/useKResponsiveWindow';
 
   const SIZE_SM = 'small';
   const SIZE_MD = 'medium';
@@ -117,7 +117,10 @@
    */
   export default {
     name: 'KModal',
-    mixins: [KResponsiveWindowMixin],
+    setup() {
+      const { windowHeight, windowWidth } = useKResponsiveWindow();
+      return { windowHeight, windowWidth };
+    },
     props: {
       /**
        * The title of the modal

diff --git a/lib/KPageContainer.vue b/lib/KPageContainer.vue
@@ -14,11 +14,17 @@
 
 <script>
 
-  import KResponsiveWindowMixin from './KResponsiveWindowMixin';
+  import useKResponsiveWindow from './composables/useKResponsiveWindow';
 
   export default {
     name: 'KPageContainer',
-    mixins: [KResponsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       /**
        * Whether or not to disable internal container padding

diff --git a/lib/composables/useKResponsiveWindow/__tests__/index.spec.js b/lib/composables/useKResponsiveWindow/__tests__/index.spec.js
@@ -3,16 +3,7 @@ import { setMedia } from 'mock-match-media';
 import { defineComponent } from '@vue/composition-api';
 import { mount } from '@vue/test-utils';
 import useKResponsiveWindow from '../';
-
-const resizeWindow = (width, height = 768) => {
-  window.innerWidth = width;
-  window.innerHeight = height;
-  window.dispatchEvent(new Event('resize'));
-  setMedia({
-    width: `${width}px`,
-    height: `${height}px`,
-  });
-};
+import { resizeWindow, testAfterResize } from '../../../../jest.conf/testUtils';
 
 const TestComponent = () =>
   defineComponent({
@@ -36,7 +27,6 @@ describe('useKResponsiveWindow composable', () => {
     resizeWindow(1700);
     const wrapper = mount(TestComponent());
     await wrapper.vm.$nextTick();
-    let animationFrameId;
     const checkWindowProperties = () => {
       expect(wrapper.vm.windowWidth).toEqual(1700);
       expect(wrapper.vm.windowHeight).toEqual(768);
@@ -48,106 +38,89 @@ describe('useKResponsiveWindow composable', () => {
       expect(wrapper.vm.windowIsLarge).toEqual(true);
       expect(wrapper.vm.windowIsMedium).toEqual(false);
       expect(wrapper.vm.windowIsSmall).toEqual(false);
-      animationFrameId = cancelAnimationFrame(animationFrameId);
     };
-    animationFrameId = requestAnimationFrame(checkWindowProperties);
+    testAfterResize(checkWindowProperties);
   });
 
   describe('check if windowBreakpoint is set on width change', () => {
     it('windowBreakpoint is 0 if width <= 480px', async () => {
       resizeWindow(400);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowBreakpoint = () => {
         expect(wrapper.vm.windowBreakpoint).toEqual(0);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
+      testAfterResize(checkWindowBreakpoint);
     });
 
     it('windowBreakpoint is 1 if 480px < width <= 600px', async () => {
       resizeWindow(540);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowBreakpoint = () => {
         expect(wrapper.vm.windowBreakpoint).toEqual(1);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
+      testAfterResize(checkWindowBreakpoint);
     });
 
     it('windowBreakpoint is 2 if 600px < width <= 840px', async () => {
       resizeWindow(800);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowBreakpoint = () => {
         expect(wrapper.vm.windowBreakpoint).toEqual(2);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
+      testAfterResize(checkWindowBreakpoint);
     });
 
     it('windowBreakpoint is 3 if 840px < width <= 944px', async () => {
       resizeWindow(944);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowBreakpoint = () => {
         expect(wrapper.vm.windowBreakpoint).toEqual(3);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
+      testAfterResize(checkWindowBreakpoint);
     });
 
     it('windowBreakpoint is 4 if 944px < width <= 1264px', async () => {
       resizeWindow(1264);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowBreakpoint = () => {
         expect(wrapper.vm.windowBreakpoint).toEqual(4);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
+      testAfterResize(checkWindowBreakpoint);
     });
 
     it('windowBreakpoint is 5 if 1264px < width <= 1424px', async () => {
       resizeWindow(1424);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowBreakpoint = () => {
         expect(wrapper.vm.windowBreakpoint).toEqual(5);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
+      testAfterResize(checkWindowBreakpoint);
     });
 
     it('windowBreakpoint is 6 if 1424px < width <= 1584px', async () => {
       resizeWindow(1584);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowBreakpoint = () => {
         expect(wrapper.vm.windowBreakpoint).toEqual(6);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
+      testAfterResize(checkWindowBreakpoint);
     });
 
     it('windowBreakpoint is 7 if width >= 1601px', async () => {
       resizeWindow(1800);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowBreakpoint = () => {
         expect(wrapper.vm.windowBreakpoint).toEqual(7);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
+      testAfterResize(checkWindowBreakpoint);
     });
   });
 
@@ -156,12 +129,10 @@ describe('useKResponsiveWindow composable', () => {
       resizeWindow(601);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowIsSmall = () => {
         expect(wrapper.vm.windowIsSmall).toEqual(false);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowIsSmall);
+      testAfterResize(checkWindowIsSmall);
     });
 
     it('windowIsSmall is true if width <= 600px', async () => {
@@ -184,12 +155,10 @@ describe('useKResponsiveWindow composable', () => {
       resizeWindow(700);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowIsMedium = () => {
         expect(wrapper.vm.windowIsMedium).toEqual(true);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowIsMedium);
+      testAfterResize(checkWindowIsMedium);
     });
   });
 
@@ -205,12 +174,10 @@ describe('useKResponsiveWindow composable', () => {
       resizeWindow(841);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowIsLarge = () => {
         expect(wrapper.vm.windowIsLarge).toEqual(true);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowIsLarge);
+      testAfterResize(checkWindowIsLarge);
     });
   });
 
@@ -253,24 +220,20 @@ describe('useKResponsiveWindow composable', () => {
       resizeWindow(500, 500);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowProperties = () => {
         expect(wrapper.vm.windowBreakpoint).toEqual(1);
         expect(wrapper.vm.windowGutter).toEqual(16);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowProperties);
+      testAfterResize(checkWindowProperties);
     });
     it('windowGutter is 24px if windowIsSmall is false(width > 600px)', async () => {
       resizeWindow(841);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      let animationFrameId;
       const checkWindowGutter = () => {
         expect(wrapper.vm.windowGutter).toEqual(24);
-        animationFrameId = cancelAnimationFrame(animationFrameId);
       };
-      animationFrameId = requestAnimationFrame(checkWindowGutter);
+      testAfterResize(checkWindowGutter);
     });
   });
 });
diff --git a/lib/grids/KFixedGrid.vue b/lib/grids/KFixedGrid.vue
@@ -17,7 +17,7 @@
 
 <script>
 
-  import KResponsiveWindowMixin from '../KResponsiveWindowMixin';
+  import useKResponsiveWindow from '../composables/useKResponsiveWindow';
   import Overlay from './Overlay';
   import { validateGutter } from './common';
 
@@ -27,7 +27,10 @@
   export default {
     name: 'KFixedGrid',
     components: { Overlay },
-    mixins: [KResponsiveWindowMixin],
+    setup() {
+      const { windowGutter } = useKResponsiveWindow();
+      return { windowGutter };
+    },
     props: {
       /**
        * The number of columns. Can be an integer between `2` and `12`

diff --git a/lib/grids/KFixedGridItem.vue b/lib/grids/KFixedGridItem.vue
@@ -15,15 +15,13 @@
 
 <script>
 
-  import KResponsiveWindowMixin from '../KResponsiveWindowMixin';
   import { validateAlignment, validateSpan } from './common';
 
   /**
    * Basic fixed grid item
    */
   export default {
     name: 'KFixedGridItem',
-    mixins: [KResponsiveWindowMixin],
     props: {
       /**
        * Number of grid columns that the item should span.

diff --git a/lib/grids/KGrid.vue b/lib/grids/KGrid.vue
@@ -15,7 +15,7 @@
 
 <script>
 
-  import KResponsiveWindowMixin from '../KResponsiveWindowMixin';
+  import useKResponsiveWindow from '../composables/useKResponsiveWindow';
   import KFixedGrid from './KFixedGrid';
   import { validateGutter } from './common';
 
@@ -29,7 +29,10 @@
   export default {
     name: 'KGrid',
     components: { KFixedGrid },
-    mixins: [KResponsiveWindowMixin],
+    setup() {
+      const { windowIsSmall, windowIsMedium } = useKResponsiveWindow();
+      return { windowIsSmall, windowIsMedium };
+    },
     props: {
       /**
        * The size of column gutters in pixels. If not provided, the gutter is set to `16px`