Adds Menu and MenuItem as new web components #26765

brianchristopherbrady · 2023-02-08T22:00:10Z

Menu + MenuItem

Component, Slot, or Attribute	Fluent React v9	Fluent Web Components v3
Menu	`<MenuList>`	`<fluent-menu>`
Menu item	`<MenuItem>`	`<fluent-menu-item>`
Menu item with radio	`<MenuItemRadio>`	`<fluent-menu-item role="menuitemcheckbox">..`
Menu item with checkbox	`<MenuItemCheckbox>`	`<fluent-menu-item role="menuitemcheckbox">..`
Icons	`<MenuItem icon={<MyIcon />}>`	`<slot name ="start">..` `<slot name="end">..`
Aligning Icons	`<Menu hasIcons>`	`<Menu icons>`
Menu group header	`<MenuGroupHeader>`	`<fluent-menu-item class="header">`

Additional Deltas:

Responsiveness

The WC3 Menu component does not currently support responsive styling.

Icons

In order for icons to render with appropriate styles ( hover state ) the icons attribute must be present on the Menu.

Composure

Complete FUIR9 Menu composure

<menu>
  <MenuPopover>
    <MenuList>
      <menuitem>Item 1</menuitem>
      <menuitem>Item 2</menuitem>
      <menuitem>Item 3</menuitem>
    </MenuList>
  </MenuPopover>
</menu>

Complete WC3 Menu composure

<fluent-menu>
  <fluent-menu-item>Item 1</fluent-menu-item>
  <fluent-menu-item>Item 2</fluent-menu-item>
  <fluent-menu-item>Item 3</fluent-menu-item>

Remaining work items

Create support for menu item "grouping"
Split button variation

Menu Item

Menu list item options displayed in a Menu component. They are invoked when users interact with a button, action, or other control.

Design Spec

Link to Menu Item Design Spec in Figma

Engineering Spec

Fluent WC3 Menu extends from the FAST Menu FAST Menu Item and is intended to be as close to the Fluent UI React 9 Menu implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.

Inputs

role - an enum representing the menu items' role
- menuitem
- menuitemcheckbox
- menuitemradio
disabled - the menu item is disabled
checked - sets the checked value for menuitemcheckbox or menuitemradio items

Outputs

none

Events

click (event) - event for when the item has been clicked or invoked via keyboard
change (event) - event for when the item has been clicked or invoked via keyboard, and will be prevented if the menu item is disabled
expanded-change (event) - event for when the item has been expanded or collapsed

Slots

before - slot which precedes content
default - slot for the content (the default slot for the item)
after - slot which comes after content
submenu - the slot used to generate a submenu
radio-indicator - slot for radio item selection indicator
checkbox-indicator - slot for the checkbox selection indicator
expand-collapse-glyph - slot for the expand/collapse glyph for nested menus

CSS Variables

borderRadiusMedium
colorCompoundBrandForeground1Hover
colorCompoundBrandForeground1Pressed
colorNeutralBackground1
colorNeutralBackground1Hover
colorNeutralBackground1Pressed
colorNeutralBackgroundDisabled
colorNeutralForeground2
colorNeutralForeground2Hover
colorNeutralForeground2Pressed
colorNeutralForeground3
colorNeutralForegroundDisabled
colorNeutralStrokeDisabled
fontFamilyBase
fontSizeBase200
fontSizeBase300
fontWeightRegular
fontWeightSemibold
lineHeightBase200
lineHeightBase300

Accessibility

ARIA Attributes

Attribute	Options	Description
aria-checked	boolean
aria-disabled	boolean	indicates that the element is perceivable but disabled, so it is not editable or otherwise operable
role	`menuitem` \| `menuitemcheckbox` \| `menuitemradio`	an enum representing the menu items' role

Preparation

Fluent Web Component v3 v.s Fluent React 9

Due to the nature of Web Components there will not be 100% parity between component implementation in Fluent UI React v9 and Fluent Web Components v3.

Component, Slot, and Attribute Mapping

Component, Slot, or Attribute	Fluent React v9	Fluent Web Components v3
Menu	`<Menu>`	`<fluent-menu>`
Menu item	`<MenuItem>`	`<fluent-menu-item>`
Menu item with radio	`<MenuItemRadio>`	`<fluent-menu-item role="menuitemcheckbox">..`
Menu item with checkbox	`<MenuItemCheckbox>`	`<fluent-menu-item role="menuitemcheckbox">..`
Icons	`<MenuItem icon={<MyIcon />}>`	`<slot name ="start">..` `<slot name="end">..`
Menu group header	`<MenuGroupHeader>`	`<fluent-menu-item class="header">`

