igniteui-angular 20.2.0-alpha.2 → 20.2.0-alpha.4

package/lib/core/styles/components/input/_input-group-theme.scss

@@ -16,28 +16,13 @@
     $indigo-theme: $variant == 'indigo';
     $fluent-theme: $variant == 'fluent';
     $bootstrap-theme: $variant == 'bootstrap';
-    $NOT-material-theme: $variant != 'material';
-    $NOT-indigo-theme: $variant != 'indigo';
-    $NOT-fluent-theme: $variant != 'fluent';
-    $NOT-bootstrap-theme: $variant != 'bootstrap';
 
     $required-symbol: '*';
     $required-symbol-margin: rem(2px);
 
-    // This creates an inverse relationship
-    // between the value of the base scale size and
-    // the sizing of all inner elements.
-    // i.e. the bigger the scale size,
-    // the smaller the padding of the inner items.
-    $base-scale-size: (
-        'comfortable': 16px,
-        'cosy': 19px,
-        'compact': 22px
-    );
-
     $bootstrap-inline-padding: (
-        'comfortable': rem(16px),
-        'cosy': rem(12px),
+        'comfortable': rem(14px),
+        'cosy': rem(10px),
         'compact': rem(8px)
     );
 
@@ -50,12 +35,6 @@
     $input-top-padding: rem(20px);
     $input-bottom-padding: rem(6px);
 
-    $bundle-padding-top: (
-        'comfortable': rem(18px, map.get($base-scale-size, 'comfortable')),
-        'cosy': rem(18px, map.get($base-scale-size, 'cosy')),
-        'compact': rem(18px, map.get($base-scale-size, 'compact')),
-    );
-
     $hint-spacing-block: map.get((
         'material': rem(4px),
         'fluent': rem(5px),
@@ -64,7 +43,7 @@
     ), $variant);
 
     $hint-spacing-inline: map.get((
-        'material': sizable(rem(14px), rem(16px), rem(18px)),
+        'material': sizable(rem(12px), rem(14px), rem(16px)),
         'fluent': 0,
         'bootstrap': 0,
         'indigo': 0,
@@ -77,6 +56,23 @@
         'indigo': rem(15px),
     ), $variant);
 
+    $material-box-top-padding: sizable(rem(16px), rem(20px), rem(24px));
+    $material-border-top-padding: sizable(rem(8px), rem(12px), rem(16px));
+
+    $textarea-top-padding: map.get((
+        'material': rem(0px),
+        'fluent': sizable(rem(6px), rem(10px), rem(14px)),
+        'bootstrap': sizable(rem(4px), rem(8px), rem(12px)),
+        'indigo': sizable(rem(4px), rem(6px), rem(8px)),
+    ), $variant);
+
+    $textarea-font: map.get((
+        'material': 'var(--ig-subtitle-1-line-height)',
+        'fluent': 'var(--ig-body-2-line-height)',
+        'bootstrap': 'var(--ig-body-1-line-height)',
+        'indigo': 'var(--ig-body-2-line-height)',
+    ), $variant);
+
     // Base Start
     %form-group-prefix--upload {
         padding: 0;
@@ -115,7 +111,7 @@
             } @else if $indigo-theme {
                 padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
             } @else {
-                padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+                padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
             }
         }
     }
@@ -149,7 +145,7 @@
         @include sizable();
         --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))};
 
         position: relative;
         display: block;
@@ -869,7 +865,7 @@
 
         @if $variant == 'material' {
             overflow: hidden;
-            min-width: pad(rem(10px), rem(12px), rem(14px));
+            min-width: pad(rem(8px), rem(10px), rem(12px));
         }
     }
 
