cta connotation in menu-item

Vonage · Mar 6, 2024 · 85e8674 · 85e8674
1 parent 25829cb
commit 85e8674
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 5 deletions.
diff --git a/libs/components/src/lib/menu-item/README.md b/libs/components/src/lib/menu-item/README.md
@@ -1,5 +1,61 @@
 # Menu Item
 
+## FOR POC ONLY
+### Connotation
+
+
+
+```html preview 900px
+<div style="display: flex; justify-content: space-between;">
+<div style="position: relative;">
+<vwc-menu open aria-label="Example menu" style="--menu-block-size: auto;" placement="left-start">
+<vwc-button slot="anchor" icon="more-vertical-line" aria-label="Open menu" appearance="outlined"></vwc-button>
+ <vwc-menu-item connotation="cta" text="menu item" icon="image-line"></vwc-menu-item>
+  <vwc-menu-item role="menuitemcheckbox" connotation="cta" text="menu item" icon="image-line"></vwc-menu-item>
+ <vwc-menu-item role="menuitemradio" connotation="cta" text="menu item" icon="image-line"></vwc-menu-item>
+   <vwc-divider></vwc-divider>
+ <vwc-menu-item connotation="cta" text="menu item" text-secondary="secondary text"></vwc-menu-item>
+  <vwc-menu-item role="menuitemcheckbox" connotation="cta" text="menu item" text-secondary="secondary text"></vwc-menu-item>
+    <vwc-menu-item role="menuitemcheckbox" checked connotation="cta" text="menu item" text-secondary="secondary text"></vwc-menu-item>
+   <vwc-menu-item role="menuitemradio" connotation="cta" text="menu item" text-secondary="secondary text"></vwc-menu-item>
+    <vwc-menu-item role="menuitemradio" checked connotation="cta" text="menu item" text-secondary="secondary text"></vwc-menu-item>
+      <vwc-divider></vwc-divider>
+      <vwc-menu-item check-appearance="tick-only" checked role="menuitemcheckbox" connotation="cta" text="menu item" text-secondary="secondary text"></vwc-menu-item>
+    <vwc-menu-item role="menuitemcheckbox" checked connotation="cta" text="menu item" text-secondary="secondary text"></vwc-menu-item>
+   <vwc-menu-item check-appearance="tick-only" checked role="menuitemradio" connotation="cta" text="menu item" text-secondary="secondary text"></vwc-menu-item>
+    <vwc-menu-item role="menuitemradio" checked connotation="cta" text="menu item" text-secondary="secondary text"></vwc-menu-item>
+    <vwc-divider></vwc-divider>
+    <vwc-menu-item text="Menu item 1" connotation="cta">
+      <vwc-menu slot="submenu" ><vwc-menu-item text="Menu item 1.1"></vwc-menu-item>
+    </vwc-menu-item>
+</vwc-menu>
+</div>
+<div>
+<vwc-menu open aria-label="Example menu" style="--menu-block-size: auto;" placement="right-start">
+<vwc-button slot="anchor" icon="more-vertical-line" aria-label="Open menu" appearance="outlined"></vwc-button>
+ <vwc-menu-item  text="menu item" icon="image-line"></vwc-menu-item>
+  <vwc-menu-item role="menuitemcheckbox"  text="menu item" icon="image-line"></vwc-menu-item>
+ <vwc-menu-item role="menuitemradio"  text="menu item" icon="image-line"></vwc-menu-item>
+   <vwc-divider></vwc-divider>
+ <vwc-menu-item  text="menu item" text-secondary="secondary text"></vwc-menu-item>
+  <vwc-menu-item role="menuitemcheckbox"  text="menu item" text-secondary="secondary text"></vwc-menu-item>
+    <vwc-menu-item role="menuitemcheckbox" checked  text="menu item" text-secondary="secondary text"></vwc-menu-item>
+   <vwc-menu-item role="menuitemradio"  text="menu item" text-secondary="secondary text"></vwc-menu-item>
+    <vwc-menu-item role="menuitemradio" checked  text="menu item" text-secondary="secondary text"></vwc-menu-item>
+      <vwc-divider></vwc-divider>
+      <vwc-menu-item check-appearance="tick-only" checked role="menuitemcheckbox"  text="menu item" text-secondary="secondary text"></vwc-menu-item>
+    <vwc-menu-item role="menuitemcheckbox" checked  text="menu item" text-secondary="secondary text"></vwc-menu-item>
+   <vwc-menu-item check-appearance="tick-only" checked role="menuitemradio"  text="menu item" text-secondary="secondary text"></vwc-menu-item>
+    <vwc-menu-item role="menuitemradio" checked  text="menu item" text-secondary="secondary text"></vwc-menu-item>
+        <vwc-divider></vwc-divider>
+    <vwc-menu-item text="Menu item 1">
+      <vwc-menu slot="submenu" ><vwc-menu-item text="Menu item 1.1"></vwc-menu-item>
+    </vwc-menu-item>
+</vwc-menu>
+</div>
+</div>
+```
+
 ```js
 <script type="module">
   import '@vonage/vivid/menu-item';
@@ -49,6 +105,7 @@ set `role` to change the role of the menu item
 - Type: `'menuitem'` | `'menuitemcheckbox'` | `'menuitemradio'` | `'presentation'`
 - Default: `'menuitem'`
 
+
 ```html preview 400px
 <vwc-menu open aria-label="Example menu">
   <vwc-menu-item role="menuitem" text="Menu item 1"></vwc-menu-item>

