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.