refactor(input-group): textarea & combo changes

Author: SisIvanova

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,6 +73,7 @@ $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;
         }
 

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

@@ -70,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

@@ -35,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-range-picker/date-range-picker.base.scss

@@ -70,5 +70,8 @@
 }
 
 igc-date-time-input {
+    display: flex;
+    flex-direction: column;
     width: 100%;
+    min-width: 0;
 }

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

@@ -8,6 +8,9 @@ $theme: $bootstrap;
 
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))};
+    --block-padding: #{sizable(rem(4px), rem(8px), rem(12px))};
+    --border-width: #{rem(1px)};
+    --textarea-height: calc((var(--ig-body-1-line-height) * 3) + var(--block-padding) + var(--border-width) * 2);
 
     ::part(helper-text) {
         @include type-style('body-2');
@@ -36,7 +39,7 @@ $theme: $bootstrap;
 
 [part~='prefixed'] {
     [part~='prefix'] {
-        border-block-width: rem(1px);
+        border-block-width: var(--border-width);
         border-style: solid;
         border-color: var-get($theme, 'border-color');
         overflow: hidden;
@@ -65,7 +68,7 @@ $theme: $bootstrap;
 
 [part~='suffixed'] {
     [part~='suffix'] {
-        border-block-width: rem(1px);
+        border-block-width: var(--border-width);
         border-style: solid;
         border-color: var-get($theme, 'border-color');
         overflow: hidden;
@@ -95,8 +98,8 @@ $theme: $bootstrap;
 textarea {
     @include type-style('body-1');
 
-    border: rem(1px) solid var-get($theme, 'border-color');
-    padding-block: pad-block(rem(4px), rem(8px), rem(12px)) 0;
+    border: var(--border-width) solid var-get($theme, 'border-color');
+    padding-block: pad-block(var(--block-padding)) 0;
     padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
     border-radius: var-get($theme, 'border-border-radius');
     z-index: 1;
@@ -117,7 +120,7 @@ textarea {
     }
 
     textarea {
-        border: rem(1px) solid var-get($theme, 'focused-border-color');
+        border: var(--border-width) solid var-get($theme, 'focused-border-color');
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');
     }
 }
@@ -138,7 +141,7 @@ textarea {
 :host(:not(:disabled,[readonly]):state(ig-invalid)),
 :host(:not([disabled],[readonly]):state(ig-invalid)) {
     textarea {
-        border: rem(1px) solid var-get($theme, 'error-secondary-color');
+        border: var(--border-width) solid var-get($theme, 'error-secondary-color');
     }
 }
 
@@ -159,7 +162,7 @@ textarea {
 
     textarea {
         background: var-get($theme, 'border-disabled-background');
-        border: rem(1px) solid var-get($theme, 'disabled-border-color');
+        border: var(--border-width) solid var-get($theme, 'disabled-border-color');
         box-shadow: none;
     }
 

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

@@ -10,6 +10,8 @@ $border-size: rem(1px);
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --textarea-border-size: #{rem(1px)};
     --affix-padding: #{pad-inline(rem(8px), rem(10px), rem(14px))};
+    --block-padding: #{sizable(rem(6px), rem(10px), rem(14px))};
+    --textarea-height: calc((var(--ig-body-2-line-height) * 3) + var(--block-padding));
 
     ::part(helper-text) {
         grid-auto-rows: minmax(rem(18px), auto);
@@ -80,7 +82,7 @@ textarea {
     @include type-style('body-2');
 
     padding-inline: pad-inline(rem(8px));
-    padding-block: pad-block(rem(6px), rem(10px), rem(14px)) 0;
+    padding-block: pad-block(var(--block-padding)) 0;
 }
 
 :host([required]:not(:disabled)),

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

@@ -10,6 +10,8 @@ $theme: $indigo;
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
     --affix-padding: #{pad-inline(rem(2px), rem(4px), rem(6px))};
+    --block-padding: #{sizable(rem(4px), rem(6px), rem(8px))};
+    --textarea-height: calc((var(--ig-body-2-line-height) * 3) + var(--block-padding));
 
     ::slotted(igc-icon) {
         --size: var(--input-icon) !important;
@@ -88,7 +90,7 @@ $theme: $indigo;
 textarea {
     @include type-style('body-2');
 
-    padding-block: pad-block(rem(4px), rem(6px), rem(8px)) 0;
+    padding-block: pad-block(var(--block-padding)) 0;
     padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
     margin-block-end: pad-block(rem(1px));
 

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

@@ -3,38 +3,44 @@
 @use 'igniteui-theming/sass/animations/easings' as *;
 
 $theme: $material;
-$input-top-padding: pad-block(rem(8px), rem(12px), rem(16px));
 $input-bottom-padding: rem(6px);
 
 :host {
     @include type-style('subtitle-1');
 
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --affix-padding: #{pad-inline(rem(12px), rem(14px), rem(16px))};
+    --outlined-top-padding: #{sizable(rem(8px), rem(12px), rem(16px))};
+    --textarea-height: calc((var(--ig-subtitle-1-line-height) * 3) + var(--outlined-top-padding));
 
     ::part(helper-text) {
         grid-auto-rows: minmax(rem(18px), auto);
         padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
     }
+
+    [part~='container'] {
+        --textarea-height: calc((var(--ig-subtitle-1-line-height) * 3));
+    }
 }
 
 textarea {
     border: none;
     padding: 0;
     overflow: auto;
-    margin-block-start: $input-top-padding;
+    margin-block-start: pad-block(var(--outlined-top-padding));
     grid-area: 1 / 2 / span 1 / span 2;
     flex-grow: 1;
     position: relative;
     max-width: inherit;
+    min-height: var(--textarea-height);
     padding-inline: pad-inline(rem(4px));
     z-index: 1;
 }
 
 [part='label'] {
-    position: absolute;
+    position: relative;
     transform-origin: top left;
-    inset-block-start: calc($input-top-padding - #{rem(2px)});
+    inset-block-start: calc((var(--outlined-top-padding)) - #{rem(2px)});
     padding-inline-end: pad-inline(rem(4px));
     transition:
         transform 150ms cubic-bezier(.4, 0, .2, 1),
@@ -47,7 +53,7 @@ textarea {
     @include type-style('caption');
 
     translate: 0;
-    inset-block-start: calc(#{$input-top-padding} / 4);
+    inset-block-start: calc((var(--outlined-top-padding)) / 4);
 }
 
 %label-outlined-filled {
@@ -64,6 +70,8 @@ textarea {
 
 :host(:not([outlined])) {
     [part~='container'] {
+        --box-bottom-padding: #{rem(2px)};
+
         overflow: hidden;
         border-start-start-radius: var-get($theme, 'box-border-radius');
         border-start-end-radius: var-get($theme, 'box-border-radius');
@@ -80,13 +88,27 @@ textarea {
         }
 
         textarea {
-            margin-block: pad-block(rem(8px), rem(12px), rem(16px)) rem(2px);
+            margin-block: pad-block(var(--box-top-padding)) var(--box-bottom-padding);
+            min-height: var(--textarea-height);
+        }
+    }
+
+    [part~='container']:not([part~='labelled']) {
+        --box-top-padding: #{sizable(rem(8px), rem(12px), rem(16px))};
+        --textarea-height: #{calc(rem(80px) + var(--box-top-padding))};
+
+
+        textarea {
+            --textarea-height: #{calc(rem(80px) - var(--box-bottom-padding))};
         }
     }
 
     [part~='labelled'] {
+        --box-top-padding: #{sizable(rem(16px), rem(20px), rem(24px))};
+        --textarea-height: #{calc((var(--ig-subtitle-1-line-height) * 3) + var(--box-top-padding))};
+
         textarea {
-            margin-block: pad-block(rem(16px), rem(20px), rem(24px)) rem(2px);
+            --textarea-height: #{calc((var(--ig-subtitle-1-line-height) * 3) - var(--box-bottom-padding))};
         }
     }
 
@@ -379,7 +401,7 @@ textarea {
 
 :host([readonly][outlined]:focus-within) {
     [part='label'] {
-        inset-block-start: calc($input-top-padding - #{rem(3px)});
+        inset-block-start: calc(var(--outlined-top-padding) - #{rem(3px)});
     }
 
     [part='notch'] {

src/components/textarea/themes/textarea.base.scss

@@ -3,18 +3,7 @@
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/animations/easings' as *;
 
-$base-scale-size: (
-    'large': rem(16px),
-    'medium': rem(19px),
-    'small': rem(22px)
-);
-
 :host {
-    --textarea-height: #{sizable(
-        rem(82px, map.get($base-scale-size, 'small')),
-        rem(82px, map.get($base-scale-size, 'medium')),
-        rem(82px, map.get($base-scale-size, 'large'))
-    )};
     --component-size: var(--ig-size, var(--ig-size-large));
 
     display: block;
@@ -62,18 +51,10 @@ textarea {
     overflow: auto;
     text-overflow: ellipsis;
 
-    /* resets typography styles */
-    line-height: normal;
-
     &::placeholder {
         opacity: 1;
         line-height: normal;
     }
-
-    &:not([type='*']) {
-        /* resets typography styles */
-        line-height: normal;
-    }
 }
 
 %prefix,