fix(menu-item): fix disabled style (VIV-1772) (#1714)

* fix(menu-item): fix disabled style (VIV-1772)

* Refactor css

* Fix css

---------

Co-authored-by: Rachel Bratt Tannenbaum <[email protected]>

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

@@ -84,17 +84,17 @@
 .action {
 	color: var(#{appearance.get-appearance-token(text)});
 
-	:host(:not([check-appearance], [aria-checked='true'])) & {
-		color: var(#{constants.$vvd-color-neutral-500});
-	}
-
 	.base.trailing & {
 		order: 2;
 	}
 
 	.base.has-meta & {
 		order: 2;
 	}
+
+	:host(:not([check-appearance], [aria-checked='true'], [disabled])) & {
+		color: var(#{constants.$vvd-color-neutral-500});
+	}
 }
 
 .decorative {
@@ -127,25 +127,37 @@
 	display: -webkit-box;
 	overflow: hidden;
 	-webkit-box-orient: vertical;
-	color: var(#{constants.$vvd-color-canvas-text});
 	font: var(#{constants.$vvd-typography-base});
 }
 
 .text-primary {
 	font: var(#{constants.$vvd-typography-base});
 	-webkit-line-clamp: var(#{menu-item-variables.$text-primary-line-clamp}, 1);
+	.base:not(.disabled) & {
+		color: var(#{constants.$vvd-color-canvas-text});
+	}
+	.base.disabled & {
+		color: var(#{appearance.get-appearance-token(text)});
+	}
 	.base.two-lines & {
 		font: var(#{constants.$vvd-typography-base-bold});
 	}
 }
 
 .text-secondary {
+	color: var(#{constants.$vvd-color-neutral-800});
 	font: var(#{constants.$vvd-typography-base-condensed});
 	-webkit-line-clamp: var(#{menu-item-variables.$text-secondary-line-clamp}, 1);
-	.base.two-lines:not(.disabled) & {
+
+	.base.two-lines & {
 		color: var(#{constants.$vvd-color-neutral-600});
 	}
-	.base.two-lines:not(.disabled).selected & {
+
+	.base.disabled & {
+		color: var(#{appearance.get-appearance-token(text)});
+	}
+
+	.base.selected:not(.disabled) & {
 		color: var(#{constants.$vvd-color-neutral-800});
 	}
 }

libs/components/src/lib/menu-item/ui.test.ts

@@ -12,7 +12,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 		<style>
 			#wrapper {
 				width: 250px;
-				height: 2000px;
+				height: 2300px;
 				position: relative;
 				box-sizing: border-box;
 			}
@@ -91,9 +91,18 @@ test('should show the component', async ({ page }: { page: Page }) => {
 			<vwc-menu-item connotation='cta' role='menuitemradio' text="Radio 2.1" checked></vwc-menu-item>
 			<vwc-menu-item connotation='cta' role='menuitemradio' text="Radio 2.2"></vwc-menu-item>
 			<vwc-menu-item connotation='cta' icon='layout-1-solid' role='menuitemcheckbox' text="Checkbox 1" checked></vwc-menu-item>
+			<vwc-divider></vwc-divider>
+			<vwc-menu-item disabled text="Disabled item"></vwc-menu-item>
+			<vwc-menu-item disabled icon="home" text="primary text" text-secondary="secondary text"></vwc-menu-item>
+			<vwc-menu-item disabled connotation="cta" icon="home" text="primary text" text-secondary="secondary text"></vwc-menu-item>
+			<vwc-menu-item disabled role="menuitemcheckbox" text="Menu item 1"></vwc-menu-item>
+			<vwc-menu-item disabled role="menuitemcheckbox" checked text="Menu item 1"></vwc-menu-item>
+			<vwc-menu-item disabled role="menuitemradio" text="Menu item 1"></vwc-menu-item>
+			<vwc-menu-item disabled role="menuitemradio" checked text="Menu item 1"></vwc-menu-item>
+			<vwc-menu-item disabled role="menuitemcheckbox" checked check-appearance="tick-only" text="Menu item 1"></vwc-menu-item>
 		</vwc-menu>`;
 
-	page.setViewportSize({ width: 200, height: 2000 });
+	page.setViewportSize({ width: 200, height: 2300 });
 
 	await loadComponents({
 		page,