feat(interactables): clean up input components (#4146)

* feat(interactables): clean up input group * feat: use new input group props * fix(unlock): input focus logic * feat: show clear icon prop * feat: consolidate input and input group components * fix(input): simplify v model logic * fix(friends): fix add friend logic and remove unnecessary ref logic * fix: remove value * fix(button): adjust font-color to match figma * fix: bg * fix(unlock): remove clear button on unlock page Co-authored-by: Joe McGrath <[email protected]>
Satellite-im · Aug 9, 2022 · 8058b60 · 8058b60
1 parent 0a8ea3c
commit 8058b60
Show file tree

Hide file tree

Showing 35 changed files with 261 additions and 540 deletions.
diff --git a/assets/styles/base.less b/assets/styles/base.less
@@ -262,7 +262,6 @@ button {
   &.is-primary {
     &:extend(.background-flair-gradient);
     &:extend(.glow-flair);
-    &:extend(.font-primary);
 
     &[disabled] {
       &:extend(.background-flair-gradient);
@@ -715,34 +714,10 @@ button {
   }
 }
 
-//Inputs
-.input {
-  &:extend(.input-bg);
-  &:extend(.font-primary);
-  box-shadow: none !important;
-  &:active,
-  &:focus {
-    background: @semitransparent-lightest-gradient !important;
-  }
-}
-
 ::placeholder {
   color: @text-muted !important;
 }
 
-.is-primary.input,
-.is-dark.input {
-  &:extend(.input-bg);
-  &:extend(.font-primary);
-  border-color: transparent;
-
-  &:active,
-  &:focus {
-    border: none;
-    outline: none;
-  }
-}
-
 //Search Input
 .search-query-highlight {
   &:extend(.background-flair);

diff --git a/components/interactables/Input/Input.html b/components/interactables/Input/Input.html
@@ -1,36 +1,49 @@
-<div>
-  <TypographyLabel
-    class="input-label"
-    v-if="labelText.length"
-    :text="labelText"
-  />
-  <div
-    :class="{'search-box': true, 'right-icon': deleteIcon && internalText.length}"
-  >
-    <input
-      v-model="internalText"
-      class="input"
-      :class="{invalid : invalid, [`is-${size} is-${type}`]: true}"
-      :readonly="readonly"
-      :disabled="disabled"
-      :type="inputKind"
-      :placeholder="placeholder"
-      @input="update"
-      ref="input"
-      :maxLength="maxLength"
-      :minLength="minLength"
-      @keydown.space="preventLeadingSpace"
-      @paste="preventEmptyPaste"
-      @keydown.enter="submitEnter"
-      @focus="$emit('focus', $event)"
-      @blur="$emit('blur', $event)"
-    />
+<div class="input-group">
+  <TypographyLabel v-if="label" class="input-label" :text="label" />
+  <div class="input-outer">
+    <div class="input-inner">
+      <input
+        ref="input"
+        class="input font-color-light"
+        :class="[
+          `font-size-${size} is-${color}`,
+          {
+            'show-clear-button': showClear,
+            'is-danger': error || invalid
+          }
+        ]"
+        :value="text"
+        :type="type"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :minLength="minLength"
+        :maxLength="maxLength"
+        :disabled="disabled"
+        @keydown.enter="handleSubmit"
+        @input="handleInput"
+        data-cy="input-group"
+      />
+      <button
+        v-if="showClear && !isEmpty"
+        class="clear-button"
+        @click="clearInput"
+      >
+        <delete-icon size="1x" />
+      </button>
+    </div>
     <button
-      v-if="deleteIcon && internalText.length"
-      class="search-clear"
-      @click="clearSearch"
+      v-if="$slots.default"
+      class="button font-color-light"
+      :class="[`font-size-${size} is-${color}`, {disabled: disabled}]"
+      @click="handleSubmit"
+      data-cy="submit-input"
     >
-      <delete-icon size="1x" />
+      <UiLoadersSpinner v-if="loading" spinning />
+      <slot v-else></slot>
     </button>
   </div>
+  <span v-if="showLimit" class="char-limit">
+    {{ text.length }}/{{ maxLength }}
+  </span>
+  <TypographyError v-if="error" class="error" :text="error" small />
 </div>
diff --git a/components/interactables/Input/Input.less b/components/interactables/Input/Input.less
@@ -1,51 +1,74 @@
-.input-label {
-  text-align: left;
-}
-.is-full-width {
-  &:extend(.full-width);
-}
-.search-box {
-  &.right-icon {
-    input {
-      padding-right: 34px;
+.input-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .input-outer {
+    display: flex;
+    align-items: stretch;
+    flex-grow: 1;
+
+    .input-inner {
+      position: relative;
+      display: flex;
+      flex-grow: 1;
+
+      .input {
+        flex-grow: 1;
+        padding: 0.5rem;
+        box-shadow: none;
+        background: @input-gradient;
+        background-size: calc(100% + 2px) calc(100% + 2px);
+        background-position: center;
+        &:extend(.round-corners);
+
+        &.show-clear-button {
+          padding-right: 2rem;
+        }
+
+        &:focus {
+          background-image: @semitransparent-lightest-gradient;
+        }
+      }
+
+      .clear-button {
+        position: absolute;
+        inset: 0 0 0 auto;
+        font-size: @tiny-icon-size;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem;
+        color: @text-muted;
+      }
+
+      &:not(:last-child) .input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: 0;
+      }
     }
-  }
-  .search-clear {
-    &:extend(.font-primary);
-    &:focus {
-      background: @background;
+
+    .button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
-    position: absolute;
-    font-size: @tiny-icon-size;
-    top: 0;
-    right: 0;
-    width: 34px;
-    height: @full;
-    background: transparent;
-    border-color: transparent;
-    cursor: pointer;
-    &:extend(.first-layer);
   }
-  position: relative;
 
-  .input {
+  .char-limit {
+    float: right;
+    margin-right: 0.5rem;
     font-size: @mini-text-size;
-    font-family: @secondary-font;
-    &.is-normal {
-      height: 2.3rem;
-    }
-    &:disabled {
-      &::placeholder {
-        /* without !important it does not work */
-        color: grey !important;
-      }
-    }
-    &.invalid {
-      border: 1px solid @red;
-    }
+    &:extend(.font-muted);
+    margin-left: auto;
+  }
 
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  .error {
+    margin-top: 0.5rem;
+  }
+
+  // TODO: remove after removing bulma
+  .is-primary:not(.is-danger) {
+    border-color: transparent;
   }
 }