Remove Vanilla extends from MultiSelect.scss to fix duplicated form s…

…tyle issues
canonical · Mar 14, 2024 · bbf9f54 · bbf9f54
1 parent 1390c8b
commit bbf9f54
Showing 1 changed file with 140 additions and 18 deletions.
diff --git a/src/components/MultiSelect/MultiSelect.scss b/src/components/MultiSelect/MultiSelect.scss
@@ -1,10 +1,137 @@
 @use "sass:map";
 @import "vanilla-framework";
-@include vf-base;
-@include vf-p-lists;
 
 $dropdown-max-height: 20rem;
 
+// XXX: Temporarly we are duplicating some of the placeholders defined in Vanilla
+// to avoid conflict of including the duplicate of base Vanilla in React components.
+// This is a temporary solution until we have a better way to handle this.
+
+// as in Vanilla _base_placeholders.scss
+%vf-hide-text {
+  overflow: hidden;
+  text-indent: 110vw;
+  white-space: nowrap;
+}
+
+// as in Vanilla _base_placeholders.scss
+%icon {
+  $vertical-offset: 0.5px;
+  @extend %vf-hide-text;
+  @include vf-icon-size($default-icon-size);
+  background: {
+    position: center;
+    repeat: no-repeat;
+  }
+
+  display: inline-block;
+  font-size: inherit; // allow icons to match size of parent text element, when set in em
+  margin: 0;
+  padding: 0;
+  position: relative;
+  vertical-align: calc(
+    $vertical-offset + 0.5 * $cap-height - 0.5 * $default-icon-size
+  );
+}
+
+// as in Vanilla _base_forms.scss
+%vf-disabled-element {
+  cursor: not-allowed;
+  opacity: $disabled-element-opacity;
+}
+
+// as in Vanilla _base_forms.scss
+%vf-readonly-element {
+  color: $color-mid-light;
+  cursor: default;
+
+  &:hover,
+  &:active {
+    border-color: $color-mid-dark;
+    outline: none;
+  }
+}
+
+// as in Vanilla _base_forms.scss
+%bordered-text-vertical-padding {
+  padding-bottom: $input-vertical-padding;
+  padding-top: $input-vertical-padding;
+}
+
+// as in Vanilla _base_forms.scss
+%vf-input-elements {
+  @extend %bordered-text-vertical-padding;
+  @include vf-focus($color-focus, $bar-thickness, true);
+  @include vf-animation(#{background-color}, fast);
+
+  // stylelint-disable property-no-vendor-prefix
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  // stylelint-enable property-no-vendor-prefix
+  background-color: $colors--theme--background-inputs;
+  border: 0 solid transparent;
+  border-bottom: $input-border-thickness solid
+    $colors--theme--border-high-contrast;
+  border-radius: 0;
+  color: $colors--theme--text-default;
+  font-family: unquote($font-base-family);
+  font-size: 1rem;
+  font-weight: $font-weight-regular-text;
+  line-height: map-get($line-heights, default-text);
+  margin-bottom: $input-margin-bottom;
+  min-width: 8em;
+  padding-left: $sph--small;
+  padding-right: $sph--small;
+  vertical-align: baseline;
+  width: 100%;
+
+  &:hover {
+    background-color: $colors--theme--background-hover;
+  }
+
+  &:active,
+  &:focus {
+    background-color: $colors--theme--background-active;
+  }
+
+  option,
+  option:checked {
+    background-color: $colors--theme--background-alt;
+    color: $colors--theme--text-default;
+  }
+
+  option:checked:not(:disabled) {
+    background-color: $colors--theme--background-active;
+  }
+
+  &::placeholder {
+    color: $colors--theme--text-muted;
+  }
+
+  &.is-dense {
+    margin: 0 0 $spv-nudge-compensation 0;
+    padding-bottom: calc($spv-nudge - $spv--x-small - $input-border-thickness);
+    padding-top: calc($spv-nudge - $spv--x-small - $input-border-thickness);
+  }
+
+  &[disabled],
+  &[disabled="disabled"] {
+    @extend %vf-disabled-element;
+  }
+
+  &[readonly],
+  &[readonly="readonly"] {
+    @extend %vf-readonly-element;
+  }
+
+  @each $state, $color in $states {
+    &.has-#{$state} {
+      border: $input-border-thickness solid $color;
+    }
+  }
+}
+
 .multi-select {
   position: relative;
 }
@@ -37,12 +164,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 +186,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 +225,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 +235,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 +264,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"] {