refactor(input-group): design updates

src/components/combo/themes/combo.base.scss

@@ -19,6 +19,11 @@
         text-overflow: ellipsis;
         cursor: pointer;
     }
+
+    ::part(helper-text) {
+        @include type-style('caption');
+        @include line-clamp(2, true, true);
+    }
 }
 
 :host(:not([single-select])) {
@@ -29,16 +34,6 @@
     }
 }
 
-[part='helper-text'] {
-    line-height: 1;
-
-    ::slotted([slot='helper-text']) {
-        @include type-style('caption');
-
-        line-height: inherit;
-    }
-}
-
 [part='clear-icon'],
 [part='toggle-icon'],
 [part~='case-icon'] {

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

@@ -10,8 +10,6 @@ $dropdown-theme: dropdown-theme.$fluent;
     --combo-size: var(--component-size);
 
     ::part(helper-text) {
-        @include type-style('caption');
-
         margin-block-start: pad-block(rem(5px));
         grid-auto-rows: minmax(rem(18px), auto);
     }

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

@@ -17,8 +17,6 @@ $dropdown-theme: dropdown-theme.$indigo;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
         margin-block-start: pad-block(rem(4px));
         grid-auto-rows: minmax(rem(15px), auto);
     }

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

@@ -12,11 +12,9 @@ $dropdown-theme: dropdown-theme.$material;
     --combo-size: var(--component-size);
 
     ::part(helper-text) {
-        @include type-style('caption');
-
         margin-block-start: pad-block(rem(4px));
         grid-auto-rows: minmax(rem(18px), auto);
-        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
+        padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
     }
 
     ::slotted([slot='prefix']),

src/components/date-picker/themes/date-picker.base.scss

@@ -22,6 +22,11 @@
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
+
+    ::part(helper-text) {
+        @include type-style('caption');
+        @include line-clamp(2, true, true);
+    }
 }
 
 :host([required]) {
@@ -31,7 +36,7 @@
 }
 
 [part='label'] {
-    display: inline-block;
+    display: block;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

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

@@ -25,10 +25,7 @@ $theme: $bootstrap;
     ::part(helper-text) {
         @include type-style('body-2');
 
-        color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(20px), auto);
-        padding-inline-start: 0;
-	    margin-block-start: pad-block(rem(4px));
     }
 }
 

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

@@ -57,12 +57,9 @@ $input-theme: input-theme.$material;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
         color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: pad-block(rem(4px));
-        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
     }
 }
 

src/components/date-picker/themes/shared/date-picker.fluent.scss

@@ -15,12 +15,8 @@ $theme: $fluent;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
-        color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: pad-block(rem(5px));
-        padding-inline-start: 0;
     }
 }
 

src/components/date-picker/themes/shared/date-picker.indigo.scss

@@ -8,6 +8,12 @@ $input-theme: input-theme.$indigo;
 
 :host {
     --calendar-border-color: #{$indigo-calendar-border-color};
+    --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
+
+    igc-icon,
+    ::slotted(igc-icon) {
+        --size: var(--input-icon) !important;
+    }
 
     igc-dialog[open]::part(base) {
         border-radius: rem(6px);
@@ -19,11 +25,7 @@ $input-theme: input-theme.$indigo;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
-        color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(15px), auto);
-        padding-inline-start: 0;
     }
 }
 

src/components/date-picker/themes/shared/date-picker.material.scss

@@ -3,6 +3,12 @@
 
 $theme: $material;
 
+:host {
+    ::part(helper-text) {
+        padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
+    }
+}
+
 :host([outlined][readonly]:hover) {
     igc-date-time-input::part(start),
     igc-date-time-input::part(end),

src/components/date-range-picker/date-range-picker.base.scss

@@ -25,6 +25,11 @@
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
+
+    ::part(helper-text) {
+        @include type-style('caption');
+        @include line-clamp(2, true, true);
+    }
 }
 
 :host([required]) {

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

@@ -15,10 +15,7 @@ $theme: $bootstrap;
     ::part(helper-text) {
         @include type-style('body-2');
 
-        color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(20px), auto);
-        padding-inline-start: 0;
-	    margin-block-start: pad-block(rem(4px));
     }
 }
 

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

@@ -51,12 +51,9 @@ $theme: $material;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
         color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: pad-block(rem(4px));
-        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
     }
 }
 

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

@@ -11,12 +11,8 @@ $theme: $fluent;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
-        color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: pad-block(rem(5px));
-        padding-inline-start: 0;
     }
 }
 

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

@@ -5,6 +5,12 @@ $theme: $indigo;
 
 :host {
     --calendar-border-color: #{$indigo-calendar-border-color};
+    --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
+
+    igc-icon,
+    ::slotted(igc-icon) {
+        --size: var(--input-icon) !important;
+    }
 
     igc-dialog[open]::part(base) {
         border-radius: rem(6px);
@@ -17,11 +23,7 @@ $theme: $indigo;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
-        color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(15px), auto);
-        padding-inline-start: 0;
     }
 }
 

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

