refactor(input-group): design updates (#16283)

* refactor(input-group): design updates

* refactor(textarea): remove min-height

* deps(theming): bump to latest version

* fix(input-group): fluent & bootstrap comments

* fix(input-group): helper text and line height

* fix(textarea): material padding

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -13,7 +13,7 @@
         'material': pad-inline(rem(4px), rem(8px), rem(16px)),
         'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
         'bootstrap': pad-inline(rem(4px), rem(8px), rem(16px)),
-        'indigo': pad-inline(rem(12px))
+        'indigo': pad-inline(rem(8px), rem(12px), rem(12px))
     ), $variant);
 
     $search-input-block-padding: map.get((
@@ -73,6 +73,16 @@
         igx-input-group {
             --theme: #{if($variant == 'indigo', 'indigo', 'material')};
             --ig-size: #{if($variant == 'indigo', 2, 1)};
+
+            @if $variant == 'bootstrap' or $variant == 'indigo' {
+                input {
+                    height: rem(28px);
+                }
+            } @else if $variant == 'fluent' {
+                input {
+                    height: rem(32px);
+                }
+            }
         }
     }
 
@@ -151,6 +161,18 @@
         %igx-combo__search {
             --igx-input-group-input-suffix-background: transparent;
             --igx-input-group-input-suffix-background--focused: transparent;
+
+            .igx-input-group__bundle::after {
+                border-block-end-color: var(--border-color);
+            }
+
+            .igx-input-group__bundle:hover::after {
+                border-block-end-color: #{if($variant == 'fluent', var(--hover-border-color), var(--border-color))};;
+            }
+
+            .igx-input-group--focused .igx-input-group__bundle::after {
+                border-block-end-color: var(--focused-bottom-line-color);
+            }
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss

@@ -23,6 +23,11 @@
         }
     }
 
+    igx-date-range-start,
+    igx-date-range-end {
+        min-width: 0;
+    }
+
     igx-date-range-start,
     igx-date-range-end,
     %igx-date-range-picker__start,
@@ -57,18 +62,18 @@
 }
 
 /// Adds typography styles for the igx-date-range-picker component.
-/// Uses the 'subtitle-1'
+/// Uses the 'caption'
 /// categories from the typographic scale.
 /// @group typography
-/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
 @mixin date-range-typography(
     $categories: (
-        label: 'subtitle-1',
+        label: 'caption',
     )
 ) {
     $label: map.get($categories, 'label');
 
-    %igx-date-range__label {
+    %igx-date-range-picker__label {
         @include type-style($label);
     }
 }