fix: input padding (#890)

Brisanet · Oct 23, 2023 · 16531a7 · 16531a7
1 parent 3e397b9
commit 16531a7
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/projects/ion/src/lib/input-select/input-select.component.scss b/projects/ion/src/lib/input-select/input-select.component.scss
@@ -10,8 +10,11 @@
     display: flex;
 
     .input {
-      padding: 6px 12px;
       border-radius: 0 spacing(1) spacing(1) 0;
+
+      .my-input {
+        padding: spacing(0.75) spacing(1.5);
+      }
     }
   }
 }

diff --git a/projects/ion/src/lib/input/input.component.html b/projects/ion/src/lib/input/input.component.html
@@ -11,6 +11,7 @@
   >
     <ion-icon
       data-testid="icon-left"
+      class="left-icon"
       *ngIf="iconDirection === 'left'"
       [type]="iconInput"
       size="20"
@@ -30,6 +31,7 @@
 
     <ion-icon
       data-testid="icon-right"
+      class="right-icon"
       *ngIf="!isClearButtonVisible() && iconDirection === 'right'"
       [type]="iconInput"
       size="20"

diff --git a/projects/ion/src/lib/input/input.component.scss b/projects/ion/src/lib/input/input.component.scss
@@ -22,11 +22,9 @@
   z-index: 2;
   display: flex;
   align-items: center;
-  gap: spacing(1);
   background: $neutral-1;
   border: 1px solid $neutral-5;
   border-radius: 8px;
-  padding: spacing(1) spacing(1.5);
   width: 100%;
 
   & .my-input {
@@ -36,6 +34,8 @@
     color: $neutral-7;
     background: $neutral-1;
     font-size: 14px;
+    border-radius: 8px;
+    padding: spacing(1) spacing(1.5);
 
     &:disabled {
       background: $neutral-2;
@@ -44,6 +44,14 @@
     }
   }
 
+  &:has(.left-icon) .my-input {
+    padding-left: spacing(5);
+  }
+
+  &:has(.right-icon) .my-input {
+    padding-right: spacing(5);
+  }
+
   ::placeholder {
     color: $neutral-5;
     font-weight: 400;
@@ -67,6 +75,16 @@
       fill: $neutral-6;
     }
   }
+
+  .left-icon {
+    position: absolute;
+    left: spacing(1.5);
+  }
+
+  .right-icon {
+    position: absolute;
+    right: spacing(1.5);
+  }
 }
 
 .disabled {
@@ -95,10 +113,21 @@
     }
   }
 }
-
 .invalid {
   border: 1px solid $negative-6;
 
+  .right-icon {
+    right: spacing(4.5);
+  }
+
+  .my-input {
+    padding-right: spacing(4.5);
+  }
+
+  &:has(.right-icon) .my-input {
+    padding-right: spacing(7.5);
+  }
+
   &:hover {
     border-color: $negative-6;
   }
@@ -112,6 +141,9 @@
   }
 
   & .colorInvalid {
+    position: absolute;
+    right: spacing(1.5);
+
     ::ng-deep svg {
       fill: $negative-6;
     }
@@ -129,6 +161,18 @@
 .valid {
   border: 1px solid $neutral-5;
 
+  .right-icon {
+    right: spacing(4.5);
+  }
+
+  .my-input {
+    padding-right: spacing(4.5);
+  }
+
+  &:has(.right-icon) .my-input {
+    padding-right: spacing(7.5);
+  }
+
   &:hover {
     border-color: $neutral-5;
   }
@@ -138,6 +182,9 @@
   }
 
   & .colorValid {
+    position: absolute;
+    right: spacing(1.5);
+
     ::ng-deep svg {
       fill: $positive-6;
     }
@@ -159,6 +206,7 @@
   padding: 0;
   background-color: $neutral-1;
   display: flex;
+  margin-right: spacing(1.5);
 
   &:hover {
     background-color: $primary-1;