fix(input-group): bootstrap prefix & suffix border (#1820)

* fix(inputs): bootstrap border

* fix(inputs): lint errors

* chore(input-group): formatting

* fix(input-group): fix comments + apply padding to all prefix & suffix elements

* fix(input-group): change var name

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: adrianptrv

src/components/combo/themes/shared/combo.bootstrap.scss

@@ -17,6 +17,13 @@ $dropdown-theme: dropdown-theme.$bootstrap;
         grid-auto-rows: minmax(rem(20px), auto);
         margin-block-start: rem(4px);
     }
+
+    ::slotted([slot='suffix']),
+    ::slotted([slot='prefix']) {
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
 }
 
 [part='list-wrapper'] {
@@ -128,4 +135,25 @@ $dropdown-theme: dropdown-theme.$bootstrap;
             color: inherit;
         }
     }
+
+    ::slotted([slot='suffix']),
+    [part|='toggle'] {
+        border-inline-end: rem(1px) solid var(--disabled-border-color);
+    }
+
+    ::slotted([slot='prefix']) {
+        border-inline-start: rem(1px) solid var(--disabled-border-color);
+    }
 }
+
+:host(:not([disabled])),
+:host(:not(:disabled)) {
+    ::slotted([slot='suffix']),
+    [part|='toggle'] {
+        border-inline-end: rem(1px) solid var(--border-color);
+    }
+
+    ::slotted([slot='prefix']) {
+        border-inline-start: rem(1px) solid var(--border-color);
+    }
+}

src/components/combo/themes/shared/combo.common.scss

@@ -94,3 +94,8 @@ $dropdown-theme: dropdown-theme.$material;
         }
     }
 }
+
+::slotted([slot='suffix']),
+::slotted([slot='prefix']) {
+    padding-inline: var(--affix-padding);
+}

src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss

@@ -59,3 +59,29 @@ $theme: $bootstrap;
 [part='actions'] {
     min-height: #{sizable(rem(47px), rem(54px), rem(64px))};
 }
+
+:host(:not([disabled])),
+:host(:not(:disabled)) {
+    ::slotted([slot^='prefix-']),
+    [part|='calendar-icon'] {
+        border-inline-start: rem(1px) solid var(--border-color);
+    }
+
+    ::slotted([slot^='suffix-']),
+    [part|='clear-icon'] {
+        border-inline-end: rem(1px) solid var(--border-color);
+    }
+}
+
+:host(:disabled),
+:host([disabled]) {
+    ::slotted([slot^='prefix-']),
+    [part|='calendar-icon'] {
+        border-inline-start: rem(1px) solid var(--disabled-border-color);
+    }
+
+    ::slotted([slot^='suffix-']),
+    [part|='clear-icon'] {
+        border-inline-end: rem(1px) solid var(--disabled-border-color);
+    }
+}

src/components/date-range-picker/themes/shared/date-range-picker.common.scss

@@ -129,3 +129,8 @@ igc-icon,
 ::slotted(igc-icon) {
     --component-size: var(--input-size);
 }
+
+::slotted([slot|='suffix']),
+::slotted([slot|='prefix']) {
+    padding-inline: var(--affix-padding);
+}

src/components/file-input/themes/shared/file-input.bootstrap.scss

@@ -80,6 +80,14 @@ $theme-file-input: file-input.$bootstrap;
     [part~='file-names'] {
         border-color: var-get($theme, 'error-secondary-color');
     }
