From 7aea90d39f78502798bacf1edc0075671e2b01d7 Mon Sep 17 00:00:00 2001 From: Fabrice Aeschbacher Date: Mon, 11 May 2026 10:18:17 +0200 Subject: [PATCH] feat(tooltip): restore on si-navbar-vertical and si-content-action-bar MenuItem from @simpl/element-ng/menu has been deprecated in v47.0.0, but the new implementation removed the tooltips. This patch restores the feature, while fully respecting the new implementation in case no optional tooltip is given. Closes #1259 Signed-off-by: Fabrice Aeschbacher Reviewed-by: Gwendoline Goetz --- docs/components/buttons-menus/content-actions.md | 4 ++++ docs/components/buttons-menus/menu.md | 1 + .../si-content-action-bar.component.html | 10 +++++----- projects/element-ng/menu/si-menu-model.ts | 2 ++ .../si-navbar-vertical.component.html | 16 ++++++++-------- .../navbar-vertical/si-navbar-vertical.model.ts | 2 ++ .../si-content-action-bar-toolbar.ts | 4 ++-- .../si-navbar-vertical/si-navbar-vertical.ts | 3 ++- 8 files changed, 26 insertions(+), 16 deletions(-) diff --git a/docs/components/buttons-menus/content-actions.md b/docs/components/buttons-menus/content-actions.md index eb2cf132ef..0924e650c0 100644 --- a/docs/components/buttons-menus/content-actions.md +++ b/docs/components/buttons-menus/content-actions.md @@ -21,6 +21,10 @@ The content action bar groups primary and secondary actions and adjusts to the a - If the primary requirement is simply to have a menu that remains consistently collapsed, use a tertiary [circle button](../buttons-menus/buttons.md) with a [menu](../buttons-menus/menu.md). +### Best practices + +- Since tooltips are temporary, easy to miss and generally not accessible on touch devices, avoid using them or use them for non-essential information only. + ## Design --- ### Elements diff --git a/docs/components/buttons-menus/menu.md b/docs/components/buttons-menus/menu.md index 2ac67aa81c..560d036fb7 100644 --- a/docs/components/buttons-menus/menu.md +++ b/docs/components/buttons-menus/menu.md @@ -21,6 +21,7 @@ They are one of the most effective and highly used command surfaces, and can be - Keep disabled actions visible. - Do not use more than 2 submenus in a nested way. - Do not have a long and flat list of actions, which might not have space on a small screen. +- Since tooltips are temporary, easy to miss and generally not accessible on touch devices, avoid using them or use them for non-essential information only. ## Design --- diff --git a/projects/element-ng/content-action-bar/si-content-action-bar.component.html b/projects/element-ng/content-action-bar/si-content-action-bar.component.html index 52ddcb3736..e7f2878d25 100644 --- a/projects/element-ng/content-action-bar/si-content-action-bar.component.html +++ b/projects/element-ng/content-action-bar/si-content-action-bar.component.html @@ -26,7 +26,7 @@ si-menu-item [attr.data-id]="primaryAction.id" [attr.aria-label]="primaryAction.label | translate" - [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''" + [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)" [badge]="primaryAction.badge" [badgeColor]="primaryAction.badgeColor ?? 'secondary'" [disabled]="primaryAction.disabled || disabled()" @@ -45,7 +45,7 @@ si-menu-item-checkbox [attr.data-id]="primaryAction.id" [attr.aria-label]="primaryAction.label | translate" - [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''" + [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)" [checked]="primaryAction.checked" [badge]="primaryAction.badge" [badgeColor]="primaryAction.badgeColor ?? 'secondary'" @@ -66,7 +66,7 @@ si-menu-item [attr.data-id]="primaryAction.id" [attr.aria-label]="primaryAction.label | translate" - [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''" + [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)" [badge]="primaryAction.badge" [badgeColor]="primaryAction.badgeColor ?? 'secondary'" [disabled]="primaryAction.disabled || disabled()" @@ -88,7 +88,7 @@ si-menu-item [attr.data-id]="primaryAction.id" [attr.aria-label]="primaryAction.label | translate" - [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''" + [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)" [badge]="primaryAction.badge" [badgeColor]="primaryAction.badgeColor ?? 'secondary'" [disabled]="primaryAction.disabled || disabled()" @@ -114,7 +114,7 @@ si-menu-item [attr.data-id]="primaryAction.id" [attr.aria-label]="primaryAction.label | translate" - [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : ''" + [siTooltip]="primaryAction.iconOnly ? (primaryAction.label | translate) : (primaryAction.tooltip ?? '' | translate)" [badge]="primaryAction.badge" [badgeColor]="primaryAction.badgeColor ?? 'secondary'" [disabled]="primaryAction.disabled || disabled()" diff --git a/projects/element-ng/menu/si-menu-model.ts b/projects/element-ng/menu/si-menu-model.ts index b9ba63cd1e..2f8b5360ab 100644 --- a/projects/element-ng/menu/si-menu-model.ts +++ b/projects/element-ng/menu/si-menu-model.ts @@ -23,6 +23,8 @@ export interface MenuItemBase { badgeColor?: string; /** Whether the menu item id disabled. */ disabled?: boolean; + /** Tooltip that is shown when the user hovers over the menu item. */ + tooltip?: TranslatableString; } export interface MenuItemGroup extends MenuItemBase { diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.html b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.html index 321e133e38..e491af4e35 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.html +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.html @@ -87,8 +87,8 @@ [expanded]=" (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false " - [siTooltip]="item.label | translate" - [isDisabled]="!collapsed()" + [siTooltip]="(collapsed() ? item.label : (item.tooltip ?? '')) | translate" + [isDisabled]="!collapsed() && !item.tooltip" > {{ item.label | translate }} @@ -99,8 +99,8 @@ placement="end" [si-navbar-vertical-item]="item" [activeOverride]="item.active" - [siTooltip]="item.label | translate" - [isDisabled]="!collapsed()" + [siTooltip]="(collapsed() ? item.label : (item.tooltip ?? '')) | translate" + [isDisabled]="!collapsed() && !item.tooltip" > {{ item.label | translate }} @@ -120,8 +120,8 @@ [preserveFragment]="item.extras?.preserveFragment" [skipLocationChange]="item.extras?.skipLocationChange" [replaceUrl]="item.extras?.replaceUrl" - [siTooltip]="item.label | translate" - [isDisabled]="!collapsed()" + [siTooltip]="(collapsed() ? item.label : (item.tooltip ?? '')) | translate" + [isDisabled]="!collapsed() && !item.tooltip" > {{ item.label | translate }} @@ -132,8 +132,8 @@ [si-navbar-vertical-item]="item" [href]="item.href" [target]="item.target" - [siTooltip]="item.label | translate" - [isDisabled]="!collapsed()" + [siTooltip]="(collapsed() ? item.label : (item.tooltip ?? '')) | translate" + [isDisabled]="!collapsed() && !item.tooltip" > {{ item.label | translate }} diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts index aee1807367..b28fc72618 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.model.ts @@ -25,6 +25,8 @@ export interface NavbarVerticalItemBase { * By default, badges are always visible (both expanded and collapsed). */ hideBadgeWhenCollapsed?: boolean; + /** Tooltip that is shown when the user hovers over the menu item. */ + tooltip?: TranslatableString; } /** Use this type to create a group that can hold multiple items. */ diff --git a/src/app/examples/si-content-action-bar/si-content-action-bar-toolbar.ts b/src/app/examples/si-content-action-bar/si-content-action-bar-toolbar.ts index 8bf008b558..ea36f1837c 100644 --- a/src/app/examples/si-content-action-bar/si-content-action-bar-toolbar.ts +++ b/src/app/examples/si-content-action-bar/si-content-action-bar-toolbar.ts @@ -45,8 +45,8 @@ export class SampleComponent { { type: 'action', label: 'Previous action 3', action: () => alert('Undo action 3') } ] }, - { type: 'action', label: 'Undo', icon: 'element-undo', action: () => alert('Undo') }, - { type: 'action', label: 'Redo', icon: 'element-redo', action: () => alert('Redo') } + { type: 'action', label: 'Undo', icon: 'element-undo', tooltip: 'Undo last change', action: () => alert('Undo') }, + { type: 'action', label: 'Redo', icon: 'element-redo', tooltip: 'Redo last change', action: () => alert('Redo') } ]; primaryActionsIcons: ContentActionBarMainItem[] = [ diff --git a/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts b/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts index 300f6b9164..357eee06a1 100644 --- a/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts +++ b/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts @@ -32,7 +32,8 @@ export class SampleComponent implements OnInit { label: 'Home', id: 'home', icon: 'element-home', - routerLink: 'home' + routerLink: 'home', + tooltip: 'Go to home page' }, { type: 'header', label: 'Modules' }, {