From 5c68c69933e92611bf5d0d15198b75a576a80ad6 Mon Sep 17 00:00:00 2001
From: Jason Mok <jjasonmok1@gmail.com>
Date: Mon, 27 May 2024 17:11:35 -0400
Subject: [PATCH] Replace TextTruncatorCss with KTextTruncator

Remove from apispecs only

Remove KTextTruncator from components

[pre-commit.ci lite] apply automatic fixes

Linting fixup

minor fixup
---
 kolibri/core/assets/src/core-app/apiSpec.js   |   2 -
 .../assets/src/views/TextTruncatorCss.vue     | 138 ------------------
 .../home/HomePage/ItemProgressDisplay.vue     |   4 +-
 .../LessonContentCard/index.vue               |   4 +-
 .../ChannelContentsSummary.vue                |   7 +-
 .../learn/assets/src/views/AlsoInThis.vue     |   4 +-
 .../AssessmentWrapper/LessonMasteryBar.vue    |   4 +-
 .../learn/assets/src/views/CardList.vue       |   6 +-
 .../learn/assets/src/views/ChannelCard.vue    |   6 +-
 .../views/HybridLearningContentCard/index.vue |   4 +-
 .../src/views/HybridLearningLessonCard.vue    |   4 +-
 .../assets/src/views/LearningActivityBar.vue  |   6 +-
 .../src/views/LibraryPage/UnPinnedDevices.vue |   9 +-
 .../src/views/TopicsPage/TopicsHeader.vue     |   6 +-
 .../views/TopicsPage/TopicsMobileHeader.vue   |   6 +-
 .../learn/assets/src/views/cards/BaseCard.vue |   4 +-
 .../src/views/cards/BaseChannelCard.vue       |   6 +-
 17 files changed, 24 insertions(+), 196 deletions(-)
 delete mode 100644 kolibri/core/assets/src/views/TextTruncatorCss.vue

diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index 8d9fc84b1c1..2b52157a571 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -102,7 +102,6 @@ import * as contentNode from '../utils/contentNodeUtils';
 import InteractionList from '../views/InteractionList';
 import ExamReport from '../views/ExamReport';
 import SlotTruncator from '../views/SlotTruncator';
-import TextTruncatorCss from '../views/TextTruncatorCss';
 import TimeDuration from '../views/TimeDuration';
 import SuggestedTime from '../views/SuggestedTime';
 
