Remove Internet Explorer 11 specific logic from KTextTruncator

CHANGELOG.md

@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version 5.x.x (`develop` branch)
 
+- [#652]
+  - **Description:** KTextTruncator drops support for Internet Explorer 11
+  - **Products impact:** browser support update
+  - **Addresses:**  https://github.com/learningequality/kolibri-design-system/issues/643
+  - **Components:** KTextTruncator
+  - **Breaking:** yes
+  - **Impacts a11y:** -
+  - **Guidance:** To be used in newer versions of products that don't need to support IE11 (Kolibri 0.17 and higher)
+
+[#652]: https://github.com/learningequality/kolibri-design-system/pull/652/
+
 - [#590]
   - **Description:** Modal now shrinks when the content has a smaller height.
   - **Products impact:** bugfix.

lib/KTextTruncator.vue

@@ -32,10 +32,6 @@
   /**
    * 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: 'KTextTruncator',
@@ -56,15 +52,6 @@
         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() {
@@ -85,63 +72,19 @@
             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,
-            },
-          };
-        }
+        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',
+        };
       },
     },
   };