@umbraco-ui/uui-menu-item 0.0.6 → 0.1.0

package/README.md

@@ -4,6 +4,10 @@
 
 Umbraco style menu-item component.
 
+### See it in action
+
+Preview the component on [Storybook](https://uui.umbraco.com/?path=/story/uui-menu-item)
+
 ## Installation
 
 ### ES imports

package/custom-elements.json

@@ -7,7 +7,7 @@
       "attributes": [
         {
           "name": "disabled",
-          "description": "Disables the menu item, changes the looks of it and prevents if from emitting the click event",
+          "description": "Disables the menu item, changes the looks of it and prevents it from emitting the click event",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -59,12 +59,13 @@
         },
         {
           "name": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "label",
-          "description": "This functions both as the visible label as well as the aria label.",
+          "description": "Label to be used for aria-label and eventually as visual label",
           "type": "string"
         }
       ],
@@ -77,7 +78,7 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Disables the menu item, changes the looks of it and prevents if from emitting the click event",
+          "description": "Disables the menu item, changes the looks of it and prevents it from emitting the click event",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -138,13 +139,14 @@
         {
           "name": "active",
           "attribute": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "label",
           "attribute": "label",
-          "description": "This functions both as the visible label as well as the aria label.",
+          "description": "Label to be used for aria-label and eventually as visual label",
           "type": "string"
         }
       ],
@@ -160,12 +162,20 @@
         {
           "name": "click-label",
           "description": "fires when the label is clicked"
+        },
+        {
+          "name": "selected",
+          "description": "fires when the media card is selected"
+        },
+        {
+          "name": "unselected",
+          "description": "fires when the media card is unselected"
         }
       ],
       "slots": [
         {
           "name": "",
-          "description": "default slot for nested menu items"
+          "description": "nested menu items go here"
         },
         {
           "name": "icon",
@@ -174,6 +184,10 @@
         {
           "name": "actions",
           "description": "actions area"
+        },
+        {
+          "name": "label",
+          "description": "area to place the label"
         }
       ],
       "cssProperties": [

package/lib/index.js

@@ -1,8 +1,9 @@
-import { LitElement, html, css } from 'lit';
+import { SelectOnlyMixin, SelectableMixin, ActiveMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import { LitElement, html, css } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { SelectOnlyMixin, SelectableMixin, ActiveMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
 class UUIMenuItemEvent extends UUIEvent {
@@ -35,6 +36,8 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(SelectableMixin(ActiveMix
     super.connectedCallback();
     if (!this.hasAttribute("role"))
       this.setAttribute("role", "menu");
+    demandCustomElement(this, "uui-symbol-expand");
+    demandCustomElement(this, "uui-loader-bar");
   }
   iconSlotChanged(e) {
     this.iconSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
@@ -55,7 +58,8 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(SelectableMixin(ActiveMix
         id="icon"
         style=${this.iconSlotHasContent ? "" : "display: none;"}
         @slotchange=${this.iconSlotChanged}></slot>
-      ${this.renderLabel()}`;
+      ${this.renderLabel()}
+      <slot name="badge" id="badge"> </slot>`;
   }
   _renderLabelAsAnchor() {
     if (this.disabled) {
@@ -65,7 +69,7 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(SelectableMixin(ActiveMix
     }
     return html` <a
       id="label-button"
-      href=${this.href}
+      href=${ifDefined(this.href)}
       target=${ifDefined(this.target || void 0)}
       rel=${ifDefined(this.target === "_blank" ? "noopener" : void 0)}
       @click=${this.onLabelClicked}
@@ -103,8 +107,6 @@ UUIMenuItemElement.styles = [
   css`
       :host {
         display: block;
-        background-color: var(--uui-interface-surface,#fefefe);
-        /** consider transparent. */
         --uui-menu-item-child-indent: calc(var(--uui-menu-item-indent, 0) + 1);
 
         user-select: none;
@@ -112,8 +114,7 @@ UUIMenuItemElement.styles = [
 
       #menu-item {
         position: relative;
-        display: flex;
-        align-items: stretch;
+
         padding-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4,12px));
 
         display: grid;
@@ -147,7 +148,6 @@ UUIMenuItemElement.styles = [
         grid-column-start: 2;
         white-space: nowrap;
         overflow: hidden;
-        text-overflow: ellipsis;
 
         display: inline-flex;
         align-items: center;
@@ -156,6 +156,12 @@ UUIMenuItemElement.styles = [
         min-height: var(--uui-size-12,36px);
         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. */
       }
@@ -189,6 +195,11 @@ UUIMenuItemElement.styles = [
         transition: opacity 120ms;
         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;
+      }
 
       #loader {
         position: absolute;
@@ -202,6 +213,14 @@ UUIMenuItemElement.styles = [
         margin-right: var(--uui-size-2,6px);
       }
 
+      #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);
       }

package/lib/uui-menu-item.element.d.ts

@@ -3,19 +3,18 @@ declare const UUIMenuItemElement_base: (new (...args: any[]) => import("@umbraco
 /**
  *  @element uui-menu-item
  *  @cssprop --uui-menu-item-indent - set indentation of the menu items
- *  @property label - This functions both as the visible label as well as the aria label.
  *  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items
  *  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items
  *  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked
- *  @slot default slot for nested menu items
+ *  @slot - nested menu items go here
  *  @slot icon - icon area
  *  @slot actions - actions area
- *
+ *  @slot label - area to place the label
  */
 export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
     static styles: import("lit").CSSResult[];
     /**
-     * Disables the menu item, changes the looks of it and prevents if from emitting the click event
+     * Disables the menu item, changes the looks of it and prevents it from emitting the click event
      * @type {boolean}
      * @attr
      * @default false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-menu-item",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "0.0.17"
+    "@umbraco-ui/uui-base": "0.1.0",
+    "@umbraco-ui/uui-loader-bar": "0.1.0",
+    "@umbraco-ui/uui-symbol-expand": "0.1.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -41,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-menu-item",
-  "gitHead": "3b7c6cf892e89054b2980b19d8c2f8bead2752e8"
+  "gitHead": "9ed7860ce865d310b85bd1718f37b59db873aefd"
 }