Skip to content

Commit 5816026

Browse files
vineethkuttanVineeth K
vineethkuttan
and
Vineeth K
authored
Implement adjustsFontSizeToFit property for Text in Fabric (#14519)
* Implementation of adjustFontSizeToFit * Final Changes using TextLayout * Lint Issue Fixes * Change files * prop change detection added * review Changes and E2E test cases added * Lint and Format Changes added * Test Cases Fix added * Update SnapShot * Removed the additional Check for resizing Font * Updated SnapShot * Review Changes * Lint and Format Changes --------- Co-authored-by: Vineeth K <[email protected]>
1 parent 91dca24 commit 5816026

File tree

9 files changed

+598
-3
lines changed

9 files changed

+598
-3
lines changed

‎change/react-native-windows-262555bf-8b8f-4511-b814-9ed70a0cb8b4.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Implementation of adjustFontSizeToFit for Text in Fabric",
4+
"packageName": "react-native-windows",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1926,6 +1926,76 @@ const examples = [
19261926
);
19271927
},
19281928
},
1929+
{
1930+
title: 'AdjustFontSize according to the Width, Height and LinesCount',
1931+
name: 'adjustFontSizeToFit',
1932+
render: function (): React.Node {
1933+
return (
1934+
<View>
1935+
<RNTesterText
1936+
style={{
1937+
width: 500,
1938+
height: 100,
1939+
fontSize: 20,
1940+
backgroundColor: 'lightcoral',
1941+
padding: 10,
1942+
marginBottom: 10,
1943+
}}
1944+
testID="text-adjustfontsizetofit-default-a">
1945+
{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20`}
1946+
</RNTesterText>
1947+
<RNTesterText
1948+
adjustsFontSizeToFit
1949+
style={{
1950+
width: 500,
1951+
height: 100,
1952+
fontSize: 20,
1953+
backgroundColor: 'lightcoral',
1954+
padding: 10,
1955+
marginBottom: 10,
1956+
}}
1957+
testID="text-adjustfontsizetofit-default-b">
1958+
{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20`}
1959+
</RNTesterText>
1960+
{[
1961+
{width: 500, height: 80, lineCount: 3},
1962+
{width: 475, height: 120, lineCount: 5},
1963+
{width: 450, height: 160, lineCount: 0},
1964+
].map((item, index) => (
1965+
<React.Fragment key={index}>
1966+
<RNTesterText
1967+
testID={`text-adjustfontsizetofit-${index}-a`}
1968+
numberOfLines={item.lineCount}
1969+
adjustsFontSizeToFit
1970+
style={{
1971+
width: item.width,
1972+
height: item.height,
1973+
fontSize: 40,
1974+
backgroundColor: '#A0C782',
1975+
padding: 10,
1976+
marginBottom: 10,
1977+
}}>
1978+
{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:${item.height},width:${item.width},lineCount:${item.lineCount},fontSize:40`}
1979+
</RNTesterText>
1980+
<RNTesterText
1981+
testID={`text-adjustfontsizetofit-${index}-b`}
1982+
numberOfLines={item.lineCount}
1983+
style={{
1984+
width: item.width,
1985+
height: item.height,
1986+
fontSize: 40,
1987+
backgroundColor: 'lightblue',
1988+
padding: 10,
1989+
marginBottom: 10,
1990+
}}>
1991+
{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:${item.height},width:${item.width},lineCount:${item.lineCount},fontSize:40`}
1992+
</RNTesterText>
1993+
</React.Fragment>
1994+
))}
1995+
</View>
1996+
);
1997+
},
1998+
},
19291999
];
19302000

