Merge branch 'master' into feat/table-expand-all

Author: eduardmarcinco

src/modal/modal.component.ts

@@ -96,10 +96,6 @@ export class ModalDemo {
 				[attr.aria-label]="ariaLabel"
 				#modal>
 				<ng-content></ng-content>
-				<div
-					*ngIf="hasScrollingContent !== null ? hasScrollingContent : shouldShowScrollbar"
-					class="cds--modal-content--overflow-indicator">
-				</div>
 			</div>
 		</cds-overlay>
 	`
@@ -164,7 +160,7 @@ export class Modal implements AfterViewInit, OnChanges, OnDestroy {
 		private renderer: Renderer2
 	) { }
 
-	ngOnChanges({ open }: SimpleChanges) {
+	ngOnChanges({ open, hasScrollingContent }: SimpleChanges) {
 		if (open) {
 			if (open.currentValue) {
 				// `100` is just enough time to allow the modal
@@ -179,13 +175,17 @@ export class Modal implements AfterViewInit, OnChanges, OnDestroy {
 				this.trigger.focus();
 			}
 		}
+		if (hasScrollingContent) {
+			this.updateScrollbar();
+		}
 	}
 
 	/**
 	 * Set document focus to be on the modal component after it is initialized.
 	 */
 	ngAfterViewInit() {
 		this.focusInitialElement();
+		this.updateScrollbar();
 	}
 
 	/**
@@ -244,4 +244,16 @@ export class Modal implements AfterViewInit, OnChanges, OnDestroy {
 			setTimeout(() => this.modal.nativeElement.focus());
 		}
 	}
+
+	private updateScrollbar() {
+		const modalContent = this.modal ? this.modal.nativeElement.querySelector(".cds--modal-content") : null;
+		const showScrollbar = this.hasScrollingContent !== null ? this.hasScrollingContent : this.shouldShowScrollbar;
+		if (modalContent) {
+			if (showScrollbar) {
+				this.renderer.addClass(modalContent, "cds--modal-scroll-content");
+			} else {
+				this.renderer.removeClass(modalContent, "cds--modal-scroll-content");
+			}
+		}
+	}
 }