From 3616d34c2b096af088bc00cc821657ee70b8cc21 Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Tue, 14 Apr 2026 15:43:56 +0300 Subject: [PATCH 1/2] feat(ui5-timeline-item): introduce iconTooltip property --- packages/fiori/cypress/specs/Timeline.cy.tsx | 69 ++++++++++++++++++++ packages/fiori/src/TimelineItem.ts | 13 ++++ packages/fiori/src/TimelineItemTemplate.tsx | 8 ++- packages/fiori/test/pages/Timeline.html | 52 +++++++-------- 4 files changed, 115 insertions(+), 27 deletions(-) diff --git a/packages/fiori/cypress/specs/Timeline.cy.tsx b/packages/fiori/cypress/specs/Timeline.cy.tsx index 96b57949b5cd..0e19b814380b 100644 --- a/packages/fiori/cypress/specs/Timeline.cy.tsx +++ b/packages/fiori/cypress/specs/Timeline.cy.tsx @@ -511,5 +511,74 @@ describe("Timeline - getFocusDomRef", () => { }); }); +describe("TimelineItem iconTooltip", () => { + it("should render tooltip on the icon when iconTooltip is set", () => { + cy.mount( + + + Deployed successfully. + + + ); + + cy.get("#itemWithTooltip") + .shadow() + .find("[ui5-icon]") + .should("have.attr", "show-tooltip") + .and("exist"); + + cy.get("#itemWithTooltip") + .shadow() + .find("[ui5-icon]") + .should("have.attr", "accessible-name", "Success"); + }); + + it("should not render tooltip on icon when iconTooltip is not set", () => { + cy.mount( + + + Deployed successfully. + + + ); + + cy.get("#itemWithoutTooltip") + .shadow() + .find("[ui5-icon]") + .should("not.have.attr", "show-tooltip"); + }); + + it("should include iconTooltip in the accessible label of the bubble", () => { + cy.mount( + + + Build completed. + + + ); + + cy.get("#itemAccLabel") + .shadow() + .find(".ui5-tli-bubble") + .should("have.attr", "aria-label") + .and("include", "Passed"); + }); +}); diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index 4b0a26dce81f..13d7756c7d54 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -69,6 +69,15 @@ class TimelineItem extends UI5Element implements ITimelineItem { @property() icon?: string; + /** + * Defines the tooltip of the graphical icon. + * @default undefined + * @public + * @since 2.10.0 + */ + @property() + iconTooltip?: string; + /** * Defines the name of the item, displayed before the `title-text`. * @default undefined @@ -233,6 +242,10 @@ class TimelineItem extends UI5Element implements ITimelineItem { parts.push(this.timelineItemStateText); } + if (this.iconTooltip) { + parts.push(this.iconTooltip); + } + return parts.join(", "); } } diff --git a/packages/fiori/src/TimelineItemTemplate.tsx b/packages/fiori/src/TimelineItemTemplate.tsx index 9fcdd0e7a651..1f77f4edcc69 100644 --- a/packages/fiori/src/TimelineItemTemplate.tsx +++ b/packages/fiori/src/TimelineItemTemplate.tsx @@ -19,7 +19,13 @@ export default function TimelineItemTemplate(this: TimelineItem) {
{ this.icon ? - + :
} diff --git a/packages/fiori/test/pages/Timeline.html b/packages/fiori/test/pages/Timeline.html index aa540849b5a5..5f10fa6811f3 100644 --- a/packages/fiori/test/pages/Timeline.html +++ b/packages/fiori/test/pages/Timeline.html @@ -364,32 +364,32 @@

Advanced Timeline - Horizontal With Groups and Diverse Components

-
-

Timeline with Various Timeline Item States

-
- - - - Compilation succeeded. - - - Lint completed with minor issues. - - - - - Unit tests failed. - - - Integration tests have warnings. - - - End-to-end tests passed. - - - -
-
+
+

Timeline with Various Timeline Item States

+
+ + + + Compilation succeeded. + + + Lint completed with minor issues. + + + + + Unit tests failed. + + + Integration tests have warnings. + + + End-to-end tests passed. + + + +
+
From 74da6d3d234f65733c28ffc31b0e8a35a7a59a73 Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Tue, 14 Apr 2026 16:40:44 +0300 Subject: [PATCH 2/2] fix: version number --- packages/fiori/src/TimelineItem.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/TimelineItem.ts b/packages/fiori/src/TimelineItem.ts index 13d7756c7d54..de3c7901a012 100644 --- a/packages/fiori/src/TimelineItem.ts +++ b/packages/fiori/src/TimelineItem.ts @@ -73,7 +73,7 @@ class TimelineItem extends UI5Element implements ITimelineItem { * Defines the tooltip of the graphical icon. * @default undefined * @public - * @since 2.10.0 + * @since 2.22.0 */ @property() iconTooltip?: string;