SELF-286/disabled menu styles (#490)

* Add distinct disabled styles to menu items * 2.0.49 * update changelog
lob · May 2, 2024 · 2c498fd · 2c498fd
1 parent c9835d5
commit 2c498fd
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## v2.0.48
 
+- Add disabled styles for the items of the `Menu` component.
+
+## v2.0.48
+
 - Add new icons for the `Icon` component
   - `Details`
   - `Previous`

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.48",
+  "version": "2.0.49",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

diff --git a/src/components/Menu/Menu.stories.ts b/src/components/Menu/Menu.stories.ts
@@ -77,7 +77,8 @@ export const Primary: StoryObj<typeof Menu> = {
         label: 'Delete',
         clickHandler: () => console.log('Deleted'),
         key: 'test3',
-        icon: IconName.DELETE
+        icon: IconName.DELETE,
+        disabled: true
       }
     ]
   }

diff --git a/src/components/Menu/Menu.vue b/src/components/Menu/Menu.vue
@@ -33,7 +33,15 @@
         :href="item.item.url"
         :target="item.item.target"
       >
-        <span class="uic-menu-item-child">
+        <span
+          :class="[
+            'uic-menu-item-child',
+            {
+              '!text-gray-200 !hover:bg-none !cursor-not-allowed':
+                item.item.disabled
+            }
+          ]"
+        >
           <Icon
             v-if="
               item.item.icon &&