Update form input css

changelog/unreleased/enhancement-beautify-form-inputs

@@ -0,0 +1,5 @@
+Enhancement: Beautify form inputs
+
+We've updated the styling of text inputs.
+
+https://github.com/owncloud/web/pull/8554

packages/design-system/src/components/OcAvatar/OcAvatar.vue

@@ -147,6 +147,10 @@ export default defineComponent({
     height: auto;
     border-radius: 50%;
   }
+
+  .avatarInitials {
+    color: white !important;
+  }
 }
 </style>
 

packages/design-system/src/components/OcSearchBar/OcSearchBar.vue

@@ -325,13 +325,14 @@ export default defineComponent({
 
   &-input {
     border-radius: 25px !important;
-    border: 1px solid var(--oc-color-input-border) !important;
+    border: none;
     color: var(--oc-color-input-text-muted) !important;
 
     &:focus {
       background-color: var(--oc-color-input-bg);
       border-color: var(--oc-color-input-text-default);
       color: var(--oc-color-input-text-default);
+      background-image: none;
     }
 
     &::-ms-clear,

packages/design-system/src/components/OcSelect/OcSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label :for="id" v-text="label" />
+    <label :for="id" class="oc-label" v-text="label" />
     <vue-select
       ref="select"
       :disabled="disabled"
@@ -24,6 +24,33 @@
         <oc-spinner v-if="loading" />
       </template>
     </vue-select>
+
+    <div
+      v-if="showMessageLine"
+      class="oc-text-input-message"
+      :class="{
+        'oc-text-input-description': !!descriptionMessage,
+        'oc-text-input-warning': !!warningMessage,
+        'oc-text-input-danger': !!errorMessage
+      }"
+    >
+      <oc-icon
+        v-if="messageText !== null && !!descriptionMessage"
+        name="information"
+        size="small"
+        fill-type="line"
+      />
+
+      <span
+        :id="messageId"
+        :class="{
+          'oc-text-input-description': !!descriptionMessage,
+          'oc-text-input-warning': !!warningMessage,
+          'oc-text-input-danger': !!errorMessage
+        }"
+        v-text="messageText"
+      />
+    </div>
   </div>
 </template>
 
@@ -124,6 +151,36 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+
+    /**
+     * A warning message which is shown below the select.
+     */
+    warningMessage: {
+      type: String,
+      default: null
+    },
+    /**
+     * An error message which is shown below the select.
+     */
+    errorMessage: {
+      type: String,
+      default: null
+    },
+    /**
+     * Whether or not vertical space below the select should be reserved for a one line message,
+     * so that content actually appearing there doesn't shift the layout.
+     */
+    fixMessageLine: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * A description text which is shown below the select field.
+     */
+    descriptionMessage: {
+      type: String,
+      default: null
     }
   },
   emits: ['search:input', 'update:modelValue'],
@@ -136,6 +193,28 @@ export default defineComponent({
         additionalAttrs['label'] = this.optionLabel
       }
       return { ...this.$attrs, ...additionalAttrs }
+    },
+    showMessageLine() {
+      return (
+        this.fixMessageLine ||
+        !!this.warningMessage ||
+        !!this.errorMessage ||
+        !!this.descriptionMessage
+      )
+    },
+    messageText() {
+      if (this.errorMessage) {
+        return this.errorMessage
+      }
+
+      if (this.warningMessage) {
+        return this.warningMessage
+      }
+
+      return this.descriptionMessage
+    },
+    messageId() {
+      return `${this.id}-message`
     }
   },
 
