@weni/unnnic-system 1.16.25-develop.0 → 1.16.26-develop.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.16.25-develop.0",
+  "version": "1.16.26-develop.0",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/components/Input/BaseInput.vue

@@ -41,14 +41,6 @@ export default {
       type: String,
       default: '',
     },
-    hasIconLeft: {
-      type: Boolean,
-      default: null,
-    },
-    hasIconRight: {
-      type: Boolean,
-      default: null,
-    },
     nativeType: {
       type: String,
       default: 'text',
@@ -83,10 +75,6 @@ export default {
         'input',
         `size-${this.size}`,
         this.type,
-        {
-          'has-icon-left': this.hasIconLeft,
-          'has-icon-right': this.hasIconRight,
-        },
       ];
     },
   },
@@ -98,7 +86,11 @@ export default {
 
 .input {
   background: $unnnic-color-neutral-snow;
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+  border: none;
+  outline-style: solid;
+  outline-color: $unnnic-color-neutral-soft;
+  outline-width: $unnnic-border-width-thinner;
+  outline-offset: -$unnnic-border-width-thinner;
   border-radius: $unnnic-border-radius-sm;
   color: $unnnic-color-neutral-dark;
   caret-color: $unnnic-color-neutral-cleanest;
@@ -112,55 +104,26 @@ export default {
       font-size: $unnnic-font-size-body-gt;
       line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
       padding: $unnnic-squish-xs;
-
-      &.has-icon {
-        &-left {
-          padding-left: calc(#{$unnnic-inline-sm} + #{$unnnic-icon-size-sm} + #{$unnnic-inline-xs});
-        }
-
-        &-right {
-          padding-right: calc(
-            #{$unnnic-inline-sm} + #{$unnnic-icon-size-sm} + #{$unnnic-inline-xs}
-          );
-        }
-      }
     }
 
     &-sm {
       font-size: $unnnic-font-size-body-md;
       line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
       padding: $unnnic-squish-nano;
-
-      &.has-icon {
-        &-left {
-          padding-left: calc(#{$unnnic-inline-sm} + #{$unnnic-icon-size-xs} + #{$unnnic-inline-xs});
-        }
-
-        &-right {
-          padding-right: calc(
-            #{$unnnic-inline-sm} + #{$unnnic-icon-size-xs} + #{$unnnic-inline-xs}
-          );
-        }
-      }
     }
   }
 
   &:focus {
-    border-color: $unnnic-color-neutral-cleanest;
-    outline: none;
-    &::placeholder {
-      color: $unnnic-color-neutral-clean;
-      opacity: 1; /* Firefox */
-    }
+    outline-color: $unnnic-color-neutral-clean;
   }
 
   &.error {
-    border: $unnnic-border-width-thinner solid $unnnic-color-feedback-red;
+    outline-color: $unnnic-color-feedback-red;
     color: $unnnic-color-feedback-red;
   }
 
   &::placeholder {
-    color: $unnnic-color-neutral-clean;
+    color: $unnnic-color-neutral-cleanest;
     opacity: 1; /* Firefox */
   }
 
@@ -171,8 +134,10 @@ export default {
   }
 
   &:disabled {
-    border: 1px solid transparent;
-    background-color: $unnnic-color-neutral-light;
+    outline-color: $unnnic-color-neutral-cleanest;
+    background-color: $unnnic-color-neutral-lightest;
+    cursor: not-allowed;
+    color: $unnnic-color-neutral-cleanest;
 
     &::placeholder {
       color: $unnnic-color-neutral-cleanest;

package/src/components/Input/TextInput.vue

@@ -1,24 +1,28 @@
 <template>
-  <div :style="{ position: 'relative' }">
+  <div
+    :class="['text-input', `size--${size}`, {
+      'has-icon-left': !!iconLeft,
+      'has-icon-right': !!iconRight
+    }]"
+  >
     <base-input
       ref="base-input"
       :value="value"
       v-bind="attributes"
-      :hasIconLeft="!!iconLeft"
-      :hasIconRight="!!iconRight"
       :native-type="nativeType === 'password' && showPassword ? 'text' : nativeType"
       :type="type"
       :size="size"
       v-on="inputListeners"
       @focus="onFocus"
       @blur="onBlur"
+      class="input-itself"
     />
 
     <unnnic-icon
       v-if="iconLeft"
       :scheme="iconScheme"
       :icon="iconLeft"
-      :size="iconSize"
+      size="sm"
       :clickable="iconLeftClickable"
       @click="onIconLeftClick"
       class="icon-left"
@@ -28,7 +32,7 @@
       v-if="iconRightSvg"
       :scheme="iconScheme"
       :icon="iconRightSvg"
-      :size="iconSize"
+      size="sm"
       :clickable="iconRightClickable || allowTogglePassword"
       @click="onIconRightClick"
       class="icon-right"
@@ -114,14 +118,14 @@ export default {
         return 'feedback-red';
       }
 
-      if (this.value || this.isFocused) {
-        return 'neutral-dark';
-      }
-
       if (this.isDisabled) {
         return 'neutral-cleanest';
       }
 
+      if (this.value || this.isFocused) {
+        return 'neutral-dark';
+      }
+
       if (this.hasCloudyColor) {
         return 'neutral-cloudy';
       }
@@ -140,11 +144,6 @@ export default {
     attributes() {
       return { ...this.$attrs, ...this.$attrs['v-bind'], ...this.$props };
     },
-    iconSize() {
-      if (this.size === 'md') return 'sm';
-      if (this.size === 'sm') return 'xs';
-      return 'sm';
-    },
   },
   methods: {
     focus() {
@@ -179,16 +178,39 @@ export default {
 @import '../../assets/scss/unnnic.scss';
 
 .icon {
+  &-left, &-right {
+    pointer-events: none;
+  }
+
   &-left {
     position: absolute;
-    transform: translateY(100%);
+    top: $unnnic-spacing-ant + 0.1875 * $unnnic-font-size;
     left: $unnnic-inline-sm;
   }
 
   &-right {
     position: absolute;
-    transform: translateY(100%);
+    top: $unnnic-spacing-ant + 0.1875 * $unnnic-font-size;
     right: $unnnic-inline-sm;
   }
 }
+.text-input {
+  position: relative;
+
+  &.size--md, &.size--sm {
+    &.has-icon-left .input-itself {
+      padding-left: $unnnic-spacing-sm + $unnnic-icon-size-sm + $unnnic-spacing-xs;
+    }
+
+    &.has-icon-right .input-itself {
+      padding-right: $unnnic-spacing-sm + $unnnic-icon-size-sm + $unnnic-spacing-xs;
+    }
+  }
+
+  &.size--sm {
+    .icon-left, .icon-right {
+      top: $unnnic-spacing-xs + 0.125 * $unnnic-font-size;
+    }
+  }
+}
 </style>