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

Author: SisIvanova

package-lock.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",

package.json

@@ -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-header.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-item.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/combo.base.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.bootstrap.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.fluent.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.indigo.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/combo/themes/shared/combo.material.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;