fix(input-group): replace fluent border with box-shadow

desig9stein · desig9stein · commit f5be94a26c36 · 2025-06-09T13:27:45.000+03:00
diff --git a/src/components/combo/themes/shared/combo.fluent.scss b/src/components/combo/themes/shared/combo.fluent.scss
@@ -27,10 +27,22 @@ $dropdown-theme: dropdown-theme.$fluent;
 
     igc-input::part(container) {
         background: transparent;
-        border-inline-start: 0;
-        border-inline-end-color: transparent;
-        border-block-start: 0;
         border-radius: 0;
+
+        &::before {
+            // The color value of the shadow is set by the color prop set by the input-group::before
+            // Here we only change the shadow to look like border bottom
+            box-shadow: inset 0 rem(-1px) 0 0;
+            border-radius: 0;
+        }
+    }
+
+    igc-input:focus-within::part(container) {
+        &::before {
+            // The color value of the shadow is set by the color prop set by the input-group::before
+            // Here we only change the shadow to look like border bottom
+            box-shadow: inset 0 rem(-2px) 0 0;
+        }
     }
 
     igc-input::part(start) {
@@ -87,13 +99,7 @@ $dropdown-theme: dropdown-theme.$fluent;
 
     igc-input::part(suffix) {
         height: var(--size);
-        margin-inline-end: rem(-1px);
-        margin-block-start: rem(-2px);
-    }
 
-    igc-input::part(prefix) {
-        margin-inline-start: rem(-1px);
-        margin-block-start: rem(-2px);
     }
 }
 
diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss
@@ -2,10 +2,7 @@
 @use '../light/themes' as *;
 
 $theme: $fluent;
