Merge pull request #167 from umbraco/feature/uui-menu-item-badge-slot

Feature/uui menu item badge slot

Author: madsrasmussen

packages/uui-badge/lib/uui-badge.element.ts

@@ -14,24 +14,20 @@ export class UUIBadgeElement extends LitElement {
   static styles = [
     css`
       :host {
-        position: absolute;
+        position: var(--uui-badge-position, absolute);
         display: flex;
         justify-content: center;
         align-items: center;
 
-        /* top: -8px;
-        right: -8px; */
         padding: var(--uui-size-1) var(--uui-size-2);
-        --uui-badge-inset: -8px -8px auto auto;
-        /* 4 different ones */
-        inset: var(--uui-badge-inset);
+        inset: var(--uui-badge-inset, -8px -8px auto auto);
 
         text-align: center;
         font-size: var(--uui-badge-font-size, var(--uui-type-small-size));
         font-weight: 900;
         line-height: 1;
 
-        margin-right: 0 !important;
+        margin-right: 0;
 
         min-width: var(--uui-size-8);
         min-height: var(--uui-size-8);

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,
   },
 ];
 
@@ -257,17 +262,45 @@ WithActions.parameters = {
   },
 };
 
-export const Selectable = () =>
+export const WithBadge = () =>
   html`
     ${MenuItems.map(
       menuItem =>
-        html`<uui-menu-item label="${menuItem.title}"></uui-menu-item>`
+        html`
+          <uui-menu-item label="${menuItem.title}">
+            ${menuItem.badge
+              ? html`<uui-badge slot="badge" look="warning">!</uui-badge>`
+              : ''}
+          </uui-menu-item>
+        `
+    )}
+  `;
+WithBadge.parameters = {
+  docs: {
+    source: {
+      code: html`
+        <uui-menu-item label="Menu Item 2">
+          <uui-badge slot="badge" look="warning">!</uui-badge>
+        </uui-menu-item>
+      `.strings,
+    },
+  },
+};
+
+export const Selectable = (props: any) =>
+  html`
+    ${MenuItems.map(
+      menuItem =>
+        html`<uui-menu-item
+          label="${menuItem.title}"
+          ?selectable=${props.selectable}></uui-menu-item>`
     )}
   `;
 Selectable.args = {
   selectable: true,
 };
 Selectable.parameters = {
+  controls: { include: ['selectable'] },
   docs: {
     source: {
       code: html`