@@ -163,7 +162,6 @@ export default {
       InteractionList,
       ExamReport,
       SlotTruncator,
-      TextTruncatorCss,
       TimeDuration,
       MultiPaneLayout,
       CoreFullscreen,
diff --git a/kolibri/core/assets/src/views/TextTruncatorCss.vue b/kolibri/core/assets/src/views/TextTruncatorCss.vue
deleted file mode 100644
index 496d45a14ff..00000000000
--- a/kolibri/core/assets/src/views/TextTruncatorCss.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-
-  <!--
-    Text is wrapped in two `spans`s to allow parent components adding
-    padding style directly on `<TextTruncatorCss>` component no matter
-    of what truncating technique is used. Otherwise adding padding directly
-    would break when using technique (B) since text that should be truncated
-    would show in padding area.
-
-    Attributes are inherited by the inner `span` to emulate the same behavior
-    like if only one element would wrap the text to allow attributes be applied
-    as close as possible to the text element.
-
-    Some width information need to be provided to `<span>s` to allow `text-overflow`
-    calculate properly when ellipsis should be added.
-  -->
-  <span :style="{ display: 'inline-block', maxWidth: '100%' }">
-    <span
-      v-bind="$attrs"
-      :style="{ display: 'inline-block', maxWidth: '100%' }"
-      :class="$computedClass(truncate)"
-    >
-      {{ text }}
-    </span>
-  </span>
-
-</template>
-
-
-<script>
-
-  /**
-   * Truncates text to a certain number of lines
-   * and adds an ellipsis character "…"
-   *
-   * Internet Explorer note:
-   * Depending on length of words of the text, there might
-   * be a gap between the last visible word and "…"
-   */
-  export default {
-    name: 'TextTruncatorCss',
-    inheritAttrs: false,
-    props: {
-      text: {
-        type: String,
-        required: true,
-      },
-      maxLines: {
-        type: Number,
-        required: false,
-        default: 1,
-      },
-      /**
-       * Text line height in rem.
-       * Used only for Internet Explorer fallback.
-       */
-      lineHeightIE: {
-        type: Number,
-        required: false,
-        default: 1.4,
-      },
-    },
-    computed: {
-      truncate() {
-        /*
-          (A)
-          For one line, use standard ellipsis text overflow
-          that works well for such scenario
-        */
-        if (this.maxLines === 1) {
-          return {
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          };
-        }
-
-        // 54 is random number only to be able to define `supports` test condition
-        if ('CSS' in window && CSS.supports && CSS.supports('-webkit-line-clamp: 54')) {
-          /*
-            (B)
-            For multiple lines, use line clamp in browsers that support it
-            (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
-          */
-          return {
-            overflow: 'hidden',
-            display: '-webkit-box',
-            '-webkit-line-clamp': `${this.maxLines}`,
-            '-webkit-box-orient': 'vertical',
-            // needed to make line clamp work for very long word with no spaces
-            overflowWrap: 'break-word',
-          };
-        } else {
-          /*
-            (C)
-            Fallback for multiple lines in Internet Explorer and some older versions
-            of other browsers that don't support line clamp
-            (https://caniuse.com/mdn-css_properties_-webkit-line-clamp).
-            Calculate max height and add "..." in `::before` while covering it with
-            white rectangle defined in `::after` when text doesn't need to be truncated.
-            Adapted from https://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
-            and https://css-tricks.com/line-clampin/#the-hide-overflow-place-ellipsis-pure-css-way.
-          */
-          const ellipsisWidth = '1rem';
-          return {
-            overflow: 'hidden',
-            position: 'relative',
-            lineHeight: `${this.lineHeightIE}rem`,
-            maxHeight: `${this.maxLines * this.lineHeightIE}rem`,
-            // needed to make truncation work for very long word with no spaces
-            // `word-wrap` is a legacy name for `overflow-wrap` that needs to be used for IE
-            wordWrap: 'break-word',
-            // create space for "..."
-            paddingRight: ellipsisWidth,
-            marginRigth: `-${ellipsisWidth}`,
-            '::before': {
-              content: "'…'",
-              position: 'absolute',
-              right: 0,
-              bottom: 0,
-            },
-            // cover "..." with white rectangle when text
-            // doesn't need to be truncated
-            '::after': {
-              content: "''",
-              position: 'absolute',
-              right: 0,
-              width: ellipsisWidth,
-              height: '100%',
-              background: this.$themeTokens.surface,
-            },
-          };
-        }
-      },
-    },
-  };
-
-</script>
diff --git a/kolibri/plugins/coach/assets/src/views/home/HomePage/ItemProgressDisplay.vue b/kolibri/plugins/coach/assets/src/views/home/HomePage/ItemProgressDisplay.vue
index 33b958f9468..37b46c9a940 100644
--- a/kolibri/plugins/coach/assets/src/views/home/HomePage/ItemProgressDisplay.vue
+++ b/kolibri/plugins/coach/assets/src/views/home/HomePage/ItemProgressDisplay.vue
@@ -9,7 +9,7 @@
     <KFixedGrid numCols="4" class="wrapper">
       <KFixedGridItem span="3">
         <h3 class="title">
-          <TextTruncatorCss
+          <KTextTruncator
             :text="name"
           />
         </h3>
@@ -37,7 +37,6 @@
 <script>
 
   import { validateLinkObject } from 'kolibri.utils.validators';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import commonCoach from '../../common';
   import ProgressSummaryBar from '../../common/status/ProgressSummaryBar';
 
@@ -45,7 +44,6 @@
     name: 'ItemProgressDisplay',
     components: {
       ProgressSummaryBar,
-      TextTruncatorCss,
     },
     mixins: [commonCoach],
     props: {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
index 134094f4750..16ca7f659d5 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -39,7 +39,7 @@
           {{ message }}
         </div>
       </div>
-      <TextTruncatorCss
+      <KTextTruncator
         v-if="!windowIsSmall"
         :text="description"
         :maxLines="3"
@@ -66,7 +66,6 @@
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import { validateLinkObject, validateContentNodeKind } from 'kolibri.utils.validators';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import CardThumbnail from './CardThumbnail';
 
   export default {
@@ -74,7 +73,6 @@
     components: {
       CardThumbnail,
       ContentIcon,
-      TextTruncatorCss,
       CoachContentLabel,
     },
     setup() {
diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
index 63673e5a58f..099e4d54dfd 100644
--- a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
+++ b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
@@ -20,7 +20,7 @@
                 icon="unlistedchannel"
               />
             </template>
-            <TextTruncatorCss :text="channel.name" />
+            <KTextTruncator :text="channel.name" />
           </KLabeledIcon>
         </h1>
       </div>
@@ -83,15 +83,12 @@
 
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import plugin_data from 'plugin_data';
 
   export default {
     name: 'ChannelContentsSummary',
-    components: {
-      TextTruncatorCss,
-    },
+    components: {},
     mixins: [commonCoreStrings],
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
diff --git a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
index 7670def1546..da0a10c81b6 100644
--- a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
+++ b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
@@ -34,7 +34,7 @@
 
         <div class="content-meta">
           <div class="text-and-time">
-            <TextTruncatorCss
+            <KTextTruncator
               class="content-title"
               :text="content.title"
               :maxLines="2"
@@ -95,7 +95,6 @@
 <script>
 
   import isBoolean from 'lodash/isBoolean';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
@@ -109,7 +108,6 @@
     components: {
       LearningActivityIcon,
       ProgressBar,
-      TextTruncatorCss,
       TimeDuration,
       MissingResourceAlert,
     },
diff --git a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue
index 53aa3b73ad8..2086e4500e1 100644
--- a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue
+++ b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue
@@ -3,7 +3,7 @@
   <!-- z-index 7 - one beneath top menu bar for nested elevations -->
   <BaseToolbar style="z-index: 7;">
     <div class="container" :style="{ flexWrap: windowBreakpoint > 0 ? 'nowrap' : 'wrap' }">
-      <TextTruncatorCss
+      <KTextTruncator
         class="requirements"
         :text="coreString('shortExerciseGoalDescription', { count: requiredCorrectAnswers })"
       />
@@ -20,14 +20,12 @@
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import BaseToolbar from 'kolibri.coreVue.components.BaseToolbar';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
   export default {
     name: 'LessonMasteryBar',
     components: {
       BaseToolbar,
-      TextTruncatorCss,
     },
     mixins: [commonCoreStrings],
     setup() {
diff --git a/kolibri/plugins/learn/assets/src/views/CardList.vue b/kolibri/plugins/learn/assets/src/views/CardList.vue
index d327ba4692e..105c72cbedc 100644
--- a/kolibri/plugins/learn/assets/src/views/CardList.vue
+++ b/kolibri/plugins/learn/assets/src/views/CardList.vue
@@ -33,13 +33,13 @@
                 />
               </div>
               <h3 :style="{ marginTop: '4px', marginBottom: '4px' }">
-                <TextTruncatorCss :text="contentNode.title" :maxLines="1" />
+                <KTextTruncator :text="contentNode.title" :maxLines="1" />
               </h3>
               <p
                 v-if="contentNode.description"
                 style="font-size: 14px; margin-top: 4px; margin-bottom: 4px;"
               >
-                <TextTruncatorCss :text="contentNode.description" :maxLines="2" />
+                <KTextTruncator :text="contentNode.description" :maxLines="2" />
               </p>
               <div v-if="!isMobile" class="bottom-items">
                 <LearningActivityDuration
@@ -98,7 +98,6 @@
 <script>
 
   import { validateLinkObject } from 'kolibri.utils.validators';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { now } from 'kolibri.utils.serverClock';
   import { ContentLevels, Categories } from 'kolibri.coreVue.vuex.constants';
@@ -114,7 +113,6 @@
     name: 'CardList',
     components: {
       CardThumbnail,
-      TextTruncatorCss,
       LearningActivityLabel,
       LearningActivityDuration,
     },
diff --git a/kolibri/plugins/learn/assets/src/views/ChannelCard.vue b/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
index 0e1f0e00cba..88cec7d5cfd 100644
--- a/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
@@ -21,7 +21,7 @@
         dir="auto"
         :style="{ borderBottom: `1px solid ${$themeTokens.fineLine}` }"
       >
-        <TextTruncatorCss
+        <KTextTruncator
           :text="title"
           :maxLines="2"
           :showTooltip="true"
@@ -43,7 +43,7 @@
           span="3"
           alignment="auto"
         >
-          <TextTruncatorCss
+          <KTextTruncator
             :text="tagline"
             :maxLines="4"
             :showTooltip="false"
@@ -84,7 +84,6 @@
   import { validateLinkObject } from 'kolibri.utils.validators';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import ChannelThumbnail from './ChannelThumbnail';
 
   export default {
@@ -92,7 +91,6 @@
     components: {
       ChannelThumbnail,
       CoachContentLabel,
-      TextTruncatorCss,
     },
     setup() {
       const { windowGutter } = useKResponsiveWindow();
diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue
index 52965e8b72f..ba04ddb9983 100644
--- a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue
@@ -41,7 +41,7 @@
       />
       <div class="text" :style="{ color: $themeTokens.text }">
         <h3 class="title" dir="auto">
-          <TextTruncatorCss
+          <KTextTruncator
             :text="contentNode.title"
             :maxLines="1"
           />
@@ -64,7 +64,6 @@
 <script>
 
   import { validateLinkObject } from 'kolibri.utils.validators';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useChannels from '../../composables/useChannels';
   import LearningActivityLabel from '../LearningActivityLabel';
@@ -75,7 +74,6 @@
     name: 'HybridLearningContentCard',
     components: {
       CardThumbnail,
-      TextTruncatorCss,
       LearningActivityLabel,
     },
     mixins: [commonLearnStrings, commonCoreStrings],
diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue
index 8516cf79207..92d3ab131d6 100644
--- a/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue
@@ -18,7 +18,7 @@
         />
       </div>
       <h3 class="title">
-        <TextTruncatorCss
+        <KTextTruncator
           :text="content.title"
           :maxLines="1"
           :style="{ color: $themeTokens.text }"
@@ -41,7 +41,6 @@
 <script>
 
   import { validateLinkObject } from 'kolibri.utils.validators';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ProgressBar from './ProgressBar';
   import LearningActivityLabel from './LearningActivityLabel';
@@ -52,7 +51,6 @@
     name: 'HybridLearningLessonCard',
     components: {
       CardThumbnail,
-      TextTruncatorCss,
       LearningActivityLabel,
       ProgressBar,
     },
diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
index 9235eb04a11..87f2bfc4575 100644
--- a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
@@ -14,12 +14,12 @@
             :shaded="true"
           />
         </template>
-        <TextTruncatorCss
+        <KTextTruncator
           v-if="windowBreakpoint <= 3"
           :text="resourceTitle | truncateText(50)"
           :maxLines="1"
         />
-        <TextTruncatorCss
+        <KTextTruncator
           v-else
           :text="resourceTitle | truncateText(70)"
           :maxLines="1"
@@ -176,7 +176,6 @@
   import CoreMenuOption from 'kolibri.coreVue.components.CoreMenuOption';
   import ProgressIcon from 'kolibri.coreVue.components.ProgressIcon';
   import UiToolbar from 'kolibri.coreVue.components.UiToolbar';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import { validateLearningActivity } from 'kolibri.utils.validators';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
@@ -192,7 +191,6 @@
       CoachContentLabel,
       CoreMenu,
       CoreMenuOption,
-      TextTruncatorCss,
       LearningActivityIcon,
       ProgressIcon,
       UiToolbar,
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
index cdf0fe756ea..67d359d79a2 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
@@ -22,7 +22,7 @@
             v-if="!viewAll"
             class="device-details"
           >
-            <TextTruncatorCss
+            <KTextTruncator
               :text="deviceName"
               :maxLines="2"
               class="name"
@@ -39,7 +39,7 @@
             v-if="viewAll"
             class="name view-all"
           >
-            <TextTruncatorCss
+            <KTextTruncator
               :text="coreString('viewAll')"
               :maxLines="1"
             />
@@ -54,15 +54,12 @@
 
 <script>
 
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
   export default {
     name: 'UnPinnedDevices',
-    components: {
-      TextTruncatorCss,
-    },
+    components: {},
     mixins: [commonCoreStrings],
     setup() {
       const { windowGutter } = useKResponsiveWindow();
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue
index 1ad730dd77d..026e83b3604 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue
@@ -27,7 +27,7 @@
         :layout12="{ span: 12, alignment: 'auto' }"
       >
         <h1 class="title" data-test="header-title">
-          <TextTruncatorCss
+          <KTextTruncator
             :text="title"
             :maxLines="1"
           />
@@ -56,7 +56,7 @@
         :layout8="{ span: thumbnail ? 6 : 8, alignment: 'auto' }"
         :layout12="{ span: thumbnail ? 10 : 12, alignment: 'auto' }"
       >
-        <TextTruncatorCss
+        <KTextTruncator
           class="text-description"
           :text="description"
           :maxLines="4"
@@ -75,7 +75,6 @@
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import KBreadcrumbs from 'kolibri-design-system/lib/KBreadcrumbs';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import ChannelThumbnail from '../ChannelThumbnail';
   import commonLearnStrings from './../commonLearnStrings';
@@ -85,7 +84,6 @@
     components: {
       ChannelThumbnail,
       KBreadcrumbs,
-      TextTruncatorCss,
     },
     mixins: [commonCoreStrings, commonLearnStrings],
     setup() {
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsMobileHeader.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsMobileHeader.vue
index 6fd91195f90..13725a51622 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsMobileHeader.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsMobileHeader.vue
@@ -9,7 +9,7 @@
       :layout4="{ span: 3 }"
     >
       <h1 class="mobile-title" data-test="mobile-title">
-        <TextTruncatorCss
+        <KTextTruncator
           :text="topic.title"
           :maxLines="2"
         />
@@ -30,11 +30,9 @@
 
 <script>
 
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
-
   export default {
     name: 'TopicsMobileHeader',
-    components: { TextTruncatorCss },
+    components: {},
     props: {
       topic: {
         type: Object,
diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
index d99c31e497f..a5d89dfdf6d 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseCard.vue
@@ -28,7 +28,7 @@
       </div>
 
       <h3 class="title">
-        <TextTruncatorCss
+        <KTextTruncator
           dir="auto"
           :text="title"
           :maxLines="1"
@@ -62,7 +62,6 @@
 
 <script>
 
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import CardLink from './CardLink.vue';
 
   /**
@@ -75,7 +74,6 @@
   export default {
     name: 'BaseCard',
     components: {
-      TextTruncatorCss,
       CardLink,
     },
     props: {
diff --git a/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
index 3ed6c7d75f6..52771ac301a 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/BaseChannelCard.vue
@@ -6,7 +6,7 @@
     class="base-channel-card"
   >
     <h3 class="title">
-      <TextTruncatorCss
+      <KTextTruncator
         dir="auto"
         :text="channel.name"
         :maxLines="1"
@@ -34,7 +34,7 @@
         span="3"
         :style="{ textAlign: 'unset' }"
       >
-        <TextTruncatorCss
+        <KTextTruncator
           v-if="description"
           dir="auto"
           :text="description"
@@ -49,14 +49,12 @@
 
 <script>
 
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import ChannelThumbnail from '../thumbnails/ChannelThumbnail';
   import CardLink from './CardLink';
 
   export default {
     name: 'BaseChannelCard',
     components: {
-      TextTruncatorCss,
       ChannelThumbnail,
       CardLink,
     },