badge slot + fix use of text-overflow ellipsis

Author: nielslyngsoe

packages/uui-menu-item/lib/uui-menu-item.element.ts

@@ -20,7 +20,7 @@ import { UUIMenuItemEvent } from './UUIMenuItemEvent';
  *  @slot default - nested menu items go here
  *  @slot icon - icon area
  *  @slot actions - actions area
- *  @slot label-slot - area to place the label (name: label)
+ *  @slot label - area to place the label
  */
 @defineElement('uui-menu-item')
 export class UUIMenuItemElement extends SelectOnlyMixin(
@@ -30,17 +30,14 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
     css`
       :host {
         display: block;
-        background-color: var(--uui-interface-surface);
-        /** consider transparent. */
         --uui-menu-item-child-indent: calc(var(--uui-menu-item-indent, 0) + 1);
 
         user-select: none;
       }
 
       #menu-item {
         position: relative;
-        display: flex;
-        align-items: stretch;
+
         padding-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));
 
         display: grid;
@@ -74,7 +71,6 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         grid-column-start: 2;
         white-space: nowrap;
         overflow: hidden;
-        text-overflow: ellipsis;
 
         display: inline-flex;
         align-items: center;
@@ -83,6 +79,12 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         min-height: var(--uui-size-12);
         z-index: 1;
       }
+
+      #label-button .label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       span#label-button {
         pointer-events: none; /* avoid hovering state on this. */
       }
@@ -134,6 +136,14 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         margin-right: var(--uui-size-2);
       }
 
+      #badge {
+        font-size: 12px;
+        --uui-badge-position: relative;
+        --uui-badge-position: auto;
+        display: block;
+        margin-left: 6px;
+      }
+
       :host([disabled]) {
         color: var(--uui-interface-surface-contrast-disabled);
       }
@@ -285,7 +295,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         id="icon"
         style=${this.iconSlotHasContent ? '' : 'display: none;'}
         @slotchange=${this.iconSlotChanged}></slot>
-      ${this.renderLabel()}`;
+      ${this.renderLabel()}
+      <slot name="badge" id="badge"> </slot>`;
   }
 
   private _renderLabelAsAnchor() {

packages/uui-menu-item/lib/uui-menu-item.story.ts

@@ -53,21 +53,26 @@ const MenuItems = [
     title: 'Menu Item 1',
     icon: 'document',
     loading: false,
+    badge: false,
   },
   {
     title: 'Menu Item 2',
     icon: 'picture',
     loading: true,
+    badge: false,
   },
   {
     title: 'Menu Item 3',
     icon: 'info',
     loading: false,
+    badge: true,
   },
   {
-    title: 'Menu Item 4',
+    title:
+      'Menu Item 4 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9',
     icon: 'document',
     loading: false,
+    badge: false,
   },
 ];
 
@@ -232,6 +237,9 @@ export const WithActions = () =>
       menuItem =>
         html`
           <uui-menu-item label="${menuItem.title}">
+            ${menuItem.badge
+              ? html`<uui-badge slot="badge" look="warning">!</uui-badge>`
+              : ''}
             <uui-action-bar slot="actions">
               <uui-button label="Open actions menu"
                 ><uui-symbol-more></uui-symbol-more