Skip to content

Commit 374918f

Browse files
adids1221nitzanyiz
adids1221
and
nitzanyiz
authored
add ellipsizeMode prop for text truncation and improve accessibility (#3542)
* add ellipsizeMode prop for text truncation and improve accessability handling * add overflow hidden and ellipsizeMode AvatarScreen snapshot * replace ellipsizeMode with labelEllipsizeMode prop --------- Co-authored-by: Nitzan Yizhar <[email protected]>
1 parent 939ecea commit 374918f

File tree

2 files changed

+28
-2
lines changed

2 files changed

+28
-2
lines changed

‎demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ exports[`AvatarScreen renders screen 1`] = `
121121
"bottom": 0,
122122
"justifyContent": "center",
123123
"left": 0,
124+
"overflow": "hidden",
124125
"position": "absolute",
125126
"right": 0,
126127
"top": 0,
@@ -247,6 +248,7 @@ exports[`AvatarScreen renders screen 1`] = `
247248
"bottom": 0,
248249
"justifyContent": "center",
249250
"left": 0,
251+
"overflow": "hidden",
250252
"position": "absolute",
251253
"right": 0,
252254
"top": 0,
@@ -434,6 +436,7 @@ exports[`AvatarScreen renders screen 1`] = `
434436
"bottom": 0,
435437
"justifyContent": "center",
436438
"left": 0,
439+
"overflow": "hidden",
437440
"position": "absolute",
438441
"right": 0,
439442
"top": 0,
@@ -448,6 +451,7 @@ exports[`AvatarScreen renders screen 1`] = `
448451
testID="undefined.container"
449452
>
450453
<Text
454+
ellipsizeMode="clip"
451455
numberOfLines={1}
452456
style={
453457
[
@@ -663,6 +667,7 @@ exports[`AvatarScreen renders screen 1`] = `
663667
"bottom": 0,
664668
"justifyContent": "center",
665669
"left": 0,
670+
"overflow": "hidden",
666671
"position": "absolute",
667672
"right": 0,
668673
"top": 0,
@@ -677,6 +682,7 @@ exports[`AvatarScreen renders screen 1`] = `
677682
testID="undefined.container"
678683
>
679684
<Text
685+
ellipsizeMode="clip"
680686
numberOfLines={1}
681687
style={
682688
[
@@ -898,6 +904,7 @@ exports[`AvatarScreen renders screen 1`] = `
898904
"bottom": 0,
899905
"justifyContent": "center",
900906
"left": 0,
907+
"overflow": "hidden",
901908
"position": "absolute",
902909
"right": 0,
903910
"top": 0,
@@ -1155,6 +1162,7 @@ exports[`AvatarScreen renders screen 1`] = `
11551162
"bottom": 0,
11561163
"justifyContent": "center",
11571164
"left": 0,
1165+
"overflow": "hidden",
11581166
"position": "absolute",
11591167
"right": 0,
11601168
"top": 0,
@@ -1412,6 +1420,7 @@ exports[`AvatarScreen renders screen 1`] = `
14121420
"bottom": 0,
14131421
"justifyContent": "center",
14141422
"left": 0,
1423+
"overflow": "hidden",
14151424
"position": "absolute",
14161425
"right": 0,
14171426
"top": 0,
@@ -1620,6 +1629,7 @@ exports[`AvatarScreen renders screen 1`] = `
16201629
"bottom": 0,
16211630
"justifyContent": "center",
16221631
"left": 0,
1632+
"overflow": "hidden",
16231633
"position": "absolute",
16241634
"right": 0,
16251635
"top": 0,
@@ -1877,6 +1887,7 @@ exports[`AvatarScreen renders screen 1`] = `
18771887
"bottom": 0,
18781888
"justifyContent": "center",
18791889
"left": 0,
1890+
"overflow": "hidden",
18801891
"position": "absolute",
18811892
"right": 0,
18821893
"top": 0,
@@ -2179,6 +2190,7 @@ exports[`AvatarScreen renders screen 1`] = `
21792190
"bottom": 0,
21802191
"justifyContent": "center",
21812192
"left": 0,
2193+
"overflow": "hidden",
21822194
"position": "absolute",
21832195
"right": 0,
21842196
"top": 0,
@@ -2367,6 +2379,7 @@ exports[`AvatarScreen renders screen 1`] = `
23672379
"bottom": 0,
23682380
"justifyContent": "center",
23692381
"left": 0,
2382+
"overflow": "hidden",
23702383
"position": "absolute",
23712384
"right": 0,
23722385
"top": 0,
@@ -2386,6 +2399,7 @@ exports[`AvatarScreen renders screen 1`] = `
23862399
testID="undefined.container"
23872400
>
23882401
<Text
2402+
ellipsizeMode="clip"
23892403
numberOfLines={1}
23902404
style={
23912405
[
@@ -2597,6 +2611,7 @@ exports[`AvatarScreen renders screen 1`] = `
25972611
"bottom": 0,
25982612
"justifyContent": "center",
25992613
"left": 0,
2614+
"overflow": "hidden",
26002615
"position": "absolute",
26012616
"right": 0,
26022617
"top": 0,
@@ -2616,6 +2631,7 @@ exports[`AvatarScreen renders screen 1`] = `
26162631
testID="undefined.container"
26172632
>
26182633
<Text
2634+
ellipsizeMode="clip"
26192635
numberOfLines={1}
26202636
style={
26212637
[
@@ -2827,6 +2843,7 @@ exports[`AvatarScreen renders screen 1`] = `
28272843
"bottom": 0,
28282844
"justifyContent": "center",
28292845
"left": 0,
2846+
"overflow": "hidden",
28302847
"position": "absolute",
28312848
"right": 0,
28322849
"top": 0,
@@ -3015,6 +3032,7 @@ exports[`AvatarScreen renders screen 1`] = `
30153032
"bottom": 0,
30163033
"justifyContent": "center",
30173034
"left": 0,
3035+
"overflow": "hidden",
30183036
"position": "absolute",
30193037
"right": 0,
30203038
"top": 0,
@@ -3029,6 +3047,7 @@ exports[`AvatarScreen renders screen 1`] = `
30293047
testID="undefined.container"
30303048
>
30313049
<Text
3050+
ellipsizeMode="clip"
30323051
numberOfLines={1}
30333052
style={
30343053
[

‎src/components/avatar/index.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
ImagePropsBase,
99
ImageStyle,
1010
TextStyle,
11+
TextProps,
1112
AccessibilityProps
1213
} from 'react-native';
1314
import {Colors, BorderRadiuses} from '../../style';
@@ -120,6 +121,10 @@ export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> &
120121
* The label color
121122
*/
122123
labelColor?: string;
124+
/*
125+
* The ellipsize mode for the label, default is clip
126+
*/
127+
labelEllipsizeMode?: TextProps['ellipsizeMode'];
123128
/**
124129
* ribbon label to display on the avatar
125130
*/
@@ -185,6 +190,7 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
185190
useAutoColors,
186191
autoColorsConfig,
187192
containerStyle,
193+
labelEllipsizeMode = 'clip',
188194
onPress,
189195
children
190196
} = themeProps;
@@ -354,7 +360,7 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
354360
>
355361
<View testID={`${testID}.container`} style={textContainerStyle}>
356362
{!_.isUndefined(text) && (
357-
<Text numberOfLines={1} style={textStyle} testID={`${testID}.label`}>
363+
<Text numberOfLines={1} ellipsizeMode={labelEllipsizeMode} style={textStyle} testID={`${testID}.label`}>
358364
{text}
359365
</Text>
360366
)}
@@ -373,7 +379,8 @@ const styles = StyleSheet.create({
373379
...StyleSheet.absoluteFillObject,
374380
alignItems: 'center',
375381
justifyContent: 'center',
376-
borderRadius: BorderRadiuses.br100
382+
borderRadius: BorderRadiuses.br100,
383+
overflow: 'hidden'
377384
},
378385
initialsContainerWithInset: {
379386
top: 1,

0 commit comments

Comments
 (0)