refactor(input-group): design updates

package.json

@@ -56,8 +56,8 @@
     "@floating-ui/dom": "^1.7.4",
     "@lit-labs/virtualizer": "^2.1.1",
     "@lit/context": "^1.1.6",
-    "lit": "^3.3.1",
-    "igniteui-i18n-core": "0.6.0-alpha.4"
+    "igniteui-i18n-core": "0.6.0-alpha.4",
+    "lit": "^3.3.1"
   },
   "devDependencies": {
     "@biomejs/biome": "~2.2.6",
@@ -82,7 +82,7 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.2.3",
     "igniteui-i18n-resources": "0.6.0-alpha.4",
-    "igniteui-theming": "^20.0.0",
+    "igniteui-theming": "^21.0.2",
     "keep-a-changelog": "^2.7.1",
     "lint-staged": "^16.2.5",
     "lit-analyzer": "^2.0.3",

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

@@ -6,4 +6,15 @@
     // Needed due to how styles are imported in combo-header.ts.
     --component-size: var(--ig-size, var(--default-size));
     --default-size: var(--combo-size) !important;
+
+    width: 100%;
+    white-space: nowrap;
+
+    ::slotted(*) {
+        @include ellipsis();
+
+        display: block;
+        width: 100%;
+        align-items: center;
+    }
 }

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

@@ -8,6 +8,14 @@
     --default-size: var(--combo-size) !important;
 
     gap: rem(8px);
+
+    ::slotted(*) {
+        @include ellipsis();
+
+        display: block;
+        width: 100%;
+        align-items: center;
+    }
 }
 
 igc-checkbox {

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

@@ -15,10 +15,22 @@
         --component-size: var(--combo-size) !important;
     }
 
-    > igc-input::part(input) {
-        text-overflow: ellipsis;
+    igc-input::part(input) {
+        @include ellipsis();
+
         cursor: pointer;
     }
+
+    ::part(helper-text) {
+        @include type-style('caption');
+        @include line-clamp(2, true, true);
+
+        overflow-wrap: anywhere;
+    }
+
+    slot[name='value-missing'] {
+        @include line-clamp(2, true, true);
+    }
 }
 
 :host(:not([single-select])) {
@@ -29,16 +41,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.bootstrap.scss

@@ -32,6 +32,12 @@ $dropdown-theme: dropdown-theme.$bootstrap;
     background: var-get($dropdown-theme, 'background-color');
     border-radius: var-get($dropdown-theme, 'border-radius');
 
+    igc-input,
+    igc-input::part(container),
+    igc-input::part(input) {
+        height: rem(28px);
+    }
+
     igc-input::part(container) {
         background: transparent;
         border-inline-start: 0;
@@ -67,13 +73,16 @@ $dropdown-theme: dropdown-theme.$bootstrap;
     [part='search-input'] {
         [part~='case-icon'] {
             border-block-end: rem(1px) solid color(gray, 400);
+            border-inline: none;
             transition: border 0.15s ease-out;
         }
 
         &:focus,
         &:focus-within {
+            border-block-end: rem(2px) solid color(primary, 500);
+
             [part~='case-icon'] {
-                border-block-end: rem(1px) solid color(primary, 500);
+                border: none;
             }
         }
     }

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);
     }
@@ -72,7 +70,8 @@ $dropdown-theme: dropdown-theme.$indigo;
 }
 
 [part='filter-input'] {
-    padding: pad-inline(rem(12px));
+    padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
+    padding-block: pad-block(rem(12px));
 }
 
 :host(:focus-within) {

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']),
@@ -37,6 +35,12 @@ $dropdown-theme: dropdown-theme.$material;
     background: var-get($dropdown-theme, 'background-color');
     border-radius: var-get($dropdown-theme, 'border-radius');
 
+    igc-input,
+    igc-input::part(container),
+    igc-input::part(input) {
+        height: rem(38px);
+    }
+
     igc-input::part(container) {
         background: transparent;
         border-inline-start: 0;

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

@@ -22,6 +22,17 @@
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
+
+    ::part(helper-text) {
+        @include type-style('caption');
+        @include line-clamp(2, true, true);
+
+        overflow-wrap: anywhere;
+    }
+
+    slot[name='value-missing'] {
+        @include line-clamp(2, true, true);
+    }
 }
 
 :host([required]) {
@@ -31,7 +42,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,8 @@ $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));
+        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

@@ -12,15 +12,13 @@ $theme: $fluent;
 
     [part='label'] {
         @include type-style('subtitle-2');
+
+        margin-block-end: pad-block(rem(5px));
     }
 
     ::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);
@@ -16,14 +22,12 @@ $input-theme: input-theme.$indigo;
 
     [part~='label'] {
         @include type-style('caption');
+
+        margin-block-end: rem(4px);
     }
 
     ::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]) {
     igc-date-time-input::part(notch) {
         border-block-start: rem(2px) solid transparent;

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

@@ -25,6 +25,17 @@
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
+
+    ::part(helper-text) {
+        @include type-style('caption');
+        @include line-clamp(2, true, true);
+
+        overflow-wrap: anywhere;
+    }
+
+    slot[name='value-missing'] {
+        @include line-clamp(2, true, true);
+    }
 }
 
 :host([required]) {
@@ -65,5 +76,8 @@
 }
 
 igc-date-time-input {
+    display: flex;
+    flex-direction: column;
     width: 100%;
+    min-width: 0;
 }

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

@@ -15,10 +15,8 @@ $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));
+        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),