add missing hover & active/open styles (#608)

add missing hover & active/open styles (#608)

Author: joshbuchea

src/components/MultiSelect/index.tsx

@@ -99,7 +99,11 @@ export default function MultiSelect<K, V>(props: MultiSelectProps<K, V>): JSX.El
         onBlur={onBlurHandler}
         tabIndex={0}
       >
-        <div id={id} className={`multi-select__values${disabled ? '--disabled' : ''}`} onClick={toggleOptions}>
+        <div
+          id={id}
+          className={`multi-select__values${disabled ? '--disabled' : ''}${openedOptions ? ' open' : ''}`}
+          onClick={toggleOptions}
+        >
           {selectedOptions.length > 0 ? (
             <PillList data={valuesPillData} onRemove={onRemove} onClick={onPillClick} className={pillListClassName} />
           ) : (

src/components/MultiSelect/styles.scss

@@ -64,6 +64,16 @@
     align-items: flex-start;
     justify-content: space-between;
 
+    &:hover {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
+    }
+
+    &.open {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-active;
+      outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
+      outline-offset: -$tw-sz-frm-fld-text-input-stroke;
+    }
+
     &--disabled {
       background-color: $tw-clr-bg;
       border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-tertiary;