/deep/ to ::v-deep

[rtibbles]

Description

• Removes two unused /deep/ selectors in KSelect that were referencing non-existent classes
• Replaces the two remaining /deep/ selectors used in KDS with ::v-deep https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
• This behaves identically, but has the advantage of not breaking future versions of Sass (i.e. Dart Sass instead of Node Sass, which is deprecated)

Issue addressed

This is required as part of an extended yak shave in order to ultimately upgrade to newer NodeJS versions, where building Node Sass becomes increasingly more challenging.

Changelog

• /deep/ to ::v-deep #504
  • Description: Remove use of /deep/ in favour of ::v-deep
  • Products impact: none
  • Addresses: -
  • Components: -
  • Breaking: no
  • Impacts a11y: -
  • Guidance: -

Steps to test

1. Ensure that KSelect still functions as intended when disabled.
2. Ensure that the date input styling in the docs page for the date picker is still correct
3. Ensure that the Icon is still blue on the icons page showing what not to do

(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 is described in the changelog section above

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

After review

• The changelog item has been pasted to the CHANGELOG.md

Comments

[rtibbles]

Converting to draft - I can't make this comply with linting without fixing kolibri linting tools, it seems. Yak shave continues!

[MisRob]

Okay, let us know when the time comes ;)