refactor(input): sizable padding for helper text and input (#640)

IgniteUI · Jan 31, 2023 · 40dea8d · 40dea8d
1 parent 97a1e96
commit 40dea8d
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 12 deletions.
diff --git a/src/components/combo/themes/light/combo.indigo.scss b/src/components/combo/themes/light/combo.indigo.scss
@@ -3,7 +3,7 @@
 
 [part='helper-text'] {
     margin-top: rem(6px);
-    padding: 0 rem(12px);
+    padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
     ::slotted([slot='helper-text']) {
         color: color(gray, 600);

diff --git a/src/components/combo/themes/light/combo.material.scss b/src/components/combo/themes/light/combo.material.scss
@@ -3,7 +3,7 @@
 
 [part='helper-text'] {
     margin-top: rem(5px);
-    padding: 0 rem(16px);
+    padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
 }
 
 :host([disabled]) {

diff --git a/src/components/input/themes/light/input.indigo.scss b/src/components/input/themes/light/input.indigo.scss
@@ -63,14 +63,23 @@ $label-focus-color: var(--label-focus-color, color(primary, 500)) !default;
     [part~='input'] {
         font-size: rem(16px);
         background: initial;
-        padding: rem(8px) rem(12px);
+        padding-block: rem(8px);
+        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
         border: none;
         grid-area: 1 / 2;
     }
 
+    [part*='input prefixed'] {
+        padding-inline-start: 0;
+    }
+
+    [part*='input suffixed'] {
+        padding-inline-end: 0;
+    }
+
     [part='helper-text'] {
         margin-top: rem(6px);
-        padding: 0 rem(12px);
+        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
         color: color(gray, 600);
     }
 }

diff --git a/src/components/input/themes/light/input.material.scss b/src/components/input/themes/light/input.material.scss
@@ -225,15 +225,15 @@ input:placeholder-shown + [part='notch'] [part='label'],
 [part='start'],
 [part='end'] {
     display: flex;
-    min-width: rem(12px);
+    min-width: sizable(rem(10px), rem(12px), rem(14px));
     height: var(--size);
     overflow: hidden;
 }
 
 [part='helper-text'] {
     @include type-style('caption');
 
-    padding: 0 rem(16px);
+    padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
     margin-top: rem(5px);
     color: color(gray, 700);
 }
@@ -265,10 +265,6 @@ input:placeholder-shown + [part='notch'] [part='label'],
 :host([disabled]) {
     pointer-events: none;
 
-    [part~='container'] {
-        background: color(gray, 100);
-    }
-
     [part~='input'],
     [part='label'],
     [part='prefix'],

diff --git a/src/components/select/themes/light/select.indigo.scss b/src/components/select/themes/light/select.indigo.scss
@@ -8,7 +8,7 @@ $label-focus-color: var(--label-focus-color, color(primary, 500)) !default;
 
 [part='helper-text'] {
     margin-top: rem(6px);
-    padding: 0 rem(12px);
+    padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
     color: color(gray, 600);
 }
 

diff --git a/src/components/select/themes/light/select.material.scss b/src/components/select/themes/light/select.material.scss
@@ -110,7 +110,7 @@ $active-border-width: rem(2px) !default;
 [part='helper-text'] {
     color: color(gray, 700);
     margin-top: rem(5px);
-    padding: 0 rem(16px);
+    padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
 }
 
 :host([disabled]) {