feat(tabview): add tab text font size property (#5752)

* feat(tabview): add tab text font size property

* chore(tabview): set tab font size default value

* chore(tabview): move font implementation to widget

* chore(tabview): fix font size get return type

apps/app/ui-tests-app/tab-view/main-page.ts

@@ -23,5 +23,6 @@ export function loadExamples() {
     examples.set("text-transform", "tab-view/text-transform");
     examples.set("tab-view-bottom-position", "tab-view/tab-view-bottom-position");
     examples.set("issue-5470", "tab-view/issue-5470");
+    examples.set("tab-view-tab-text-font-size", "tab-view/tab-view-tab-text-font-size");
     return examples;
 }

apps/app/ui-tests-app/tab-view/tab-view-tab-text-font-size.xml

@@ -0,0 +1,20 @@
+<Page>
+  <TabView tabTextFontSize="8">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

tns-core-modules/ui/styling/style/style.d.ts

@@ -120,6 +120,7 @@ export class Style extends Observable {
     public verticalAlignment: VerticalAlignment;
 
     // TabView-specific props
+    public tabTextFontSize: number;
     public tabTextColor: Color;
     public tabBackgroundColor: Color;
     public selectedTabTextColor: Color;

tns-core-modules/ui/styling/style/style.ts

@@ -93,6 +93,7 @@ export class Style extends Observable implements StyleDefinition {
     public verticalAlignment: VerticalAlignment;
 
     // TabView-specific props
+    public tabTextFontSize: number;
     public tabTextColor: Color;
     public tabBackgroundColor: Color;
     public selectedTabTextColor: Color;

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

@@ -103,6 +103,13 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom
         this.style.androidSelectedTabHighlightColor = value;
     }
 
+    get tabTextFontSize(): number {
+        return this.style.tabTextFontSize;
+    }
+    set tabTextFontSize(value: number) {
+        this.style.tabTextFontSize = value;
+    }
+
     get tabTextColor(): Color {
         return this.style.tabTextColor;
     }
@@ -240,6 +247,9 @@ androidOffscreenTabLimitProperty.register(TabViewBase);
 export const androidTabsPositionProperty = new Property<TabViewBase, "top" | "bottom">({ name: "androidTabsPosition", defaultValue: "top" });
 androidTabsPositionProperty.register(TabViewBase);
 
+export const tabTextFontSizeProperty = new CssProperty<Style, number>({ name: "tabTextFontSize", cssName: "tab-text-font-size", valueConverter: (v) => parseFloat(v) });
+tabTextFontSizeProperty.register(Style);
+
 export const tabTextColorProperty = new CssProperty<Style, Color>({ name: "tabTextColor", cssName: "tab-text-color", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
 tabTextColorProperty.register(Style);
 

tns-core-modules/ui/tab-view/tab-view.android.ts

@@ -3,7 +3,7 @@ import { Font } from "../styling/font";
 
 import {
     TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty,
-    tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty,
+    tabTextColorProperty, tabBackgroundColorProperty, tabTextFontSizeProperty, selectedTabTextColorProperty,
     androidSelectedTabHighlightColorProperty, androidOffscreenTabLimitProperty,
     fontSizeProperty, fontInternalProperty, View, layout, traceCategory, traceEnabled,
     traceWrite, Color
@@ -624,6 +624,17 @@ export class TabView extends TabViewBase {
         }
     }
 
+    [tabTextFontSizeProperty.getDefault](): number {
+        return this._tabLayout.getTabTextFontSize();
+    }
+    [tabTextFontSizeProperty.setNative](value: number | { nativeSize: number }) {
+        if (typeof value === "number") {
+            this._tabLayout.setTabTextFontSize(value);
+        } else {
+            this._tabLayout.setTabTextFontSize(value.nativeSize);
+        }
+    }
+
     [tabTextColorProperty.getDefault](): number {
         return this._tabLayout.getTabTextColor();
     }

tns-core-modules/ui/tab-view/tab-view.d.ts

@@ -64,6 +64,11 @@ export class TabView extends View {
      */
     selectedIndex: number;
 
+    /**
+     * Gets or sets the font size of the tabs titles.
+     */
+    tabTextFontSize: number;
+
     /**
      * Gets or sets the text color of the tabs titles.
      */
@@ -139,6 +144,7 @@ export class TabView extends View {
 export const itemsProperty: Property<TabView, TabViewItem[]>;
 export const selectedIndexProperty: Property<TabView, number>;
 
+export const tabTextFontSizeProperty: CssProperty<Style, number>;
 export const tabTextColorProperty: CssProperty<Style, Color>;
 export const tabBackgroundColorProperty: CssProperty<Style, Color>;
 export const selectedTabTextColorProperty: CssProperty<Style, Color>;

tns-core-modules/ui/tab-view/tab-view.ios.ts

@@ -4,7 +4,7 @@ import { Font } from "../styling/font";
 import { ios as iosView, ViewBase } from "../core/view";
 import {
     TabViewBase, TabViewItemBase, itemsProperty, selectedIndexProperty,
-    tabTextColorProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, iosIconRenderingModeProperty,
+    tabTextColorProperty, tabTextFontSizeProperty, tabBackgroundColorProperty, selectedTabTextColorProperty, iosIconRenderingModeProperty,
     View, fontInternalProperty, layout, traceEnabled, traceWrite, traceCategories, Color
 } from "./tab-view-common"
 import { textTransformProperty, TextTransform, getTransformedText } from "../text-base";
@@ -448,6 +448,13 @@ export class TabView extends TabViewBase {
         selectedIndexProperty.coerce(this);
     }
 
+    [tabTextFontSizeProperty.getDefault](): number {
+        return null;
+    }
+    [tabTextFontSizeProperty.setNative](value: number | { nativeSize: number }) {
+        this._updateIOSTabBarColorsAndFonts();
+    }
+
     [tabTextColorProperty.getDefault](): UIColor {
         return null;
     }
@@ -504,7 +511,9 @@ interface TabStates {
 function getTitleAttributesForStates(tabView: TabView): TabStates {
     const result: TabStates = {};
 
-    const font = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(10));
+    const defaultTabItemFontSize = 10;
+    const tabItemFontSize = tabView.style.tabTextFontSize || defaultTabItemFontSize;
+    const font: UIFont = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
     const tabItemTextColor = tabView.style.tabTextColor;
     const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
     result.normalState = { [NSFontAttributeName]: font }

tns-platform-declarations/android/org.nativescript.widgets.d.ts

@@ -362,6 +362,8 @@
                 getTabTextColor(): number;
                 setSelectedTabTextColor(color: number): void;
                 getSelectedTabTextColor(): number;
+                setTabTextFontSize(fontSize: number): void;
+                getTabTextFontSize(): number;
 
                 setItems(items: Array<TabItemSpec>, viewPager: android.support.v4.view.ViewPager): void;
                 updateItemAt(position: number, itemSpec: TabItemSpec): void;