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

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

diff --git a/app/assets/javascripts/discourse/app/components/text-overflow.js b/app/assets/javascripts/discourse/app/components/text-overflow.js
deleted file mode 100644
index 201172f..0000000
--- a/app/assets/javascripts/discourse/app/components/text-overflow.js
+++ /dev/null
@@ -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();
-      }
-    });
-  }
-});
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-topic.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes-topic.hbs
index 6327790..9880694 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes-topic.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
index 1b224b7..4ab2dcd 100644
--- a/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs
+++ b/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|}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
index 5b40fe9..68b1800 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
+++ b/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'>
-                  {{#link-to 'user.badges' this.user}}
-                    {{i18n 'badges.more_badges' count=this.moreBadgesCount}}
+                <span class="more-user-badges">
+                  {{#link-to "user.badges" this.user}}
+                    {{i18n "badges.more_badges" count=this.moreBadgesCount}}
                   {{/link-to}}
                 </span>
               {{/if}}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 782415c..9387f2e 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/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 {
-        max-height: 3em;
-        overflow: hidden;
+      a {
+        @include line-clamp(2);
       }
       .d-icon {
         margin-right: 0.15em;
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index 92ca3a5..cf6db61 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/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 {
diff --git a/test/javascripts/components/text-overflow-test.js b/test/javascripts/components/text-overflow-test.js
deleted file mode 100644
index 3741e54..0000000
--- a/test/javascripts/components/text-overflow-test.js
+++ /dev/null
@@ -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",

[... diff too long, it was truncated ...]

GitHub sha: 706f1a62

This commit appears in #10196 which was approved by eviltrout. It was merged by awesomerobot.

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/overflow-css-bug-for-boxes-subcategory-list-style/156417/5