feat(css-classes): add system appearance CSS class to modal root view

nativescript-core/application/application-common.ts

@@ -41,7 +41,13 @@ import {
     UnhandledErrorEventData
 } from "./application";
 
-import { CLASS_PREFIX, pushToRootViewCssClasses, removeFromRootViewCssClasses } from "../css/system-classes";
+import {
+    CLASS_PREFIX,
+    pushToRootViewCssClasses,
+    removeFromModalRootViewCssClasses,
+    removeFromRootViewCssClasses,
+    pushToModalRootViewCssClasses
+} from "../css/system-classes";
 import { DeviceOrientation, SystemAppearance } from "../ui/enums/enums";
 
 export { UnhandledErrorEventData, DiscardedErrorEventData, CssChangedEventData, LoadAppCSSEventData };
@@ -133,11 +139,13 @@ export function loadAppCss(): void {
 }
 
 function applyCssClass(rootView: View, cssClass: string) {
+    pushToModalRootViewCssClasses(cssClass);
     pushToRootViewCssClasses(cssClass);
     rootView.cssClasses.add(cssClass);
 }
 
 function removeCssClass(rootView: View, cssClass: string) {
+    removeFromModalRootViewCssClasses(cssClass);
     removeFromRootViewCssClasses(cssClass);
     rootView.cssClasses.delete(cssClass);
 }

nativescript-core/application/application.ios.ts

@@ -22,6 +22,7 @@ import { Builder } from "../ui/builder";
 import {
     CLASS_PREFIX,
     getRootViewCssClasses,
+    pushToModalRootViewCssClasses,
     pushToRootViewCssClasses
 } from "../css/system-classes";
 
