fix(MultiSelect): Apply a temporary fix for Vanilla includes (#1052)

package.json

@@ -85,7 +85,7 @@
     "ts-jest": "29.1.2",
     "tsc-alias": "1.8.8",
     "typescript": "5.3.3",
-    "vanilla-framework": "4.6.0",
+    "vanilla-framework": "4.9.0",
     "wait-on": "7.2.0",
     "webpack": "5.89.0"
   },

src/components/Icon/Icon.stories.scss

@@ -1,7 +1,4 @@
-@import "~vanilla-framework/scss/settings";
-@import "~vanilla-framework/scss/base_placeholders";
-@import "~vanilla-framework/scss/base_icon-definitions";
-@import "~vanilla-framework/scss/patterns_icons";
+@import "vanilla-framework";
 
 @include vf-b-placeholders;
 @include vf-p-icons-common;

src/components/MultiSelect/MultiSelect.scss

@@ -1,11 +1,15 @@
 @use "sass:map";
 @import "vanilla-framework";
-@include vf-base;
-@include vf-p-lists;
+@include vf-b-placeholders; // Vanilla base placeholders to extend from
 
 $dropdown-max-height: 20rem;
 
 .multi-select {
+  // Scope Vanilla form includes to multi select component only
+  // to avoid overriding any Vanilla base styles
+  // XXX: This is a workaround for https://github.com/canonical/vanilla-framework/issues/5030
+  @include vf-b-forms;
+
   position: relative;
 }
 
@@ -37,12 +41,12 @@ $dropdown-max-height: 20rem;
 }
 
 .multi-select__dropdown {
-  @extend %vf-bg--x-light;
-  @extend %vf-has-box-shadow;
+  background-color: $colors--theme--background-default;
+  box-shadow: $box-shadow;
+  color: $colors--theme--text-default;
   left: 0;
   max-height: $dropdown-max-height;
   overflow: auto;
-
   padding-top: $spv--small;
   position: absolute;
   right: 0;
@@ -59,14 +63,15 @@ $dropdown-max-height: 20rem;
 }
 
 .multi-select__dropdown-list {
-  @extend %vf-list;
-
+  list-style: none;
   margin-bottom: $sph--x-small;
+  margin-left: 0;
+  padding-left: 0;
 }
 
 .multi-select__footer {
-  background: white;
-  border-top: 1px solid $color-mid-light;
+  background: $colors--theme--background-default;
+  border-top: 1px solid $colors--theme--border-default;
   bottom: 0;
   display: flex;
   flex-wrap: wrap;
@@ -97,12 +102,6 @@ $dropdown-max-height: 20rem;
   }
 }
 
-.multi-select__dropdown-item-description {
-  @extend %small-text;
-
-  color: $color-mid-dark;
-}
-
 .multi-select__dropdown-button {
   border: 0;
   margin-bottom: 0;
@@ -113,7 +112,7 @@ $dropdown-max-height: 20rem;
 }
 
 .multi-select__selected-list {
-  background-color: $colors--light-theme--background-inputs;
+  background-color: $colors--theme--background-inputs;
   border-bottom: 0;
   margin: 0;
   overflow: hidden;
@@ -142,12 +141,12 @@ $dropdown-max-height: 20rem;
     transform: translateY(-50%) rotate(-180deg);
 
     @extend %icon;
-    @include vf-icon-chevron($color-mid-dark);
+    @include vf-icon-chevron-themed;
     @include vf-transition($property: transform, $duration: fast);
   }
 
   &[aria-expanded="true"] {
-    background-color: $colors--light-theme--background-hover;
+    background-color: $colors--theme--background-hover;
   }
 
   &[aria-expanded="false"] {

yarn.lock

@@ -14500,10 +14500,10 @@ validate-npm-package-name@^5.0.0:
   dependencies:
     builtins "^5.0.0"
 
-vanilla-framework@4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.6.0.tgz#61b93a2197eed0d869f85e1014dd9e67bacc355e"
-  integrity sha512-pRjJknqsL4CLA+ovLMlg7MhVh9nIcu7Ev81Z62gh3hAzUDIiZOUI2W9+B16XWv4QFmFxEOgQcfVi2cezLun9SQ==
+vanilla-framework@4.9.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/vanilla-framework/-/vanilla-framework-4.9.0.tgz#7566b42a22c2394ea1d7ea843d24ec305446cb3e"
+  integrity sha512-iTmvqWlsX0ic69VZ1sR9NPQtYRR9+iM679HZCl7SDQhMQSsEeJEQ6Ejjen3JN5a7YxiYmeIhxaLlmC4rExRT1w==
 
 vary@~1.1.2:
   version "1.1.2"