Adds Menu and MenuItem as new web components

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

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

packages/web-components/package.json

@@ -52,9 +52,13 @@
       "types": "./dist/esm/image/define.d.ts",
       "default": "./dist/esm/image/define.js"
     },
-    "./text": {
-      "types": "./dist/esm/text/define.d.ts",
-      "default": "./dist/esm/text/define.js"
+    "./menu": {
+      "types": "./dist/esm/menu/define.d.ts",
+      "default": "./dist/esm/menu/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",
@@ -71,6 +75,10 @@
     "./switch": {
       "types": "./dist/esm/switch/define.d.ts",
       "default": "./dist/esm/switch/define.js"
+    },
+    "./text": {
+      "types": "./dist/esm/text/define.d.ts",
+      "default": "./dist/esm/text/define.js"
     }
   },
   "scripts": {

packages/web-components/src/index.ts

@@ -5,6 +5,8 @@ export * from './badge/index.js';
 export * from './counter-badge/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
+export * from './menu/index.js';
+export * from './menu-item/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,126 @@
+# Menu Item
+
+Menu list item options displayed in a Menu component. They are invoked when users interact with a button, action, or other control.
+
+<hr />
+
+<br />
+
+**Remaining work items**
+
+1. Ensure divider component is styled appropriately in the context of a Menu
+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 | `<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">..` <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,
+});