Skip to content

Commit babd3a2

Browse files
anjulgarganjulgarg
authored
Bugfix for vertically truncated participant names (#1145)
* Bugfix for vertically truncated participant names * Change files * Bugfix for vertically truncated participant names * Adding comment to the arbitrary css * Change files
1 parent 6eda95d commit babd3a2

5 files changed

Lines changed: 144 additions & 121 deletions

File tree

‎change/@internal-react-components-b2474517-31bb-4e4d-bb32-57500520272d.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": "Bugfix for vertically truncated participant names",
4+
"packageName": "@internal/react-components",
5+
"email": "anjulgarg@live.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@internal-storybook-02384008-9c33-442e-93a1-45ee8dfbe4e8.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": "Bugfix for vertically truncated participant names",
4+
"packageName": "@internal/storybook",
5+
"email": "anjulgarg@live.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/src/components/ParticipantItem.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,16 @@ export const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {
123123
const avatar = onRenderAvatar ? (
124124
onRenderAvatar(userId ?? '', avatarOptions)
125125
) : (
126-
<Persona className={mergeStyles(styles?.avatar)} {...avatarOptions} />
126+
<Persona
127+
className={mergeStyles(
128+
{
129+
// Prevents persona text from being vertically truncated if a global line height is less than 1.15.
130+
lineHeight: '1.15rem'
131+
},
132+
styles?.avatar
133+
)}
134+
{...avatarOptions}
135+
/>
127136
);
128137

129138
const meTextStyle = useMemo(

‎packages/storybook/stories/ParticipantItem/__snapshots__/ParticipantItem.stories.storyshot‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -36,22 +36,22 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
3636
role="menuitem"
3737
>
3838
<div
39-
className="ms-Stack css-7"
39+
className="ms-Stack css-8"
4040
>
4141
<div
42-
className="ms-Persona ms-Persona--size32 root-8"
42+
className="ms-Persona ms-Persona--size32 root-9"
4343
>
4444
<div
45-
className="ms-Persona-coin ms-Persona--size32 coin-15"
45+
className="ms-Persona-coin ms-Persona--size32 coin-16"
4646
role="presentation"
4747
>
4848
<div
49-
className="ms-Persona-imageArea imageArea-17"
49+
className="ms-Persona-imageArea imageArea-18"
5050
role="presentation"
5151
>
5252
<div
5353
aria-hidden="true"
54-
className="ms-Persona-initials initials-20"
54+
className="ms-Persona-initials initials-21"
5555
>
5656
<span>
5757
AM
@@ -60,14 +60,14 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
6060
</div>
6161
</div>
6262
<div
63-
className="ms-Persona-details details-9"
63+
className="ms-Persona-details details-10"
6464
>
6565
<div
66-
className="ms-Persona-primaryText primaryText-10"
66+
className="ms-Persona-primaryText primaryText-11"
6767
dir="auto"
6868
>
6969
<div
70-
className="ms-TooltipHost root-23"
70+
className="ms-TooltipHost root-24"
7171
onBlurCapture={[Function]}
7272
onFocusCapture={[Function]}
7373
onKeyDown={[Function]}
@@ -78,24 +78,24 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
7878
</div>
7979
</div>
8080
<div
81-
className="ms-Persona-secondaryText secondaryText-11"
81+
className="ms-Persona-secondaryText secondaryText-12"
8282
dir="auto"
8383
/>
8484
<div
85-
className="ms-Persona-tertiaryText tertiaryText-12"
85+
className="ms-Persona-tertiaryText tertiaryText-13"
8686
dir="auto"
8787
/>
8888
<div
89-
className="ms-Persona-optionalText optionalText-13"
89+
className="ms-Persona-optionalText optionalText-14"
9090
dir="auto"
9191
/>
9292
</div>
9393
</div>
9494
<div
95-
className="ms-Stack css-24"
95+
className="ms-Stack css-25"
9696
>
9797
<div
98-
className="ms-Stack css-25"
98+
className="ms-Stack css-26"
9999
>
100100
<span
101101
aria-hidden={true}
@@ -141,7 +141,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
141141
</div>
142142
</div>
143143
<div
144-
className="ms-Stack css-26"
144+
className="ms-Stack css-27"
145145
data-ui-id="participant-item-menu-button"
146146
title="More Options"
147147
>
@@ -179,7 +179,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
179179
className="ms-layer"
180180
>
181181
<div
182-
className="ms-Fabric ms-Layer-content content-50"
182+
className="ms-Fabric ms-Layer-content content-51"
183183
onBlur={[Function]}
184184
onChange={[Function]}
185185
onClick={[Function]}
@@ -212,15 +212,15 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
212212
onTouchStart={[Function]}
213213
>
214214
<div
215-
className="ms-Callout-container container-52"
215+
className="ms-Callout-container container-53"
216216
style={
217217
Object {
218218
"visibility": "hidden",
219219
}
220220
}
221221
>
222222
<div
223-
className="ms-Callout ms-ContextualMenu-Callout root-53"
223+
className="ms-Callout ms-ContextualMenu-Callout root-54"
224224
hidden={true}
225225
onScroll={[Function]}
226226
style={
@@ -233,7 +233,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
233233
tabIndex={-1}
234234
>
235235
<div
236-
className="ms-Callout-main calloutMain-56"
236+
className="ms-Callout-main calloutMain-57"
237237
onKeyDown={[Function]}
238238
onMouseDown={[Function]}
239239
onMouseUp={[Function]}
@@ -247,35 +247,35 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
247247
}
248248
>
249249
<div
250-
className="ms-ContextualMenu-container container-28"
250+
className="ms-ContextualMenu-container container-29"
251251
onFocusCapture={[Function]}
252252
onKeyDown={[Function]}
253253
onKeyUp={[Function]}
254254
role="menu"
255255
tabIndex={-1}
256256
>
257257
<div
258-
className="ms-FocusZone css-57 ms-ContextualMenu is-open root-27"
258+
className="ms-FocusZone css-58 ms-ContextualMenu is-open root-28"
259259
data-focuszone-id="FocusZone4"
260260
onFocus={[Function]}
261261
onKeyDown={[Function]}
262262
onMouseDownCapture={[Function]}
263263
>
264264
<ul
265-
className="ms-ContextualMenu-list is-open list-29"
265+
className="ms-ContextualMenu-list is-open list-30"
266266
onKeyDown={[Function]}
267267
onKeyUp={[Function]}
268268
role="presentation"
269269
>
270270
<li
271-
className="ms-ContextualMenu-item item-32"
271+
className="ms-ContextualMenu-item item-33"
272272
role="presentation"
273273
>
274274
<button
275275
aria-disabled={false}
276276
aria-posinset={1}
277277
aria-setsize={2}
278-
className="ms-ContextualMenu-link root-34"
278+
className="ms-ContextualMenu-link root-35"
279279
onClick={[Function]}
280280
onMouseDown={[Function]}
281281
onMouseEnter={[Function]}
@@ -284,25 +284,25 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
284284
role="menuitem"
285285
>
286286
<div
287-
className="ms-ContextualMenu-linkContent linkContent-38"
287+
className="ms-ContextualMenu-linkContent linkContent-39"
288288
>
289289
<span
290-
className="ms-ContextualMenu-itemText label-44"
290+
className="ms-ContextualMenu-itemText label-45"
291291
>
292292
Mute
293293
</span>
294294
</div>
295295
</button>
296296
</li>
297297
<li
298-
className="ms-ContextualMenu-item item-32"
298+
className="ms-ContextualMenu-item item-33"
299299
role="presentation"
300300
>
301301
<button
302302
aria-disabled={false}
303303
aria-posinset={2}
304304
aria-setsize={2}
305-
className="ms-ContextualMenu-link root-34"
305+
className="ms-ContextualMenu-link root-35"
306306
onClick={[Function]}
307307
onMouseDown={[Function]}
308308
onMouseEnter={[Function]}
@@ -311,10 +311,10 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
311311
role="menuitem"
312312
>
313313
<div
314-
className="ms-ContextualMenu-linkContent linkContent-38"
314+
className="ms-ContextualMenu-linkContent linkContent-39"
315315
>
316316
<span
317-
className="ms-ContextualMenu-itemText label-44"
317+
className="ms-ContextualMenu-itemText label-45"
318318
>
319319
Remove
320320
</span>

0 commit comments

Comments
 (0)
⚡