Adds Menu and MenuItem as new web components (#26765)

* 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>

change/@fluentui-web-components-e1aaa3a2-771d-4c16-b8d2-a56deb1fdd28.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "feat(menu-list): Add menu-list and menu-item web components",
+ "packageName": "@fluentui/web-components",
+ "email": "brianbrady@microsoft.com",
+ "dependentChangeType": "patch"
+}

packages/web-components/package.json

@@ -68,10 +68,18 @@
  "types": "./dist/esm/label/define.d.ts",
  "default": "./dist/esm/label/define.js"
  },
+ "./menu-list": {
+ "types": "./dist/esm/menu-list/define.d.ts",
+ "default": "./dist/esm/menu-list/define.js"
+ },
  "./menu-button": {
  "types": "./dist/esm/menu-button/define.d.ts",
  "default": "./dist/esm/menu-button/define.js"
  },
+ "./menu-item": {
+ "types": "./dist/esm/menu-item/define.d.ts",
+ "default": "./dist/esm/menu-item/define.js"
+ },
  "./progress-bar": {
  "types": "./dist/esm/progress-bar/define.d.ts",
  "default": "./dist/esm/progress-bar/define.js"
@@ -88,14 +96,14 @@
  "types": "./dist/esm/switch/define.d.ts",
  "default": "./dist/esm/switch/define.js"
  },
- "./tabs": {
- "types": "./dist/esm/tabs/define.d.ts",
- "default": "./dist/esm/tabs/define.js"
- },
  "./tab": {
  "types": "./dist/esm/tab/define.d.ts",
  "default": "./dist/esm/tab/define.js"
  },
+ "./tabs": {
+ "types": "./dist/esm/tabs/define.d.ts",
+ "default": "./dist/esm/tabs/define.js"
+ },
  "./tab-panel": {
  "types": "./dist/esm/tab-panel/define.d.ts",
  "default": "./dist/esm/tab-panel/define.js"

packages/web-components/src/index.ts

@@ -10,6 +10,8 @@ export * from './divider/index.js';
 export * from './image/index.js';
 export * from './label/index.js';
 export * from './menu-button/index.js';
+export * from './menu-item/index.js';
+export * from './menu-list/index.js';
 export * from './progress-bar/index.js';
 export * from './slider/index.js';
 export * from './spinner/index.js';

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

@@ -0,0 +1,125 @@
+# Menu Item
+
+Menu list item options displayed in a MenuList component. They are invoked when users interact with a button, action, or other control.
+
+<hr />
+
+<br />
+
+**Remaining work items**
+
+2. Create support for menu item "grouping"
+3. Split button variation
+
+<br />
+<hr />
+<br />
+
+## Design Spec
+
+[Link to Menu Item Design Spec in Figma](https://www.figma.com/file/jFWrkFq61GDdOhPlsz6AtX/Menu?node-id=1528%3A5102&t=XtW4laeEzgVFIl1E-0)
+
+<br />
+<hr />
+<br />
+
+## Engineering Spec
+
+Fluent WC3 Menu extends from the FAST Menu [FAST Menu Item](https://explore.fast.design/components/fast-menu) 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.
+
+<br />
+
+### 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`
+
+<br />
+<hr />
+<br />
+
+## Accessibility
+
+<br />
+
+**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 |
+
+<hr />
+<br />
+
+## Preparation
+
+<br />
+
+### **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.
+
+<br />
+
+**Component, Slot, and Attribute Mapping**
+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">..` <br /> `<slot name="end">..`|
+Menu group header | `<MenuGroupHeader>` | `<fluent-menu-item class="header">`|
+
+**Additional Deltas**
+
+In order for icons to render with appropriate styles the `icons` attribute must be present on the Menu.

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

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './menu-item.definition.js';
+
+definition.define(FluentDesignSystem.registry);

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

@@ -0,0 +1,4 @@
+export * from './menu-item.js';
+export { template as MenuItemTemplate } from './menu-item.template.js';
+export { styles as MenuItemStyles } from './menu-item.styles.js';
+export { definition as MenuItemDefinition } from './menu-item.definition.js';

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

@@ -0,0 +1,19 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { MenuItem } from './menu-item.js';
+import { styles } from './menu-item.styles.js';
+import { template } from './menu-item.template.js';
+
+/**
+ * The Fluent Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem },
+ * {@link @microsoft/fast-foundation#menuItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fluent-menu-item>
+ */
+export const definition = MenuItem.compose({
+ name: `${FluentDesignSystem.prefix}-menu-item`,
+ template,
+ styles,
+});