-$resting-border-width: rem(1px);
-$focused-border-width: rem(2px);
-$resting-height: calc(var-get($theme, 'size') - #{($resting-border-width * 2)});
-$focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
+$border-size: rem(1px);
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
@@ -16,6 +13,7 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
     [part='suffix'] {
         font-size: rem(14px);
         cursor: default;
+        z-index: 0;
 
         ::slotted(*) {
             color: inherit;
@@ -59,17 +57,34 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
 
     [part^='container'] {
         height: var-get($theme, 'size');
-        border-radius: var-get($theme, 'border-border-radius');
-        border: #{$resting-border-width} solid var-get($theme, 'border-color');
+        background: var-get($theme, 'border-background');
         transition: none;
         cursor: text;
         grid-template-columns: auto 1fr auto;
         overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+
+            // The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
+            // defaults to the css color: prop the same way as border-color: do.
+            // We do this in order to have the shadow working correctly inside the Combo search
+            // We can't change the var-get($theme, 'border-color') in the combo search, but we can change the shadow
+            color: var-get($theme, 'border-color');
+            box-shadow: inset 0 0 0 $border-size;
+            border-radius: var-get($theme, 'border-border-radius');
+            user-select: none;
+            pointer-events: none;
+            z-index: 1;
+        }
     }
 
     [part~='input'] {
         color: var-get($theme, 'idle-text-color');
-        height: $resting-height;
         background: initial;
         font-size: rem(14px);
         padding-inline: rem(8px);
@@ -100,26 +115,27 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
 
 :host(:hover) {
     [part^='container'] {
-        border-color: var-get($theme, 'hover-border-color');
+        &::before {
+            // The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
+            // defaults to the css color: prop the same way as border-color: do.
+            // We do this in order to have the shadow working correctly inside the Combo search
+            // We can't change the var-get($theme, 'hover-border-color') in the combo search, but we can change the shadow
+            color: var-get($theme, 'hover-border-color');
+            box-shadow: inset 0 0 0 $border-size;
+        }
     }
 }
 
 :host(:focus-within) {
     [part^='container'] {
-        border-color: var-get($theme, 'focused-border-color');
-        border-width: #{$focused-border-width};
-    }
-
-    [part~='input'] {
-        height: $focused-height;
-    }
-
-    [part='prefix'] {
-        margin-inline-start: rem(-1px);
-    }
-
-    [part='suffix'] {
-        margin-inline-end: rem(-1px);
+        &::before {
+            // The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
+            // defaults to the css color: prop the same way as border-color: do.
+            // We do this in order to have the shadow working correctly inside the Combo search
+            // We can't change the var-get($theme, 'focused-border-color') in the combo search, but we can change the shadow
+            color: var-get($theme, 'focused-border-color');
+            box-shadow: inset 0 0 0 calc($border-size + #{rem(1px)}),
+        }
     }
 
     [name='prefix']::slotted(*),
@@ -166,15 +182,23 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
 :host([invalid]:hover),
 :host([readonly][invalid]:hover),
 :host([readonly][invalid]:focus-within) {
-    [part^='container'] {
-        border-color: var-get($theme, 'error-secondary-color');
+    ::part(helper-text) {
+        color: var-get($theme, 'error-secondary-color');
+    }
+
+    [part~='container'] {
+        &::before {
+            box-shadow: inset 0 0 0 $border-size var-get($theme, 'error-secondary-color')
+        }
     }
 }
 
 :host(:disabled),
 :host([disabled]) {
-    [part^='container'] {
-        border-color: var-get($theme, 'disabled-border-color');
+    [part~='container'] {
+        &::before {
+            box-shadow: inset 0 0 0 $border-size var-get($theme, 'disabled-border-color');
+        }
     }
 
     [part^='container'],
diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss
@@ -6,7 +6,6 @@
 $theme: $fluent;
 $dropdown-theme: dropdown-theme.$fluent;
 $input-theme: input-theme.$fluent;
-$focused-border-width: rem(2px);
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
@@ -39,25 +38,6 @@ $focused-border-width: rem(2px);
     [part~='toggle-icon'] {
         background: var-get($theme, 'toggle-button-background-focus');
     }
-
-    igc-input[readonly]:not([disabled])::part(container) {
-        border-width: #{$focused-border-width};
-    }
-}
-
-:host(:not([invalid]):focus-within) {
-    igc-input[readonly]:not([disabled])::part(container) {
-        border-color: var-get($input-theme, 'focused-border-color');
-        border-width: #{$focused-border-width};
-    }
-
-    igc-input[readonly]:not([disabled])::part(prefix) {
-        margin-inline-start: rem(-1px);
-    }
-
-    igc-input[readonly]:not([disabled])::part(suffix) {
-        margin-inline-end: rem(-1px);
-    }
 }
 
 :host([invalid]:not([disabled])),
diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss
@@ -2,6 +2,7 @@
 @use '../light/themes' as *;
 
 $theme: $fluent;
+$border-size: rem(1px);
 
 :host {
     @include type-style('body-2');
@@ -17,60 +18,62 @@ $theme: $fluent;
     }
 }
 
-:host(:hover) {
-    [part~='container'] {
-        border-color: var-get($theme, 'hover-border-color');
-    }
-}
-
-:host(:focus-within) {
-    [part~='container'] {
-        border-color: var-get($theme, 'focused-border-color');
-        border-width: rem(2px);
-    }
+[part~='label'] {
+    @include type-style('subtitle-2') {
+        --ig-subtitle-2-line-height: #{rem(16px)};
 
-    [part~='prefix']:not([hidden]) {
-        margin-inline-start: rem(-1px);
-    }
+        margin-block: 0 rem(5px);
+    };
 
-    [part~='suffix']:not([hidden]) {
-        margin-inline-end: rem(-1px);
-    }
+    display: block;
+    position: static;
+    transform: translateY(0);
+    transform-origin: top left;
+    height: auto;
 
-    textarea {
-        margin-block: rem(-1px);
-        margin-inline-start: rem(-1px);
-    }
 
-    [part~='prefix']:not([hidden]) ~ textarea {
-        margin-inline: initial;
-    }
 }
 
 [part~='container'] {
-    border: rem(1px) solid var-get($theme, 'border-color');
+    position: relative;
     background: var-get($theme, 'border-background');
     align-items: stretch;
     overflow: hidden;
     border-radius: var-get($theme, 'border-border-radius');
-}
-
-[part~='label'] {
-    @include type-style('subtitle-2') {
-        --ig-subtitle-2-line-height: #{rem(16px)};
 
-        margin-block: 0 rem(5px);
-    };
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        box-shadow: inset 0 0 0 $border-size  var-get($theme, 'border-color');
+        border-radius: var-get($theme, 'border-border-radius');
+        user-select: none;
+        pointer-events: none;
+        z-index: 1;
+    }
+}
 
-    display: block;
-    position: static;
-    transform: translateY(0);
-    transform-origin: top left;
-    height: auto;
 
+:host(:hover) {
+    [part~='container'] {
+        &::before {
+            box-shadow: inset 0 0 0 $border-size var-get($theme, 'hover-border-color');
+        }
+    }
+}
 
+:host(:focus-within) {
+    [part~='container'] {
+        &::before {
+            box-shadow: 0 0 0 $border-size var-get($theme, 'focused-border-color'),
+            inset 0 0 0 calc($border-size + #{rem(1px)}) var-get($theme, 'focused-border-color');
+        }
+    }
 }
 
+
 :host([invalid]) {
     [part~='label'] {
         color: var-get($theme, 'idle-text-color');
@@ -99,14 +102,29 @@ textarea {
     }
 
     [part~='container'] {
-        border-color: var-get($theme, 'error-secondary-color');
+        &::before {
+            box-shadow: inset 0 0 0 $border-size var-get($theme, 'error-secondary-color')
+        }
+    }
+}
+
+:host(:not(:disabled)[invalid]:focus-within),
+:host(:not([disabled])[invalid]:focus-within) {
+    [part^='container'] {
+        &::before {
+            box-shadow: 0 0 0 $border-size var-get($theme, 'error-secondary-color'),
+            inset 0 0 0 calc($border-size + #{rem(1px)}) var-get($theme, 'error-secondary-color');
+        }
     }
 }
 
 :host(:disabled),
 :host([disabled]) {
     [part~='container'] {
-        border-color: var-get($theme, 'disabled-border-color');
         background: var-get($theme, 'border-disabled-background');
+
+        &::before {
+            box-shadow: inset 0 0 0 $border-size var-get($theme, 'disabled-border-color');
+        }
     }
 }
