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

@@ -68,10 +68,18 @@
       "types": "./dist/esm/label/define.d.ts",
       "default": "./dist/esm/label/define.js"
     },
+    "./menu": {
+      "types": "./dist/esm/menu/define.d.ts",
+      "default": "./dist/esm/menu/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"

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/index.js';
 export * from './menu-button/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,
+});

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

@@ -0,0 +1,204 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import {
+  borderRadiusMedium,
+  colorCompoundBrandForeground1Hover,
+  colorCompoundBrandForeground1Pressed,
+  colorNeutralBackground1,
+  colorNeutralBackground1Hover,
+  colorNeutralBackground1Selected,
+  colorNeutralBackgroundDisabled,
+  colorNeutralForeground2,
+  colorNeutralForeground2Hover,
+  colorNeutralForeground2Pressed,
+  colorNeutralForeground3,
+  colorNeutralForegroundDisabled,
+  colorNeutralStrokeDisabled,
+  fontFamilyBase,
+  fontSizeBase200,
+  fontSizeBase300,
+  fontSizeBase500,
+  fontWeightRegular,
+  lineHeightBase200,
+  lineHeightBase300,
+} from '../theme/design-tokens.js';
+
+/** Menu styles
+ * @public
+ */
+export const styles = css`
+  ${display('grid')}
+
+  :host {
+    grid-template-columns: 20px 20px auto 20px;
+    align-items: center;
+    grid-gap: 4px;
+    height: 32px;
+    background: ${colorNeutralBackground1};
+    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
+    border-radius: ${borderRadiusMedium};
+    color: ${colorNeutralForeground2};
+    padding: 0 10px;
+    cursor: pointer;
+    overflow: visible;
+    contain: layout;
+  }
+
+  :host(:hover) {
+    background: ${colorNeutralBackground1Hover};
+  }
+
+  .content {
+    white-space: nowrap;
+    flex-grow: 1;
+    grid-column: auto / span 2;
+    padding: 0 2px;
+  }
+
+  .checkbox,
+  .radio {
+    display: none;
+  }
+
+  .input-container,
+  .expand-collapse-glyph-container,
+  ::slotted([slot='start']),
+  ::slotted([slot='end']),
+  :host([checked]) .checkbox,
+  :host([checked]) .radio {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: ${colorNeutralForeground2};
+  }
+
+  .expand-collapse-glyph-container,
+  ::slotted([slot='start']),
+  ::slotted([slot='end']) {
+    height: 32px;
+    font-size: ${fontSizeBase500};
+    width: fit-content;
+  }
+
+  .input-container {
+    width: 20px;
+  }
+
+  ::slotted([slot='end']) {
+    color: ${colorNeutralForeground3};
+    font: ${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};
+    white-space: nowrap;
+    grid-column: 4 / span 1;
+    justify-self: flex-end;
+  }
+
+  .expand-collapse-glyph-container {
+    grid-column: 4 / span 1;
+    justify-self: flex-end;
+  }
+
+  :host(:hover) .input-container,
+  :host(:hover) .expand-collapse-glyph-container,
+  :host(:hover) .content {
+    color: ${colorNeutralForeground2Hover};
+  }
+
+  :host([icon]:hover) ::slotted([slot='start']) {
+    color: ${colorCompoundBrandForeground1Hover};
+  }
+
+  :host(:active) {
+    background-color: ${colorNeutralBackground1Selected};
+  }
+
+  :host(:active) .input-container,
+  :host(:active) .expand-collapse-glyph-container,
+  :host(:active) .content {
+    color: ${colorNeutralForeground2Pressed};
+  }
+
+  :host(:active) ::slotted([slot='start']) {
+    color: ${colorCompoundBrandForeground1Pressed};
+  }
+
+  :host([disabled]) {
+    background-color: ${colorNeutralBackgroundDisabled};
+  }
+
+  :host([disabled]) .content,
+  :host([disabled]) .expand-collapse-glyph-container,
+  :host([disabled]) ::slotted([slot='end']),
+  :host([disabled]) ::slotted([slot='start']) {
+    color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host([data-indent]) {
+    display: grid;
+  }
+
+  :host([data-indent='1']) .content {
+    grid-column: 2 / span 1;
+  }
+
+  :host([data-indent='1'][role='menuitemcheckbox']) {
+    display: grid;
+  }
+
+  :host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']) {
+    grid-column: 4 / span 1;
+  }
+
+  :host([data-indent='2'][aria-haspopup='menu']) .expand-collapse-glyph-container {
+    grid-column: 5 / span 1;
+  }
+
+  :host([data-indent='1']) .content {
+    grid-column: 2 / span 1;
+  }
+
+  :host([data-indent='1'][role='menuitemcheckbox']) .content,
+  :host([data-indent='1'][role='menuitemradio']) .content {
+    grid-column: auto / span 1;
+  }
+
+  :host([icon]) ::slotted([slot='end']),
+  :host([data-indent='1']) ::slotted([slot='end']) {
+    grid-column: 4 / span 1;
+    justify-self: flex-end;
+  }
+
+  :host([data-indent='2']) {
+    display: grid;
+    grid-template-columns: 20px 20px auto auto;
+  }
+
+  :host([data-indent='2']) .content {
+    grid-column: 3 / span 1;
+  }
+
+  :host([data-indent='2']) .input-container {
+    grid-column: 1 / span 1;
+  }
+
+  :host([data-indent='2']) ::slotted([slot='start']) {
+    grid-column: 2 / span 1;
+  }
+
+  :host([aria-haspopup='menu']) {
+    grid-template-columns: 20px auto auto 20px;
+  }
+
+  :host([data-indent='2'][aria-haspopup='menu']) {
+    grid-template-columns: 20px 20px auto auto 20px;
+  }
+
+  :host([aria-haspopup='menu']) ::slotted([slot='end']) {
+    grid-column: 3 / span 1;
+    justify-self: flex-end;
+  }
+
+  :host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']) {
+    grid-column: 4 / span 1;
+    justify-self: flex-end;
+  }
+`;