+
+    [part~='prefixed'] ::slotted([slot='prefix']) {
+        border-inline-start-color: var(--error-secondary-color);
+    }
+
+    [part~='suffixed'] ::slotted([slot='suffix']) {
+        border-inline-end-color: var(--error-secondary-color);
+    }
 }
 
 :host(:not([disabled]):state(ig-invalid):focus-within) {

src/components/input/themes/shared/input.bootstrap.scss

@@ -10,6 +10,7 @@ $theme: $bootstrap;
     --input-font: #{sizable(rem(16px), rem(16px), rem(20px))};
     --input-border-color: #{var-get($theme, 'border-color')};
     --input-height: #{var-get($theme, 'size')};
+    --affix-padding: #{pad-inline(rem(8px), rem(12px), rem(14px))};
 
     ::part(helper-text) {
         @include type-style('body-2');
@@ -18,6 +19,14 @@ $theme: $bootstrap;
         grid-auto-rows: minmax(rem(20px), auto);
         margin-block-start: rem(4px);
     }
+
+    [part='prefix'] {
+        border-inline-start-width: 0;
+    }
+
+    [part='suffix'] {
+        border-inline-end-width: 0;
+    }
 }
 
 [part~='container'] {
@@ -87,7 +96,6 @@ $theme: $bootstrap;
     align-items: center;
     width: max-content;
     height: 100%;
-    padding-inline: pad-inline(8px, 12px, 16px);
 }
 
 [part='prefix'],
@@ -211,3 +219,25 @@ $theme: $bootstrap;
         color: var-get($theme, 'disabled-text-color');
     }
 }
+
+:host(:not(:disabled, [role='combobox'])),
+:host(:not([disabled], [role='combobox'])) {
+    ::slotted([slot='suffix']) {
+        border-inline-end: rem(1px) solid var(--border-color);
+    }
+
+    ::slotted([slot='prefix']) {
+        border-inline-start: rem(1px) solid var(--border-color);
+    }
+}
+
+:host(:disabled:not([role='combobox'])),
+:host([disabled]:not([role='combobox'])) {
+    ::slotted([slot='suffix']) {
+        border-inline-end: rem(1px) solid var(--disabled-border-color);
+    }
+
+   ::slotted([slot='prefix']) {
+        border-inline-start: rem(1px) solid var(--disabled-border-color);
+    }
+}

src/components/input/themes/shared/input.common.scss

@@ -81,3 +81,14 @@ $theme: $base;
 ::part(helper-text) {
     display: grid;
 }
+
+[name='suffix']::slotted(:is([part|='toggle'], [part|='clear'])) {
+    padding-inline: var(--affix-padding);
+}
+
+:host(:not([role='combobox'])) {
+    ::slotted([slot='suffix']),
+    ::slotted([slot='prefix']) {
+        padding-inline: var(--affix-padding);
+    }
+}

src/components/input/themes/shared/input.fluent.scss

@@ -8,6 +8,7 @@ $theme: $fluent;
     --input-size: var(--component-size);
     --helper-text-top-spacer: rem(5px);
     --input-border-size: #{rem(1px)};
+    --affix-padding: #{pad-inline(rem(8px), rem(12px), rem(16px))};
 
     [part='prefix'],
     [part='suffix'] {
@@ -34,7 +35,6 @@ $theme: $fluent;
         align-items: center;
         width: max-content;
         height: 100%;
-        padding-inline: pad-inline(8px, 12px, 16px);
     }
 
     [part='prefix'] {

src/components/input/themes/shared/input.indigo.scss

@@ -10,13 +10,13 @@ $transition-duration: .25s;
     width: max-content;
     align-items: center;
     height: calc(100% - #{rem(1px)});
-    padding-inline: pad-inline(2px, 4px, 6px);
 }
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --input-size: var(--component-size);
     --input-icon: #{sizable(rem(14px), rem(16px), rem(18px))};
+    --affix-padding: #{pad-inline(rem(2px), rem(4px), rem(6px))};
 
     ::slotted(igc-icon) {
         --size: var(--input-icon) !important;

src/components/input/themes/shared/input.material.scss

@@ -20,12 +20,12 @@ $fs: rem(16px) !default;
     align-items: center;
     width: max-content;
     height: 100%;
-    padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
 }
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --input-size: var(--component-size);
+    --affix-padding: #{pad-inline(rem(12px), rem(14px), rem(16px))};
 
     input:placeholder-shown + [part='notch'] {
         @extend %floated-styles;