Added selectedItemColor and unSelectedItemColor to the TabStrip (#8431)

* chore: add guard for ios

* feat(bottom-nav): adding new properties

* feat(tabs): new property implementation

* feat: new feature implementation in android

Implemented selectedItemColor and unSelectedItemColor properties on TabStrip

* chore: added some comments

* chore: change method return type

* fix: setting icon color

* fix: rendering mode setting

* chore: rename variable

* chore: fixed a typo

* chore: updated log in build gradle

* fix: item color setting in android

* fix: tab styling when no css aplied

* chore: private methods renamed

* tests: added selected-item test pages

* chore: renamed test pages

* chore: move css-tree package to the right place

* tests: added new ui tests

* fix: use renamed function

* fix: set item color

* tests: aded automationText attribute

* tests: trying to fix the tests

Co-authored-by: Dimitar Topuzov <dtopuzov@gmail.com>

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;
+    }
 }

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;
+}

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>

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;
 }

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>

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;
+} */

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>

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;
 }

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();
+    });
 });

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();
+    });
 });