@@ -162,51 +241,81 @@ export default defineComponent({
 
 <style lang="scss">
 .vs--disabled {
+  cursor: not-allowed;
+
   .vs__clear,
   .vs__dropdown-toggle,
   .vs__open-indicator,
   .vs__search,
   .vs__selected {
     background-color: var(--oc-color-background-muted) !important;
-    color: var(--oc-color-text-muted) !important;
-    cursor: default;
+    color: var(--oc-color-input-text-muted) !important;
+    pointer-events: none;
   }
-}
 
-.vs--single.vs--open .vs__selected {
-  opacity: 0.8 !important;
+  .vs__actions {
+    opacity: 0.3;
+  }
 }
 
 .oc-select {
-  background-image: none !important;
-  line-height: 24px !important;
+  line-height: normal;
+  padding: 1px 0;
   color: var(--oc-color-input-text-default);
 
   .vs {
-    &__search,
-    &__selected {
+    &__search {
       color: var(--oc-color-input-text-default);
     }
-    &__selected {
-      background-color: var(--oc-color-background-default);
-    }
+
     &__search::placeholder,
     &__dropdown-toggle,
     &__dropdown-menu {
-      background-color: var(--oc-color-input-bg);
+      -webkit-appearance: none;
+      background-color: var(--oc-color-background-highlight);
+      border-radius: 0;
+      border-radius: 5px;
       border: 1px solid var(--oc-color-input-border);
+      box-sizing: border-box;
       color: var(--oc-color-input-text-default);
+      line-height: inherit;
+      margin: 0;
+      max-width: 100%;
+      outline: none;
+      overflow: visible;
+      padding: 2px;
+      transition-duration: 0.2s;
+      transition-timing-function: ease-in-out;
+      transition-property: color, background-color;
+      width: 100%;
+    }
+
+    &__search,
+    &__search:focus {
+      padding: 0 5px;
+    }
+
+    &__dropdown-menu {
+      padding: 0;
+      background-color: var(--oc-color-background-default);
+      margin-top: -1px;
     }
 
     &__clear,
     &__open-indicator,
     &__deselect {
       fill: var(--oc-color-input-text-default);
     }
+    &__deselect {
+      margin: 0 var(--oc-space-small);
+    }
 
     &__dropdown-option {
       color: var(--oc-color-input-text-default);
       white-space: normal;
+      padding: 6px 0.6rem;
+      border-radius: 5px;
+      line-height: var(--vs-line-height);
 
       &--highlight {
         background-color: var(--oc-color-background-hover);
@@ -229,36 +338,80 @@ export default defineComponent({
       max-width: var(--oc-space-small);
     }
 
-    &__open-indicator {
-      margin-top: 2px;
-    }
-
     &__selected-options {
       flex: auto;
-    }
-  }
+      padding: 0;
 
-  &[multiple='multiple'] {
-    .vs {
-      &__selected {
-        background-color: var(--oc-color-swatch-inverse-default);
-        border: 1px solid var(--oc-color-input-border);
-        fill: var(--oc-color-text-default);
+      > * {
+        padding: 0px 2px;
+        margin: 2px 2px 2px 1px;
+        color: var(--oc-color-input-text-default);
       }
 
-      &__deselect {
+      > *:not(input) {
+        padding-left: 3px;
+        background-color: var(--oc-color-background-default);
         fill: var(--oc-color-text-default);
       }
     }
   }
 
+  &.vs--multiple {
+    .vs {
+      &__selected-options > *:not(input) {
+        color: var(--oc-color-input-text-default);
+        background-color: var(--oc-color-background-default);
+        padding: 2px;
+      }
+    }
+  }
+
   &:focus-within {
     .vs__dropdown-menu,
     .vs__dropdown-toggle {
-      border: 1px solid var(--oc-color-input-text-default);
+      border-color: var(--oc-color-swatch-passive-default);
     }
   }
 }
+
+.oc-background-highlight {
+  .oc-select {
+    .vs {
+      &__search {
+        color: var(--oc-color-input-text-default);
+      }
+
+      &__search::placeholder,
+      &__dropdown-toggle,
+      &__dropdown-menu {
+        background-color: var(--oc-color-input-bg);
+      }
+    }
+
+    &.vs--multiple {
+      .vs__selected-options > *:not(input) {
+        color: var(--oc-color-input-text-default);
+        background-color: var(--oc-color-background-highlight);
+      }
+    }
+
+    &:focus-within {
+      .vs__dropdown-menu,
+      .vs__dropdown-toggle {
+        background-color: var(--oc-color-background-default);
+      }
+    }
+  }
+}
+
+.vs--single {
+  &.vs--open .vs__selected {
+    opacity: 0.8 !important;
+  }
+  .vs__selected-options > *:not(input) {
+    background-color: transparent !important;
+  }
+}
 </style>
 
 <docs>

packages/design-system/src/components/OcTable/OcTable.vue

@@ -562,10 +562,6 @@ export default defineComponent({
     transition: background-color $transition-duration-short ease-in-out;
   }
 
-  &-hover tr:hover td:not(:last-child) span:not(.avatarInitials):not(button span) {
-    color: var(--oc-color-swatch-brand-hover) !important;
-  }
-
   tr {
     outline: none;
     height: var(--oc-size-height-table-row);

packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts

@@ -28,7 +28,8 @@ describe('OcTextInput', () => {
   const selectors = {
     textInputMessage: '.oc-text-input-message span',
     clearInputButton: '.oc-text-input-btn-clear',
-    inputField: '.oc-text-input'
+    inputField: '.oc-text-input',
+    infoIcon: '.oc-text-input-message .oc-icon'
   }
 
   describe('id prop', () => {
@@ -61,6 +62,11 @@ describe('OcTextInput', () => {
     it('should show the description message as the input message text', () => {
       expect(wrapper.find(selectors.textInputMessage).text()).toBe('You should pass.')
     })
+
+    const mountedWrapper = getMountedWrapper({ props: { descriptionMessage: 'You should pass.' } })
+    it('should show an info icon', () => {
+      expect(mountedWrapper.find(selectors.infoIcon).exists()).toBe(true)
+    })
   })
 
   describe('when a warning message is provided', () => {