```

fabricteam · 2023-02-08T22:08:27Z

📊 Bundle size report

_{🤖 This report was generated against bdb9124866e9a0c64b5a609826a9178c18e7e1ad}

codesandbox-ci · 2023-02-08T22:12:34Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d9b27cf:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

packages/web-components/src/menu/menu-item/menu-item.styles.ts

packages/web-components/src/menu/menu/menu.styles.ts

packages/web-components/src/menu/menu-item/menu-item.styles.ts

packages/web-components/src/index.ts

packages/web-components/src/menu/menu-item/menu-item.styles.ts

packages/web-components/src/menu/menu/menu-radio.stories.ts

packages/web-components/src/menu/menu/menu-submenu.stories.ts

packages/web-components/src/menu/menu/menu.styles.ts

miroslavstastny

Created tracking issues for feature parity with v9:
#27597
#27598

I would suggest to merge this and continue the discussion and eventual changes in scoped issues and PRs.
@chrisdholt

miroslavstastny · 2023-04-17T21:53:42Z

packages/web-components/src/menu-item/README.md

+**Component, Slot, and Attribute Mapping**
+Component, Slot, or Attribute | Fluent React v9 | Fluent Web Components v3 |
+---------------------------------| ---------------------| ---------------------------|
+Menu | `<Menu>` | `<fluent-menu>` |


fluent-menu matches MenuList not Menu.
TBH, I still would rather see this being named fluent-menu-list.

miroslavstastny · 2023-04-17T21:55:58Z

packages/web-components/src/menu/README.md

@@ -0,0 +1,113 @@
+# Menu
+
+A popup or contextual menu displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.


WC3 implementation does not include anything popup related, it rather matches MenuList in FUIR9. Do we want to update the readme?

miroslavstastny · 2023-04-17T21:56:42Z

packages/web-components/src/menu/README.md

+Complete FUIR9 Menu composure
+
+```html
+<menu>


Same here, WC3 matches just the inner part starting with MenuList

miroslavstastny · 2023-04-17T21:59:43Z

packages/web-components/src/menu/README.md

+
+### Inputs
+
+- `icons` - set's alignment of menu items if only a subset of menu items contain an icon


Is this still required? I don't see it used in any story with icons.

miroslavstastny · 2023-04-17T22:04:00Z

packages/web-components/src/menu-item/README.md

+1. Ensure divider component is styled appropriately in the context of a Menu
+2. Create support for menu item "grouping"
+3. Split button variation


If these are still valid, create tracking issues, with Fluent UI WC (v3) tag.

fwiw, FAST already supports grouping by using a divider item between groups. Do we want to achieve parity with FUIR9 which uses name for the groups or are we OK with the difference?

1 (divider). This has been confirmed the divider is being used in the storybook

Issue #27042: Menu Closing Behavior and Support for Menu Grouping, Header, and Split Button to MenuItem Component

…om/microsoft/fluentui into user/brianbrady/web-component-menu

miroslavstastny · 2023-04-18T21:19:29Z

packages/web-components/src/index.ts

@@ -9,7 +9,9 @@ export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
 export * from './label/index.js';
+export * from './menu-list/index.js';


nit: alphabetical order

chrisdholt · 2023-04-19T18:38:47Z

packages/web-components/package.json

+    "./menu-list": {
+      "types": "./dist/esm/menu-list/define.d.ts",
+      "default": "./dist/esm/menu-list/define.js"
+    },


I thought we discussed this as a delta. Has someone investigated what parity of "menu" would look like implementation wise? IMO, we should not merge this with the menu-list naming alignment without menu. We're making an assumption here that menu will come and that it will be aligned...If this is intended to solve the menu scenario, why does menu not exist now with the update to menu-list?

@miroslavstastny as FYI.

chrisdholt

Approving assuming that menu follows. Let's be mindful of the implementation, given it wasn't spec'd how this is going in.

