fix(android): label width shrinking on shorter text change (#5917)

tests/app/ui/label/label-tests.ts

@@ -20,6 +20,7 @@ import { isIOS, isAndroid } from "tns-core-modules/platform";
 import { Label } from "tns-core-modules/ui/label";
 import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
 import * as helper from "../helper";
+import { Span, FormattedString } from "tns-core-modules/text/formatted-string";
 
 export class LabelTest extends testModule.UITest<LabelModule.Label> {
 
@@ -137,6 +138,102 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         TKUnit.assertEqual(actualNative, expectedValue);
     }
 
+    public test_label_shrinks_on_text_change() {
+        const label = this.testView;
+        label.horizontalAlignment = "left";
+        this.waitUntilTestElementIsLoaded();
+
+        label.text = "long label long label";
+        this.waitUntilTestElementLayoutIsValid();
+        const longLabelWidth = label.getActualSize().width;
+
+        label.text = "short label";
+        this.waitUntilTestElementLayoutIsValid();
+        const shortLabelWidth = label.getActualSize().width;
+
+        TKUnit.assert(longLabelWidth > shortLabelWidth, "label width should shrink on text change.");
+    }
+
+    public test_label_shrinks_on_formatted_text_change() {
+        const label = this.testView;
+        label.horizontalAlignment = "left";
+        this.waitUntilTestElementIsLoaded();
+
+        const span = new Span();
+        span.text = "long label";
+        span.fontWeight = "bold";
+    
+        const span2 = new Span();
+        span2.text = "long label";
+    
+        const formattedString = new FormattedString();
+        formattedString.spans.push(span);
+        formattedString.spans.push(span2);
+        label.formattedText = formattedString;
+        this.waitUntilTestElementLayoutIsValid();
+        const longLabelWidth = label.getActualSize().width;
+
+        const span3 = new Span();
+        span3.text = "short label";
+        span3.fontWeight = "bold";
+    
+        const formattedString2 = new FormattedString();
+        formattedString2.spans.push(span3);
+        label.formattedText = formattedString2;
+        this.waitUntilTestElementLayoutIsValid();
+        const shortLabelWidth = label.getActualSize().width;
+
+        TKUnit.assert(longLabelWidth > shortLabelWidth, "label width should shrink on formatted text change.");
+    }
+
+    public test_label_grows_on_text_change() {
+        const label = this.testView;
+        label.horizontalAlignment = "left";
+        this.waitUntilTestElementIsLoaded();
+
+        label.text = "short label";
+        this.waitUntilTestElementLayoutIsValid();
+        const shortLabelWidth = label.getActualSize().width;
+
+        label.text = "long label long label";
+        this.waitUntilTestElementLayoutIsValid();
+        const longLabelWidth = label.getActualSize().width;
+
+        TKUnit.assert(longLabelWidth > shortLabelWidth, "label width should grow on text change.");
+    }
+
+    public test_label_grows_on_formatted_text_change() {
+        const label = this.testView;
+        label.horizontalAlignment = "left";
+        this.waitUntilTestElementIsLoaded();
+
+        const span = new Span();
+        span.text = "short label";
+        span.fontWeight = "bold";
+    
+        const formattedString = new FormattedString();
+        formattedString.spans.push(span);
+        label.formattedText = formattedString;
+        this.waitUntilTestElementLayoutIsValid();
+        const shortLabelWidth = label.getActualSize().width;
+
+        const span2 = new Span();
+        span2.text = "long label";
+        span2.fontWeight = "bold";
+    
+        const span3 = new Span();
+        span3.text = "long label";
+    
+        const formattedString2 = new FormattedString();
+        formattedString2.spans.push(span2);
+        formattedString2.spans.push(span3);
+        label.formattedText = formattedString2;
+        this.waitUntilTestElementLayoutIsValid();
+        const longLabelWidth = label.getActualSize().width;
+
+        TKUnit.assert(longLabelWidth > shortLabelWidth, "label width should grow on formatted text change.");
+    }
+
     public test_measuredWidth_is_not_clipped() {
         const label = this.testView;
         label.horizontalAlignment = "left";
@@ -539,7 +636,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         if (expectRequestLayout) {
             TKUnit.assertTrue(called, "label.requestLayout should be called.");
         } else {
-            TKUnit.assertFalse(called, "image.requestLayout should not be called.");
+            TKUnit.assertFalse(called, "label.requestLayout should not be called.");
         }
     }
 

tns-core-modules/ui/text-base/text-base-common.ts

@@ -4,7 +4,7 @@ import { FontStyle, FontWeight } from "../styling/font";
 import { PropertyChangeData } from "../../data/observable";
 
 // Types.
-import { View, ViewBase, Property, CssProperty, InheritedCssProperty, Style, isIOS, Observable, makeValidator, makeParser, Length } from "../core/view";
+import { View, ViewBase, Property, CssProperty, InheritedCssProperty, Style, isAndroid, isIOS, Observable, makeValidator, makeParser, Length } from "../core/view";
 import { FormattedString, Span } from "../../text/formatted-string";
 
 export { FormattedString, Span };
@@ -169,10 +169,10 @@ export function isBold(fontWeight: FontWeight): boolean {
     return fontWeight === "bold" || fontWeight === "700" || fontWeight === "800" || fontWeight === "900";
 }
 
-export const textProperty = new Property<TextBaseCommon, string>({ name: "text", defaultValue: "" });
+export const textProperty = new Property<TextBaseCommon, string>({ name: "text", defaultValue: "", affectsLayout: isAndroid });
 textProperty.register(TextBaseCommon);
 
-export const formattedTextProperty = new Property<TextBaseCommon, FormattedString>({ name: "formattedText", affectsLayout: isIOS, valueChanged: onFormattedTextPropertyChanged });
+export const formattedTextProperty = new Property<TextBaseCommon, FormattedString>({ name: "formattedText", affectsLayout: true, valueChanged: onFormattedTextPropertyChanged });
 formattedTextProperty.register(TextBaseCommon);
 
 function onFormattedTextPropertyChanged(textBase: TextBaseCommon, oldValue: FormattedString, newValue: FormattedString) {