Bump kolibri-design-system from 5.0.0-rc9 to 5.0.0-rc10

kolibri/plugins/learn/assets/src/views/ChannelRenderer/ContentModal.vue

@@ -10,7 +10,7 @@
       :style="bodyStyle"
     >
       <nav>
-        <UiToolbar
+        <KToolbar
           ref="toolbar"
           :showIcon="true"
           :style="toolbarStyle"
@@ -26,7 +26,7 @@
           <span :style="titleStyle">
             {{ title }}
           </span>
-        </UiToolbar>
+        </KToolbar>
       </nav>
 
       <main>
@@ -40,7 +40,7 @@
 
 <script>
 
-  import UiToolbar from 'kolibri-common/components/keen/UiToolbar';
+  import KToolbar from 'kolibri-design-system/lib/KToolbar';
   import Backdrop from 'kolibri-common/components/Backdrop';
   import ContentItem from './ContentItem';
 
@@ -49,7 +49,7 @@
     components: {
       Backdrop,
       ContentItem,
-      UiToolbar,
+      KToolbar,
     },
     props: {
       contentNode: {

kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue

@@ -1,7 +1,7 @@
 <template>
 
   <nav :aria-label="$tr('optionsLabel')">
-    <UiToolbar
+    <KToolbar
       style="z-index: 8"
       :style="contentSpecificStyles"
       class="toolbar"
@@ -171,7 +171,7 @@
           </CoreMenu>
         </span>
       </template>
-    </UiToolbar>
+    </KToolbar>
   </nav>
 
 </template>
@@ -185,7 +185,7 @@
   import { ContentNodeKinds } from 'kolibri/constants';
   import CoreMenuOption from 'kolibri-common/components/CoreMenu/CoreMenuOption';
   import ProgressIcon from 'kolibri-common/components/labels/ProgressIcon';
-  import UiToolbar from 'kolibri-common/components/keen/UiToolbar';
+  import KToolbar from 'kolibri-design-system/lib/KToolbar';
   import { validateLearningActivity } from 'kolibri/utils/validators';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import TimeDuration from 'kolibri-common/components/TimeDuration';
@@ -203,7 +203,7 @@
       CoreMenuOption,
       LearningActivityIcon,
       ProgressIcon,
-      UiToolbar,
+      KToolbar,
       TimeDuration,
       SuggestedTime,
       DeviceConnectionStatus,
@@ -466,7 +466,7 @@
         return this.allActions.slice(this.numBarActions);
       },
       contentSpecificStyles() {
-        // The prime difference is that Exercises won't have shadows under the UiToolbar
+        // The prime difference is that Exercises won't have shadows under the KToolbar
         // because the LessonMasteryBar lives under it and has its own drop shadow.
         if (this.contentKind === ContentNodeKinds.EXERCISE) {
           return { border: `1px solid ${this.$themeTokens.fineLine}`, 'box-shadow': 'none' };

packages/kolibri-common/components/BaseToolbar.vue

@@ -16,12 +16,12 @@
 <script>
 
   /**
-   * A simple toolbar with appearance derived from UiToolbar.
+   * A simple toolbar with appearance derived from KToolbar.
    * It behaves like a container that doesn't provide any implementation
    * of its internal content layout. Insted, its content area is expected
    * to be fully controlled from components that use this toolbar.
-   * It is suitable for toolbar layouts that don't conform to typical UiToolbar
-   * use-cases or when using UiToolbar may be possible but is complicated
+   * It is suitable for toolbar layouts that don't conform to typical KToolbar
+   * use-cases or when using KToolbar may be possible but is complicated
    * and requires many /deep/ overrides and fixes.
    */
   export default {

packages/kolibri-tools/lib/moduleMapping.js

@@ -57,7 +57,7 @@ module.exports = {
   'kolibri.coreVue.components.CoreLogo': 'kolibri/components/CoreLogo',
   'kolibri.coreVue.components.UiAlert': 'kolibri-design-system/lib/keen/UiAlert',
   'kolibri.coreVue.components.UiIconButton': 'kolibri-design-system/lib/keen/UiIconButton',
-  'kolibri.coreVue.components.UiToolbar': 'kolibri-common/components/keen/UiToolbar',
+  'kolibri.coreVue.components.UiToolbar': 'kolibri-design-system/lib/KToolbar',
   'kolibri.coreVue.components.PrivacyInfoModal': 'kolibri-common/components/PrivacyInfoModal',
   'kolibri.coreVue.components.UserTypeDisplay': 'kolibri-common/components/UserTypeDisplay',
   'kolibri.coreVue.components.Draggable': 'kolibri-common/components/sortable/Draggable',

packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue

@@ -7,7 +7,7 @@
     <header>
       <SkipNavigationLink />
 
-      <UiToolbar
+      <KToolbar
         :removeNavIcon="showAppNavView"
         type="clear"
         textColor="black"
@@ -107,7 +107,7 @@
             </span>
           </div>
         </template>
-      </UiToolbar>
+      </KToolbar>
     </header>
     <div
       v-if="showNavigation && !windowIsLarge && !showAppNavView"
@@ -130,7 +130,7 @@
   import { get } from '@vueuse/core';
   import { computed, getCurrentInstance } from '@vue/composition-api';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import UiToolbar from 'kolibri-common/components/keen/UiToolbar';
+  import KToolbar from 'kolibri-design-system/lib/KToolbar';
   import KIconButton from 'kolibri-design-system/lib/buttons-and-links/KIconButton';
   import themeConfig from 'kolibri/styles/themeConfig';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
@@ -145,7 +145,7 @@
   export default {
     name: 'AppBar',
     components: {
-      UiToolbar,
+      KToolbar,
       KIconButton,
       SkipNavigationLink,
       Navbar,

packages/kolibri/components/pages/AppBarPage/internal/SideNav.vue

@@ -528,8 +528,8 @@
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
-  // Matches the Keen-UI/UiToolbar box-shadow property
-  %ui-toolbar-box-shadow {
+  // Matches the KToolbar box-shadow property
+  %k-toolbar-box-shadow {
     box-shadow:
       0 0 2px rgba(0, 0, 0, 0.12),
       0 2px 2px rgba(0, 0, 0, 0.2);
@@ -574,7 +574,7 @@
   }
 
   .side-nav-header {
-    @extend %ui-toolbar-box-shadow;
+    @extend %k-toolbar-box-shadow;
 
     position: fixed;
     top: 0;

packages/kolibri/components/pages/ImmersivePage/internal/ImmersiveToolbar.vue

@@ -1,7 +1,7 @@
 <template>
 
   <header>
-    <UiToolbar
+    <KToolbar
       :title="appBarTitle"
       :textColor="isFullscreen ? 'black' : 'white'"
       type="clear"
@@ -56,23 +56,23 @@
       <template #actions>
         <slot name="actions"></slot>
       </template>
-    </UiToolbar>
+    </KToolbar>
   </header>
 
 </template>
 
 
 <script>
 
-  import UiToolbar from 'kolibri-common/components/keen/UiToolbar';
+  import KToolbar from 'kolibri-design-system/lib/KToolbar';
   import { validateLinkObject } from 'kolibri/utils/validators';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useNav from 'kolibri/composables/useNav';
 
   export default {
     name: 'ImmersiveToolbar',
     components: {
-      UiToolbar,
+      KToolbar,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -133,7 +133,7 @@
 
 <style lang="scss" scoped>
 
-  // only used when using a link. Otherwise, uses UiToolbar's styles
+  // only used when using a link. Otherwise, uses KToolbar's styles
   .icon {
     // copied from keen
     width: 3em;

packages/kolibri/package.json

@@ -64,7 +64,7 @@
     "frame-throttle": "^3.0.0",
     "intl": "^1.2.4",
     "kolibri-constants": "0.2.8",
-    "kolibri-design-system": "5.0.0-rc9",
+    "kolibri-design-system": "5.0.0-rc10",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "path-to-regexp": "1.9.0",

yarn.lock

@@ -2936,6 +2936,15 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+  version "2.2.3"
+  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
+  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  dependencies:
+    asap "^2.0.3"
+    inline-style-prefixer "^4.0.2"
+    string-hash "^1.1.3"
+
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -7808,13 +7817,13 @@ kolibri-constants@0.2.8:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.8.tgz#34ad2e2b87cf132ebe8dbaa9b64dc4a7bf261f8d"
   integrity sha512-ycXeK+ePw7zkiNtf+nX/yF5BO52+onoYS2V3d9HZDIvx7X6CDJPtMcypkXrK9aZ0JbWAegRFMD/lAd8q21cf4Q==
 
-kolibri-design-system@5.0.0-rc9:
-  version "5.0.0-rc9"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc9.tgz#ee17c0bc230f4f8406e60b3b342de70987180893"
-  integrity sha512-KerRkQY9C98A+R1mPM+umzsA/bupDjNI/p0d54K6/CDPHueX6vuO2xWkH4/5wMzbO9dv1UkiMJ9hm3XxD7/Lmw==
+kolibri-design-system@5.0.0-rc10:
+  version "5.0.0-rc10"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc10.tgz#8c92a1b097878a2a8e2f67cda76771914f77b7b8"
+  integrity sha512-Dkk5D5PunIm+qPsIMmgo06rjA0BkPZOOpeABuPgZmtpXcFwhpAP07VrLs0LhvFBdSFri3aJDXj/kj7HskXLhWg==
   dependencies:
     "@vue/composition-api" "1.7.2"
-    aphrodite "https://github.com/learningequality/aphrodite/"
+    aphrodite "git+https://github.com/learningequality/aphrodite.git"
     autosize "3.0.21"
     color "3.2.1"
     css-element-queries "1.2.0"