19312001
const styles = StyleSheet.create({

‎packages/e2e-test-app-fabric/test/TextComponentTest.test.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,71 @@ describe('Text Tests', () => {
129129
const dump = await dumpVisualTree('text-view-images-clipped');
130130
expect(dump).toMatchSnapshot();
131131
});
132+
test('Text can adjust its fontsize according to its limitations, default a', async () => {
133+
const component = await app.findElementByTestID(
134+
'text-adjustfontsizetofit-default-a',
135+
);
136+
await component.waitForDisplayed({timeout: 5000});
137+
const dump = await dumpVisualTree('text-adjustfontsizetofit-default-a');
138+
expect(dump).toMatchSnapshot();
139+
});
140+
test('Text can adjust its fontsize according to its limitations, default b', async () => {
141+
const component = await app.findElementByTestID(
142+
'text-adjustfontsizetofit-default-b',
143+
);
144+
await component.waitForDisplayed({timeout: 5000});
145+
const dump = await dumpVisualTree('text-adjustfontsizetofit-default-b');
146+
expect(dump).toMatchSnapshot();
147+
});
148+
test('Text can adjust its fontsize according to its limitations, case 0 a', async () => {
149+
const component = await app.findElementByTestID(
150+
'text-adjustfontsizetofit-0-a',
151+
);
152+
await component.waitForDisplayed({timeout: 5000});
153+
const dump = await dumpVisualTree('text-adjustfontsizetofit-0-a');
154+
expect(dump).toMatchSnapshot();
155+
});
156+
test('Text can adjust its fontsize according to its limitations, case 0 b', async () => {
157+
const component = await app.findElementByTestID(
158+
'text-adjustfontsizetofit-0-b',
159+
);
160+
await component.waitForDisplayed({timeout: 5000});
161+
const dump = await dumpVisualTree('text-adjustfontsizetofit-0-b');
162+
expect(dump).toMatchSnapshot();
163+
});
164+
test('Text can adjust its fontsize according to its limitations, case 1 a', async () => {
165+
const component = await app.findElementByTestID(
166+
'text-adjustfontsizetofit-1-a',
167+
);
168+
await component.waitForDisplayed({timeout: 5000});
169+
const dump = await dumpVisualTree('text-adjustfontsizetofit-1-a');
170+
expect(dump).toMatchSnapshot();
171+
});
172+
test('Text can adjust its fontsize according to its limitations, case 1 b', async () => {
173+
const component = await app.findElementByTestID(
174+
'text-adjustfontsizetofit-1-b',
175+
);
176+
await component.waitForDisplayed({timeout: 5000});
177+
const dump = await dumpVisualTree('text-adjustfontsizetofit-1-b');
178+
expect(dump).toMatchSnapshot();
179+
});
180+
test('Text can adjust its fontsize according to its limitations, case 2 a', async () => {
181+
const component = await app.findElementByTestID(
182+
'text-adjustfontsizetofit-2-a',
183+
);
184+
await component.waitForDisplayed({timeout: 5000});
185+
const dump = await dumpVisualTree('text-adjustfontsizetofit-2-a');
186+
expect(dump).toMatchSnapshot();
187+
});
188+
test('Text can adjust its fontsize according to its limitations, case 2 b', async () => {
189+
const component = await app.findElementByTestID(
190+
'text-adjustfontsizetofit-2-b',
191+
);
192+
await component.waitForDisplayed({timeout: 5000});
193+
const dump = await dumpVisualTree('text-adjustfontsizetofit-2-b');
194+
expect(dump).toMatchSnapshot();
195+
});
196+
132197
/* For some reason WebDriver can't find this view even though accessible={true}
133198
test('Texts can align inline View/Images', async () => {
134199
const component = await app.findElementByTestID(

‎packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,198 @@ exports[`Text Tests Padding can be added to Text 1`] = `
2424
}
2525
`;
2626

27+
exports[`Text Tests Text can adjust its fontsize according to its limitations, case 0 a 1`] = `
28+
{
29+
"Automation Tree": {
30+
"AutomationId": "text-adjustfontsizetofit-0-a",
31+
"ControlType": 50020,
32+
"LocalizedControlType": "text",
33+
"Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:80,width:500,lineCount:3,fontSize:40",
34+
"TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:80,width:500,lineCount:3,fontSize:40",
35+
},
36+
"Component Tree": {
37+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
38+
"_Props": {
39+
"TestId": "text-adjustfontsizetofit-0-a",
40+
},
41+
},
42+
"Visual Tree": {
43+
"Comment": "text-adjustfontsizetofit-0-a",
44+
"Offset": "0, 0, 0",
45+
"Size": "500, 80",
46+
"Visual Type": "SpriteVisual",
47+
},
48+
}
49+
`;
50+
51+
exports[`Text Tests Text can adjust its fontsize according to its limitations, case 0 b 1`] = `
52+
{
53+
"Automation Tree": {
54+
"AutomationId": "text-adjustfontsizetofit-0-b",
55+
"ControlType": 50020,
56+
"LocalizedControlType": "text",
57+
"Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:80,width:500,lineCount:3,fontSize:40",
58+
"TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:80,width:500,lineCount:3,fontSize:40",
59+
},
60+
"Component Tree": {
61+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
62+
"_Props": {
63+
"TestId": "text-adjustfontsizetofit-0-b",
64+
},
65+
},
66+
"Visual Tree": {
67+
"Comment": "text-adjustfontsizetofit-0-b",
68+
"Offset": "0, 0, 0",
69+
"Size": "500, 80",
70+
"Visual Type": "SpriteVisual",
71+
},
72+
}
73+
`;
74+
75+
exports[`Text Tests Text can adjust its fontsize according to its limitations, case 1 a 1`] = `
76+
{
77+
"Automation Tree": {
78+
"AutomationId": "text-adjustfontsizetofit-1-a",
79+
"ControlType": 50020,
80+
"LocalizedControlType": "text",
81+
"Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:120,width:475,lineCount:5,fontSize:40",
82+
"TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:120,width:475,lineCount:5,fontSize:40",
83+
},
84+
"Component Tree": {
85+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
86+
"_Props": {
87+
"TestId": "text-adjustfontsizetofit-1-a",
88+
},
89+
},
90+
"Visual Tree": {
91+
"Comment": "text-adjustfontsizetofit-1-a",
92+
"Offset": "0, 0, 0",
93+
"Size": "475, 120",
94+
"Visual Type": "SpriteVisual",
95+
},
96+
}
97+
`;
98+
99+
exports[`Text Tests Text can adjust its fontsize according to its limitations, case 1 b 1`] = `
100+
{
101+
"Automation Tree": {
102+
"AutomationId": "text-adjustfontsizetofit-1-b",
103+
"ControlType": 50020,
104+
"LocalizedControlType": "text",
105+
"Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:120,width:475,lineCount:5,fontSize:40",
106+
"TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:120,width:475,lineCount:5,fontSize:40",
107+
},
108+
"Component Tree": {
109+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
110+
"_Props": {
111+
"TestId": "text-adjustfontsizetofit-1-b",
112+
},
113+
},
114+
"Visual Tree": {
115+
"Comment": "text-adjustfontsizetofit-1-b",
116+
"Offset": "0, 0, 0",
117+
"Size": "475, 120",
118+
"Visual Type": "SpriteVisual",
119+
},
120+
}
121+
`;
122+
123+
exports[`Text Tests Text can adjust its fontsize according to its limitations, case 2 a 1`] = `
124+
{
125+
"Automation Tree": {
126+
"AutomationId": "text-adjustfontsizetofit-2-a",
127+
"ControlType": 50020,
128+
"LocalizedControlType": "text",
129+
"Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:160,width:450,lineCount:0,fontSize:40",
130+
"TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:160,width:450,lineCount:0,fontSize:40",
131+
},
132+
"Component Tree": {
133+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
134+
"_Props": {
135+
"TestId": "text-adjustfontsizetofit-2-a",
136+
},
137+
},
138+
"Visual Tree": {
139+
"Comment": "text-adjustfontsizetofit-2-a",
140+
"Offset": "0, 0, 0",
141+
"Size": "450, 160",
142+
"Visual Type": "SpriteVisual",
143+
},
144+
}
145+
`;
146+
147+
exports[`Text Tests Text can adjust its fontsize according to its limitations, case 2 b 1`] = `
148+
{
149+
"Automation Tree": {
150+
"AutomationId": "text-adjustfontsizetofit-2-b",
151+
"ControlType": 50020,
152+
"LocalizedControlType": "text",
153+
"Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:160,width:450,lineCount:0,fontSize:40",
154+
"TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:160,width:450,lineCount:0,fontSize:40",
155+
},
156+
"Component Tree": {
157+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
158+
"_Props": {
159+
"TestId": "text-adjustfontsizetofit-2-b",
160+
},
161+
},
162+
"Visual Tree": {
163+
"Comment": "text-adjustfontsizetofit-2-b",
164+
"Offset": "0, 0, 0",
165+
"Size": "450, 160",
166+
"Visual Type": "SpriteVisual",
167+
},
168+
}
169+
`;
170+
171+
exports[`Text Tests Text can adjust its fontsize according to its limitations, default a 1`] = `
172+
{
173+
"Automation Tree": {
174+
"AutomationId": "text-adjustfontsizetofit-default-a",
175+
"ControlType": 50020,
176+
"LocalizedControlType": "text",
177+
"Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20",
178+
"TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20",
179+
},
180+
"Component Tree": {
181+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
182+
"_Props": {
183+
"TestId": "text-adjustfontsizetofit-default-a",
184+
},
185+
},
186+
"Visual Tree": {
187+
"Comment": "text-adjustfontsizetofit-default-a",
188+
"Offset": "0, 0, 0",
189+
"Size": "500, 100",
190+
"Visual Type": "SpriteVisual",
191+
},
192+
}
193+
`;
194+
195+
exports[`Text Tests Text can adjust its fontsize according to its limitations, default b 1`] = `
196+
{
197+
"Automation Tree": {
198+
"AutomationId": "text-adjustfontsizetofit-default-b",
199+
"ControlType": 50020,
200+
"LocalizedControlType": "text",
201+
"Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20",
202+
"TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20",
203+
},
204+
"Component Tree": {
205+
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
206+
"_Props": {
207+
"TestId": "text-adjustfontsizetofit-default-b",
208+
},
209+
},
210+
"Visual Tree": {
211+
"Comment": "text-adjustfontsizetofit-default-b",
212+
"Offset": "0, 0, 0",
213+
"Size": "500, 100",
214+
"Visual Type": "SpriteVisual",
215+
},
216+
}
217+
`;
218+
27219
exports[`Text Tests Text can be restricted to one line 1`] = `
28220
{
29221
"Automation Tree": {

0 commit comments

Comments
 (0)