Skip to content

Commit 0b9d4ae

Browse files
manoldonevmanoldonev
authored
fix(android): label width shrinking on shorter text change (#5917)
1 parent b122bd4 commit 0b9d4ae

2 files changed

Lines changed: 101 additions & 4 deletions

File tree

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

Lines changed: 98 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { isIOS, isAndroid } from "tns-core-modules/platform";
2020
import { Label } from "tns-core-modules/ui/label";
2121
import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
2222
import * as helper from "../helper";
23+
import { Span, FormattedString } from "tns-core-modules/text/formatted-string";
2324

2425
export class LabelTest extends testModule.UITest<LabelModule.Label> {
2526

@@ -137,6 +138,102 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
137138
TKUnit.assertEqual(actualNative, expectedValue);
138139
}
139140

141+
public test_label_shrinks_on_text_change() {
142+
const label = this.testView;
143+
label.horizontalAlignment = "left";
144+
this.waitUntilTestElementIsLoaded();
145+
146+
label.text = "long label long label";
147+
this.waitUntilTestElementLayoutIsValid();
148+
const longLabelWidth = label.getActualSize().width;
149+
150+
label.text = "short label";
151+
this.waitUntilTestElementLayoutIsValid();
152+
const shortLabelWidth = label.getActualSize().width;
153+
154+
TKUnit.assert(longLabelWidth > shortLabelWidth, "label width should shrink on text change.");
155+
}
156+
157+
public test_label_shrinks_on_formatted_text_change() {
158+
const label = this.testView;
159+
label.horizontalAlignment = "left";
160+
this.waitUntilTestElementIsLoaded();
161+
162+
const span = new Span();
163+
span.text = "long label";
164+
span.fontWeight = "bold";
165+
166+
const span2 = new Span();
167+
span2.text = "long label";
168+
169+
const formattedString = new FormattedString();
170+
formattedString.spans.push(span);
171+
formattedString.spans.push(span2);
172+
label.formattedText = formattedString;
173+
this.waitUntilTestElementLayoutIsValid();
174+
const longLabelWidth = label.getActualSize().width;
175+
176+
const span3 = new Span();
177+
span3.text = "short label";
178+
span3.fontWeight = "bold";
179+
180+
const formattedString2 = new FormattedString();
181+
formattedString2.spans.push(span3);
182+
label.formattedText = formattedString2;
183+
this.waitUntilTestElementLayoutIsValid();
184+
const shortLabelWidth = label.getActualSize().width;
185+
186+
TKUnit.assert(longLabelWidth > shortLabelWidth, "label width should shrink on formatted text change.");
187+
}
188+
189+
public test_label_grows_on_text_change() {
190+
const label = this.testView;
191+
label.horizontalAlignment = "left";
192+
this.waitUntilTestElementIsLoaded();
193+
194+
label.text = "short label";
195+
this.waitUntilTestElementLayoutIsValid();
196+
const shortLabelWidth = label.getActualSize().width;
197+
198+
label.text = "long label long label";
199+
this.waitUntilTestElementLayoutIsValid();
200+
const longLabelWidth = label.getActualSize().width;
201+
202+
TKUnit.assert(longLabelWidth > shortLabelWidth, "label width should grow on text change.");
203+
}
204+
205+
public test_label_grows_on_formatted_text_change() {
206+
const label = this.testView;
207+
label.horizontalAlignment = "left";
208+
this.waitUntilTestElementIsLoaded();
209+
210+
const span = new Span();
211+
span.text = "short label";
212+
span.fontWeight = "bold";
213+
214+
const formattedString = new FormattedString();
215+
formattedString.spans.push(span);
216+
label.formattedText = formattedString;
217+
this.waitUntilTestElementLayoutIsValid();
218+
const shortLabelWidth = label.getActualSize().width;
219+
220+
const span2 = new Span();
221+
span2.text = "long label";
222+
span2.fontWeight = "bold";
223+
224+
const span3 = new Span();
225+
span3.text = "long label";
226+
227+
const formattedString2 = new FormattedString();
228+
formattedString2.spans.push(span2);
229+
formattedString2.spans.push(span3);
230+
label.formattedText = formattedString2;
231+
this.waitUntilTestElementLayoutIsValid();
232+
const longLabelWidth = label.getActualSize().width;
233+
234+
TKUnit.assert(longLabelWidth > shortLabelWidth, "label width should grow on formatted text change.");
235+
}
236+
140237
public test_measuredWidth_is_not_clipped() {
141238
const label = this.testView;
142239
label.horizontalAlignment = "left";
@@ -539,7 +636,7 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
539636
if (expectRequestLayout) {
540637
TKUnit.assertTrue(called, "label.requestLayout should be called.");
541638
} else {
542-
TKUnit.assertFalse(called, "image.requestLayout should not be called.");
639+
TKUnit.assertFalse(called, "label.requestLayout should not be called.");
543640
}
544641
}
545642

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FontStyle, FontWeight } from "../styling/font";
44
import { PropertyChangeData } from "../../data/observable";
55

66
// Types.
7-
import { View, ViewBase, Property, CssProperty, InheritedCssProperty, Style, isIOS, Observable, makeValidator, makeParser, Length } from "../core/view";
7+
import { View, ViewBase, Property, CssProperty, InheritedCssProperty, Style, isAndroid, isIOS, Observable, makeValidator, makeParser, Length } from "../core/view";
88
import { FormattedString, Span } from "../../text/formatted-string";
99

1010
export { FormattedString, Span };
@@ -169,10 +169,10 @@ export function isBold(fontWeight: FontWeight): boolean {
169169
return fontWeight === "bold" || fontWeight === "700" || fontWeight === "800" || fontWeight === "900";
170170
}
171171

172-
export const textProperty = new Property<TextBaseCommon, string>({ name: "text", defaultValue: "" });
172+
export const textProperty = new Property<TextBaseCommon, string>({ name: "text", defaultValue: "", affectsLayout: isAndroid });
173173
textProperty.register(TextBaseCommon);
174174

175-
export const formattedTextProperty = new Property<TextBaseCommon, FormattedString>({ name: "formattedText", affectsLayout: isIOS, valueChanged: onFormattedTextPropertyChanged });
175+
export const formattedTextProperty = new Property<TextBaseCommon, FormattedString>({ name: "formattedText", affectsLayout: true, valueChanged: onFormattedTextPropertyChanged });
176176
formattedTextProperty.register(TextBaseCommon);
177177

178178
function onFormattedTextPropertyChanged(textBase: TextBaseCommon, oldValue: FormattedString, newValue: FormattedString) {

0 commit comments

Comments
 (0)