@@ -3,6 +3,12 @@
 
 $theme: $material;
 
+:host {
+    ::part(helper-text) {
+        padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
+    }
+}
+
 :host(:not(:focus-within)[outlined][readonly]:hover) {
     igc-input::part(start),
     igc-input::part(end),

src/components/input/themes/input.base.scss

@@ -11,6 +11,11 @@
     display: block;
     font-family: var(--ig-font-family);
     outline-style: none;
+
+    ::part(helper-text) {
+        @include type-style('caption');
+        @include line-clamp(2, true, true);
+    }
 }
 
 ::slotted(igc-icon) {

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

@@ -9,14 +9,12 @@ $theme: $bootstrap;
     --font: #{sizable(rem(14px), 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))};
+    --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))};
 
     ::part(helper-text) {
         @include type-style('body-2');
 
-        color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(20px), auto);
-        margin-block-start: rem(4px);
     }
 
     [part='prefix'] {
@@ -42,7 +40,7 @@ $theme: $bootstrap;
     @include type-style('body-1');
 
     border-radius: var-get($theme, 'border-border-radius');
-    padding-inline: pad-inline(8px, 12px, 16px);
+    padding-inline: pad-inline(8px, 10px, 14px);
     padding-block: pad-block(4px, 6px, 8px);
     color: var-get($theme, 'idle-text-color');
     background: transparent;

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

@@ -29,6 +29,13 @@ $theme: $base;
     color: var-get($theme, 'placeholder-color');
 }
 
+:host {
+    ::part(helper-text) {
+        color: var-get($theme, 'helper-text-color');
+        margin-block-start: rem(4px);
+    }
+}
+
 :host(:focus-within),
 :host(:not([readonly],[disabled]):hover) {
     [part~='input']::placeholder {

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

@@ -8,7 +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))};
+    --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))};
 
     [part='prefix'],
     [part='suffix'] {
@@ -22,9 +22,6 @@ $theme: $fluent;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
-        color: var-get($theme, 'helper-text-color');
         margin-block-start: rem(5px);
         grid-auto-rows: minmax(rem(18px), auto);
     }

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

@@ -15,18 +15,14 @@ $transition-duration: .25s;
 :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))};
+    --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
     --affix-padding: #{pad-inline(rem(2px), rem(4px), rem(6px))};
 
     ::slotted(igc-icon) {
         --size: var(--input-icon) !important;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
-        color: var-get($theme, 'helper-text-color');
-        margin-block-start: pad-block(rem(4px));
         grid-auto-rows: minmax(rem(15px), auto);
     }
 

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

@@ -32,12 +32,8 @@ $fs: rem(16px) !default;
     }
 
     ::part(helper-text) {
-        @include type-style('caption');
-
-        color: var-get($theme, 'helper-text-color');
-        margin-block-start: rem(4px);
         grid-auto-rows: minmax(rem(18px), auto);
-        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
+        padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
     }
 }
 
@@ -131,7 +127,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
 [part='start'],
 [part='end'] {
     display: flex;
-    min-width: sizable(rem(10px), rem(12px), rem(14px));
+    min-width: sizable(rem(8px), rem(10px), rem(12px));
     height: var(--size);
     overflow: hidden;
 }

src/components/select/themes/select.base.scss

@@ -4,6 +4,11 @@
 
 :host {
     display: block;
+
+    ::part(helper-text) {
+        @include type-style('caption');
+        @include line-clamp(2, true, true);
+    }
 }
 
 [role='combobox'] {

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

@@ -13,8 +13,6 @@ $input-theme: input-theme.$fluent;
     --dropdown-size: var(--component-size);
 
     ::part(helper-text) {
-        @include type-style('caption');
-
         color: var-get($theme, 'helper-text-color');
         margin-block-start: pad-block(rem(5px));
         grid-auto-rows: minmax(rem(18px), auto);

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

@@ -14,8 +14,6 @@ $input-theme: input-theme.$indigo;
     --input-icon: #{sizable(rem(14px), rem(16px), rem(18px))};
 
     ::part(helper-text) {
-        @include type-style('caption');
-
         margin-block-start: pad-block(rem(4px));
         grid-auto-rows: minmax(rem(15px), auto);
     }

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

@@ -21,10 +21,8 @@ $active-border-width: rem(2px) !default;
     --dropdown-size: var(--component-size);
 
     ::part(helper-text) {
-        @include type-style('caption');
-
         margin-block-start: pad-block(rem(4px));
-        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
+        padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
         grid-auto-rows: minmax(rem(18px), auto);
     }
 }