refactor(components): menu item migrate to fast (#636)

* refactor(components): menu migrate to fast

* progress

* works

* progressed

* mixed menu

* Change files

* Update libs/components/src/lib/menu-item/index.ts

* typo

* exports

* info

* progress

* focus issue

* ok

* need it

* grammer

* update

* done

* snaps

* resolve comments

* ui tests

* snapshots

* stylelint

* add coverage

* icon unit test

* increase coverage

* simple

* resolve comments

* text test

* done

* update

* 1 line item

* snaps

* max min

* stylelint

* typo

* @testing-library/dom

* maybe now

* remove

change/@vonage-vivid-a6e21985-d4fd-47d1-9128-62f93414c0b2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "menu migration to fast",
+  "packageName": "@vonage/vivid",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

libs/components/package.json

@@ -18,6 +18,7 @@
     "./accordion": "./accordion",
     "./accordion-item": "./accordion-item",
     "./action-group": "./action-group",
+    "./avatar": "./avatar",
     "./badge": "./badge",
     "./banner": "./banner",
     "./breadcrumb": "./breadcrumb",
@@ -26,25 +27,25 @@
     "./calendar": "./calendar",
     "./calendar-event": "./calendar-event",
     "./card": "./card",
+    "./checkbox": "./checkbox",
     "./elevation": "./elevation",
+    "./dialog": "./dialog",
+    "./divider": "./divider",
     "./fab": "./fab",
     "./icon": "./icon",
     "./layout": "./layout",
+    "./menu": "./menu",
+    "./menu-item": "./menu-item",
+    "./nav": "./nav",
+    "./nav-disclosure": "./nav-disclosure",
+    "./nav-item": "./nav-item",
     "./note": "./note",
     "./popup": "./popup",
     "./progress": "./progress",
     "./progress-ring": "./progress-ring",
     "./side-drawer": "./side-drawer",
-    "./nav": "./nav",
-    "./nav-item": "./nav-item",
-    "./nav-disclosure": "./nav-disclosure",
     "./text-field": "./text-field",
-    "./tooltip": "./tooltip",
-    "./checkbox": "./checkbox",
-    "./dialog": "./dialog",
-    "./divider": "./divider",
-    "./menu": "./menu",
-    "./avatar": "./avatar",
-    "./text-area": "./text-area"
+    "./text-area": "./text-area",
+    "./tooltip": "./tooltip"
   }
 }

libs/components/src/lib/components.ts

@@ -1,6 +1,7 @@
 export * from './accordion';
 export * from './accordion-item';
 export * from './action-group';
+export * from './avatar';
 export * from './badge';
 export * from './banner';
 export * from './breadcrumb';
@@ -9,22 +10,23 @@ export * from './button';
 export * from './calendar';
 export * from './calendar-event';
 export * from './card';
+export * from './checkbox';
 export * from './elevation';
+export * from './dialog';
+export * from './divider';
 export * from './fab';
-// export * from './focus';
 export * from './icon';
 export * from './layout';
 export * from './menu';
+export * from './menu-item';
+export * from './nav';
+export * from './nav-disclosure';
+export * from './nav-item';
 export * from './note';
 export * from './popup';
 export * from './progress';
 export * from './progress-ring';
 export * from './side-drawer';
-export * from './nav';
-export * from './nav-item';
-export * from './nav-disclosure';
 export * from './text-field';
-// export * from './text-anchor';
+export * from './text-area';
 export * from './tooltip';
-export * from './checkbox';
-export * from './header';

libs/components/src/lib/menu-item/README.md

