Skip to content

chore: dual state menu demo #33999

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

Draft
jurokapsiar wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

chore: dual state menu demo #33999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c97d6a6
chore: dual state menu demo
jurokapsiar Mar 16, 2025
7b5c94a
examples
jurokapsiar Mar 24, 2025
9b6591b
scenarios
jurokapsiar Mar 24, 2025
dbde4b8
titles
jurokapsiar Mar 27, 2025
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
78 changes: 78 additions & 0 deletions apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import * as React from 'react';
Copy link

@github-actions github-actions bot Mar 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 718 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 714 Changed

import { Combobox, Option, makeStyles, useId } from '@fluentui/react-components';
import { Scenario } from './utils';

const useStyles = makeStyles({
root: {
// Stack the label above the field with a gap
display: 'grid',
gridTemplateRows: 'repeat(1fr)',
justifyItems: 'start',
gap: '2px',
maxWidth: '400px',
},
});

const options = [
'Apple',
'Apricot',
'Avocado',
'Banana',
'Blackberry',
'Blueberry',
'Boysenberry',
'Cantaloupe',
'Coconut',
'Currant',
'Date',
'Dragon fruit',
'Fig',
'Grape',
'Grapefruit',
'Honeydew',
'Kiwi',
'Lemon',
'Lime',
'Lychee',
'Mango',
'Mandarin orange',
'Melon',
'Nectarine',
'Olive',
'Orange',
'Papaya',
'Passion Fruit',
'Peach',
'Pear',
'Persimmon',
'Pineapple',
'Plum',
'Pomegranate',
'Raspberry',
'Ramnutan',
'Strawberry',
'Tangerine',
'Watermelon',
];

export const FilteringCombobox: React.FunctionComponent = () => {
const comboId = useId();
const styles = useStyles();

return (
<Scenario pageTitle="Filtering combobox">
<h1>Test 4</h1>
<div>Dual State Interaction (Independent Hover + Focus) </div>
<div className={styles.root}>
<label id={comboId}>Favourite fruit to have with ice-cream</label>
<Combobox aria-labelledby={comboId} placeholder="Pick a fruit" positioning={{ autoSize: true }}>
{options.map(option => (
<Option key={option} disabled={option === 'Ferret'}>
{option}
</Option>
))}
</Combobox>
</div>
</Scenario>
);
};
4 changes: 4 additions & 0 deletions apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ Accessibility scenarios are used to validate accessibility of components and dem
- <FullscreenLink content="Menu / Profile menu" parent={parentPath} story="profile-menu" />
- <FullscreenLink content="Menu / Menu with split item" parent={parentPath} story="menu-with-split-item" />

## Component: Combobox (dual state)

- <FullscreenLink content="Combobox" parent={parentPath} story="filtering-combobox" />

## Component: Popover

- <FullscreenLink content="Popover / Add people" parent={parentPath} story="add-people-popover" />
Expand Down
139 changes: 56 additions & 83 deletions apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,99 +1,72 @@
import * as React from 'react';

