studio icon indicating copy to clipboard operation
studio copied to clipboard
verified publisher icon learningequality

[DO NOT MERGE UNTIL NEW KDS RELEASE] Almost complete icons migration from Vuetify to KDS

Open MisRob opened this issue 1 year ago • 2 comments

Summary

Description of the change(s) you made

Almost completes icons migration from Vuetify to KDS.

  • Replaces almost all remaining VIconWrappers with KIcon, KLabeledIcon, or KIconButton
  • Contains related icon maps and utility function changes
  • Replaces VTooltip by KTooltip at places where KDS icons usage requires it
  • Removes global registrations of Vuetify icon
  • Contains few minor UI fixes
  • Removes unused code
  • Installs https://github.com/learningequality/kolibri-design-system/pull/722 (to be replaced by the KDS release)
    • To fix RTL flip for the sidebar icon
    • To be able to teleport KTooltip to the teleport root element in few places where there seemed to be no other way to fix its parts being cut off (mostly related to being surrounded by Vuetify components)

See commit messages for details.

Note that the Thumbnail component still uses VIconWrapper. There are some features that we need to add first to KIcon to allow for the refactor. I will try to write what needs to happen to a KDS issue as soon as I have time for this agian. To prevent from using VIconWrapper except this one place, I moved it to the Thumbnail directory and left deprecation note.

Manual verification steps performed

I was gradually previewing all places where I worked.

Reviewer guidance

How can a reviewer test these changes?

  • Remove node_modules (otherwise you won't get updated KDS version in the installation step) and then run yarn install to ensure that https://github.com/learningequality/kolibri-design-system/pull/722 work is available
  • Do code changes make sense?
  • Can you observe any icon related regressions? Note that you don't need to preview all places, as agreed with @bjester, there will be thorough pre-release QA.

References

Follow-up to @BabyElias's https://github.com/learningequality/studio/pull/4502

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)~
  • [x] 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:

  • [x] Code is clean and well-commented
  • [x] 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 avatar Aug 11 '24 06:08 MisRob

Resolved latest conflicts and updated to the latest changes in https://github.com/learningequality/kolibri-design-system/pull/722

MisRob avatar Aug 28 '24 12:08 MisRob

Thank you @nucleogenesis

I think it'd be worth getting some significant QA done on this for regressions in any case.

Absolutely. I did my best to preview as I worked, but was returning to it repeatedly after longer periods of time, and now I also keep rebasing, so we will very likely find some trouble.

Should I do some manual QA on this? If so I can make time to do it tomorrow

That's a generous offer :) I think for developers it'd make more sense to manually preview a suspicious place in code. We talked with @bjester some time ago and agreed this would be rather task for the pre-release QA (which happens after merging to unstable if I understand correctly)

MisRob avatar Aug 29 '24 19:08 MisRob

Thanks @bjester, that's a good feedback. I will look into it all as soon as I'm back in November, since for some parts I think I will need more time.

MisRob avatar Oct 15 '24 15:10 MisRob

Apologies - I leaked the scope of work here and I'm also sorry to not get back to this in a reasonable time. Due to the few things that need more careful consideration, I will close this and work on opening smaller issues in a way that allows smoother migration (details discussed with @marcellamaki as part of prioritizing KDS to Studio work). I will reference the code changes and review from this PR when relevant so we can still use them.

MisRob avatar Jan 16 '25 17:01 MisRob