@@ -1020,7 +1016,7 @@
     %form-group-display--search {
         %igx-input-group__notch--search,
         %form-group-bundle-main--search {
-            @if $variant != 'indigo' {
+            @if $variant == 'material' {
                 padding-inline: rem(4px);
             }
         }
@@ -1083,11 +1079,9 @@
     }
 
     %form-group-label {
-        padding-inline-end: rem(4px);
         backface-visibility: hidden;
         will-change: transform;
         transform-origin: top left;
-        margin-inline-start: pad-inline(0, rem(-2px), rem(-4px));
     }
 
     %form-group-label--border {
@@ -1204,6 +1198,18 @@
     }
 
     @if $variant == 'material' {
+        %textarea-group:not(%textarea-group--outlined) {
+            --textarea-box-padding: #{pad-block(rem(8px), rem(12px), rem(16px))};
+
+            &:has(%igx-input-group__notch:not(:empty)) {
+                --textarea-box-padding: #{pad-block(rem(16px), rem(20px), rem(24px))};
+            }
+
+            %form-group-textarea {
+                margin-block-end: rem(2px);
+            }
+        }
+
         %textarea-group:not(%suffixed) {
             %form-group-bundle-main {
                 grid-area: 1 / 2 / span 1 / span 3;
@@ -1211,7 +1217,7 @@
             }
 
             textarea {
-                padding-inline-end: rem(4px);
+                padding-inline-end: #{pad-inline(rem(12px), rem(14px), rem(16px))};
                 width: calc(100% - #{rem(1px)});
             }
         }
@@ -1227,7 +1233,7 @@
                 %form-group-textarea-label:not(%textarea-group-label--focused) {
                     @include type-style('subtitle-1');
 
-                    top: calc($input-top-padding - #{rem(3px)});
+                    top: calc(#{$material-box-top-padding} - #{rem(3px)});
                     transform: translateY(0);
                     margin-bottom: auto;
                 }
@@ -1244,13 +1250,6 @@
     }
 
     %form-group-textarea-group-bundle {
-        // 3 lines * 22px + 8px bottom padding + 8px top padding
-        --textarea-size: #{sizable(
-            rem(82px, map.get($base-scale-size, 'compact')),
-            rem(82px, map.get($base-scale-size, 'cosy')),
-            rem(82px, map.get($base-scale-size, 'comfortable'))
-        )};
-        min-height: var(--textarea-size) !important;
         height: auto !important;
 
         %form-group-label {
@@ -1260,25 +1259,25 @@
 
     @if $material-theme {
         %form-group-textarea-label {
-            top: calc($input-top-padding - #{rem(1px)});
+            top: calc(#{$material-box-top-padding} - #{rem(1px)});
             margin-block-end: auto;
         }
 
         %textarea-group--outlined {
             %form-group-textarea-label {
-                top: calc($input-top-padding - #{rem(3px)});
+                top: calc(#{$material-border-top-padding} - #{rem(3px)});
             }
         }
 
         %textarea-group--box {
             %form-group-textarea-label {
-                top: calc($input-top-padding - #{rem(2px)});
+                top: calc(#{$material-box-top-padding} - #{rem(2px)});
             }
         }
 
         %textarea-group-label--focused {
             transform: translateY(0);
-            top: calc(#{$input-top-padding} / 4);
+            top: calc(#{$material-box-top-padding} / 4);
         }
 
         %textarea-group-label--filled--border,
@@ -1336,7 +1335,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
 
-        &:not([type='date']) {
+        &:not(%form-group-textarea, [type='date']) {
             line-height: 0 !important; /* Reset typography */
         }
 
@@ -1450,29 +1449,13 @@
     }
 
     %form-group-textarea {
-        --textarea-size: #{sizable(
-            rem(82px, map.get($base-scale-size, 'compact')),
-            rem(82px, map.get($base-scale-size, 'cosy')),
-            rem(82px, map.get($base-scale-size, 'comfortable'))
-        )};
-
-        min-height: var(--textarea-size);
         height: auto;
         resize: vertical;
         overflow: hidden;
+        z-index: 1;
 
         @if $material-theme {
             padding: 0;
-            inset-block-start: rem(-3px);
-        }
-
-        // resets typography styles
-        line-height: normal !important;
-
-        z-index: 1;
-
-        &:not([type='*']) {
-            line-height: normal !important; /* resets typography styles */
         }
     }
 
@@ -1485,7 +1468,17 @@
         }
 
         @if $material-theme {
-            padding-block-start: $input-top-padding;
+            padding-block-start: var(--textarea-box-padding);
+        }
+    }
+
+    %textarea-group--outlined {
+        %form-group-textarea-group-bundle-main {
+            padding-block-start: #{$material-border-top-padding};
+        }
+
+        %form-group-textarea {
+            inset-block-start: rem(-2px);
         }
     }
 
@@ -1637,13 +1630,13 @@
     %form-group-helper {
         --ig-caption-margin-top: #{$hint-spacing-block};
         --ig-caption-margin-bottom: 0;
+        --ig-body-2-margin-top: #{$hint-spacing-block};
 
         color: var-get($theme, 'helper-text-color');
         position: relative;
         display: grid;
         grid-auto-rows: minmax($hint-min-size, auto);
         padding-inline: pad-inline($hint-spacing-inline);
-
         justify-content: space-between;
 
         > * {
@@ -1670,7 +1663,9 @@
     }
 
     %form-group-helper-item {
-        display: flex;
+        @include line-clamp(2, true, true);
+
+        overflow-wrap: anywhere;
         align-items: center;
         position: relative;
     }
@@ -1710,7 +1705,9 @@
             [igxPrefix],
             igx-suffix,
             [igxSuffix] {
-                padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
+                &:not(:empty) {
+                    padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
+                }
             }
         }
 
@@ -2014,13 +2011,14 @@
     }
 
     %indigo-textarea {
-        padding-block: rem(6px);
+        padding-block: $textarea-top-padding 0;
         padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
         inset-block-end: rem(2px);
     }
 
     %fluent-textarea {
-        padding: rem(8px);
+        padding-inline: pad-inline(rem(8px));
+        padding-block: $textarea-top-padding 0;
     }
 
     %fluent-input-disabled {
@@ -2038,8 +2036,6 @@
         color: var-get($theme, 'idle-secondary-color');
 
         @if $variant == 'fluent' {
-            --ig-subtitle-2-line-height: rem(16px);
-
             margin-block-end: rem(5px);
         } @else {
             margin-block-end: rem(4px);
@@ -2113,7 +2109,7 @@
     %form-group-prefix-fluent-search,
     %form-group-suffix-fluent-search {
         &:not(:empty) {
-            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+            padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
         }
     }
 
@@ -2299,6 +2295,10 @@
             map.get($bootstrap-inline-padding, 'cosy'),
             map.get($bootstrap-inline-padding, 'comfortable')
         );
+
+        &:is(textarea) {
+            padding-block: $textarea-top-padding 0;
+        }
     }
 
     // The :not selector is needed otherwise bootstrap will override the %autofill-background-fix

package/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -8,7 +8,6 @@
     @include css-vars($theme, '.igx-time-picker');
 
     $variant: map.get($theme, '_meta', 'theme');
-    $not-bootstrap-theme: $variant != 'bootstrap';
 
     $picker-buttons-padding: map.get((
         'material': rem(8px),
@@ -24,6 +23,21 @@
         'indigo': rem(16px),
     ), $variant);
 
+    .igx-input-group {
+        display: flex;
+        flex-direction: column;
+
+        @if $variant == 'indigo' or $variant == 'bootstrap' {
+            [igxLabel] {
+                margin-block-end: rem(4px);
+            }
+        } @else if $variant == 'fluent' {
+            [igxLabel] {
+                margin-block-end: rem(5px);
+            }
+        }
+    }
+
     %time-picker-display {
         @include sizable();
 

package/lib/core/styles/typography/_bootstrap.scss

@@ -59,7 +59,9 @@
     ));
     @include chip-typography();
     @include column-actions-typography();
-    @include date-range-typography();
+    @include date-range-typography($categories: (
+        label: 'body-1',
+    ));
     @include dialog-typography($categories: (
         title: 'h5',
         content: 'body-1'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "20.2.0-alpha.2",
+  "version": "20.2.0-alpha.4",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -73,7 +73,7 @@
     "tslib": "^2.3.0",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
-    "igniteui-theming": "^21.0.2",
+    "igniteui-theming": "^22.0.0",
     "@igniteui/material-icons-extended": "^3.1.0"
   },
   "peerDependencies": {