feat: menu items hide actions (#796)

* add missing import * hide action bar when not focused or hovered
umbraco · May 23, 2024 · 9f07ae6 · 9f07ae6
1 parent e159c43
commit 9f07ae6
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -497,13 +497,14 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
 
       #actions-container {
         opacity: 0;
-        transition: opacity 120ms;
+        width: 0;
         grid-column-start: 3;
       }
       :host(:not([disabled])) #menu-item:hover #actions-container,
       :host(:not([disabled])) #menu-item:focus #actions-container,
       :host(:not([disabled])) #menu-item:focus-within #actions-container {
         opacity: 1;
+        width: auto;
       }
 
       #loader {

diff --git a/packages/uui-menu-item/lib/uui-menu-item.story.ts b/packages/uui-menu-item/lib/uui-menu-item.story.ts
@@ -9,6 +9,7 @@ import { UUIMenuItemElement } from './uui-menu-item.element';
 import { UUIMenuItemEvent } from './UUIMenuItemEvent';
 import readme from '../README.md?raw';
 import '@umbraco-ui/uui-symbol-expand/lib';
+import '@umbraco-ui/uui-symbol-more/lib';
 
 export default {
   title: 'Buttons/Menu Item',