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>

nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts

@@ -4,7 +4,7 @@
  */ /** */
 
 import {
-    View, ViewBase, Property, CoercibleProperty, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData
+    View, ViewBase, Property, CoercibleProperty, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData, Color
 } from "../../core/view";
 import { TabStrip } from "../tab-strip";
 import { TabStripItem } from "../tab-strip-item";
@@ -150,6 +150,30 @@ export class TabNavigationBase extends View {
      */
     setTabBarHighlightColor(value: any)
 
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    getTabBarSelectedItemColor(): Color
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    setTabBarSelectedItemColor(value: Color)
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    getTabBarUnSelectedItemColor(): Color
+
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    setTabBarUnSelectedItemColor(value: Color)
+
     /**
      * @private
      * Method is intended to be overridden by inheritors and used as "protected"

nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts

@@ -1,7 +1,7 @@
 // Types
 import { TabNavigationBase as TabNavigationBaseDefinition, SelectedIndexChangedEventData } from ".";
 import { TabStripItem } from "../tab-strip-item";
-import { ViewBase, AddArrayFromBuilder, AddChildFromBuilder, EventData } from "../../core/view";
+import { ViewBase, AddArrayFromBuilder, AddChildFromBuilder, EventData, Color } from "../../core/view";
 
 // Requires
 import { View, Property, CoercibleProperty, isIOS } from "../../core/view";
@@ -150,6 +150,24 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
         // overridden by inheritors
     }
 
+    public getTabBarSelectedItemColor(): Color {
+        // overridden by inheritors
+        return null;
+    }
+
+    public setTabBarSelectedItemColor(value: Color) {
+        // overridden by inheritors
+    }
+
+    public getTabBarUnSelectedItemColor(): Color {
+        // overridden by inheritors
+        return null;
+    }
+
+    public setTabBarUnSelectedItemColor(value: Color) {
+        // overridden by inheritors
+    }
+
     public getTabBarColor(): any {
         // overridden by inheritors
         return null;

nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.d.ts

@@ -32,6 +32,16 @@ export class TabStrip extends View {
      */
     highlightColor: Color;
 
+    /**
+     * Gets or sets the color of the selected item in the tab strip.
+     */
+    selectedItemColor: Color;
+
+    /**
+     * Gets or sets the color of the non-selected items in the tab strip.
+     */
+    unSelectedItemColor: Color;
+
     /**
      * @private
      */
@@ -73,3 +83,5 @@ export interface TabStripItemEventData extends EventData {
 
 export const iosIconRenderingModeProperty: Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">;
 export const isIconSizeFixedProperty: Property<TabStrip, boolean>;
+export const selectedItemColorProperty: Property<TabStrip, Color>;
+export const unSelectedItemColorProperty: Property<TabStrip, Color>;

nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts

@@ -17,6 +17,8 @@ export const traceCategory = "TabView";
 // Place this on top because the webpack ts-loader doesn't work when export
 // is after reference
 export const highlightColorProperty = new Property<TabStrip, Color>({ name: "highlightColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
+export const selectedItemColorProperty = new Property<TabStrip, Color>({ name: "selectedItemColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
+export const unSelectedItemColorProperty = new Property<TabStrip, Color>({ name: "unSelectedItemColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
 
 @CSSType("TabStrip")
 export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
@@ -25,6 +27,8 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
     public isIconSizeFixed: boolean;
     public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
     public highlightColor: Color;
+    public selectedItemColor: Color;
+    public unSelectedItemColor: Color;
     public _hasImage: boolean;
     public _hasTitle: boolean;
 
@@ -127,6 +131,28 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
 
         return parent && parent.setTabBarHighlightColor(value);
     }
+
+    [selectedItemColorProperty.getDefault](): Color {
+        const parent = <TabNavigationBase>this.parent;
+
+        return parent && parent.getTabBarSelectedItemColor();
+    }
+    [selectedItemColorProperty.setNative](value: Color) {
+        const parent = <TabNavigationBase>this.parent;
+
+        return parent && parent.setTabBarSelectedItemColor(value);
+    }
+
+    [unSelectedItemColorProperty.getDefault](): Color {
+        const parent = <TabNavigationBase>this.parent;
+
+        return parent && parent.getTabBarUnSelectedItemColor();
+    }
+    [unSelectedItemColorProperty.setNative](value: Color) {
+        const parent = <TabNavigationBase>this.parent;
+
+        return parent && parent.setTabBarUnSelectedItemColor(value);
+    }
 }
 
 export interface TabStrip {
@@ -150,3 +176,5 @@ export const isIconSizeFixedProperty = new Property<TabStrip, boolean>({
 isIconSizeFixedProperty.register(TabStrip);
 
 highlightColorProperty.register(TabStrip);
+selectedItemColorProperty.register(TabStrip);
+unSelectedItemColorProperty.register(TabStrip);