Skip to content

Commit 7151dae

Browse files
LidiyaGeorgievaLidiyaGeorgieva
authored
fix(ui5-side-navigation): fix disabled items and tooltips (#11333)
- In collapsed Side Navigation when hover on disabled item the hover effect is not applied - Tooltips (if set) are visible for all items: parent, group, children, in menu, in sub menu - Tooltip for expand/collapse arrow added - Test page enhanced with different texts for the items JIRA: BGSOFUIRODOPI-3443
1 parent 297da60 commit 7151dae

10 files changed

+102
-64
lines changed

‎packages/fiori/src/SideNavigationGroup.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import SideNavigationGroupTemplate from "./SideNavigationGroupTemplate.js";
1717

1818
import {
1919
SIDE_NAVIGATION_GROUP_HEADER_DESC,
20+
SIDE_NAVIGATION_ICON_COLLAPSE,
21+
SIDE_NAVIGATION_ICON_EXPAND,
2022
} from "./generated/i18n/i18n-defaults.js";
2123

2224
// Styles
@@ -132,6 +134,11 @@ class SideNavigationGroup extends SideNavigationItemBase {
132134
return SideNavigationGroup.i18nBundle.getText(SIDE_NAVIGATION_GROUP_HEADER_DESC);
133135
}
134136

137+
get _arrowTooltip() {
138+
return this.expanded ? SideNavigationGroup.i18nBundle.getText(SIDE_NAVIGATION_ICON_COLLAPSE)
139+
: SideNavigationGroup.i18nBundle.getText(SIDE_NAVIGATION_ICON_EXPAND);
140+
}
141+
135142
_onkeydown(e: KeyboardEvent) {
136143
if (isLeft(e) || isMinus(e)) {
137144
this.expanded = false;

‎packages/fiori/src/SideNavigationGroupTemplate.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ function TreeItemTemplate(this: SideNavigationGroup) {
3838
{!!this.items.length &&
3939
<Icon class="ui5-sn-item-toggle-icon"
4040
name={this.expanded ? navDownArrow : navRightArrow}
41+
accessibleName={this._arrowTooltip}
42+
showTooltip={true}
4143
/>
4244
}
4345
</div>

‎packages/fiori/src/SideNavigationItem.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
22
import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
33
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
44
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
5+
import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
6+
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
57
import {
68
isLeft,
79
isRight,
@@ -13,6 +15,10 @@ import {
1315
import type SideNavigationItemBase from "./SideNavigationItemBase.js";
1416
import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
1517
import type SideNavigationSubItem from "./SideNavigationSubItem.js";
18+
import {
19+
SIDE_NAVIGATION_ICON_COLLAPSE,
20+
SIDE_NAVIGATION_ICON_EXPAND,
21+
} from "./generated/i18n/i18n-defaults.js";
1622

1723
// Templates
1824
import SideNavigationItemTemplate from "./SideNavigationItemTemplate.js";
@@ -72,6 +78,9 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
7278
@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
7379
items!: Array<SideNavigationSubItem>;
7480

81+
@i18n("@ui5/webcomponents-fiori")
82+
static i18nBundle: I18nBundle;
83+
7584
get overflowItems() : Array<SideNavigationItem> {
7685
return [this];
7786
}
@@ -170,6 +179,11 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
170179
return this.selected;
171180
}
172181

182+
get _arrowTooltip() {
183+
return this.expanded ? SideNavigationItem.i18nBundle.getText(SIDE_NAVIGATION_ICON_COLLAPSE)
184+
: SideNavigationItem.i18nBundle.getText(SIDE_NAVIGATION_ICON_EXPAND);
185+
}
186+
173187
applyInitialFocusInPopover() {
174188
if (this.unselectable && this.items.length) {
175189
this.items[0]?.focus();

‎packages/fiori/src/SideNavigationItemBase.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,9 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
4545
/**
4646
* Defines the tooltip of the component.
4747
*
48-
* A tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).
48+
* A tooltip attribute should be provided, in order to represent meaning/function,
49+
* when the component is collapsed ("icon only" design is visualized) or the item text is truncated.
50+
*
4951
* @default undefined
5052
* @public
5153
* @since 2.0.0

‎packages/fiori/src/SideNavigationItemTemplate.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,8 @@ function TreeItemTemplate(this: SideNavigationItem) {
111111
{!!this.items.length &&
112112
<Icon class="ui5-sn-item-toggle-icon"
113113
name={this.expanded ? navDownArrow : navRightArrow}
114+
accessibleName={this._arrowTooltip}
115+
showTooltip={true}
114116
onClick={this._onToggleClick}
115117
/>
116118
}
@@ -143,6 +145,8 @@ function TreeItemTemplate(this: SideNavigationItem) {
143145
{!!this.items.length &&
144146
<Icon class="ui5-sn-item-toggle-icon"
145147
name={this.expanded ? navDownArrow : navRightArrow}
148+
accessibleName={this._arrowTooltip}
149+
showTooltip={true}
146150
onClick={this._onToggleClick}
147151
/>
148152
}

‎packages/fiori/src/SideNavigationPopoverTemplate.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default function SideNavigationTemplate(this: SideNavigation) {
2424
href={item.href}
2525
target={item.target}
2626
title={item.title}
27+
tooltip={item._tooltip}
2728
ref={this.captureRef.bind(item)}
2829
>
2930
{item.items.map(subItem =>
@@ -37,6 +38,7 @@ export default function SideNavigationTemplate(this: SideNavigation) {
3738
href={subItem.href}
3839
target={subItem.target}
3940
title={subItem.title}
41+
tooltip={subItem._tooltip}
4042
/>
4143
)}
4244
</NavigationMenuItem>

‎packages/fiori/src/i18n/messagebundle.properties

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -492,6 +492,12 @@ SIDE_NAVIGATION_OVERFLOW_ACCESSIBLE_NAME=More Items
492492
#XTXT: Accessible name for the Group Header
493493
SIDE_NAVIGATION_GROUP_HEADER_DESC=Group Header
494494

495+
#XTXT
496+
SIDE_NAVIGATION_ICON_COLLAPSE=Colapse
497+
498+
#XTXT
499+
SIDE_NAVIGATION_ICON_EXPAND=Expand
500+
495501
#XTXT: User menu other accounts button
496502
USER_MENU_OTHER_ACCOUNT_BUTTON_TXT=Other accounts
497503

‎packages/fiori/src/themes/SideNavigationItemBase.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@ and there is an additional border that appears on hover. */
275275
display: none;
276276
}
277277

278-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover,
278+
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-disabled):hover,
279279
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus {
280280
width: var(--_ui5_side_navigation_item_collapsed_hover_focus_width);
281281
box-shadow: var(--_ui5_side_navigation_box_shadow);
@@ -298,17 +298,17 @@ and there is an additional border that appears on hover. */
298298
background: var(--sapList_SelectionBackgroundColor);
299299
}
300300

301-
:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
301+
:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-disabled):hover:not(.ui5-sn-item-with-expander),
302302
:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander),
303-
:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander):not([target="_blank"]),
303+
:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-disabled):hover:not(.ui5-sn-item-with-expander):not([target="_blank"]),
304304
:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander):not([target="_blank"]) {
305305
padding-inline-end: var(--_ui5_side_navigation_item_collapsed_hover_focus_padding_right);
306306
}
307307