@@ -0,0 +1,106 @@
+# Menu Item
+
+Represents a menu-item custom element.
+
+```js
+<script type="module">
+ import '@vonage/vivid/menu-item';
+</script>
+```
+
+```html preview
+
+<vwc-menu open>
+ <vwc-menu-item text="Menu item"></vwc-menu-item>
+</vwc-menu>
+```
+
+## Members
+
+### Role
+
+set `role` to change the role of the menu item
+
+- Type: `'menuitem'` | `'menuitemcheckbox'` | `'menuitemradio'`
+- Default: `'menuitem'`
+
+```html preview
+<style>
+ html { 
+  block-size: 360px; 
+ }
+</style>
+
+<vwc-menu open>
+ <vwc-menu-item role="menuitem" text="Menu item 1"></vwc-menu-item>
+ <vwc-menu-item role="menuitem" text="Menu item 2"></vwc-menu-item>
+ <vwc-divider></vwc-divider>
+ <vwc-menu-item role="menuitemcheckbox" text="Checkbox 1"></vwc-menu-item>
+ <vwc-menu-item role="menuitemcheckbox" text="Checkbox 2"></vwc-menu-item>
+ <vwc-divider></vwc-divider>
+ <vwc-menu-item role="menuitemradio" text="Radio 1.1"></vwc-menu-item>
+ <vwc-menu-item role="menuitemradio" text="Radio 1.2"></vwc-menu-item>
+ <vwc-divider></vwc-divider>
+ <vwc-menu-item role="menuitemradio" text="Radio 2.1"></vwc-menu-item>
+ <vwc-menu-item role="menuitemradio" text="Radio 2.2"></vwc-menu-item>
+</vwc-menu>
+```
+
+### Icon
+
+Use `icon` to set an icon to the nav item.
+View list of available icon at the [vivid icons gallery](https://icons.vivid.vonage.com).
+
+Note: Icon, by its own, doesn't make a discernible text. An `aria-label`, `aria-labelledby` or `title` must be provided to ensure that the user can understand the nav item's purpose.
+
+- Type: `string`
+- Default: `undefined`
+
+```html preview
+<vwc-menu open>
+ <vwc-menu-item icon="file-pdf-line" text="Export to PDF"></vwc-menu-item>
+</vwc-menu>
+```
+
+### Checked
+
+The checked value of the element (if role is set to `'menuitemcheckbox'`).
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+<vwc-menu open>
+ <vwc-menu-item role="menuitemcheckbox" checked text="Checked Menu item"></vwc-menu-item>
+</vwc-menu>
+```
+
+### Disabled
+
+The disabled state of the element
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+<vwc-menu open>
+ <vwc-menu-item disabled text="Disabled Menu item"></vwc-menu-item>
+</vwc-menu>
+```
+
+<!-- ### Expanded
+
+The expanded state of the element
+
+- Type: `boolean`
+- Default: `false` -->
+
+## Events
+
+### Expanded Change
+
+Fires a custom 'expanded-change' event when the expanded state changes
+
+### Change
+
+Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked

libs/components/src/lib/menu-item/index.ts

@@ -0,0 +1,16 @@
+import '../icon';
+
+import type { MenuItemOptions } from '@microsoft/fast-foundation';
+import { designSystem } from '../../shared/design-system';
+import styles from './menu-item.scss';
+
+import { MenuItem } from './menu-item';
+import { MenuItemTemplate as template } from './menu-item.template';
+
+export const vividMenuItem = MenuItem.compose<MenuItemOptions>({
+	baseName: 'menu-item',
+	template: template as any,
+	styles
+});
+
+designSystem.register(vividMenuItem());

libs/components/src/lib/menu-item/menu-item.scss

@@ -0,0 +1,75 @@
+@use '../../../../../dist/libs/tokens/scss/constants' as constants;
+
+@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
+	$connotations: accent,
+	$shades: primary faint soft,
+	$default: accent,
+);
+@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
+
+@use '../../../../shared/src/lib/sass/mixins/appearance/config' as appearance-config with (
+	$appearances: ghost,
+	$states: idle hover active selected disabled,
+	$default: ghost,
+);
+@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
+
+@supports selector(:focus-visible) {
+	:host(:focus) {
+		outline: none;
+	}
+}
+
+.base {
+	$min-block-size: 40px;
+	$gap: 8px;
+
+	@include appearance.appearance;
+	@include connotation.connotation;
+
+	position: relative;
+	display: flex;
+	box-sizing: border-box;
+	align-items: center;
+	background-color: var(#{appearance.get-appearance-token(fill)});
+	block-size: $min-block-size;
+	box-shadow: inset 0 0 0 1px var(#{appearance.get-appearance-token(outline)});
+	color: var(#{appearance.get-appearance-token(text)});
+	font: var(#{constants.$vvd-font-base});
+	gap: $gap;
+	inline-size: 100%;
+	padding-inline: $gap;
+
+	@supports(user-select: none) {
+		user-select: none;
+	}
+
+	&:not(.disabled) {
+		cursor: pointer;
+	}
+
+	&.disabled {
+		cursor: not-allowed;
+	}
+}
+
+.focus-indicator {
+	border-radius: 6px;
+	:host(:not(:focus-visible)) & {
+		display: none;
+	}
+}
+
+.icon {
+	font-size: 20px;
+
+	.base:not(.item-checkbox, .item-radio) & {
+		color: var(#{constants.$vvd-color-neutral-600});
+	}
+}
+
+.text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}