Improved select input

src/system/components/data-input/FormItem/style.scss

@@ -26,4 +26,4 @@
   color: $text-color-soft;
   font-size: $font-size-base;
   display: block;
-}
+}

src/system/components/data-input/Select/Select.vue

@@ -134,10 +134,17 @@
           </li>
         </ul>
       </div>
-      <div
-        v-if="iconRight"
-        class="ds-select-icon-right">
-        <ds-icon :name="iconRight" />
+      <div class="ds-select-icon-right">
+        <ds-spinner
+          v-if="loading"
+          primary
+          size="small"
+          style="position: absolute"
+        />
+        <ds-icon
+          v-if="iconRight"
+          :name="iconRight"
+        />
       </div>
     </div>
   </ds-form-item>
@@ -233,13 +240,20 @@ export default {
       type: Boolean,
       default: true
     },
+    /**
+     * Should a loading indicator be shown?
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Function to filter the results
      */
     filter: {
       type: Function,
-      default: (option, searchString = '') => {
-        const value = option.value || option
+      default: (option, searchString = '', labelProp) => {
+        const value = option[labelProp] || option
         const searchParts = (typeof searchString === 'string') ? searchString.split(' ') : []
         return searchParts.every(part => {
           if (!part) {
@@ -270,7 +284,7 @@ export default {
         return this.options
       }
 
-      return this.options.filter((option) => this.filter(option, this.searchString))
+      return this.options.filter((option) => this.filter(option, this.searchString, this.labelProp))
     },
     pointerMax() {
       return this.filteredOptions.length - 1

src/system/components/data-input/Select/style.scss

@@ -4,9 +4,12 @@
 
 .ds-select {
   user-select: none;
+  transition: border-bottom 0ms;
+
   .ds-select-is-open & {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    border-bottom: 0;
   }
 }
 
@@ -127,7 +130,7 @@
   border-bottom-right-radius: $border-radius-base;
   visibility: hidden;
   opacity: 0;
-  transition: all $duration-short $ease-out;
+  transition: all $duration-short $ease-out, border-bottom 0ms;
   max-height: 240px;
   overflow: auto;
 
@@ -139,6 +142,7 @@
 
 .ds-select-dropdown-message {
   padding: $input-padding-vertical $space-x-small;
+  color: $text-color-disabled;
 }
 
 .ds-select-options {
@@ -148,11 +152,11 @@
 .ds-select-option {
   padding: $input-padding-vertical $space-x-small;
   cursor: pointer;
-  transition: all $duration-short $ease-out;
+  transition: all $duration-short $ease-out, border-bottom 0ms;
 
   &.ds-select-option-hover {
-    background-color: $background-color-primary;
-    color: $text-color-primary-inverse;
+    background-color: $background-color-softer;
+    color: $text-color-base;
   }
 }
 

src/system/components/data-input/shared/input.scss

@@ -14,9 +14,9 @@
     height: $input-height;
 
     color: $text-color-base;
-    background: $background-color-base;
+    background: $background-color-soft;
 
-    border: $input-border-size solid $border-color-base;
+    border: $input-border-size solid $border-color-softer;
     border-radius: $border-radius-base;
     outline: none;
     transition: all $duration-short $ease-out;