@limetech/lime-elements 33.14.0-next.11 → 33.14.0-next.15

package/dist/types/components/tooltip/tooltip.d.ts

@@ -1,15 +1,41 @@
 /**
- * Tooltips display a text label identifying an element, such as a description
- * of its function.
+ * A tooltip can be used to display a descriptive text for any element.
+ * The displayed content must be a brief and supplemental string of text,
+ * identifying the element or describing its function for the user,
+ * helping them better understand unfamiliar objects that aren't described
+ * directly in the UI.
  *
- * In order to display the tooltip, the tooltip element and the owner element
- * that it should describe must be within the same document or document
- * fragment. A good practice is to just render them next to each other like so:
+ * ## Interaction
+ * The tooltip appears after a slight delay, when the element is hovered;
+ * and disappears as soon as the cursor leaves the element.
+ * Therefore, users cannot interact with the tip, but if the trigger element
+ * itself is interactive, it will remain interactible even with a tooltip bound
+ * to it.
+ *
+ * :::note
+ * In order to display the tooltip, the tooltip element and its trigger element
+ * must be within the same document or document fragment.
+ * A good practice is to just place them next to each other like below:
  *
  * ```html
  * <limel-button icon="search" id="tooltip-example" />
  * <limel-tooltip label="Search" elementId="tooltip-example" />
  * ```
+ * :::
+ *
+ * ## Usage
+ * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.
+ * Use them only when they add significant value.
+ * - A good tip is concise, helpful, and informative.
+ * Don't explain the obvious or simply repeat what is already on the screen.
+ * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+ * - If the tip is essential to the primary tasks that the user is performing,
+ * such as warnings or important notes, include the information directly in the
+ * interface instead.
+ * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+ * use that, not a tooltip.
+ * - Make sure to use the tooltip on an element that users naturally and
+ * effortlessly recognize can be hovered.
  *
  * @exampleComponent limel-example-tooltip
  * @private

package/dist/types/components.d.ts

@@ -6,15 +6,15 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Button } from "./components/button/button.types";
-import { Action as Action1, Chip, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, ListItem, ListSeparator, ListType, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
+import { Action as Action1, Chip, DateType, DialogHeading, FileInfo, FlexContainerAlign, FlexContainerDirection, FlexContainerJustify, IconSize as IconSize1, Languages, ListItem, ListSeparator, ListType, MenuItem, MenuListType, OpenDirection, Option, Searcher, SpinnerSize } from "@limetech/lime-elements";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
 import { ValidationStatus } from "./components/form/form.types";
 import { IconSize } from "./components/icon/icon.types";
 import { InputType } from "./components/input-field/input-field.types";
-import { MenuItem, OpenDirection } from "./components/menu/menu.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
+import { OpenDirection as OpenDirection1 } from "./components/menu/menu.types";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { Tab } from "./components/tab-bar/tab.types";
 import { Column, ColumnSorter, TableParams } from "./components/table/table.types";
@@ -548,7 +548,7 @@ export namespace Components {
          */
         "maxLinesSecondaryText": number;
         /**
-          * The type of the list, omit to get a regular list. Available types are: `selectable`: regular list with single selection. `radio`: radio button list with single selection. `checkbox`: checkbox list with multiple selection. `menu`: menu list with single selection.
+          * The type of the list, omit to get a regular list. Available types are: `selectable`: regular list with single selection. `radio`: radio button list with single selection. `checkbox`: checkbox list with multiple selection.
          */
         "type": ListType;
     }
@@ -588,6 +588,28 @@ export namespace Components {
          */
         "openDirection": OpenDirection;
     }
+    interface LimelMenuList {
+        /**
+          * Set to `true` if the list should display larger icons with a background
+         */
+        "badgeIcons": boolean;
+        /**
+          * Size of the icons in the list
+         */
+        "iconSize": IconSize;
+        /**
+          * List of items to display
+         */
+        "items": Array<MenuItem | ListSeparator>;
+        /**
+          * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
+         */
+        "maxLinesSecondaryText": number;
+        /**
+          * The type of the menu, omit to get a regular vertical menu. Available types are: `menu`: regular vertical menu.
+         */
+        "type": MenuListType;
+    }
     interface LimelMenuSurface {
         /**
           * Clicks in this element should not be prevented when the menu surface is open
@@ -1097,6 +1119,12 @@ declare global {
         prototype: HTMLLimelMenuElement;
         new (): HTMLLimelMenuElement;
     };
+    interface HTMLLimelMenuListElement extends Components.LimelMenuList, HTMLStencilElement {
+    }
+    var HTMLLimelMenuListElement: {
+        prototype: HTMLLimelMenuListElement;
+        new (): HTMLLimelMenuListElement;
+    };
     interface HTMLLimelMenuSurfaceElement extends Components.LimelMenuSurface, HTMLStencilElement {
     }
     var HTMLLimelMenuSurfaceElement: {
@@ -1224,6 +1252,7 @@ declare global {
         "limel-linear-progress": HTMLLimelLinearProgressElement;
         "limel-list": HTMLLimelListElement;
         "limel-menu": HTMLLimelMenuElement;
+        "limel-menu-list": HTMLLimelMenuListElement;
         "limel-menu-surface": HTMLLimelMenuSurfaceElement;
         "limel-picker": HTMLLimelPickerElement;
         "limel-popover": HTMLLimelPopoverElement;
@@ -1837,7 +1866,7 @@ declare namespace LocalJSX {
          */
         "onSelect"?: (event: CustomEvent<ListItem | ListItem[]>) => void;
         /**
-          * The type of the list, omit to get a regular list. Available types are: `selectable`: regular list with single selection. `radio`: radio button list with single selection. `checkbox`: checkbox list with multiple selection. `menu`: menu list with single selection.
+          * The type of the list, omit to get a regular list. Available types are: `selectable`: regular list with single selection. `radio`: radio button list with single selection. `checkbox`: checkbox list with multiple selection.
          */
         "type"?: ListType;
     }
