DEV: Remove text-ellipsis component and use CSS line-clamp instead (#10196)

app/assets/javascripts/discourse/app/components/text-overflow.js

@@ -1,27 +0,0 @@
-import { next } from "@ember/runloop";
-import { htmlSafe } from "@ember/template";
-import Component from "@ember/component";
-
-export default Component.extend({
-  text: null,
-
-  init() {
-    this._super(...arguments);
-
-    this.set("text", htmlSafe(this.text));
-  },
-
-  didInsertElement() {
-    this._super(...arguments);
-
-    next(null, () => {
-      const $this = $(this.element);
-
-      if ($this) {
-        $this.find("br").replaceWith(" ");
-        $this.find("hr").remove();
-        $this.ellipsis();
-      }
-    });
-  }
-});

app/assets/javascripts/discourse/app/templates/components/categories-boxes-topic.hbs

@@ -1,5 +1,5 @@
 {{d-icon topicStatusIcon}}
 
 <a href={{topic.lastUnreadUrl}} class="title">
-  {{text-overflow class="overflow" text=topic.fancyTitle}}
+  {{html-safe topic.fancyTitle}}
 </a>

app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs

@@ -27,7 +27,7 @@
 
         {{#unless c.isMuted}}
           <div class="description">
-            {{text-overflow class="overflow" text=c.description_excerpt}}
+            {{html-safe c.description_excerpt}}
           </div>
           {{#if c.isGrandParent}}
             {{#each c.subcategories as |subcategory|}}

app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs

@@ -130,9 +130,9 @@
               <div class="suspension-date">
                 {{d-icon "ban"}}
                 {{#if this.user.suspendedForever}}
-                  {{i18n 'user.suspended_permanently'}}
+                  {{i18n "user.suspended_permanently"}}
                 {{else}}
-                  {{i18n 'user.suspended_notice' date=this.user.suspendedTillDate}}
+                  {{i18n "user.suspended_notice" date=this.user.suspendedTillDate}}
                 {{/if}}
               </div>
               <div class="suspension-reason">
@@ -142,7 +142,7 @@
             </div>
           {{else}}
             {{#if this.user.bio_excerpt}}
-              <div class="bio">{{text-overflow class="overflow" text=this.user.bio_excerpt}}</div>
+              <div class="bio">{{html-safe this.user.bio_excerpt}}</div>
             {{/if}}
           {{/if}}
         </div>
@@ -165,7 +165,7 @@
                 {{d-icon "globe"}}
                 {{#if this.linkWebsite}}
                   {{!-- template-lint-disable  --}}
-                  <a href="{{this.user.website}}" rel="noopener {{unless this.removeNoFollow 'nofollow ugc'}}"
+                  <a href="{{this.user.website}}" rel="noopener {{unless this.removeNoFollow "nofollow ugc"}}"
                    target="_blank">{{this.user.website_name}}</a>
                 {{else}}
                   <span title={{this.user.website}}>{{this.user.website_name}}</span>
@@ -193,17 +193,17 @@
         {{#unless this.user.profile_hidden}}
           <div class="metadata">
             {{#if this.user.last_posted_at}}
-              <h3><span class='desc'>{{i18n 'last_post'}}</span>
+              <h3><span class="desc">{{i18n "last_post"}}</span>
                 {{format-date this.user.last_posted_at leaveAgo="true"}}</h3>
             {{/if}}
-            <h3><span class='desc'>{{i18n 'joined'}}</span>
+            <h3><span class="desc">{{i18n "joined"}}</span>
               {{format-date this.user.created_at leaveAgo="true"}}</h3>
             {{#if this.user.time_read}}
               <h3 title="{{this.timeReadTooltip}}">
-                <span class='desc'>{{i18n 'time_read'}}</span>
+                <span class="desc">{{i18n "time_read"}}</span>
                 {{format-duration this.user.time_read}}
                 {{#if this.showRecentTimeRead}}
-                  <span>({{i18n 'time_read_recently' time_read=this.recentTimeRead}})</span>
+                  <span>({{i18n "time_read_recently" time_read=this.recentTimeRead}})</span>
                 {{/if}}
               </h3>
             {{/if}}
@@ -253,9 +253,9 @@
                 {{user-badge badge=ub.badge user=this.user}}
               {{/each}}
               {{#if this.showMoreBadges}}
-                <span class='more-user-badges'>
+                <span class="more-user-badges">
-                  {{#link-to 'user.badges' this.user}}
+                  {{#link-to "user.badges" this.user}}
-                    {{i18n 'badges.more_badges' count=this.moreBadgesCount}}
+                    {{i18n "badges.more_badges" count=this.moreBadgesCount}}
                   {{/link-to}}
                 </span>
               {{/if}}

app/assets/stylesheets/common/base/category-list.scss

@@ -120,11 +120,12 @@
   }
 
   .description {
-    padding-bottom: 1em;
+    margin-bottom: 1em;
     text-align: center;
     font-size: $font-0;
     color: dark-light-choose($primary-medium, $secondary-high);
     position: relative;
+    @include line-clamp(4);
 
     //  allow clicks to fall through the description text to the category below...
     pointer-events: none;
@@ -263,9 +264,8 @@
       padding: 4px 0;
       display: flex;
       align-items: baseline;
-      .overflow {
+      a {
-        max-height: 3em;
+        @include line-clamp(2);
-        overflow: hidden;
       }
       .d-icon {
         margin-right: 0.15em;

app/assets/stylesheets/common/components/user-card.scss

@@ -57,6 +57,9 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
     a.card-huge-avatar {
       outline: none;
     }
+    .bio {
+      @include line-clamp(2);
+    }
   }
   &.no-bg {
     .card-content {

test/javascripts/components/text-overflow-test.js

@@ -1,32 +0,0 @@
-import componentTest from "helpers/component-test";
-
-moduleForComponent("text-overflow", { integration: true });
-
-componentTest("default", {
-  template: `
-    <style>
-      .overflow {
-        max-height: 40px;
-        overflow: hidden;
-        width: 500px;
-      }
-    </style>
-
-    <div>{{text-overflow class='overflow' text=text}}</div>`,
-
-  beforeEach() {
-    this.set(
-      "text",
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nFusce convallis faucibus tortor quis vestibulum.<br>\nPhasellus pharetra dolor eget imperdiet tempor.<br>\nQuisque hendrerit magna id consectetur rutrum.<br>\nNulla vel tortor leo.<br>\nFusce ullamcorper lacus quis sodales ornare.<br>"
-    );
-  },
-
-  test(assert) {
-    const text = find(".overflow")
-      .text()
-      .trim();
-
-    assert.ok(text.startsWith("Lorem ipsum dolor sit amet"));
-    assert.ok(text.endsWith("..."));
-  }
-});