import {
Menu,
MenuButton,
MenuGroup,
MenuGroupHeader,
MenuItem,
MenuItemCheckbox,
MenuItemRadio,
MenuList,
MenuPopover,
MenuTrigger,
} from '@fluentui/react-components';
import { Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';

import { Scenario } from './utils';

interface StatusSubmenuProps {
checkedValues: Record<string, string[]>;
onChange: OnCheckedValueChangeCallback;
}

const StatusSubmenu: React.FunctionComponent<StatusSubmenuProps> = props => {
const { checkedValues, onChange } = props;

return (
<Menu checkedValues={checkedValues} onCheckedValueChange={onChange}>
<MenuTrigger disableButtonEnhancement>
<MenuItem>Status</MenuItem>
</MenuTrigger>

<MenuPopover>
<MenuList>
<MenuItemRadio name="status" value="online">
Online
</MenuItemRadio>
<MenuItemRadio name="status" value="away">
Away
</MenuItemRadio>
<MenuItemRadio name="status" value="offline" disabled>
Offline
</MenuItemRadio>
</MenuList>
</MenuPopover>
</Menu>
);
};

type OnCheckedValueChangeDataType = {
name: string;
checkedItems: string[];
};

type OnCheckedValueChangeCallback = (
event: React.MouseEvent | React.KeyboardEvent,
data: OnCheckedValueChangeDataType,
) => void;

type ProfileMenuStatus = { status: Array<'online' | 'away' | 'offline'> };

export const ProfileMenu: React.FunctionComponent = () => {
const [statusCheckedValues, setStatusCheckedValues] = React.useState<ProfileMenuStatus>({ status: ['online'] });
const onStatusChange = (
event: React.MouseEvent | React.KeyboardEvent,
{ name, checkedItems }: OnCheckedValueChangeDataType,
) => {
setStatusCheckedValues(state => ({ ...state, [name]: checkedItems }));
};

return (
<Scenario pageTitle="Profile menu">
Copy link
Collaborator

@fabricteam fabricteam Mar 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 1 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.badgeMask.normal.chromium.png 1 Changed
Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.overlay drawer full - RTL.chromium.png 1172 Changed

<Menu>
<h1>Test 2</h1>
<div>Dual State Interaction (Independent Hover + Focus) </div>
<Menu positioning={{ autoSize: true }}>
<MenuTrigger disableButtonEnhancement>
<MenuButton>Profile</MenuButton>
<MenuButton>Pick a fruit</MenuButton>
</MenuTrigger>

<MenuPopover>
<MenuList>
<MenuGroup>
<MenuGroupHeader>Information</MenuGroupHeader>
<MenuItem>Help</MenuItem>
</MenuGroup>
<MenuGroup>
<MenuGroupHeader>Settings</MenuGroupHeader>
<MenuItemCheckbox name="settings" value="runAtStartup">
Run at startup
</MenuItemCheckbox>
<MenuItemCheckbox name="settings" value="showNotifications">
Show notifications
</MenuItemCheckbox>
</MenuGroup>
<MenuGroup>
<MenuGroupHeader>Account</MenuGroupHeader>
<StatusSubmenu checkedValues={statusCheckedValues} onChange={onStatusChange} />
<MenuItem>Logout</MenuItem>
</MenuGroup>
<MenuItem>Apple</MenuItem>
<MenuItem>Apricot</MenuItem>
<MenuItem>Avocado</MenuItem>
<MenuItem>Banana</MenuItem>

<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuItem>Berries</MenuItem>
</MenuTrigger>

<MenuPopover>
<MenuList>
<MenuItem>Blackberry</MenuItem>
<MenuItem>Boysenberry</MenuItem>
<MenuItem>Blueberry</MenuItem>
<MenuItem>Strawberry</MenuItem>
<MenuItem>Rapsberry</MenuItem>
<MenuItem>Barry White</MenuItem>
</MenuList>
</MenuPopover>
</Menu>

<MenuItem>Cantaloupe</MenuItem>
<MenuItem>Coconut</MenuItem>
<MenuItem>Currant</MenuItem>
<MenuItem>Dragon Fruit</MenuItem>
<MenuItem>Grape</MenuItem>
<MenuItem>Grapefruit</MenuItem>
<MenuItem>Honeydew</MenuItem>
<MenuItem>Kiwi</MenuItem>
<MenuItem>Lemon</MenuItem>
<MenuItem>Lime</MenuItem>
<MenuItem>Lychee</MenuItem>
<MenuItem>Mango</MenuItem>
<MenuItem>Mandarin Orange</MenuItem>
<MenuItem>Melon</MenuItem>
<MenuItem>Nectarine</MenuItem>
<MenuItem>Olive</MenuItem>
<MenuItem>Orange</MenuItem>
<MenuItem>Papaya</MenuItem>
<MenuItem>Passion Fruit</MenuItem>
<MenuItem>Peach</MenuItem>
<MenuItem>Pear</MenuItem>
<MenuItem>Persimmon</MenuItem>
<MenuItem>Pineapple</MenuItem>
<MenuItem>Plum</MenuItem>
<MenuItem>Pomegranate</MenuItem>
<MenuItem>Raspberry</MenuItem>
<MenuItem>Rambutan</MenuItem>
<MenuItem>Strawberry</MenuItem>
<MenuItem>Watermelon</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
Expand Down
1 change: 1 addition & 0 deletions apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export { MailSettingsVerticalTabList } from './TabListVertical.stories';
export { QuestionnaireAboutCustomerExperienceTextareas } from './Textarea.stories';
export { DeviceControlsToggleButtons } from './ToggleButton.stories';
export { ButtonsWithTooltip } from './Tooltip.stories';
export { FilteringCombobox } from './Combobox.stories';

export default {
title: 'Concepts/Developer/Accessibility/Stories',
Expand Down
8 changes: 1 addition & 7 deletions apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,5 @@ export const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageT
document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE;
}, [pageTitle]);

return (
<div role="main">
<BackLink />
<br />
{children}
</div>
);
return <div role="main">{children}</div>;
};
7 changes: 0 additions & 7 deletions packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,6 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
dismissedWithKeyboardRef.current = true;
}
}),
onMouseMove: useEventCallback(event => {
if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) {
innerRef.current?.focus();
}

props.onMouseMove?.(event);
}),
onClick: useEventCallback(event => {
if (!hasSubmenu && !persistOnClick) {
setOpen(event, {
Expand Down
Loading