NativeScript · vtrifonov · Mar 16, 2020 · Mar 12, 2020 · Mar 12, 2020 · Mar 12, 2020
diff --git a/api-reports/NativeScript.api.md b/api-reports/NativeScript.api.md
@@ -2225,8 +2225,12 @@ export class TabNavigationBase extends View {
 
     getTabBarItemTextTransform(tabStripItem: TabStripItem): any
 
+    getTabBarSelectedItemColor(): Color
+
     getTabBarTextTransform(): any
 
+    getTabBarUnSelectedItemColor(): Color
+
     ios: any /* UITabBarController */;
 
     items: Array<TabContentItem>;
@@ -2266,8 +2270,12 @@ export class TabNavigationBase extends View {
 
     setTabBarItemTitle(tabStripItem: TabStripItem, value: any): any
 
+    setTabBarSelectedItemColor(value: Color)
+
     setTabBarTextTransform(value: any): void
 
+    setTabBarUnSelectedItemColor(value: Color)
+
     tabStrip: TabStrip;
 }
 
@@ -2320,6 +2328,10 @@ export class TabStrip extends View {
     on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
 
     on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
+
+    selectedItemColor: Color;
+
+    unSelectedItemColor: Color;
 }
 
 // @public

diff --git a/e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.ts b/e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.ts
@@ -1,8 +1,11 @@
 import { EventData } from "tns-core-modules/data/observable";
 import { TabView } from "tns-core-modules/ui/tab-view";
+import { isIOS } from "tns-core-modules/platform";
 
 export function onLoaded(args: EventData) {
     console.log("TEST", args.object);
     const tabView = <TabView>args.object;
-    tabView.ios.tabBar.translucent = false;
+    if (isIOS) {
+        tabView.ios.tabBar.translucent = false;
+    }
 }
diff --git a/e2e/ui-tests-app/app/bottom-navigation/item-color-page.css b/e2e/ui-tests-app/app/bottom-navigation/item-color-page.css
@@ -0,0 +1,7 @@
+.font-awesome {
+    font-family: "FontAwesome";
+}
+
+.font-size {
+    font-size: 36;
+}
diff --git a/e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml b/e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml
@@ -0,0 +1,40 @@
+<Page class="page">
+
+  <ActionBar title="BottomNavigation item-color" icon="" class="action-bar">
+  </ActionBar>
+
+  <BottomNavigation automationText="tabNavigation">
+    <TabStrip selectedItemColor="red" unSelectedItemColor="green">
+        <TabStripItem>
+            <Label text="First"/>
+            <Image src="res://baseline_motorcycle_black_24"/>
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Second"/>
+            <Image src="res://up"/>
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Third"/>
+            <Image src="font://&#xF10B;" class="font-awesome font-size" />
+        </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem class="special">
+        <GridLayout>
+          <Label text="First View" />
+        </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem>
+        <GridLayout>
+          <Label text="Second View" />
+        </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem>
+        <GridLayout>
+          <Label text="Third View" />
+        </GridLayout>
+    </TabContentItem>
+  </BottomNavigation>
+</Page>
diff --git a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts
@@ -26,6 +26,7 @@ export function loadExamples() {
     examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
     examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
     examples.set("reselect", "bottom-navigation/reselect-page");
+    examples.set("item-color", "bottom-navigation/item-color-page");
 
     return examples;
 }
diff --git a/e2e/ui-tests-app/app/tabs/frame-in-tabs.xml b/e2e/ui-tests-app/app/tabs/frame-in-tabs.xml
@@ -1,6 +1,6 @@
 <Page class="page">
     <StackLayout>
-        <Tabs highlightColor="red" offscreenTabLimit="1">
+        <Tabs highlightColor="red" offscreenTabLimit="1" automationText="tabNavigation">
             <TabStrip highlightColor="green" itemTap="onItemTap">
                 <TabStripItem title="1"></TabStripItem>
                 <TabStripItem title="2"></TabStripItem>

diff --git a/e2e/ui-tests-app/app/tabs/item-color-page.css b/e2e/ui-tests-app/app/tabs/item-color-page.css
@@ -0,0 +1,20 @@
+.font-awesome {
+    font-family: "FontAwesome";
+}
+
+.font-size {
+    font-size: 36;
+}
+
+
+/* TabStrip {
+    color: mediumvioletred;
+}
+
+TabStripItem {
+    color: skyblue;
+}
+
+TabStripItem:active {
+    color: darkblue;
+} */
diff --git a/e2e/ui-tests-app/app/tabs/item-color-page.xml b/e2e/ui-tests-app/app/tabs/item-color-page.xml
@@ -0,0 +1,40 @@
+<Page class="page">
+
+  <ActionBar title="Tabs item-color" icon="" class="action-bar">
+  </ActionBar>
+
+  <Tabs automationText="tabNavigation">
+    <TabStrip selectedItemColor="red" unSelectedItemColor="green">
+        <TabStripItem>
+            <Label text="First"/>
+            <Image src="res://baseline_motorcycle_black_24"/>
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Second"/>
+            <Image src="res://up"/>
+        </TabStripItem>
+        <TabStripItem>
+            <Label text="Third"/>
+            <Image src="font://&#xF10B;" class="font-awesome font-size" />
+        </TabStripItem>
+    </TabStrip>
+
+    <TabContentItem class="special">
+        <GridLayout>
+          <Label text="First View" />
+        </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem>
+        <GridLayout>
+          <Label text="Second View" />
+        </GridLayout>
+    </TabContentItem>
+
+    <TabContentItem>
+        <GridLayout>
+          <Label text="Third View" />
+        </GridLayout>
+    </TabContentItem>
+  </Tabs>
+</Page>
diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts
@@ -33,6 +33,7 @@ export function loadExamples() {
     examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page");
     examples.set("custom-tabstrip", "tabs/custom-tabstrip-page");
     examples.set("frame-in-tabs", "tabs/frame-in-tabs");
+    examples.set("item-color", "tabs/item-color-page");
 
     return examples;
 }
diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
@@ -303,4 +303,20 @@ describe(`${suite}-${spec}-suite`, async function () {
         assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
         await bottomNavigationBasePage.navigateBackToSuitMainPage();
     });
+
+    it(`${spec}-item-color`, async function () {
+        await bottomNavigationBasePage.navigateToSample("item-color");
+        await bottomNavigationBasePage.refreshTabItems();
+        await driver.imageHelper.compareScreen();
+
+        // go through the tabs and check that they are loaded
+        await bottomNavigationBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await bottomNavigationBasePage.tabOnItem(2);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await bottomNavigationBasePage.navigateBackToSuitMainPage();
+    });
 });
diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
@@ -284,21 +284,38 @@ describe(`${imagePrefix}-suite`, async function () {
         await tabsViewBasePage.navigateBackToSuitMainPage();
     });
 
-    // it(`${imagePrefix}-frame-in-tabs`, async function () {
-    //     await tabsViewBasePage.navigateToSample("frame-in-tabs");
-    //     await driver.imageHelper.compareScreen();
+    it(`${imagePrefix}-frame-in-tabs`, async function () {
+        await tabsViewBasePage.navigateToSample("frame-in-tabs");
+        await tabsViewBasePage.refreshTabItems();
+        await driver.imageHelper.compareScreen();
 
-    //     // go through the tabs and check that they are loaded
-    //     await tabsViewBasePage.tabOnItem(1);
-    //     await driver.imageHelper.compareScreen();
+        // go through the tabs and check that they are loaded
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
 
-    //     await tabsViewBasePage.tabOnItem(2);
-    //     await driver.imageHelper.compareScreen();
+        await tabsViewBasePage.tabOnItem(2);
+        await driver.imageHelper.compareScreen();
 
-    //     await tabsViewBasePage.tabOnItem(3);
-    //     await driver.imageHelper.compareScreen();
+        await tabsViewBasePage.tabOnItem(3);
+        await driver.imageHelper.compareScreen();
 
-    //     assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
-    //     await tabsViewBasePage.navigateBackToSuitMainPage();
-    // });
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
+
+    it(`${spec}-item-color`, async function () {
+        await tabsViewBasePage.navigateToSample("item-color");
+        await tabsViewBasePage.refreshTabItems();
+        await driver.imageHelper.compareScreen();
+
+        // go through the tabs and check that they are loaded
+        await tabsViewBasePage.tabOnItem(1);
+        await driver.imageHelper.compareScreen();
+
+        await tabsViewBasePage.tabOnItem(2);
+        await driver.imageHelper.compareScreen();
+
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+        await tabsViewBasePage.navigateBackToSuitMainPage();
+    });
 });
