Refactored Icon to use KIcon

[BabyElias]

Description of the change(s) you made

• Refactored Icon to use KIcon for its internal implementation, updating the previous Vuetify-based implementation
• Updated occurrences of Icon throughout as per the new implementation
• Added the previous Vuetify-based implementation as a separate VIconWrapper to facilitate usage by other Vuetify components

Manual verification steps performed

Ran studio after making all the changes and verified manually if the icons are behaving as expected.

Does this introduce any tech-debt items?

A few occurrences of Icon could not be replaced, majorly due to problems associated with KTooltip that need to be fixed first before working on replacing them. They have been listed with proper reasons in this file.

---

Reviewer guidance

How can a reviewer test these changes?

Running the application locally.

Are there any risky areas that deserve extra testing?

Places where icons have been used under slow-internet testing conditions.

Comments

80% of the audit has been completed. Almost 30 icons remain to be audited now, out of 160 total. Since the review might take some time, I have created a draft PR for ensuring smooth review process.

---

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[MisRob]

Hi @BabyElias, great work overall. Thanks so much. I imagine it took lots of time and effort. Also thanks for the overview of places that still need some work. Taking into account that this PR is already large, you took steps to ensure that the remaining places won't break, some design decisions will be needed for some of the blocked issues, and neither of them is time pressing, I will plan for the remaining work later in the form of gradually opening new issues.

I tested several places, including those with more tricky elements like tooltips, and aside from my feedback, they all looked good to me. As agreed with @bjester, after we merge this work, there will be more thorough testing as part of the pre-release QA.

Finally, here's a summary of what needs to happen in this PR:

• I'm leaving several requests for updates, primarily regarding the use of KDS theme tokens and palette. I've explained in detail in some more complex places but left simpler ones without explanation. To understand why I suggest particular tokens or colors, you can refer to the KDS documentation on colors, where tokens are documented along with recommendations for their usage. And feel free to ask any clarifying questions.
• The tests need to be fixed before we can merge. Have you had a chance to look at what the problem is?
• Let's chat about a few things that I posted clarifying questions for

[BabyElias]

@MisRob About the testing suite, I fixed one of the failing tests out of 2 locally. This is the second one. I haven't made any change to this part of the file, but the error shown says that "sort" icon is not defined. However, sort is available in KDS. So, I am not sure how to resolve this one.

[MisRob]

but the error shown says that "sort" icon is not defined. However, [sort ](https://release-v3--kolibri-design-system.netlify.app/
icons/#token-sort)is available in KDS

@BabyElias Yes, I confirm the sort icon is available in KDS 3.0.1 which is installed on the unstable and in this PR too. However, I think we introduced it some time after you started your working branch. Can you try to update your locally installed packages by yarn install to see if it helps?

I can see the icon when running Studio on this branch

[BabyElias]

That worked! Thank youu so much

[bjester]

Thanks for taking this on! I think some attention is needed to RTL language flipping, but overall it looks great!

Some rtl-flip classes that still exist on some icons can probably be cleaned up. More info in my comments.

[MisRob]

It seems KIcon has some handling for RTL language flipping.

Good catch @bjester, thanks.

It is indeed the responsibility of KIcon and I would say it'd be best to remove the extra RTL logic for KIcons in this PR.

Even though I don't know about the specific cases in detail, I already saw situations in our products where we flipped something that was already flipped causing it not to be flipped at all :)!

In any case, I'm pretty sure that if we discover some issues after removing it, those need to be addressed in KDS and not in Studio anyways.

[BabyElias]

Made the required changes wrt rtl-flip.

[MisRob]

Thanks @BabyElias, I reviewed the additions all is looking good to me now. Good work!

Resolved

[MisRob]

here's the new KDS version with maxWidth prop on KTooltip you needed https://github.com/learningequality/kolibri-design-system/releases/tag/v3.2.0. You can just update package.json kolibri-design-system to 3.2.0 and run yarn install. Let me know if it's all good

@BabyElias In retrospect, I realized that we don't have the package.json and yarn.lock update related to the above committed in this PR. PR for that here #4528