Introduce KTextTruncator component for text truncation

[MisRob]

🌱 Are you new to the codebase? Welcome and please see the contributing guidelines.

Expected behavior

Whenever relevant, Studio should use KTextTruncator component from the Kolibri Design System (KDS) to achieve text truncation.

One example is text truncation in the ClipboardChip.vue but there will likely be more places.

Current Behavior

Studio currently uses its own implementation for text truncation.

Impact

This is part of migrating Studio to KDS. KTextTruncator provides a robust and well-tested solution for text truncation and will eliminate the need to re-implement truncation.

Trade-Offs

Not aware of any.

Guidance

• To locate the truncation that needs to be replaced, search for any CSS properties and values related to truncating, such as ellipsis.
• For more information on using KTextTruncator, refer to its documentation. If working with the design system for the first time, study how other K components are used in Studio.
• Note that depending on the context (e.g. current usage of the Vuetify library), in some places it may make more sense to not use KTextTruncator. If that's the case, please mention reasons for not using it in your pull request.

Acceptance Criteria

• [ ] The codebase has been thoroughly searched for all occurrences of truncation.
• [ ] The custom implementation of truncation has been replaced with KTextTruncator wherever relevant.
• [ ] The places where KTextTruncator has been introduced have been visually reviewed and do not have any regressions.
• [ ] A list of places where KTextTruncator is better not to be used has been provided in the pull request.

[lokesh-sagi125]

hey @MisRob can you assign this to me?

[AlexVelezLl]

Hey @lokesh-sagi125! Thanks for your interest in contributing to this issue 👐. I just assigned it to you. Please let us know if you have any questions (:.

[MisRob]

Hi @lokesh-sagi125, are you working on this or planning to? Just to know if we should keep the assignment or not.

[sr376]

Hi @MisRob can you assign this issue to me.

[lokesh-sagi125]

hey @MisRob sorry for the inactivity , i just raised the PR's for the issues in KDS and Kolibri, i am willing to work on this issue now

[MisRob]

Hi @sr376 and @lokesh-sagi125. I will assign this back to @lokesh-sagi125.

@sr376 Welcome and thank you for volunteering! There are other contributing opportunities in three repositories. See the contributing guidelines including links to issues suitable for contribution for each repository here:

• Kolibri Contributing Guidelines
• Kolibri Design System Contributing Guidelines
• Studio Contributing Guidelines

You can also see the list of unassigned "help wanted" or "good first issue" issues across all repositories.

[lokesh-sagi125]

hey @MisRob how can i test the changes i made to the frontend in studio , can you link the documentation page if there is one, cant seem to find it  😅 .

[AlexVelezLl]

Hi @lokesh-sagi125! Here you can find more information about how to test these KDS updates in Studio: https://github.com/learningequality/kolibri-design-system/blob/develop/dev_docs/03_how_to_update_library.md#2-preview-updates-in-a-product. Let me know any question :)

[lokesh-sagi125]

hey @AlexVelezLl i have been getting this error since i ran git reset--hard i was able to run the yarn run services and yarn run devsetup commands before but now i am able to run only yarn devserver how can i fix this issue?

[AlexVelezLl]

Hey @lokesh-sagi125! Can you confirm that you are indeed in the Studio folder? I see a kolibri there.

[lokesh-sagi125]

sorry that was the wrong ss

[AlexVelezLl]

Could you try running yarn install again @lokesh-sagi125?

[lokesh-sagi125]

hey @AlexVelezLl i was able to fix the issue i was facing , i was using yarn@4 which was having problems downloading the aphrodite repo , i switched to yarn@1 and the issue was fixed. thank you:)

[lokesh-sagi125]

Hi @MisRob, I am currently giving my end-semester tests, so is it fine if I raise a PR by the end of this month? Please reassign if this issue needs to be resolved before then. Thank you:)

[MisRob]

Hi @lokesh-sagi125, first wishing you all the best for the tests :)!

Thanks a lot for letting us know. It's absolutely fine you returned to this issue later. It's not time sensitive, so happy to have it wait for you as it sounds you're interested.

[lokesh-sagi125]

Thank you @MisRob. I will get back to the issue as soon as my tests end, same with the issue in Kolibri :)

[MisRob]

Hi @lokesh-sagi125, I wanted to mention that Learning Equality will be closed from December 23 to January 5

[lokesh-sagi125]

yes @MisRob i will try to close all my open issues before the 23rd.

[MisRob]

No need to @lokesh-sagi125 :) I'm posting the message so you know we won't be responding until later in January.

[MisRob]

@lokesh-sagi125 I doubt we'd be able to review this week anyway, some of us are already slowly transitioning to time off, me included :) Be well and hope to see you around next year!

[lokesh-sagi125]

yes, @MisRob, I wouldn't want to interrupt your time off . Happy holidays🎄🎊 :)

[karankoder]

Hi @MisRob, is @lokesh-sagi125 still working on this issue? If not, I’d be happy to take it up. Please let me know if I can be assigned to it

[lokesh-sagi125]

hey @karankoder i am working on it .

[karankoder]

Hi @lokesh-sagi125 , Thanks for letting me know! I'll look for another issue to contribute to.

[lokesh-sagi125]

hey @MisRob , i was working with the ActionLink and the underline was not being supplied due to the nested span used by KTextTruncator can i modify the component to accept an extra prop for the underline?

[MisRob]

Hi @lokesh-sagi125, thanks for asking, I appreciate it. Unless we don't find another way around it, I'd be happier if we could explore more robust approaches that don't require adding such a specific prop because of just one style. Could you try to play around with KTextTruncator to make its inner text inherit styles, for example via https://developer.mozilla.org/en-US/docs/Web/CSS/inherit or similar approach?

[iamravi-hi]

@MisRob Helloo. can you assign this to me?

[LianaHarris360]

Hi @iamravi-hi this issue has already been assigned and is unavailable. You're welcome to find an unassigned 'help wanted' issue instead. There might not be many available issues right now so it's best to wait and keep an eye on the list. We label new ones on a weekly basis.

[iamravi-hi]

@LianaHarris360 ok. will be waiting for something to turn up. Thanks!!

[MisRob]

During the process, we found out KDS needs some updates.

I will take a different strategy and open issues as part of https://github.com/learningequality/studio/issues/5060.

Thanks for looking into it @lokesh-sagi125.