chore: merge release to master (#7809)

* feat(android): fix tab resource icon size based on spec (#7737)

* feat(ios): add icon rendering mode for bottom navigation (#7738)

* fix(ios-tabs): crash when add tabstrip in loaded event (#7743)

* fix(css): parse css selectors with escape sequences (#7689) (#7732)

* fix(ios-tabs): handle nesting proxy view container (#7755)

* fix-next(css): className to preserve root views classes (#7725)

* docs: cut the 6.1.0 release (#7773)

* fix(android-list-picker): NoSuchFieldException on api29 (#7790)

* chore: hardcode tslib version to 1.10.0 (#7776)

* fix(css-calc): reduce_css_calc_1.default is not a function (#7787) (#7801)

tns-core-modules/ui/core/view-base/view-base.ts

@@ -1,10 +1,13 @@
 // Definitions.
 import { ViewBase as ViewBaseDefinition } from ".";
+import {
+    AlignSelf, FlexGrow, FlexShrink, FlexWrapBefore, Order
+} from "../../layouts/flexbox-layout";
 import { Page } from "../../page";
-import { Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from "../../layouts/flexbox-layout";
 
 // Types.
 import { Property, CssProperty, CssAnimationProperty, InheritedProperty, Style, clearInheritedProperties, propagateInheritableProperties, propagateInheritableCssProperties, initNativeView } from "../properties";
+import { getModalRootViewCssClass, 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";
@@ -22,10 +25,9 @@ export { isIOS, isAndroid, layout, Color };
 export * from "../bindable";
 export * from "../properties";
 
+import * as dnm from "../../../debugger/dom-node";
 import * as ssm from "../../styling/style-scope";
 
-// import { DOMNode } from "../../../debugger/dom-node";
-import * as dnm from "../../../debugger/dom-node";
 let domNodeModule: typeof dnm;
 
 function ensuredomNodeModule(): void {
@@ -1036,11 +1038,26 @@ bindingContextProperty.register(ViewBase);
 export const classNameProperty = new Property<ViewBase, string>({
     name: "className",
     valueChanged(view: ViewBase, oldValue: string, newValue: string) {
-        let classes = view.cssClasses;
-        classes.clear();
-        if (typeof newValue === "string" && newValue !== "") {
-            newValue.split(" ").forEach(c => classes.add(c));
+        const cssClasses = view.cssClasses;
+
+        const modalViewCssClass = getModalRootViewCssClass();
+        const rootViewCssClasses = getRootViewCssClasses();
+
+        const shouldAddModalRootViewCssClass = cssClasses.has(modalViewCssClass);
+        const shouldAddRootViewCssClasses = cssClasses.has(rootViewCssClasses[0]);
+
+        cssClasses.clear();
+
+        if (shouldAddModalRootViewCssClass) {
+            cssClasses.add(modalViewCssClass);
+        } else if (shouldAddRootViewCssClasses) {
+            rootViewCssClasses.forEach(c => cssClasses.add(c));
         }
+
+        if (typeof newValue === "string" && newValue !== "") {
+            newValue.split(" ").forEach(c => cssClasses.add(c));
+        }
+
         view._onCssStateChange();
     }
 });
@@ -1058,4 +1075,4 @@ export function booleanConverter(v: string): boolean {
     }
 
     throw new Error(`Invalid boolean: ${v}`);
-}
+}

tns-core-modules/ui/core/view/view-common.ts

@@ -5,9 +5,8 @@ import {
 } from ".";
 
 import {
-    ViewBase, Property, booleanConverter, EventData, layout,
-    getEventOrGestureName, traceEnabled, traceWrite, traceCategories,
-    InheritedProperty, ShowModalOptions
+    booleanConverter, EventData, getEventOrGestureName, InheritedProperty, layout,
+    Property, ShowModalOptions, traceCategories, traceEnabled, traceWrite, ViewBase
 } from "../view-base";
 
 import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
@@ -20,6 +19,7 @@ import {
     fromString as gestureFromString
 } from "../../gestures";
 
+import { getModalRootViewCssClass } from "../../../css/system-classes";
 import { createViewFromEntry } from "../../builder";
 import { sanitizeModuleName } from "../../builder/module-name-sanitizer";
 import { StyleScope } from "../../styling/style-scope";
@@ -31,9 +31,6 @@ export * from "../view-base";
 export { LinearGradient };
 
 import * as am from "../../animation";
-import { CSS_CLASS_PREFIX } from "../../../application";
-
-const MODAL = "modal";
 
 let animationModule: typeof am;
 function ensureAnimationModule() {
@@ -373,7 +370,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 
     protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) {
         _rootModalViews.push(this);
-        this.cssClasses.add(`${CSS_CLASS_PREFIX}${MODAL}`);
+
+        const modalRootViewCssClass = getModalRootViewCssClass();
+        this.cssClasses.add(modalRootViewCssClass);
 
         parent._modal = this;
         this._modalParent = parent;