diff --git a/nativescript-core/package.json b/nativescript-core/package.json
@@ -1,63 +1,61 @@
 {
-  "name": "@nativescript/core",
-  "main": "index",
-  "types": "index.d.ts",
-  "description": "Telerik NativeScript Core Modules",
-  "version": "6.5.0",
-  "homepage": "https://www.nativescript.org",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/NativeScript/NativeScript"
-  },
-  "files": [
-    "**/*.d.ts",
-    "**/*.js",
-    "**/platforms/ios/**",
-    "**/platforms/android/**",
-    "**/package.json",
-    "!org.nativescript.widgets.d.ts"
-  ],
-  "license": "Apache-2.0",
-  "dependencies": {
-    "nativescript-hook": "0.2.5",
-    "reduce-css-calc": "^2.1.6",
-    "css-tree": "^1.0.0-alpha.37",
-    "semver": "6.3.0",
-    "tns-core-modules-widgets": "next",
-    "tslib": "1.10.0"
-  },
-  "devDependencies": {
-    "@types/chai": "~4.2.5",
-    "@types/node": "~10.12.18",
-    "tns-platform-declarations": "next"
-  },
-  "scripts": {
-    "version": "conventional-changelog -p angular -i ../CHANGELOG.md -s && git add ../CHANGELOG.md",
-    "postinstall": "node cli-hooks/postinstall.js",
-    "preuninstall": "node cli-hooks/preuninstall.js"
-  },
-  "nativescript": {
-    "platforms": {
-      "ios": "6.0.0",
-      "android": "6.0.0"
+    "name": "@nativescript/core",
+    "main": "index",
+    "types": "index.d.ts",
+    "description": "Telerik NativeScript Core Modules",
+    "version": "6.5.0",
+    "homepage": "https://www.nativescript.org",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/NativeScript/NativeScript"
     },
-    "hooks": [
-      {
-        "name": "nativescript-core",
-        "type": "before-checkForChanges",
-        "script": "cli-hooks/before-checkForChanges.js",
-        "inject": true
-      }
-    ]
-  },
-  "snapshot": {
-    "android": {
-      "tns-java-classes": {
-        "modules": [
-          "ui/frame/activity",
-          "ui/frame/fragment"
-        ]
-      }
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/platforms/ios/**",
+        "**/platforms/android/**",
+        "**/package.json",
+        "!org.nativescript.widgets.d.ts"
+    ],
+    "license": "Apache-2.0",
+    "dependencies": {
+        "css-tree": "^1.0.0-alpha.37",
+        "nativescript-hook": "0.2.5",
+        "reduce-css-calc": "^2.1.6",
+        "semver": "6.3.0",
+        "tns-core-modules-widgets": "next",
+        "tslib": "1.10.0"
+    },
+    "devDependencies": {
+        "@types/chai": "~4.2.5",
+        "@types/node": "~10.12.18",
+        "tns-platform-declarations": "next"
+    },
+    "scripts": {
+        "version": "conventional-changelog -p angular -i ../CHANGELOG.md -s && git add ../CHANGELOG.md",
+        "postinstall": "node cli-hooks/postinstall.js",
+        "preuninstall": "node cli-hooks/preuninstall.js"
+    },
+    "nativescript": {
+        "platforms": {
+            "ios": "6.0.0",
+            "android": "6.0.0"
+        },
+        "hooks": [{
+            "name": "nativescript-core",
+            "type": "before-checkForChanges",
+            "script": "cli-hooks/before-checkForChanges.js",
+            "inject": true
+        }]
+    },
+    "snapshot": {
+        "android": {
+            "tns-java-classes": {
+                "modules": [
+                    "ui/frame/activity",
+                    "ui/frame/fragment"
+                ]
+            }
+        }
     }
-  }
-}
+}