Skip to content

Add truncated text component

Alex Buijs requested to merge add-truncated-text-component into master

What does this MR do and why?

This adds a TruncatedText component for truncating text by number of lines.

Truncating based on lines instead of text length has some advantages:

  • we can do it by relying solely on CSS instead of JS
  • we don't have to strip HTML tags in order to count the characters
  • we don't end up with unclosed or cut off HTML tags when truncating based on characters
  • we always show exactly the same number of lines
  • all lines are always filled exactly to the end, which looks nicer

Screenshots or screen recordings

Screen_Recording_2023-04-14_at_16.08.34

How to set up and validate locally

  1. Login as admin and go to a Profile, Issue, MR or an Issue/MR comment by another user and report them for abuse
  2. Visit http://localhost:3000/admin/abuse_reports and visit the latest created report

OR

  1. Start storybooks: 
    yarn storybook:start
  2. Visit http://localhost:9002/?path=/story/vue-shared-truncated-text--default

Part of issue: https://gitlab.com/gitlab-org/modelops/anti-abuse/team-tasks/-/issues/158+

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Alex Buijs

Merge request reports