@@ -496,6 +497,7 @@ function setRootViewCssClasses(rootView: View): void {
 function setRootViewSystemAppearanceCssClass(rootView: View): void {
     if (majorVersion >= 13) {
         const systemAppearanceCssClass = `${CLASS_PREFIX}${iosApp.systemAppearance}`;
+        pushToModalRootViewCssClasses(systemAppearanceCssClass);
         pushToRootViewCssClasses(systemAppearanceCssClass);
         rootView.cssClasses.add(systemAppearanceCssClass);
     }

nativescript-core/css/system-classes.d.ts

@@ -10,7 +10,7 @@ export const CLASS_PREFIX: string;
 /**
  * Gets CSS system class for modal root view.
  */
-export function getModalRootViewCssClass(): string;
+export function getModalRootViewCssClasses(): string[];
 
 /**
  * Gets CSS system classes for root view.
@@ -18,7 +18,13 @@ export function getModalRootViewCssClass(): string;
 export function getRootViewCssClasses(): string[];
 
 /**
- * Appends new CSS class to the system classes and returns the new length of the array.
+ * Appends new CSS class to the modal root view system classes and returns the new length of the array.
+ * @param value New CSS system class.
+ */
+export function pushToModalRootViewCssClasses(value: string): number;
+
+/**
+ * Appends new CSS class to the root view system classes and returns the new length of the array.
  * @param value New CSS system class.
  */
 export function pushToRootViewCssClasses(value: string): number;

nativescript-core/css/system-classes.ts

@@ -3,30 +3,42 @@ const ROOT = "root";
 
 export const CLASS_PREFIX = "ns-";
 
-const modalRootViewCssClass = `${CLASS_PREFIX}${MODAL}`;
+const modalRootViewCssClasses = [`${CLASS_PREFIX}${MODAL}`];
 const rootViewCssClasses = [`${CLASS_PREFIX}${ROOT}`];
 
-export function getModalRootViewCssClass(): string {
+function removeFromCssClasses(cssClasses: string[], value: string) {
-    return modalRootViewCssClass;
+    const index = cssClasses.indexOf(value);
+    let removedElement;
+    if (index > -1) {
+        removedElement = cssClasses.splice(index, 1);
+    }
+    return removedElement;
+}
+
+export function getModalRootViewCssClasses(): string[] {
+    return modalRootViewCssClasses;
 }
 
 export function getRootViewCssClasses(): string[] {
     return rootViewCssClasses;
 }
 
+export function pushToModalRootViewCssClasses(value: string): number {
+    modalRootViewCssClasses.push(value);
+
+    return rootViewCssClasses.length;
+}
+
 export function pushToRootViewCssClasses(value: string): number {
     rootViewCssClasses.push(value);
 
     return rootViewCssClasses.length;
 }
 
+export function removeFromModalRootViewCssClasses(value: string): string {
+    return removeFromCssClasses(modalRootViewCssClasses, value);
+}
+
 export function removeFromRootViewCssClasses(value: string): string {
-    const index = rootViewCssClasses.indexOf(value);
+    return removeFromCssClasses(rootViewCssClasses, value);
-    let removedElement;
-
-    if (index > -1) {
-        removedElement = rootViewCssClasses.splice(index, 1);
-    }
-
-    return removedElement;
 }

nativescript-core/ui/core/view-base/view-base.ts

@@ -7,7 +7,7 @@ import { Page } from "../../page";
 
 // Types.
 import { Property, CssProperty, CssAnimationProperty, InheritedProperty, Style, clearInheritedProperties, propagateInheritableProperties, propagateInheritableCssProperties, initNativeView } from "../properties";
-import { getModalRootViewCssClass, getRootViewCssClasses } from "../../../css/system-classes";
+import { getModalRootViewCssClasses, getRootViewCssClasses } from "../../../css/system-classes";
 import { Source } from "../../../utils/debug";
 import { Binding, BindingOptions, Observable, WrappedValue, PropertyChangeData, traceEnabled, traceWrite, traceCategories } from "../bindable";
 import { isIOS, isAndroid } from "../../../platform";
@@ -1040,16 +1040,16 @@ export const classNameProperty = new Property<ViewBase, string>({
     valueChanged(view: ViewBase, oldValue: string, newValue: string) {
         const cssClasses = view.cssClasses;
 
-        const modalViewCssClass = getModalRootViewCssClass();
+        const modalViewCssClasses = getModalRootViewCssClasses();
         const rootViewCssClasses = getRootViewCssClasses();
 
-        const shouldAddModalRootViewCssClass = cssClasses.has(modalViewCssClass);
+        const shouldAddModalRootViewCssClasses = cssClasses.has(modalViewCssClasses[0]);
         const shouldAddRootViewCssClasses = cssClasses.has(rootViewCssClasses[0]);
 
         cssClasses.clear();
 
-        if (shouldAddModalRootViewCssClass) {
+        if (shouldAddModalRootViewCssClasses) {
-            cssClasses.add(modalViewCssClass);
+            modalViewCssClasses.forEach(c => cssClasses.add(c));
         } else if (shouldAddRootViewCssClasses) {
             rootViewCssClasses.forEach(c => cssClasses.add(c));
         }

nativescript-core/ui/core/view/view-common.ts

@@ -19,7 +19,7 @@ import {
     fromString as gestureFromString
 } from "../../gestures";
 
-import { getModalRootViewCssClass } from "../../../css/system-classes";
+import { getModalRootViewCssClasses } from "../../../css/system-classes";
 import { Builder } from "../../builder";
 import { sanitizeModuleName } from "../../builder/module-name-sanitizer";
 import { StyleScope } from "../../styling/style-scope";
@@ -371,7 +371,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) {
         _rootModalViews.push(this);
 
-        const modalRootViewCssClass = getModalRootViewCssClass();
+        const modalRootViewCssClass = getModalRootViewCssClasses()[0];
         this.cssClasses.add(modalRootViewCssClass);
 
         parent._modal = this;

nativescript-core/ui/core/view/view.android.ts

@@ -19,6 +19,7 @@ import {
 } from "../../styling/style-properties";
 
 import { Background, ad as androidBackground } from "../../styling/background";
+import { getModalRootViewCssClasses } from "../../../css/system-classes";
 import { profile } from "../../../profiling";
 import { topmost } from "../../frame/frame-stack";
 import { AndroidActivityBackPressedEventData, android as androidApp } from "../../../application";
@@ -633,6 +634,13 @@ export class View extends ViewCommon {
     }
     protected _showNativeModalView(parent: View, options: ShowModalOptions) {
         super._showNativeModalView(parent, options);
+
+        const modalRootViewCssClasses = getModalRootViewCssClasses();
+        if (modalRootViewCssClasses.length > 1) {
+            const modalRootViewSystemAppearanceCssClass = getModalRootViewCssClasses()[1];
+            this.cssClasses.add(modalRootViewSystemAppearanceCssClass);
+        }
+
         initializeDialogFragment();
 
         const df = new DialogFragment();

nativescript-core/ui/core/view/view.ios.ts

@@ -8,6 +8,7 @@ import {
 } from "./view-common";
 
 import { ios as iosBackground, Background } from "../../styling/background";
+import { getModalRootViewCssClasses } from "../../../css/system-classes";
 import { ios as iosUtils } from "../../../utils/utils";
 import {
     Visibility,
@@ -398,7 +399,15 @@ export class View extends ViewCommon {
 
         this._setupAsRootView({});
 
+
         super._showNativeModalView(parentWithController, options);
+
+        const modalRootViewCssClasses = getModalRootViewCssClasses();
+        if (majorVersion >= 13 && modalRootViewCssClasses.length > 1) {
+            const modalRootViewSystemAppearanceCssClass = getModalRootViewCssClasses()[1];
+            this.cssClasses.add(modalRootViewSystemAppearanceCssClass);
+        }
+
         let controller = this.viewController;
         if (!controller) {
             const nativeView = this.ios || this.nativeViewProtected;

nativescript-core/ui/frame/frame.android.ts

@@ -20,7 +20,12 @@ import {
 
 // TODO: Remove this and get it from global to decouple builder for angular
 import { Builder } from "../builder";
-import { CLASS_PREFIX, getRootViewCssClasses, pushToRootViewCssClasses } from "../../css/system-classes";
+import {
+    CLASS_PREFIX,
+    getRootViewCssClasses,
+    pushToModalRootViewCssClasses,
+    pushToRootViewCssClasses
+} from "../../css/system-classes";
 import { device } from "../../platform/platform";
 import { profile } from "../../profiling";
 
@@ -1342,6 +1347,8 @@ class ActivityCallbacksImplementation implements AndroidActivityCallbacks {
             pushToRootViewCssClasses(`${CLASS_PREFIX}${ANDROID_PLATFORM}`);
             pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`);
             pushToRootViewCssClasses(`${CLASS_PREFIX}${application.android.orientation}`);
+
+            pushToModalRootViewCssClasses(`${CLASS_PREFIX}${application.android.systemAppearance}`);
             pushToRootViewCssClasses(`${CLASS_PREFIX}${application.android.systemAppearance}`);
 
             const rootViewCssClasses = getRootViewCssClasses();