feat(Menu): label and icon update

sangeethababu9223 · May 29, 2024 · 0412698 · 0412698
1 parent 59f20e2
commit 0412698
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 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
@@ -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
@@ -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
@@ -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>
     `;
   },