fix(input-group): fix borders and material focus line (#16406)

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -754,12 +754,6 @@
         @include mx(fluent, search, focused) {
             @extend %igx-input-group-fluent-search--focused !optional;
         }
-
-        @include mx(fluent, search, disabled) {
-            @include e(bundle) {
-                @extend %form-group-bundle-search--disabled !optional;
-            }
-        }
         // FLUENT END
 
         // ============================== //

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -96,13 +96,7 @@
         display: inline-flex;
         width: max-content;
         align-items: center;
-
-        @if $indigo-theme {
-            min-height: calc(100% - #{rem(1px)}) !important;
-        } @else {
-            min-height: 100% !important;
-        }
-
+        min-height: 100% !important;
         transition: color $transition-timing, background $transition-timing;
 
         &:not(:empty) {
@@ -155,12 +149,30 @@
         [igxPrefix] {
             @extend %form-group-prefix;
             outline-style: none;
+
+            &:first-child {
+                @if $variant == 'fluent' {
+                    border-start-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
+                    border-end-start-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
+                } @else if $variant == "indigo" {
+                    border-start-start-radius: var-get($theme, 'box-border-radius');
+                }
+            }
         }
 
         igx-suffix,
         [igxSuffix] {
             @extend %form-group-suffix;
             outline-style: none;
+
+            &:last-child {
+                @if $variant == 'fluent' {
+                    border-start-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
+                    border-end-end-radius: calc(var-get($theme, 'border-border-radius') - var(--_fluent-input-border-size));
+                } @else if $variant == "indigo" {
+                    border-start-end-radius: var-get($theme, 'box-border-radius');
+                }
+            }
         }
 
         input,
@@ -680,7 +692,7 @@
     %bootstrap-file-warning,
     %bootstrap-file-invalid {
         %form-group-bundle {
-            border-radius: var-get($theme, 'box-border-radius');
+            border-radius: var-get($theme, 'border-border-radius');
             transition: box-shadow .15s ease-out, border .15s ease-out;
 
             &:hover {
@@ -793,7 +805,7 @@
 
     .igx-input-group--bootstrap:not(.igx-input-group--prefixed) {
         .igx-input-group__upload-button {
-            border-radius: var-get($theme, 'box-border-radius') 0 0 var-get($theme, 'box-border-radius');
+            border-radius: var-get($theme, 'border-border-radius') 0 0 var-get($theme, 'border-border-radius');
         }
 
         .igx-input-group__file-input {
@@ -1025,9 +1037,9 @@
     %form-group-bundle--search {
         background: var-get($theme, 'search-background');
         box-shadow: var-get($theme, 'search-resting-elevation');
+        border-radius: var-get($theme, 'search-border-radius');
 
         @if $variant != 'bootstrap' {
-            border-radius: var-get($theme, 'search-border-radius');
             overflow: hidden;
         }
 
@@ -1500,7 +1512,7 @@
             align-self: end;
             transform: scaleX(0);
             transform-origin: center;
-            background: var-get($theme, 'focused-secondary-color');
+            background: var-get($theme, 'focused-bottom-line-color');
             z-index: 1;
         }
     }
@@ -2053,11 +2065,11 @@
     }
 
     %fluent-label-success {
-        color: var-get($theme, 'idle-text-color');
+        color: var-get($theme, 'idle-secondary-color');
     }
 
     %fluent-label-error {
-        color: var-get($theme, 'idle-text-color');
+        color: var-get($theme, 'idle-secondary-color');
     }
 
     %fluent-label-disabled {
@@ -2087,23 +2099,6 @@
         }
     }
 
-    .igx-input-group--fluent [igxPrefix],
-    .igx-input-group--fluent igx-prefix {
-        &:first-child {
-            [igxButton]::after,
-            button::after {
-                border: {
-                    start: {
-                        start-radius: var-get($theme, 'border-border-radius');
-                    };
-                    end: {
-                        start-radius: var-get($theme, 'border-border-radius');
-                    };
-                }
-            }
-        }
-    }
-
     %form-group-prefix-fluent,
     %form-group-suffix-fluent,
     %form-group-prefix-fluent-search,
@@ -2233,10 +2228,10 @@
                 end-width: rem(1px);
             };
             start: {
-                start-radius: var-get($theme, 'box-border-radius');
+                start-radius: var-get($theme, 'border-border-radius');
             };
             end: {
-                start-radius: var-get($theme, 'box-border-radius');
+                start-radius: var-get($theme, 'border-border-radius');
             };
         }
     }
@@ -2253,10 +2248,10 @@
                 end-width: rem(1px);
             };
             start: {
-                end-radius: var-get($theme, 'box-border-radius');
+                end-radius: var-get($theme, 'border-border-radius');
             };
             end: {
-                end-radius: var-get($theme, 'box-border-radius');
+                end-radius: var-get($theme, 'border-border-radius');
             };
         }
     }
@@ -2323,7 +2318,7 @@
             map.get($bootstrap-inline-padding, 'cosy'),
             map.get($bootstrap-inline-padding, 'comfortable')
         );
-        border-radius: var-get($theme, 'box-border-radius');
+        border-radius: var-get($theme, 'border-border-radius');
 
     }