Skip to content

[Text] Fix text not wrapping #2742

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 14 commits into
base: main
Choose a base branch
from
Draft

[Text] Fix text not wrapping #2742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e3472d4
Add accessibility role to text
ayush547 Mar 30, 2023
2a88840
Fix text overflowing off the screen
ayush547 Mar 30, 2023
8957463
Update snaps
ayush547 Mar 30, 2023
2f7a792
Change files
ayush547 Mar 30, 2023
a575365
Fix text not wrapping
ayush547 Apr 3, 2023
aaba9ce
Fix tests and update snaps
ayush547 Apr 3, 2023
03fb998
Merge branch 'text-fix' of https://github.com/ayush547/fluentui-react…
ayush547 Apr 3, 2023
20130c2
Remove default accessibility role text
ayush547 Apr 3, 2023
59f2bd5
Revert "Remove default accessibility role text"
ayush547 Apr 3, 2023
4f5fada
Update snaps
ayush547 Apr 3, 2023
8debdd3
Change files
ayush547 Apr 3, 2023
5f9b3f5
Add fix for radio
ayush547 Apr 3, 2023
c0df29d
Snaps update for rg
ayush547 Apr 3, 2023
d3ba9f4
Change files
ayush547 Apr 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
const BasicCheckbox: React.FunctionComponent = () => {
return (
<View>
<Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
<Checkbox label="Unchecked checkbox (undefined) aidasdijk ahsdihsaidhas jasdhasid" onChange={onChangeUncontrolled} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should leave the previous text only.
As we have already done our testing, this is not required for tester.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or may be add a bigger valid(meaningful) string?

<Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
<Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
<Checkbox label="Disabled checkbox" disabled />
Expand Down
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-badge-feb689b1-06fe-435b-a373-2f1bbd599581.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Fix text not wrapping",
"packageName": "@fluentui-react-native/badge",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-button-e18cbcea-165b-4b0b-b025-0e00edc776e8.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Fix text not wrapping",
"packageName": "@fluentui-react-native/button",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-divider-557c1c15-03b1-4007-bc1d-04552901a513.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Fix text not wrapping",
"packageName": "@fluentui-react-native/divider",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions ...@fluentui-react-native-experimental-menu-button-136589b3-4a23-4570-bf5a-28a2540f52fd.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Fix text not wrapping",
"packageName": "@fluentui-react-native/experimental-menu-button",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions ...@fluentui-react-native-experimental-radio-group-64061eb3-b4b2-48b4-a93d-bd1619719e66.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Fix text not wrapping",
"packageName": "@fluentui-react-native/experimental-radio-group",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-experimental-tabs-e9d30d85-d5d3-4d9d-b2b4-13be03e53eeb.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Fix text not wrapping",
"packageName": "@fluentui-react-native/experimental-tabs",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-link-b9049396-6b19-4751-9370-0b65d7d4f36c.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Fix text not wrapping",
"packageName": "@fluentui-react-native/link",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-menu-4429ef8f-e6e0-4fda-898e-d1cac73b4e64.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Fix text not wrapping",
"packageName": "@fluentui-react-native/menu",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-notification-ad05670d-b703-43ab-808a-e9f140d89be1.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Fix text not wrapping",
"packageName": "@fluentui-react-native/notification",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-tester-2600660f-25a6-4400-8d1e-4ed08ebe1af6.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Add fix for radio",
"packageName": "@fluentui-react-native/tester",
"email": "[email protected]",
"dependentChangeType": "none"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-native-text-b1ea1d13-9ce7-4949-902a-b4894ce95b80.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Fix text overflowing off the screen",
"packageName": "@fluentui-react-native/text",
"email": "[email protected]",
"dependentChangeType": "patch"
}
16 changes: 16 additions & 0 deletions packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,15 @@ exports[`Badge component tests Badge all props 1`] = `
♣
</Text>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
onAccessibilityTap={[Function]}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontWeight": "400",
Expand Down Expand Up @@ -82,13 +84,15 @@ exports[`Badge component tests Badge tokens 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
onAccessibilityTap={[Function]}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontWeight": "400",
Expand Down Expand Up @@ -176,13 +180,15 @@ exports[`Badge component tests Filled badge with shadow 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
onAccessibilityTap={[Function]}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontWeight": "400",
Expand Down Expand Up @@ -234,12 +240,14 @@ exports[`CounterBadge component tests CounterBadge all props 1`] = `
♣
</Text>
<Text
accessibilityRole="text"
ellipsizeMode="tail"
numberOfLines={0}
onAccessibilityTap={[Function]}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontStyle": undefined,
Expand Down Expand Up @@ -278,12 +286,14 @@ exports[`CounterBadge component tests CounterBadge shows 99+ 1`] = `
}
>
<Text
accessibilityRole="text"
ellipsizeMode="tail"
numberOfLines={0}
onAccessibilityTap={[Function]}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontStyle": undefined,
Expand Down Expand Up @@ -322,12 +332,14 @@ exports[`CounterBadge component tests CounterBadge shows 1000+ 1`] = `
}
>
<Text
accessibilityRole="text"
ellipsizeMode="tail"
numberOfLines={0}
onAccessibilityTap={[Function]}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontStyle": undefined,
Expand Down Expand Up @@ -367,12 +379,14 @@ exports[`CounterBadge component tests CounterBadge shows zero 1`] = `
}
>
<Text
accessibilityRole="text"
ellipsizeMode="tail"
numberOfLines={0}
onAccessibilityTap={[Function]}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontStyle": undefined,
Expand Down Expand Up @@ -411,12 +425,14 @@ exports[`CounterBadge component tests CounterBadge tokens 1`] = `
}
>
<Text
accessibilityRole="text"
ellipsizeMode="tail"
numberOfLines={0}
onAccessibilityTap={[Function]}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontStyle": undefined,
Expand Down
4 changes: 4 additions & 0 deletions packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,14 @@ exports[`Custom FAB with no shadow(iOS) 1`] = `
♣
</Text>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 13,
"fontWeight": "400",
Expand Down Expand Up @@ -151,12 +153,14 @@ exports[`Default FAB (iOS) 1`] = `
♣
</Text>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 13,
"fontWeight": "400",
Expand Down
2 changes: 2 additions & 0 deletions packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,14 @@ exports[`ToggleButton default 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 15,
"fontWeight": "600",
Expand Down
18 changes: 18 additions & 0 deletions packages/components/Button/src/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,14 @@ exports[`Button component tests Button circular 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 15,
"fontWeight": "600",
Expand Down Expand Up @@ -159,12 +161,14 @@ exports[`Button component tests Button customized 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 15,
"fontWeight": "600",
Expand Down Expand Up @@ -218,12 +222,14 @@ exports[`Button component tests Button default 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 15,
"fontWeight": "600",
Expand Down Expand Up @@ -282,12 +288,14 @@ exports[`Button component tests Button disabled 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#d2d0ce",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 15,
"fontWeight": "600",
Expand Down Expand Up @@ -342,12 +350,14 @@ exports[`Button component tests Button large 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 17,
"fontWeight": "600",
Expand Down Expand Up @@ -402,12 +412,14 @@ exports[`Button component tests Button primary 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 15,
"fontWeight": "600",
Expand Down Expand Up @@ -462,12 +474,14 @@ exports[`Button component tests Button small 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 13,
"fontWeight": "400",
Expand Down Expand Up @@ -522,12 +536,14 @@ exports[`Button component tests Button square 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#ffffff",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 15,
"fontWeight": "600",
Expand Down Expand Up @@ -582,12 +598,14 @@ exports[`Button component tests Button subtle 1`] = `
}
>
<Text
accessibilityRole="text"
accessible={false}
ellipsizeMode="tail"
numberOfLines={0}
style={
Object {
"color": "#323130",
"flexShrink": 1,
"fontFamily": "System",
"fontSize": 15,
"fontWeight": "600",
Expand Down
Loading