Skip to content

Commit 5085845

Browse files
carocao-msftgithub-actions[bot]anjulgargJamesBurnsidedmceachernmsft
committed
Show/hide menu button on hover/click/focus (#2319)
* show/hide menu button * Change files * lint fix' * Update composite automation snapshots * fix test * Update composite automation snapshots * Update composite automation snapshots * show elipses when hovered * Update composite automation snapshots * Update composite automation snapshots * change id to classname' * Update composite automation snapshots * Update composite automation snapshots * new changes based on standup discussion * Add UI test for custom composite call control options (#2324) * Update storybook to contain docs on customizing call controls in call composite (#2333) * snapshots * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * test * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * test * test * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * [Call Readiness] Unsupported Browser UI (#2334) * create new view for the composite * Add base component and strings * remove button * create new story files * add story book content and build * fix icons * move styles to own file * add CC for unsupported browser * more CC work * Change files * fix linter errors * make component beta * remove console * fix cc error * make supporting types interfaces * build API * fix cc * rebuild api * fix nits * Small Refactor: move call composite side pane state handling to its own hook (#2342) * Add instructions to update callwithchat hero sample (#2337) * new changes based on standup discussion * Add UI test for custom composite call control options (#2324) * new changes based on standup discussion * Add UI test for custom composite call control options (#2324) * new changes based on standup discussion * new changes based on standup discussion * new changes based on standup discussion * test fix * test fix * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * delete old snapshot' * Update packages/react-composites CallComposite browser test snapshots * test * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Anjul Garg <anjulgarg@live.com> Co-authored-by: James Burnside <2684369+JamesBurnside@users.noreply.github.com> Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> Co-authored-by: Prathmesh Prabhu <82062616+prprabhu-ms@users.noreply.github.com>
1 parent d84497a commit 5085845

30 files changed

Lines changed: 102 additions & 6 deletions

File tree

‎change/@internal-react-components-12ee682e-851f-4d67-978f-408c9f5a490f.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Add CSS to show/hide menu button on hover/focus ",
4+
"packageName": "@internal/react-components",
5+
"email": "carolinecao@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ export const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {
153153
/* @conditional-compile-remove(PSTN-calls) */
154154
} = props;
155155
const [itemHovered, setItemHovered] = useState<boolean>(false);
156+
const [itemFocused, setItemFocused] = useState<boolean>(false);
156157
const [menuHidden, setMenuHidden] = useState<boolean>(true);
157158
const containerRef = useRef<HTMLDivElement>(null);
158159
const theme = useTheme();
@@ -207,33 +208,40 @@ export const ParticipantItem = (props: ParticipantItemProps): JSX.Element => {
207208
data-ui-id={ids.participantItemMenuButton}
208209
>
209210
<Icon
210-
iconName={itemHovered ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions'}
211+
iconName={
212+
itemHovered || itemFocused || !menuHidden ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions'
213+
}
211214
className={iconStyles}
212215
/>
213216
</Stack>
214217
),
215-
[itemHovered, strings.menuTitle, ids.participantItemMenuButton]
218+
[strings.menuTitle, ids.participantItemMenuButton, itemHovered, itemFocused, menuHidden]
216219
);
217220

218221
const onDismissMenu = (): void => {
219222
setItemHovered(false);
223+
setItemFocused(false);
220224
setMenuHidden(true);
221225
};
222226

223227
const participantStateString = participantStateStringTrampoline(props, strings);
224-
225228
return (
226229
<div
227230
ref={containerRef}
228231
role={'menuitem'}
229232
data-is-focusable={true}
230233
data-ui-id="participant-item"
231234
className={mergeStyles(
232-
participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }),
235+
participantItemContainerStyle({
236+
localparticipant: me,
237+
clickable: !!menuItems
238+
}),
233239
styles?.root
234240
)}
235241
onMouseEnter={() => setItemHovered(true)}
236242
onMouseLeave={() => setItemHovered(false)}
243+
onFocus={() => setItemFocused(true)}
244+
onBlur={() => setItemFocused(false)}
237245
onClick={() => {
238246
if (!participantStateString) {
239247
setItemHovered(true);

‎packages/react-components/src/theming/icons.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export const DEFAULT_COMPONENT_ICONS = {
163163
OptionsMic: <MicOn20Regular />,
164164
OptionsSpeaker: <Speaker220Regular />,
165165
ParticipantItemMicOff: <MicOff16Regular />,
166-
ParticipantItemOptions: <MoreHorizontal20Regular />,
166+
ParticipantItemOptions: <></>,
167167
ParticipantItemOptionsHovered: <MoreHorizontal20Filled />,
168168
ParticipantItemScreenShareStart: <ShareScreenStart20Filled />,
169169
/* @conditional-compile-remove(PSTN-calls) */

‎packages/react-composites/tests/app/call/BaseApp.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { isMobile } from '../lib/utils';
1818
// eslint-disable-next-line no-restricted-imports
1919
import { IContextualMenuItem, mergeStyles } from '@fluentui/react';
2020
import { QueryArgs } from './QueryArgs';
21+
import { MoreHorizontal20Regular } from '@fluentui/react-icons';
2122

2223
/** @internal */
2324
export function BaseApp(props: { queryArgs: QueryArgs; callAdapter?: CallAdapter }): JSX.Element {
@@ -31,13 +32,16 @@ export function BaseApp(props: { queryArgs: QueryArgs; callAdapter?: CallAdapter
3132
'Some details about the call that span more than one line - many, many lines in fact. Who would want fewer lines than many, many lines? Could you even imagine?! 😲';
3233
}
3334

35+
const ParticipantItemOptions = queryArgs.showParticipantItemIcon ? <MoreHorizontal20Regular /> : <></>;
36+
3437
return (
3538
<>
3639
{!callAdapter && 'Initializing call adapter...'}
3740
{callAdapter && (
3841
<div style={{ position: 'fixed', width: '100%', height: '100%' }}>
3942
<_IdentifierProvider identifiers={IDS}>
4043
<CallComposite
44+
icons={{ ParticipantItemOptions: ParticipantItemOptions }}
4145
adapter={callAdapter}
4246
locale={locale}
4347
role={queryArgs.role}
@@ -95,7 +99,7 @@ const onFetchCustomButtonProps: CustomCallControlButtonCallback[] = [
9599
return {
96100
showLabel: args.displayType !== 'compact',
97101
// Some non-default icon that is already registered by the composites.
98-
iconName: 'ParticipantItemOptions',
102+
iconName: 'ParticipantItemOptionsHovered',
99103
text: 'custom #1',
100104
placement: 'primary'
101105
};

‎packages/react-composites/tests/app/call/QueryArgs.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface QueryArgs {
1313
injectParticipantMenuItems: boolean;
1414
injectCustomButtons: boolean;
1515
role?: Role;
16+
showParticipantItemIcon: boolean;
1617
customCallCompositeOptions?: CallCompositeOptions;
1718

1819
// These are only set for live tests.
@@ -32,6 +33,7 @@ export function parseQueryArgs(): QueryArgs {
3233
showCallDescription: Boolean(params.showCallDescription),
3334
injectParticipantMenuItems: Boolean(params.injectParticipantMenuItems),
3435
injectCustomButtons: Boolean(params.injectCustomButtons),
36+
showParticipantItemIcon: Boolean(params.showParticipantItemIcon),
3537
userId: params.userId ?? '',
3638
groupId: params.groupId ?? '',
3739
token: params.token ?? '',

‎packages/react-composites/tests/browser/call/hermetic/PeoplePane.test.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,78 @@ test.describe('Call Composite E2E CallPage Tests', () => {
6363
}
6464
expect(await stableScreenshot(page)).toMatchSnapshot(`video-gallery-page-participants-flyout.png`);
6565
});
66+
67+
test('participant list opens and displays ellipses if passing in custom icon for desktop', async ({
68+
page,
69+
serverUrl
70+
}, testInfo) => {
71+
//only run this test on desktop
72+
test.skip(!isTestProfileDesktop(testInfo));
73+
const paul = defaultMockRemoteParticipant('Paul Bridges');
74+
addVideoStream(paul, true);
75+
paul.isSpeaking = true;
76+
const fiona = defaultMockRemoteParticipant('Fiona Harper');
77+
addVideoStream(fiona, true);
78+
const participants = [paul, defaultMockRemoteParticipant('Eryka Klein'), fiona];
79+
const initialState = defaultMockCallAdapterState(participants);
80+
81+
await page.goto(
82+
buildUrlWithMockAdapter(serverUrl, initialState, {
83+
showParticipantItemIcon: 'true'
84+
})
85+
);
86+
await pageClick(page, dataUiId('call-composite-participants-button'));
87+
88+
if (flavor === 'beta') {
89+
await waitForSelector(page, dataUiId('call-composite-people-pane'));
90+
} else {
91+
await pageClick(page, dataUiId(IDS.participantButtonPeopleMenuItem));
92+
// click on last person (myself) to remove any hover effect on participant items
93+
await pageClick(page, dataUiId('participant-item') + ' >> nth=3');
94+
}
95+
expect(await stableScreenshot(page)).toMatchSnapshot(`video-gallery-page-participants-flyout-custom-ellipses.png`);
96+
});
97+
98+
test('participant list wiht custom ellipses on mobile, should not show ellipses for beta version people pane', async ({
99+
page,
100+
serverUrl
101+
}, testInfo) => {
102+
//only run this test on mobile
103+
test.skip(isTestProfileDesktop(testInfo));
104+
const paul = defaultMockRemoteParticipant('Paul Bridges');
105+
addVideoStream(paul, true);
106+
paul.isSpeaking = true;
107+
const fiona = defaultMockRemoteParticipant('Fiona Harper');
108+
addVideoStream(fiona, true);
109+
const participants = [paul, defaultMockRemoteParticipant('Eryka Klein'), fiona];
110+
const initialState = defaultMockCallAdapterState(participants);
111+
112+
await page.goto(
113+
buildUrlWithMockAdapter(serverUrl, initialState, {
114+
showParticipantItemIcon: 'true'
115+
})
116+
);
117+
118+
if (!isTestProfileStableFlavor()) {
119+
await pageClick(page, dataUiId('call-with-chat-composite-more-button'));
120+
const drawerPeopleMenuDiv = await page.$('div[role="menu"] >> text=People');
121+
await drawerPeopleMenuDiv?.click();
122+
} else {
123+
await pageClick(page, dataUiId('call-composite-participants-button'));
124+
}
125+
126+
if (flavor === 'stable') {
127+
await pageClick(page, dataUiId(IDS.participantButtonPeopleMenuItem));
128+
// click on last person (myself) to remove any hover effect on participant items
129+
await pageClick(page, dataUiId('participant-item') + ' >> nth=3');
130+
} else {
131+
await waitForSelector(page, dataUiId('call-composite-people-pane'));
132+
await waitForPiPiPToHaveLoaded(page, { skipVideoCheck: true });
133+
}
134+
expect(await stableScreenshot(page)).toMatchSnapshot(
135+
`video-gallery-page-participants-flyout-no-ellipses-beta-people-pane.png`
136+
);
137+
});
66138
});
67139

68140
test.describe('Call composite participant menu items injection tests', async () => {
@@ -99,12 +171,14 @@ test.describe('Call composite participant menu items injection tests', async ()
99171
// wait for drawer to have opened
100172
await waitForSelector(page, dataUiId('drawer-menu'));
101173
} else {
174+
await page.hover(dataUiId('participant-item'));
102175
await pageClick(page, dataUiId(IDS.participantItemMenuButton));
103176
await waitForSelector(page, '.ms-ContextualMenu-itemText');
104177
}
105178
} else {
106179
// Open participant list flyout
107180
await pageClick(page, dataUiId(IDS.participantButtonPeopleMenuItem));
181+
await page.hover(dataUiId('participant-item') + ' >> nth=0');
108182
// There should be at least one participant. Just click on the first.
109183
await pageClick(page, dataUiId(IDS.participantItemMenuButton) + ' >> nth=0');
110184

‎packages/react-composites/tests/browser/call/hermetic/RoomsCallScreen.test.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ const openRemoveParticipantMenu = async (page: Page, testInfo: TestInfo): Promis
9898
if (isTestProfileDesktop(testInfo)) {
9999
await waitForSelector(page, dataUiId('call-composite-participants-button'));
100100
await pageClick(page, dataUiId('call-composite-participants-button'));
101+
await page.hover(dataUiId('participant-item'));
101102
await waitForSelector(page, dataUiId('participant-item-menu-button'));
102103
await pageClick(page, dataUiId('participant-item-menu-button'));
103104
await waitForSelector(page, dataUiId('participant-list-remove-participant-button'));

‎packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/custom-buttons-Desktop-Chrome-linux.png‎

-22 Bytes
Loading

‎packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/custom-buttons-Mobile-Android-Landscape-linux.png‎

-85 Bytes
Loading

‎packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/CallControls.test.ts-snapshots/custom-buttons-Mobile-Android-Portrait-linux.png‎

-106 Bytes
Loading

0 commit comments

Comments
 (0)
⚡