Skip to content

Commit 77d66cf

Browse files
khushal87khushal87
authored
fix: badge count positioning wrt to other elements in parent (#3465)
Prev <img width="1170" height="2532" alt="IMG_0220" src="https://github.com/user-attachments/assets/b47b613d-eebf-498e-a886-e8734c580fb0" /> Now <img width="1170" height="2532" alt="IMG_0219" src="https://github.com/user-attachments/assets/2cdd0cf3-3896-4cf3-aeab-57f52bef8a6f" />
1 parent a5bda49 commit 77d66cf

File tree

3 files changed

+145
-125
lines changed

3 files changed

+145
-125
lines changed

‎package/src/components/Message/MessageSimple/MessageReplies.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -221,8 +221,6 @@ const useStyles = () => {
221221
alignItems: 'center',
222222
flexDirection: 'row',
223223
gap: primitives.spacingXs,
224-
paddingTop: primitives.spacingXs,
225-
paddingBottom: primitives.spacingXxs,
226224
},
227225
messageRepliesText: {
228226
color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,

‎package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap‎

Lines changed: 99 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -27,134 +27,143 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
2727
>
2828
<View
2929
style={
30-
[
31-
{
32-
"alignItems": "center",
33-
"flexDirection": "row",
34-
},
35-
{
36-
"width": 51.2,
37-
},
38-
]
30+
{
31+
"flexDirection": "row",
32+
}
3933
}
4034
>
4135
<View
4236
style={
4337
[
4438
{
45-
"position": "absolute",
39+
"alignItems": "center",
40+
"flexDirection": "row",
4641
},
4742
{
48-
"left": 0,
43+
"height": 32,
44+
"width": 51.2,
4945
},
5046
]
5147
}
5248
>
5349
<View
54-
testID="user-avatar"
50+
style={
51+
[
52+
{
53+
"position": "absolute",
54+
},
55+
{
56+
"left": 0,
57+
},
58+
]
59+
}
5560
>
5661
<View
57-
style={
58-
[
59-
{
60-
"alignItems": "center",
61-
"borderRadius": 9999,
62-
"justifyContent": "center",
63-
"overflow": "hidden",
64-
},
65-
{
66-
"height": 32,
67-
"width": 32,
68-
},
69-
{
70-
"backgroundColor": "#fcd579",
71-
},
72-
{
73-
"borderColor": "rgba(0, 0, 0, 0.1)",
74-
"borderWidth": 1,
75-
},
76-
undefined,
77-
]
78-
}
79-
testID="avatar-image"
62+
testID="user-avatar"
8063
>
81-
<Image
82-
onError={[Function]}
83-
source={
84-
{
85-
"uri": "https://i.imgur.com/LuuGvh0.png",
86-
}
87-
}
64+
<View
8865
style={
8966
[
90-
{},
67+
{
68+
"alignItems": "center",
69+
"borderRadius": 9999,
70+
"justifyContent": "center",
71+
"overflow": "hidden",
72+
},
9173
{
9274
"height": 32,
9375
"width": 32,
9476
},
77+
{
78+
"backgroundColor": "#fcd579",
79+
},
80+
{
81+
"borderColor": "rgba(0, 0, 0, 0.1)",
82+
"borderWidth": 1,
83+
},
84+
undefined,
9585
]
9686
}
97-
/>
87+
testID="avatar-image"
88+
>
89+
<Image
90+
onError={[Function]}
91+
source={
92+
{
93+
"uri": "https://i.imgur.com/LuuGvh0.png",
94+
}
95+
}
96+
style={
97+
[
98+
{},
99+
{
100+
"height": 32,
101+
"width": 32,
102+
},
103+
]
104+
}
105+
/>
106+
</View>
98107
</View>
99108
</View>
100-
</View>
101-
<View
102-
style={
103-
[
104-
{
105-
"position": "absolute",
106-
},
107-
{
108-
"left": 19.2,
109-
},
110-
]
111-
}
112-
>
113109
<View
114-
testID="user-avatar"
110+
style={
111+
[
112+
{
113+
"position": "absolute",
114+
},
115+
{
116+
"left": 19.2,
117+
},
118+
]
119+
}
115120
>
116121
<View
117-
style={
118-
[
119-
{
120-
"alignItems": "center",
121-
"borderRadius": 9999,
122-
"justifyContent": "center",
123-
"overflow": "hidden",
124-
},
125-
{
126-
"height": 32,
127-
"width": 32,
128-
},
129-
{
130-
"backgroundColor": "#8febbd",
131-
},
132-
{
133-
"borderColor": "rgba(0, 0, 0, 0.1)",
134-
"borderWidth": 1,
135-
},
136-
undefined,
137-
]
138-
}
139-
testID="avatar-image"
122+
testID="user-avatar"
140123
>
141-
<Image
142-
onError={[Function]}
143-
source={
144-
{
145-
"uri": "https://i.imgur.com/spueyAP.png",
146-
}
147-
}
124+
<View
148125
style={
149126
[
150-
{},
127+
{
128+
"alignItems": "center",
129+
"borderRadius": 9999,
130+
"justifyContent": "center",
131+
"overflow": "hidden",
132+
},
151133
{
152134
"height": 32,
153135
"width": 32,
154136
},
137+
{
138+
"backgroundColor": "#8febbd",
139+
},
140+
{
141+
"borderColor": "rgba(0, 0, 0, 0.1)",
142+
"borderWidth": 1,
143+
},
144+
undefined,
155145
]
156146
}
157-
/>
147+
testID="avatar-image"
148+
>
149+
<Image
150+
onError={[Function]}
151+
source={
152+
{
153+
"uri": "https://i.imgur.com/spueyAP.png",
154+
}
155+
}
156+
style={
157+
[
158+
{},
159+
{
160+
"height": 32,
161+
"width": 32,
162+
},
163+
]
164+
}
165+
/>
166+
</View>
158167
</View>
159168
</View>
160169
</View>

‎package/src/components/ui/Avatar/AvatarStack.tsx‎

Lines changed: 46 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { UserAvatar } from './UserAvatar';
1010
import { BadgeCount } from '../Badge';
1111

1212
export type AvatarStackProps = {
13-
avatarSize?: 'sm' | 'md' | 'xs';
13+
avatarSize?: 'md' | 'sm' | 'xs';
1414
maxVisible?: number;
1515
items: React.ReactNode[];
1616
overlap?: number;
@@ -24,41 +24,50 @@ export const AvatarStack = (props: AvatarStackProps) => {
2424
const visibleItems = items.slice(0, maxVisible);
2525
const extraCount = items.length - visibleItems.length;
2626

27-
if (extraCount > 0) {
28-
visibleItems.push(
29-
<BadgeCount
30-
count={extraCount}
31-
size={avatarSize === 'sm' || avatarSize === 'md' ? 'md' : 'sm'}
32-
/>,
33-
);
34-
}
35-
3627
const totalWidth = diameter + (visibleItems.length - 1) * visiblePortion;
3728

29+
const badgeCountSize = avatarSize === 'md' ? 'lg' : avatarSize === 'sm' ? 'md' : 'sm';
30+
3831
return (
39-
<View
40-
style={[
41-
styles.container,
42-
{
43-
width: totalWidth,
44-
},
45-
]}
46-
>
47-
{visibleItems.map((item, index) => {
48-
return (
49-
<View
50-
style={[
51-
styles.item,
52-
{
53-
left: index * visiblePortion,
54-
},
55-
]}
56-
key={index}
57-
>
58-
{item}
59-
</View>
60-
);
61-
})}
32+
<View style={styles.wrapper}>
33+
<View
34+
style={[
35+
styles.container,
36+
{
37+
width: totalWidth,
38+
height: diameter,
39+
},
40+
]}
41+
>
42+
{visibleItems.map((item, index) => {
43+
return (
44+
<View
45+
style={[
46+
styles.item,
47+
{
48+
left: index * visiblePortion,
49+
},
50+
]}
51+
key={index}
52+
>
53+
{item}
54+
</View>
55+
);
56+
})}
57+
</View>
58+
59+
{extraCount > 0 && (
60+
<View
61+
style={[
62+
styles.badgeCount,
63+
{
64+
marginLeft: -(overlap * diameter),
65+
},
66+
]}
67+
>
68+
<BadgeCount count={extraCount} size={badgeCountSize} />
69+
</View>
70+
)}
6271
</View>
6372
);
6473
};
@@ -100,6 +109,10 @@ const useStyles = () => {
100109
item: {
101110
position: 'absolute',
102111
},
112+
badgeCount: {},
113+
wrapper: {
114+
flexDirection: 'row',
115+
},
103116
}),
104117
[],
105118
);

0 commit comments

Comments
 (0)