@@ -1875,7 +1904,7 @@ declare namespace LocalJSX {
         /**
           * Is emitted when a menu item is selected.
          */
-        "onSelect"?: (event: CustomEvent<ListItem | ListItem[]>) => void;
+        "onSelect"?: (event: CustomEvent<MenuItem | MenuItem[]>) => void;
         /**
           * Sets the open state of the menu.
          */
@@ -1885,6 +1914,36 @@ declare namespace LocalJSX {
          */
         "openDirection"?: OpenDirection;
     }
+    interface LimelMenuList {
+        /**
+          * Set to `true` if the list should display larger icons with a background
+         */
+        "badgeIcons"?: boolean;
+        /**
+          * Size of the icons in the list
+         */
+        "iconSize"?: IconSize;
+        /**
+          * List of items to display
+         */
+        "items"?: Array<MenuItem | ListSeparator>;
+        /**
+          * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
+         */
+        "maxLinesSecondaryText"?: number;
+        /**
+          * Fired when a new value has been selected from the list. Only fired if selectable is set to true
+         */
+        "onChange"?: (event: CustomEvent<MenuItem | MenuItem[]>) => void;
+        /**
+          * Fired when an action has been selected from the action menu of a list item
+         */
+        "onSelect"?: (event: CustomEvent<MenuItem | MenuItem[]>) => void;
+        /**
+          * The type of the menu, omit to get a regular vertical menu. Available types are: `menu`: regular vertical menu.
+         */
+        "type"?: MenuListType;
+    }
     interface LimelMenuSurface {
         /**
           * Clicks in this element should not be prevented when the menu surface is open
@@ -2345,6 +2404,7 @@ declare namespace LocalJSX {
         "limel-linear-progress": LimelLinearProgress;
         "limel-list": LimelList;
         "limel-menu": LimelMenu;
+        "limel-menu-list": LimelMenuList;
         "limel-menu-surface": LimelMenuSurface;
         "limel-picker": LimelPicker;
         "limel-popover": LimelPopover;
@@ -2392,6 +2452,7 @@ declare module "@stencil/core" {
             "limel-linear-progress": LocalJSX.LimelLinearProgress & JSXBase.HTMLAttributes<HTMLLimelLinearProgressElement>;
             "limel-list": LocalJSX.LimelList & JSXBase.HTMLAttributes<HTMLLimelListElement>;
             "limel-menu": LocalJSX.LimelMenu & JSXBase.HTMLAttributes<HTMLLimelMenuElement>;
+            "limel-menu-list": LocalJSX.LimelMenuList & JSXBase.HTMLAttributes<HTMLLimelMenuListElement>;
             "limel-menu-surface": LocalJSX.LimelMenuSurface & JSXBase.HTMLAttributes<HTMLLimelMenuSurfaceElement>;
             "limel-picker": LocalJSX.LimelPicker & JSXBase.HTMLAttributes<HTMLLimelPickerElement>;
             "limel-popover": LocalJSX.LimelPopover & JSXBase.HTMLAttributes<HTMLLimelPopoverElement>;

package/dist/types/interface.d.ts

@@ -12,6 +12,7 @@ export * from './components/input-field/input-field.types';
 export * from './components/list/list-item.types';
 export * from './components/list/list.types';
 export * from './components/menu/menu.types';
+export * from './components/menu-list/menu-list.types';
 export * from './components/picker/searcher.types';
 export * from './components/progress-flow/progress-flow.types';
 export * from './components/select/option.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "33.14.0-next.11",
+  "version": "33.14.0-next.15",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -33,6 +33,7 @@
     "lint:scss:prod": "prettier -c --end-of-line lf --ignore-path ./.gitignore **/*.scss",
     "start": "npm run watch",
     "test": "npm run test:spec && npm run test:e2e",
+    "test:watch": "cross-env-shell SASS_PATH=node_modules \"stencil test --spec --e2e --watch\"",
     "test:e2e": "cross-env-shell SASS_PATH=node_modules \"stencil test --e2e\"",
     "test:e2e:watch": "cross-env-shell SASS_PATH=node_modules \"stencil test --e2e --watch\"",
     "test:spec": "stencil test --spec",