Skip to content

Bugfix for vertically truncated participant names #1145

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

Merged
anjulgarg merged 8 commits into from
Nov 24, 2021
Merged

Bugfix for vertically truncated participant names #1145

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1ef8ac7
Bugfix for vertically truncated participant names
anjulgarg Nov 23, 2021
bc2264b
Merge branch 'main' into anjulgarg/bugfix-2641772-participant-name
anjulgarg Nov 23, 2021
f445aa9
Change files
anjulgarg Nov 23, 2021
aa78d27
Merge branch 'anjulgarg/bugfix-2641772-participant-name' of https://g…
anjulgarg Nov 23, 2021
b045987
Bugfix for vertically truncated participant names
anjulgarg Nov 23, 2021
a5899ff
Adding comment to the arbitrary css
anjulgarg Nov 23, 2021
8fe5dba
Change files
anjulgarg Nov 23, 2021
8e55e1a
Merge branch 'main' into anjulgarg/bugfix-2641772-participant-name
anjulgarg Nov 24, 2021
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
7 changes: 7 additions & 0 deletions change/@internal-react-components-b2474517-31bb-4e4d-bb32-57500520272d.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Bugfix for vertically truncated participant names",
"packageName": "@internal/react-components",
"email": "anjulgarg@live.com",
"dependentChangeType": "patch"
}
2 changes: 1 addition & 1 deletion packages/react-components/src/components/ParticipantItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {
const avatar = onRenderAvatar ? (
onRenderAvatar(userId ?? '', avatarOptions)
) : (
<Persona className={mergeStyles(styles?.avatar)} {...avatarOptions} />
<Persona className={mergeStyles({ lineHeight: '1.15rem' }, styles?.avatar)} {...avatarOptions} />
Comment thread
anjulgarg marked this conversation as resolved.
Outdated
);

const meTextStyle = useMemo(
Expand Down
58 changes: 29 additions & 29 deletions packages/storybook/stories/ParticipantItem/__snapshots__/ParticipantItem.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,22 +36,22 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
role="menuitem"
>
<div
className="ms-Stack css-7"
className="ms-Stack css-8"
>
<div
className="ms-Persona ms-Persona--size32 root-8"
className="ms-Persona ms-Persona--size32 root-9"
>
<div
className="ms-Persona-coin ms-Persona--size32 coin-15"
className="ms-Persona-coin ms-Persona--size32 coin-16"
role="presentation"
>
<div
className="ms-Persona-imageArea imageArea-17"
className="ms-Persona-imageArea imageArea-18"
role="presentation"
>
<div
aria-hidden="true"
className="ms-Persona-initials initials-20"
className="ms-Persona-initials initials-21"
>
<span>
AM
Expand All @@ -60,14 +60,14 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
</div>
</div>
<div
className="ms-Persona-details details-9"
className="ms-Persona-details details-10"
>
<div
className="ms-Persona-primaryText primaryText-10"
className="ms-Persona-primaryText primaryText-11"
dir="auto"
>
<div
className="ms-TooltipHost root-23"
className="ms-TooltipHost root-24"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
Expand All @@ -78,24 +78,24 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
</div>
</div>
<div
className="ms-Persona-secondaryText secondaryText-11"
className="ms-Persona-secondaryText secondaryText-12"
dir="auto"
/>
<div
className="ms-Persona-tertiaryText tertiaryText-12"
className="ms-Persona-tertiaryText tertiaryText-13"
dir="auto"
/>
<div
className="ms-Persona-optionalText optionalText-13"
className="ms-Persona-optionalText optionalText-14"
dir="auto"
/>
</div>
</div>
<div
className="ms-Stack css-24"
className="ms-Stack css-25"
>
<div
className="ms-Stack css-25"
className="ms-Stack css-26"
>
<span
aria-hidden={true}
Expand Down Expand Up @@ -141,7 +141,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
</div>
</div>
<div
className="ms-Stack css-26"
className="ms-Stack css-27"
data-ui-id="participant-item-menu-button"
title="More Options"
>
Expand Down Expand Up @@ -179,7 +179,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
className="ms-layer"
>
<div
className="ms-Fabric ms-Layer-content content-50"
className="ms-Fabric ms-Layer-content content-51"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -212,15 +212,15 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
onTouchStart={[Function]}
>
<div
className="ms-Callout-container container-52"
className="ms-Callout-container container-53"
style={
Object {
"visibility": "hidden",
}
}
>
<div
className="ms-Callout ms-ContextualMenu-Callout root-53"
className="ms-Callout ms-ContextualMenu-Callout root-54"
hidden={true}
onScroll={[Function]}
style={
Expand All @@ -233,7 +233,7 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
tabIndex={-1}
>
<div
className="ms-Callout-main calloutMain-56"
className="ms-Callout-main calloutMain-57"
onKeyDown={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
Expand All @@ -247,35 +247,35 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
}
>
<div
className="ms-ContextualMenu-container container-28"
className="ms-ContextualMenu-container container-29"
onFocusCapture={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="menu"
tabIndex={-1}
>
<div
className="ms-FocusZone css-57 ms-ContextualMenu is-open root-27"
className="ms-FocusZone css-58 ms-ContextualMenu is-open root-28"
data-focuszone-id="FocusZone4"
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDownCapture={[Function]}
>
<ul
className="ms-ContextualMenu-list is-open list-29"
className="ms-ContextualMenu-list is-open list-30"
onKeyDown={[Function]}
onKeyUp={[Function]}
role="presentation"
>
<li
className="ms-ContextualMenu-item item-32"
className="ms-ContextualMenu-item item-33"
role="presentation"
>
<button
aria-disabled={false}
aria-posinset={1}
aria-setsize={2}
className="ms-ContextualMenu-link root-34"
className="ms-ContextualMenu-link root-35"
onClick={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
Expand All @@ -284,25 +284,25 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
role="menuitem"
>
<div
className="ms-ContextualMenu-linkContent linkContent-38"
className="ms-ContextualMenu-linkContent linkContent-39"
>
<span
className="ms-ContextualMenu-itemText label-44"
className="ms-ContextualMenu-itemText label-45"
>
Mute
</span>
</div>
</button>
</li>
<li
className="ms-ContextualMenu-item item-32"
className="ms-ContextualMenu-item item-33"
role="presentation"
>
<button
aria-disabled={false}
aria-posinset={2}
aria-setsize={2}
className="ms-ContextualMenu-link root-34"
className="ms-ContextualMenu-link root-35"
onClick={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
Expand All @@ -311,10 +311,10 @@ exports[`storybook snapshot tests Storyshots UI Components/Participant Item Part
role="menuitem"
>
<div
className="ms-ContextualMenu-linkContent linkContent-38"
className="ms-ContextualMenu-linkContent linkContent-39"
>
<span
className="ms-ContextualMenu-itemText label-44"
className="ms-ContextualMenu-itemText label-45"
>
Remove
</span>
Expand Down
Loading
⚡