Issue-450: Made KTextTruncator

[muditchoudhary]

Description

This PR creates a KTextTruncator component that will be used to truncate texts and this PR creates a ktexttruncator.vue for the docs of the KTextTruncator component.

Issue addressed

Addresses #450

Before/after screenshots

Steps to test

1. Go to docs/pages/playground.vue
2. Add the KTextTruncator

<KTextTruncator text="Option (1) is simpler and sufficient as the first step, so we recommend starting that way. On certain occasions, it may be necessary to test an update in a product. If you're a contributor, you are welcome to try (2) as well, but typically we do not require contributors to do so, or we will provide support if needed." :maxLines="1" />

3. Run the server and visit http://localhost:4000/playground
yarn dev

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change has been added to the changelog

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Comments

[muditchoudhary]

@MisRob I tried to find any internal styling that is causing the ellipsis to render a little forward from the last word. But I could not find out what actually causing the issue.

Although the KTextTruncator works fine in the playground and other places in Kolibri
For example on the TopicsHeader.vue title.

[MisRob]

Thank you @muditchoudhary! We will have a look. Could you please rebase on top of the main branch and then retarget the PR there? Alternatively, you can let me know and can do so.

[muditchoudhary]

Thank you @muditchoudhary! We will have a look. Could you please rebase on top of the main branch and then retarget the PR there? Alternatively, you can let me know and can do so.

@MisRob I rebase successfully to the main. Hope it would be good to test.

[MisRob]

Great, thank you @muditchoudhary

[MisRob]

Thanks @muditchoudhary, code is looking good overall. I left few smaller notes. Also, could you please fix linting check? See package.json for linting commands.

As soon as this is resolved, I will try it out in Kolibri and see if I can observe the issue with the space between ellipsis and text that you mentioned some time ago. In any case, I think this PR won't be a culprit and should be good to go soon.

[MisRob]

I'll take care of the changelog check myself before we merge this, so no worries about that one

[muditchoudhary]

Thanks @muditchoudhary, code is looking good overall. I left few smaller notes. Also, could you please fix linting check? See package.json for linting commands.

As soon as this is resolved, I will try it out in Kolibri and see if I can observe the issue with the space between ellipsis and text that you mentioned some time ago. In any case, I think this PR won't be a culprit and should be good to go soon.

Welcome! I fixed the minor issues you mentioned in the review.

[MisRob]

@muditchoudhary Great work and engagement during the review process, thank you.

I tried to find any internal styling that is causing the ellipsis to render a little forward from the last word. But I could not find out what actually causing the issue.

I just tested the place you mentioned in #450 in this regard and everything is okay.

With that, I also confirm I was able to use KTextTruncator in the latest Kolibri successfully locally so all good!

Leaving only one minor non-blocking note.

[muditchoudhary]

@MisRob I added the condition you told me and tested it out, and there is no issue.

Also thanks for being helpful in the review.