Merge branch 'sstoychev/master-detail-approach-2' of https://github.com/IgniteUI/igniteui-angular into sstoychev/master-detail-approach-2

Author: ChronosSF

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -51,7 +51,7 @@
 
         @include e(input) {
             @extend %form-group-input !optional;
-            @extend %chrome-autofill-fix !optional;
+            @extend %autofill-background-fix !optional;
             @extend %edge-clear-icon-fix !optional;
 
             &:hover {
@@ -421,6 +421,7 @@
 
         // Type border START
         @include m(border) {
+            @extend %form-group-display--border !optional;
             @extend %form-group-display--no-margin !optional;
 
             @include e(bundle) {

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -394,6 +394,25 @@
         }
     }
 
+    @if $variant == 'material' {
+        %form-group-display--border {
+            &:has(input:-webkit-autofill, input:autofill) {
+                %igx-input-group__notch--border {
+                    border-block-start-color: transparent;
+                }
+
+                %form-group-label {
+                    --label-position: #{sizable(18px, 22px, 26px)};
+
+                    transform: translateY(calc(var(--label-position) * -1));
+                    margin-top: 0;
+                    overflow: hidden;
+                    will-change: font-size, color, transform;
+                }
+            }
+        }
+    }
+
     %form-group-display--box {
         %form-group-border {
             margin-bottom: 0;
@@ -464,6 +483,20 @@
                 --size: var(--input-icon) !important;
             }
         }
+
+        @if $variant == 'material' {
+            &:not(%form-group-display--border) {
+                &:has(input:-webkit-autofill, input:autofill) {
+                    %form-group-label {
+                        --floating-label-position: -73%;
+
+                        @include type-style('caption');
+
+                        transform: translateY(var(--floating-label-position));
+                    }
+                }
+            }
+        }
     }
 
     %form-group-placeholder {
@@ -1234,13 +1267,20 @@
         }
     }
 
-    %chrome-autofill-fix {
+    // This is a hack that removes the autofill background and it's essential,
+    // otherwise the background is on top of the floating label in material theme.
+    // The !important flag is because bootstrap theme(and potentially feature themes) is overriding the transition delay.
+    %autofill-background-fix {
         &:-webkit-autofill,
         &:-webkit-autofill:hover,
         &:-webkit-autofill:focus,
-        &:-webkit-autofill:active {
-            -webkit-transition-delay: 99999s;
-            transition-delay: 99999s;
+        &:-webkit-autofill:active,
+        &:autofill,
+        &:autofill:hover,
+        &:autofill:focus,
+        &:autofill:active, {
+            -webkit-transition-delay: 99999s !important;
+            transition-delay: 99999s !important;
         }
     }
 
@@ -2092,7 +2132,15 @@
             map.get($bootstrap-inline-padding, 'cosy'),
             map.get($bootstrap-inline-padding, 'comfortable')
         );
-        transition: box-shadow .15s ease-out, border .15s ease-out;
+    }
+
+    // The :not selector is needed otherwise bootstrap will override the %autofill-background-fix
+    %form-group-display--bootstrap {
+        :not(:has(input:-webkit-autofill, input:autofill)) {
+            %bootstrap-input {
+                transition: box-shadow .15s ease-out, border .15s ease-out;
+            }
+        }
     }
 
     %bootstrap-input,

projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss

@@ -11,9 +11,11 @@
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Map} $color [null] - The text color.
+/// @param {Map} $disabled-color [null] - The disabled text color.
 @function label-theme(
     $schema: $light-material-schema,
-    $color: null
+    $color: null,
+    $disabled-color: null,
 ) {
     $name: 'igx-label';
     $selector: '[igxLabel]';
@@ -31,6 +33,7 @@
         name: $name,
         selector: $selector,
         color: $color,
+        disabled-color: $disabled-color,
         theme: map.get($schema, '_meta', 'theme'),
         variant: map.get($schema, '_meta', 'theme'),
     ));

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-component.scss

@@ -115,6 +115,10 @@
             @include e(label) {
                 @extend %radio-label--disabled !optional;
             }
+
+            @include e(label, $m: before) {
+                @extend %radio-label--disabled !optional;
+            }
         }
 
         @include m(invalid) {
@@ -217,5 +221,13 @@
         @include m(vertical) {
             @extend %radio-group-display--vertical !optional;
         }
+
+        @include m(before) {
+            @extend %radio-group-display--before !optional;
+        }
+
+        @include m(disabled) {
+            @extend %radio-group-display--disabled !optional;
+        }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss

@@ -597,18 +597,40 @@
     }
 
     %radio-group-display {
-        display: block;
-        %radio-display:not(:last-of-type) {
-            margin-inline-end: $horizontal-group-margin;
+        display: grid;
+        column-gap: $horizontal-group-margin;
+        align-items: start;
+        width: max-content;
+    }
+
+    %radio-group-display:not(%radio-group-display--vertical) {
+        [igxLabel] {
+            margin-block-end: rem(16px);
+        }
+
+        igx-radio {
+            grid-row: 2;
         }
     }
 
     %radio-group-display--vertical {
-        display: flex;
-        flex-flow: column;
-        %radio-display:not(:last-of-type) {
-            margin-inline-end: 0;
-            margin-block-end: $vertical-group-margin;
+        row-gap: $vertical-group-margin;
+
+        [igxLabel] {
+            margin-block-end: if($variant == 'material', rem(16px), rem(8px));
+        }
+
+        &%radio-group-display--before {
+            igx-radio,
+            [igxLabel] {
+                justify-self: flex-end;
+            }
+        }
+    }
+
+    %radio-group-display--disabled {
+        [igxLabel] {
+            color: var-get($theme, 'disabled-color');
         }
     }
 }

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts

@@ -448,3 +448,4 @@ const dispatchRadioEvent = (eventName, radioNativeElement, fixture) => {
     radioNativeElement.dispatchEvent(new Event(eventName));
     fixture.detectChanges();
 };
+