diff --git a/libs/components/src/lib/menu-item/menu-item.scss b/libs/components/src/lib/menu-item/menu-item.scss
@@ -1,6 +1,6 @@
 @use "../../../../../dist/libs/tokens/scss/tokens.constants" as constants;
 @use "../../../../shared/src/lib/sass/mixins/connotation/config" with (
-	$connotations: accent,
+	$connotations: accent cta,
 	$shades: primary primary-text primary-increment faint soft pale dim,
 	$default: accent,
 );
@@ -83,7 +83,7 @@
 .action {
 	color: var(#{appearance.get-appearance-token(text)});
 
-	:host(:not([check-appearance],[aria-checked="true"])) & {
+	:host(:not([check-appearance],[aria-checked="true"],[connotation="cta"])) & {
 		color: var(#{constants.$vvd-color-neutral-500});
 	}
 
@@ -125,21 +125,24 @@
 	display: -webkit-box;
 	overflow: hidden;
 	-webkit-box-orient: vertical;
-	color: var(#{appearance.get-appearance-token(text)});
 	font: var(#{constants.$vvd-typography-base});
 }
 
 
 .text-primary {
 	-webkit-line-clamp: var(#{menu-item-variables.$text-primary-line-clamp}, 1);
+	color: var(#{constants.$vvd-color-canvas-text});
 	.base.two-lines & {
 		font: var(#{constants.$vvd-typography-base-bold});
 	}
 }
 
 .text-secondary {
 	-webkit-line-clamp: var(#{menu-item-variables.$text-secondary-line-clamp}, 1);
-	.base.two-lines:not(.disabled) & {
+	.base.two-lines:not(.disabled, .selected) & {
 		color: var(#{constants.$vvd-color-neutral-600});
 	}
+	.base.two-lines:where(.selected):not(.disabled) & {
+		color: var(#{constants.$vvd-color-neutral-800});
+	}
 }
diff --git a/libs/components/src/lib/menu-item/menu-item.template.ts b/libs/components/src/lib/menu-item/menu-item.template.ts
@@ -17,9 +17,10 @@ const getIndicatorIcon = (x: MenuItem) => {
 };
 
 const getClasses = ({
-	disabled, checked, role, text, textSecondary, icon, metaSlottedContent, checkTrailing
+	connotation, disabled, checked, role, text, textSecondary, icon, metaSlottedContent, checkTrailing
 }: MenuItem) => classNames(
 	'base',
+	[`connotation-${connotation}`, Boolean(connotation)],
 	['disabled', Boolean(disabled)],
 	['selected', role !== MenuItemRole.menuitem && Boolean(checked)],
 	['trailing', role !== MenuItemRole.menuitem && (checkTrailing || Boolean(icon))],

diff --git a/libs/components/src/lib/menu-item/menu-item.ts b/libs/components/src/lib/menu-item/menu-item.ts
@@ -6,6 +6,7 @@ import {
 } from '@microsoft/fast-foundation';
 import { AffixIcon } from '../../shared/patterns/affix';
 import { Menu } from '../menu/menu';
+import {Connotation} from "../enums";
 
 export const MenuItemRole = {
 	...FastMenuItemRole,
@@ -16,6 +17,12 @@ export enum CheckAppearance {
 	Normal = 'normal',
 	TickOnly =  'tick-only',
 }
+/**
+ * Types of fab connotation.
+ *
+ * @public
+ */
+export type MenuItemConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent>;
 
 /**
  * Base class for menu-item
@@ -42,6 +49,14 @@ export class MenuItem extends FastMenuItem {
 	 * HTML Attribute: text
 	 */
 	@attr({ attribute: 'text-secondary' }) textSecondary?: string;
+	/**
+	 * The connotation the fab should have.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: connotation
+	 */
+	@attr connotation?: MenuItemConnotation;
 	/**
 	 * Controls the placement of the menu item's checkmark or radio icon.
 	 * @public