Skip to content

feat(ui5-timeline-item): introduce iconTooltip property #13387

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
didip1000 wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat(ui5-timeline-item): introduce iconTooltip property #13387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3616d34
feat(ui5-timeline-item): introduce iconTooltip property
didip1000 Apr 14, 2026
74da6d3
fix: version number
didip1000 Apr 14, 2026
e8044e2
Merge branch 'main' into tp-icon-tooltip
didip1000 Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions packages/fiori/cypress/specs/Timeline.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,6 +512,76 @@ describe("Timeline - getFocusDomRef", () => {
});
});

describe("TimelineItem iconTooltip", () => {
it("should render tooltip on the icon when iconTooltip is set", () => {
cy.mount(
<Timeline>
<TimelineItem
id="itemWithTooltip"
titleText="Deployment"
icon={accept}
iconTooltip="Success"
>
Deployed successfully.
</TimelineItem>
</Timeline>
);

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(
<Timeline>
<TimelineItem
id="itemWithoutTooltip"
titleText="Deployment"
icon={accept}
>
Deployed successfully.
</TimelineItem>
</Timeline>
);

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(
<Timeline>
<TimelineItem
id="itemAccLabel"
titleText="Build"
subtitleText="Step 1"
icon={accept}
iconTooltip="Passed"
name="CI Pipeline"
>
Build completed.
</TimelineItem>
</Timeline>
);

cy.get("#itemAccLabel")
.shadow()
.find(".ui5-tli-bubble")
.should("have.attr", "aria-label")
.and("include", "Passed");
});
});

describe("Timeline Header Bar", () => {
describe("Search functionality", () => {
it("should show header bar when slotted", () => {
Expand Down
13 changes: 13 additions & 0 deletions packages/fiori/src/TimelineItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.22.0
*/
@property()
iconTooltip?: string;

/**
* Defines the name of the item, displayed before the `title-text`.
* @default undefined
Expand Down Expand Up @@ -235,6 +244,10 @@ class TimelineItem extends UI5Element implements ITimelineItem {
parts.push(this.timelineItemStateText);
}

if (this.iconTooltip) {
parts.push(this.iconTooltip);
}

return parts.join(", ");
}
}
Expand Down
8 changes: 7 additions & 1 deletion packages/fiori/src/TimelineItemTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,13 @@ export default function TimelineItemTemplate(this: TimelineItem) {
<div class="ui5-tli-icon-outer">
{
this.icon ?
<Icon class="ui5-tli-icon" name={this.icon} mode="Decorative"/>
<Icon
class="ui5-tli-icon"
name={this.icon}
mode="Decorative"
showTooltip={!!this.iconTooltip}
accessibleName={this.iconTooltip}
/>
:
<div class="ui5-tli-dummy-icon-container"></div>
}
Expand Down
27 changes: 27 additions & 0 deletions packages/fiori/test/pages/Timeline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,33 @@ <h2>Advanced Timeline - Horizontal With Groups and Diverse Components</h2>
</div>
</section>

<section style="width: 100%;">
<h2>Timeline with Various Timeline Item States</h2>
<div style="width: 50%; margin: 1rem;">
<ui5-timeline id="test-timeline">
<ui5-timeline-group-item group-name="Build">
<ui5-timeline-item title="Compile" subtitle="Testing suite A" icon="sap-icon://accept" icon-tooltip="Compilation successful" name="Testing suite A" state="Positive">
Compilation succeeded.
</ui5-timeline-item>
<ui5-timeline-item title="Lint" subtitle="Testing suite B" icon="sap-icon://message-information" name="Testing suite B" state="Information">
Lint completed with minor issues.
</ui5-timeline-item>
</ui5-timeline-group-item>
<ui5-timeline-group-item group-name="Test">
<ui5-timeline-item title="Unit Test" subtitle="Testing suite C" icon="sap-icon://decline" name="Testing suite C" state="Negative">
Unit tests failed.
</ui5-timeline-item>
<ui5-timeline-item title="Integration Test" subtitle="Testing suite D" icon="sap-icon://message-warning" name="Testing suite D" state="Critical">
Integration tests have warnings.
</ui5-timeline-item>
<ui5-timeline-item title="E2E Test" subtitle="Testing suite E" icon="sap-icon://accept" name="Testing suite E" state="Positive">
End-to-end tests passed.
</ui5-timeline-item>
</ui5-timeline-group-item>
</ui5-timeline>
</div>
</section>

<section style="width: 100%;">
<h2>Timeline with Various Timeline Item States</h2>
<div style="width: 50%; margin: 1rem;">
Expand Down
Loading