From 04126983959f0a624b50f64204bab3f3b1448012 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 29 May 2024 13:06:47 +0530
Subject: [PATCH] feat(Menu): label and icon update

---
 .../src/components/menu/menu-context.ts       |  2 +-
 .../src/components/menu/menu-item.ts          |  7 +++++
 .../src/components/menu/menu.stories.ts       | 26 ++++++++++---------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/carbon-web-components/src/components/menu/menu-context.ts b/packages/carbon-web-components/src/components/menu/menu-context.ts
index e4d0cb4aab2..ae35b588a52 100644
--- a/packages/carbon-web-components/src/components/menu/menu-context.ts
+++ b/packages/carbon-web-components/src/components/menu/menu-context.ts
@@ -20,7 +20,7 @@ export type StateType = {
 export const menuDefaultState: StateType = {
   isRoot: true,
   mode: 'full',
-  hasIcons: false,
+  hasIcons: true,
   size: null,
   items: [],
   requestCloseRoot: () => {},
diff --git a/packages/carbon-web-components/src/components/menu/menu-item.ts b/packages/carbon-web-components/src/components/menu/menu-item.ts
index 686fd3b28cb..24b3f3bd649 100644
--- a/packages/carbon-web-components/src/components/menu/menu-item.ts
+++ b/packages/carbon-web-components/src/components/menu/menu-item.ts
@@ -14,6 +14,8 @@ import styles from './menu-item.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { classMap } from 'lit/directives/class-map.js';
 import Checkmark16 from '@carbon/icons/lib/checkmark/16';
+import CaretLeft16 from '@carbon/icons/lib/caret--left/16';
+import CaretRight16 from '@carbon/icons/lib/caret--right/16';
 import { consume, provide } from '@lit/context';
 import { MenuContext } from './menu-context';
 
@@ -162,9 +164,14 @@ class CDSmenuItem extends LitElement {
           ${renderIcon ? iconRender() : undefined}
         </div>
         <div class="${prefix}--menu-item__label">${label}</div>
+        ${shortcut && !hasChildren && html `
         <div class="${prefix}--menu-item__shortcut">${shortcut}</div>
+        `}
         ${hasChildren
           ? html`
+          <div class="{${prefix}--menu-item__shortcut">
+              ${this.isRtl ? CaretLeft16() : CaretRight16()}
+            </div>
               <cds-menu
                 .isChild="${hasChildren}"
                 label="${label}"
diff --git a/packages/carbon-web-components/src/components/menu/menu.stories.ts b/packages/carbon-web-components/src/components/menu/menu.stories.ts
index 3dd09ddf9e6..554ef326c3f 100644
--- a/packages/carbon-web-components/src/components/menu/menu.stories.ts
+++ b/packages/carbon-web-components/src/components/menu/menu.stories.ts
@@ -12,29 +12,31 @@ import './index';
 
 export const Default = {
   render: () => {
-    const itemlist = ['One', 'Two', 'Three'];
+    const itemlist = ['None', 'Overline', 'Line-through', 'Underline'];
     return html`
       <cds-menu>
-        <cds-menu-item label="Item 1" kind="danger"></cds-menu-item>
-        <cds-menu-item label="Item 2" shortcut="⌘X"></cds-menu-item>
-        <cds-menu-item label="Item 3" shortcut="⌘V">
-          <cds-menu-item label="Sub 1"></cds-menu-item>
-          <cds-menu-item label="Sub 2"></cds-menu-item>
-          <cds-menu-item label="Sub 3"></cds-menu-item>
+        <cds-menu-item label="Share with">
+          <cds-menu-item label="None"></cds-menu-item>
+          <cds-menu-item label="Product team"></cds-menu-item>
+          <cds-menu-item label="Organization"></cds-menu-item>
+          <cds-menu-item label="Company"></cds-menu-item>
         </cds-menu-item>
         <cds-menu-item-divider></cds-menu-item-divider>
-        <cds-menu-item label="Item 4" disabled></cds-menu-item>
-        <cds-menu-item label="Item 5"></cds-menu-item>
+        <cds-menu-item label="Cut" shortcut="⌘X"></cds-menu-item>
+        <cds-menu-item label="Copy" shortcut="⌘C"></cds-menu-item>
+        <cds-menu-item label="Paste" shortcut="⌘V" disabled></cds-menu-item>
         <cds-menu-item-divider></cds-menu-item-divider>
         <cds-menu-item-group>
-          <cds-menu-item-selectable label="Item 6"></cds-menu-item-selectable>
-          <cds-menu-item-selectable label="Item 7"></cds-menu-item-selectable>
+          <cds-menu-item-selectable label="Bold" selected></cds-menu-item-selectable>
+          <cds-menu-item-selectable label="Italic"></cds-menu-item-selectable>
         </cds-menu-item-group>
         <cds-menu-item-divider></cds-menu-item-divider>
         <cds-menu-item-radio-group
           label="samples"
           .items="${itemlist}"
-          selectedItem="One"></cds-menu-item-radio-group>
+          selectedItem="None"></cds-menu-item-radio-group>
+        <cds-menu-item-divider></cds-menu-item-divider>
+        <cds-menu-item label="Delete" shortcut="⌫" kind="danger"></cds-menu-item>
       </cds-menu>
     `;
   },