308-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-text,
308+
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-disabled):hover .ui5-sn-item-text,
309309
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-text,
310-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-toggle-icon,
311-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-external-link-icon,
310+
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-disabled):hover .ui5-sn-item-toggle-icon,
311+
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-disabled):hover .ui5-sn-item-external-link-icon,
312312
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon,
313313
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-external-link-icon {
314314
display: var(--_ui5_side_navigation_item_collapsed_hover_focus_display);

‎packages/fiori/test/pages/SideNavigation.html

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -43,28 +43,29 @@
4343
<ui5-side-navigation-sub-item id="item22" text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
4444
</ui5-side-navigation-item>
4545
<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
46-
<ui5-side-navigation-item id="item3" text="Events.............................................................." icon="calendar">
46+
<ui5-side-navigation-item id="item3" text="Events lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="calendar">
4747
<ui5-side-navigation-sub-item text="Local" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
4848
<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
4949
</ui5-side-navigation-item>
5050
<ui5-side-navigation-item id="externalLinkItem" text="External Link Unselectable" icon="chain-link" href="https://sap.com" unselectable target="_blank"></ui5-side-navigation-item>
5151
<ui5-side-navigation-item id="externalLinkItem2" text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
5252

53-
<ui5-side-navigation-item id="item4" text="Home" icon="home" tooltip="Home tooltip">
54-
<ui5-side-navigation-sub-item text="Local" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
55-
<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
53+
<ui5-side-navigation-item id="item4" text="Home 1" icon="home" tooltip="Home 1 tooltip">
54+
<ui5-side-navigation-sub-item text="Local 1" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
55+
<ui5-side-navigation-sub-item text="Others 1"></ui5-side-navigation-sub-item>
5656
</ui5-side-navigation-item>
57-
<ui5-side-navigation-item disabled id="item1-disabled" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
57+
58+
<ui5-side-navigation-item disabled id="item1-disabled" text="Home 2" icon="home" tooltip="Home 2 tooltip"></ui5-side-navigation-item>
5859
<ui5-side-navigation-item text="Home (unselectable)" icon="home" unselectable></ui5-side-navigation-item>
59-
<ui5-side-navigation-item text="Home (unselectable)" icon="home" unselectable>
60-
<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
61-
<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
60+
<ui5-side-navigation-item text="Home parent (unselectable)" icon="home" unselectable>
61+
<ui5-side-navigation-sub-item text="Local 2"></ui5-side-navigation-sub-item>
62+
<ui5-side-navigation-sub-item text="Others 3"></ui5-side-navigation-sub-item>
6263
</ui5-side-navigation-item>
63-
<ui5-side-navigation-item design="Action" text="Quick Create" icon="write-new" unselectable>
64-
<ui5-side-navigation-sub-item design="Action" text="Quick Create" unselectable></ui5-side-navigation-sub-item>
64+
<ui5-side-navigation-item design="Action" text="Quick Create parent test" icon="write-new" unselectable>
65+
<ui5-side-navigation-sub-item design="Action" text="Quick Create child test" unselectable></ui5-side-navigation-sub-item>
6566
</ui5-side-navigation-item>
66-
<ui5-side-navigation-item design="Action" text="Quick Create" icon="write-new" disabled unselectable></ui5-side-navigation-item>
67-
<ui5-side-navigation-item design="Action" href="https://sap.com" target="_blank" text="Quick Create" icon="write-new" unselectable></ui5-side-navigation-item>
67+
<ui5-side-navigation-item design="Action" text="Quick Create Disabled" icon="write-new" disabled unselectable></ui5-side-navigation-item>
68+
<ui5-side-navigation-item design="Action" href="https://sap.com" target="_blank" text="Quick Create link test" icon="write-new" unselectable></ui5-side-navigation-item>
6869

6970
<!-- Fixed Items -->
7071
<ui5-side-navigation-item id="fixedItem1" slot="fixedItems" text="Useful Links" icon="chain-link" tooltip="Useful links tooltip">
@@ -75,7 +76,7 @@
7576
<ui5-side-navigation-sub-item text="Quick Create" design="Action" unselectable></ui5-side-navigation-sub-item>
7677
</ui5-side-navigation-item>
7778
<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
78-
<ui5-side-navigation-item slot="fixedItems" text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
79+
<ui5-side-navigation-item slot="fixedItems" text="External Link 2" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
7980
<ui5-side-navigation-item slot="fixedItems" text="Quick Create" icon="write-new" design="Action" unselectable id="quickCreate"></ui5-side-navigation-item>
8081
</ui5-side-navigation>
8182
<div class="inner-content">

0 commit comments

Comments
 (0)