* menu init * updates docs * menu init * menu item init * registers menu-item * adds some menu styles * adds default menu item icons * adds menu stories * updates default menu icons * styles menu and menu item * updates readme * swaps part for class css * removes dead code * adds menu and menu item to package.json * removes dead code * updates menu styles * yarn change * adds menu header * updates jsdocs * removes dead file * removes dead code * removes split button styling * adds display helper * api report * flattens menu and menu item directories * removes element specification from slotted selector * formatting * optimizes styles * optmizes styles * updates disabled css selector to bool * removes dead code * consolidates menu docs into one story * updates menu storybook content * optimizes styling * revert api-report * updates disabled pseudo selector * fixes disabled state * fixes css syntax error * updates storybook content * updates storybook copy for consistency * revert api report * updates yarn change message * maps component to MenuList rather than Menu * fixes focus state * updates styles * divides accordion and accordion item readme * removes dead imports * fixes submenu positioning * adds styles for icon alignment * reverts Menu component name * cleans up storybook * dynamically set the menu item icon attribute when icons is true for menu (#26998) * dynamically set the menu item icon attribute when icons is true for menu * move icons check to set items to ensure we update on item change and init * set items should be protected * updates Menu styles * updates icon alignment styles and docs * updates menu docs * adds checkmarks attribute and styles menu items * adds conditional styling for when icons are present * updates Menu and MenuItem docs * updates deltas in docs * updates docs * optimizes styles * optimizes css * optimizes css * optimizes css * reverts json export * working (#27293) * optimizes styles * adds docs to menu.ts * updates menu logic for readability * menu: fixes style syntax error * menu: consolidates styles * menu: updates styling * menu: updates styling * yarn change * menulist, menuitem: changes component name to MenuList * menulist, menuitem, updates readme * menu, menuitem: fixes circular dep * menu, menuitem: alphabetize index.js --------- Co-authored-by: Chris Holt <chhol@microsoft.com> Co-authored-by: Jeff Smith <37851214+eljefe223@users.noreply.github.com>

* menu init * updates docs * menu init * menu item init * registers menu-item * adds some menu styles * adds default menu item icons * adds menu stories * updates default menu icons * styles menu and menu item * updates readme * swaps part for class css * removes dead code * adds menu and menu item to package.json * removes dead code * updates menu styles * yarn change * adds menu header * updates jsdocs * removes dead file * removes dead code * removes split button styling * adds display helper * api report * flattens menu and menu item directories * removes element specification from slotted selector * formatting * optimizes styles * optmizes styles * updates disabled css selector to bool * removes dead code * consolidates menu docs into one story * updates menu storybook content * optimizes styling * revert api-report * updates disabled pseudo selector * fixes disabled state * fixes css syntax error * updates storybook content * updates storybook copy for consistency * revert api report * updates yarn change message * maps component to MenuList rather than Menu * fixes focus state * updates styles * divides accordion and accordion item readme * removes dead imports * fixes submenu positioning * adds styles for icon alignment * reverts Menu component name * cleans up storybook * dynamically set the menu item icon attribute when icons is true for menu (microsoft#26998) * dynamically set the menu item icon attribute when icons is true for menu * move icons check to set items to ensure we update on item change and init * set items should be protected * updates Menu styles * updates icon alignment styles and docs * updates menu docs * adds checkmarks attribute and styles menu items * adds conditional styling for when icons are present * updates Menu and MenuItem docs * updates deltas in docs * updates docs * optimizes styles * optimizes css * optimizes css * optimizes css * reverts json export * working (microsoft#27293) * optimizes styles * adds docs to menu.ts * updates menu logic for readability * menu: fixes style syntax error * menu: consolidates styles * menu: updates styling * menu: updates styling * yarn change * menulist, menuitem: changes component name to MenuList * menulist, menuitem, updates readme * menu, menuitem: fixes circular dep * menu, menuitem: alphabetize index.js --------- Co-authored-by: Chris Holt <chhol@microsoft.com> Co-authored-by: Jeff Smith <37851214+eljefe223@users.noreply.github.com>

* menu init * updates docs * menu init * menu item init * registers menu-item * adds some menu styles * adds default menu item icons * adds menu stories * updates default menu icons * styles menu and menu item * updates readme * swaps part for class css * removes dead code * adds menu and menu item to package.json * removes dead code * updates menu styles * yarn change * adds menu header * updates jsdocs * removes dead file * removes dead code * removes split button styling * adds display helper * api report * flattens menu and menu item directories * removes element specification from slotted selector * formatting * optimizes styles * optmizes styles * updates disabled css selector to bool * removes dead code * consolidates menu docs into one story * updates menu storybook content * optimizes styling * revert api-report * updates disabled pseudo selector * fixes disabled state * fixes css syntax error * updates storybook content * updates storybook copy for consistency * revert api report * updates yarn change message * maps component to MenuList rather than Menu * fixes focus state * updates styles * divides accordion and accordion item readme * removes dead imports * fixes submenu positioning * adds styles for icon alignment * reverts Menu component name * cleans up storybook * dynamically set the menu item icon attribute when icons is true for menu (#26998) * dynamically set the menu item icon attribute when icons is true for menu * move icons check to set items to ensure we update on item change and init * set items should be protected * updates Menu styles * updates icon alignment styles and docs * updates menu docs * adds checkmarks attribute and styles menu items * adds conditional styling for when icons are present * updates Menu and MenuItem docs * updates deltas in docs * updates docs * optimizes styles * optimizes css * optimizes css * optimizes css * reverts json export * working (#27293) * optimizes styles * adds docs to menu.ts * updates menu logic for readability * menu: fixes style syntax error * menu: consolidates styles * menu: updates styling * menu: updates styling * yarn change * menulist, menuitem: changes component name to MenuList * menulist, menuitem, updates readme * menu, menuitem: fixes circular dep * menu, menuitem: alphabetize index.js --------- Co-authored-by: Chris Holt <chhol@microsoft.com> Co-authored-by: Jeff Smith <37851214+eljefe223@users.noreply.github.com>

brianchristopherbrady added 18 commits February 2, 2023 14:34

menu init

495ebcd

updates docs

584ff04

menu init

052a5c4

menu item init

b238618

registers menu-item

f15b09e

adds some menu styles

05feee7

adds default menu item icons

39930bd

adds menu stories

37a69ce

updates default menu icons

485d8dd

styles menu and menu item

15d29c4

updates readme

29090b3

swaps part for class css

2465f7b

removes dead code

d9725ea

adds menu and menu item to package.json

6ee366e

removes dead code

5b98085

updates menu styles

811da97

Merge branch 'web-components-v3' into user/brianbrady/web-component-menu

5348418

yarn change

dbfd608

brianchristopherbrady requested a review from a team as a code owner February 8, 2023 22:00

msft-fluent-ui-bot added the web-components label Feb 8, 2023

msft-fluent-ui-bot assigned micahgodbolt Feb 8, 2023

brianchristopherbrady added 3 commits February 9, 2023 11:29

adds menu header

534141e

updates jsdocs

9c1bb70

removes dead file

ab5f353

eljefe223 reviewed Feb 10, 2023

View reviewed changes

chrisdholt requested changes Feb 10, 2023

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label Feb 10, 2023

removes dead code

3d5cded

menu: merge wc3

ab5b7ca

This was referenced Apr 17, 2023

[Feature parity]: Should menu-item hover focus the menu item #27597

Closed

[Feature parity]: Should menu close when focus goes to an iframe #27598

Closed

miroslavstastny reviewed Apr 17, 2023

View reviewed changes

brianchristopherbrady and others added 3 commits April 18, 2023 10:50

yarn change

e31be49

Merge branch 'user/brianbrady/web-component-menu' of https://github.c…

96e4870

…om/microsoft/fluentui into user/brianbrady/web-component-menu

menulist, menuitem: changes component name to MenuList

1e1621e

brianchristopherbrady requested a review from miroslavstastny April 18, 2023 18:17

brianchristopherbrady added 2 commits April 18, 2023 13:30

menulist, menuitem, updates readme

abebe36

menu, menuitem: fixes circular dep

d7f4122

miroslavstastny reviewed Apr 18, 2023

View reviewed changes

miroslavstastny approved these changes Apr 18, 2023

View reviewed changes

menu, menuitem: alphabetize index.js

d9b27cf

chrisdholt reviewed Apr 19, 2023

View reviewed changes

chrisdholt approved these changes Apr 19, 2023

View reviewed changes

brianchristopherbrady merged commit f801e34 into web-components-v3 Apr 20, 2023
23 checks passed

khmakoto deleted the user/brianbrady/web-component-menu branch April 24, 2023 21:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds Menu and MenuItem as new web components #26765

Adds Menu and MenuItem as new web components #26765

brianchristopherbrady commented Feb 8, 2023 •

edited

Loading

fabricteam commented Feb 8, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 8, 2023 •

edited

Loading

miroslavstastny left a comment

miroslavstastny Apr 17, 2023

miroslavstastny Apr 17, 2023

miroslavstastny Apr 17, 2023

miroslavstastny Apr 17, 2023

miroslavstastny Apr 17, 2023

brianchristopherbrady Apr 18, 2023

miroslavstastny Apr 18, 2023

chrisdholt Apr 19, 2023

chrisdholt left a comment

		@@ -0,0 +1,113 @@
		# Menu

		A popup or contextual menu displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.


		### Inputs

		- `icons` - set's alignment of menu items if only a subset of menu items contain an icon

Adds Menu and MenuItem as new web components #26765

Adds Menu and MenuItem as new web components #26765

Conversation

brianchristopherbrady commented Feb 8, 2023 • edited Loading

Menu + MenuItem

Menu

Design Spec

Engineering Spec

Inputs

Outputs

Events

Slots

CSS Variables

Accessibility

Preparation

Fluent Web Component v3 v.s Fluent React 9

Menu Item

Design Spec

Engineering Spec

Inputs

Outputs

Events

Slots

CSS Variables

Accessibility

Preparation

Fluent Web Component v3 v.s Fluent React 9

fabricteam commented Feb 8, 2023 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Feb 8, 2023 • edited Loading

miroslavstastny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrisdholt left a comment

Choose a reason for hiding this comment

brianchristopherbrady commented Feb 8, 2023 •

edited

Loading

fabricteam commented Feb 8, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 8, 2023 •

edited

Loading