fix(toggle): Change the way how the dropdown passes size to toggle (#14636)

Author: mddragnev

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -223,17 +223,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
             return;
         }
 
-        const target = overlaySettings && overlaySettings.target;
-
-        // Get the size from the target element
-        if (target && target instanceof Element) {
-            const styles = window.getComputedStyle(target);
-            const componentSize = styles.getPropertyValue('--component-size');
-            const globalSize = styles.getPropertyValue('--ig-size');
-            const size = componentSize || globalSize || '3';
-            this.elementRef.nativeElement.style.setProperty('--ig-size', size);
-        }
-
         this._collapsed = false;
         this.cdr.detectChanges();
 

projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts

@@ -9,7 +9,6 @@ import { IDropDownList } from './drop-down.common';
 import { DropDownActionKey } from './drop-down.common';
 import { IgxDropDownItemBaseDirective } from './drop-down-item.base';
 import { DOCUMENT } from '@angular/common';
-import { Size } from '../grids/common/enums';
 
 let NEXT_ID = 0;
 
@@ -163,14 +162,6 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit
         return this.element;
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    public get dropDownSize() {
-        return this.computedStyles?.getPropertyValue('--ig-size') || Size.Medium;
-    }
-
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/drop-down/drop-down.component.html

@@ -1,6 +1,5 @@
 <div class="igx-drop-down__list" [style.width]="width"
     igxToggle
-    [style.--ig-size]="dropDownSize"
     (appended)="onToggleContentAppended($event)"
     (opening)="onToggleOpening($event)" (opened)="onToggleOpened()"
     (closing)="onToggleClosing($event)" (closed)="onToggleClosed()">

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -1357,6 +1357,27 @@ describe('igxOverlay', () => {
 
             overlay.detachAll();
         }));
+
+        it('Should properly move computed size style to the overlay content container.', fakeAsync(() => {
+            const fixture = TestBed.createComponent(SimpleRefComponent);
+            fixture.detectChanges();
+
+            fixture.componentInstance.item.nativeElement.style.setProperty('--ig-size', 'var(--ig-size-small)');
+            fixture.detectChanges();
+            const overlayInstance = fixture.componentInstance.overlay;
+            const overlaySettings: OverlaySettings = {
+                positionStrategy: new ConnectedPositioningStrategy(),
+                modal: false,
+                closeOnOutsideClick: false
+            };
+            const firstCallId = overlayInstance.attach(fixture.componentInstance.item, overlaySettings);
+            overlayInstance.show(firstCallId);
+            tick();
+
+            const overlayContent = document.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement;
+            expect(overlayContent.style.getPropertyValue('--ig-size')).toEqual('1');
+            overlayInstance.detach(firstCallId);
+        }));
     });
 
     describe('Unit Tests - Scroll Strategies: ', () => {

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -346,6 +346,7 @@ export class IgxOverlayService implements OnDestroy {
         info.hook = this.placeElementHook(info.elementRef.nativeElement);
         const elementRect = info.elementRef.nativeElement.getBoundingClientRect();
         info.initialSize = { width: elementRect.width, height: elementRect.height };
+        this.addComponentSize(info);
         this.moveElementToOverlay(info);
         this.contentAppended.emit({ id: info.id, componentRef: info.componentRef });
         info.settings.scrollStrategy.initialize(this._document, this, info.id);
@@ -669,6 +670,11 @@ export class IgxOverlayService implements OnDestroy {
     }
 
     private updateSize(info: OverlayInfo) {
+        // set content div size
+        if (info.size) {
+            info.elementRef.nativeElement.parentElement.style.setProperty('--ig-size', info.size);
+        }
+        
         if (info.componentRef) {
             //  if we are positioning component this is first time it gets visible
             //  and we can finally get its size
@@ -977,4 +983,14 @@ export class IgxOverlayService implements OnDestroy {
             info.closeAnimationPlayer.finish();
         }
     }
+
+    private addComponentSize(info: OverlayInfo) {
+        if (info.elementRef?.nativeElement instanceof Element) {
+            const styles = this._document.defaultView.getComputedStyle(info.elementRef.nativeElement);
+            const componentSize = styles.getPropertyValue('--component-size');
+            const globalSize = styles.getPropertyValue('--ig-size');
+            const size = componentSize || globalSize;
+            info.size = size;
+        }
+    }
 }

projects/igniteui-angular/src/lib/services/overlay/utilities.ts

@@ -172,6 +172,7 @@ export interface OverlayInfo {
     transformY?: number;
     event?: Event;
     wrapperElement?: HTMLElement;
+    size?: string
 }
 
 /** @hidden */