Skip to content

Commit 94022f8

Browse files
GDamyanovGDamyanov
authored
Merge branch 'main' into color-palette-item-click
2 parents af51774 + eae39b1 commit 94022f8

23 files changed

Lines changed: 544 additions & 48 deletions

File tree

‎packages/fiori/cypress/specs/ShellBarSearch.mobile.cy.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,4 +95,33 @@ describe("Mobile Behaviour", () => {
9595
cy.get("[ui5-shellbar-search]")
9696
.should("have.prop", "collapsed", true);
9797
});
98+
99+
it("should fire search event when search icon is pressed in open dialog", () => {
100+
cy.mount(
101+
<ShellBarSearch showClearIcon={true} onSearch={cy.stub().as("search")}>
102+
<SearchItem text="Item 1" />
103+
<SearchItem text="Item 2" />
104+
</ShellBarSearch>
105+
);
106+
107+
cy.get("[ui5-shellbar-search]")
108+
.shadow()
109+
.find("[ui5-button]")
110+
.realClick();
111+
112+
cy.get("[ui5-shellbar-search]")
113+
.should("have.prop", "open", true);
114+
115+
cy.get("[ui5-shellbar-search]")
116+
.shadow()
117+
.find("[ui5-responsive-popover] header input")
118+
.type("test");
119+
120+
cy.get("[ui5-shellbar-search]")
121+
.shadow()
122+
.find("[ui5-responsive-popover] .ui5-shell-search-field-search-icon")
123+
.realClick();
124+
125+
cy.get("@search").should("have.been.calledOnce");
126+
});
98127
});

‎packages/fiori/cypress/specs/Timeline.cy.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -512,6 +512,76 @@ describe("Timeline - getFocusDomRef", () => {
512512
});
513513
});
514514

515+
describe("TimelineItem iconTooltip", () => {
516+
it("should render tooltip on the icon when iconTooltip is set", () => {
517+
cy.mount(
518+
<Timeline>
519+
<TimelineItem
520+
id="itemWithTooltip"
521+
titleText="Deployment"
522+
icon={accept}
523+
iconTooltip="Success"
524+
>
525+
Deployed successfully.
526+
</TimelineItem>
527+
</Timeline>
528+
);
529+
530+
cy.get("#itemWithTooltip")
531+
.shadow()
532+
.find("[ui5-icon]")
533+
.should("have.attr", "show-tooltip")
534+
.and("exist");
535+
536+
cy.get("#itemWithTooltip")
537+
.shadow()
538+
.find("[ui5-icon]")
539+
.should("have.attr", "accessible-name", "Success");
540+
});
541+
542+
it("should not render tooltip on icon when iconTooltip is not set", () => {
543+
cy.mount(
544+
<Timeline>
545+
<TimelineItem
546+
id="itemWithoutTooltip"
547+
titleText="Deployment"
548+
icon={accept}
549+
>
550+
Deployed successfully.
551+
</TimelineItem>
552+
</Timeline>
553+
);
554+
555+
cy.get("#itemWithoutTooltip")
556+
.shadow()
557+
.find("[ui5-icon]")
558+
.should("not.have.attr", "show-tooltip");
559+
});
560+
561+
it("should include iconTooltip in the accessible label of the bubble", () => {
562+
cy.mount(
563+
<Timeline>
564+
<TimelineItem
565+
id="itemAccLabel"
566+
titleText="Build"
567+
subtitleText="Step 1"
568+
icon={accept}
569+
iconTooltip="Passed"
570+
name="CI Pipeline"
571+
>
572+
Build completed.
573+
</TimelineItem>
574+
</Timeline>
575+
);
576+
577+
cy.get("#itemAccLabel")
578+
.shadow()
579+
.find(".ui5-tli-bubble")
580+
.should("have.attr", "aria-label")
581+
.and("include", "Passed");
582+
});
583+
});
584+
515585
describe("Timeline Header Bar", () => {
516586
describe("Search functionality", () => {
517587
it("should show header bar when slotted", () => {

‎packages/fiori/src/ShellBarSearch.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ class ShellBarSearch extends Search {
3939
autoOpen = false;
4040

4141
_handleSearchIconPress() {
42+
if (isPhone() && this.open) {
43+
this._handleSearchEvent();
44+
return;
45+
}
46+
4247
super._handleSearchIconPress();
4348

4449
if (this.collapsed) {

‎packages/fiori/src/TimelineItem.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,15 @@ class TimelineItem extends UI5Element implements ITimelineItem {
6969
@property()
7070
icon?: string;
7171

72+
/**
73+
* Defines the tooltip of the graphical icon.
74+
* @default undefined
75+
* @public
76+
* @since 2.22.0
77+
*/
78+
@property()
79+
iconTooltip?: string;
80+
7281
/**
7382
* Defines the name of the item, displayed before the `title-text`.
7483
* @default undefined
@@ -235,6 +244,10 @@ class TimelineItem extends UI5Element implements ITimelineItem {
235244
parts.push(this.timelineItemStateText);
236245
}
237246

247+
if (this.iconTooltip) {
248+
parts.push(this.iconTooltip);
249+
}
250+
238251
return parts.join(", ");
239252
}
240253
}

‎packages/fiori/src/TimelineItemTemplate.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,13 @@ export default function TimelineItemTemplate(this: TimelineItem) {
1919
<div class="ui5-tli-icon-outer">
2020
{
2121
this.icon ?
22-
<Icon class="ui5-tli-icon" name={this.icon} mode="Decorative"/>
22+
<Icon
23+
class="ui5-tli-icon"
24+
name={this.icon}
25+
mode="Decorative"
26+
showTooltip={!!this.iconTooltip}
27+
accessibleName={this.iconTooltip}
28+
/>
2329
:
2430
<div class="ui5-tli-dummy-icon-container"></div>
2531
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,33 @@ <h2>Advanced Timeline - Horizontal With Groups and Diverse Components</h2>
364364
</div>
365365
</section>
366366

367+
<section style="width: 100%;">
368+
<h2>Timeline with Various Timeline Item States</h2>
369+
<div style="width: 50%; margin: 1rem;">
370+
<ui5-timeline id="test-timeline">
371+
<ui5-timeline-group-item group-name="Build">
372+
<ui5-timeline-item title="Compile" subtitle="Testing suite A" icon="sap-icon://accept" icon-tooltip="Compilation successful" name="Testing suite A" state="Positive">
373+
Compilation succeeded.
374+
</ui5-timeline-item>
375+
<ui5-timeline-item title="Lint" subtitle="Testing suite B" icon="sap-icon://message-information" name="Testing suite B" state="Information">
376+
Lint completed with minor issues.
377+
</ui5-timeline-item>
378+
</ui5-timeline-group-item>
379+
<ui5-timeline-group-item group-name="Test">
380+
<ui5-timeline-item title="Unit Test" subtitle="Testing suite C" icon="sap-icon://decline" name="Testing suite C" state="Negative">
381+
Unit tests failed.
382+
</ui5-timeline-item>
383+
<ui5-timeline-item title="Integration Test" subtitle="Testing suite D" icon="sap-icon://message-warning" name="Testing suite D" state="Critical">
384+
Integration tests have warnings.
385+
</ui5-timeline-item>
386+
<ui5-timeline-item title="E2E Test" subtitle="Testing suite E" icon="sap-icon://accept" name="Testing suite E" state="Positive">
387+
End-to-end tests passed.
388+
</ui5-timeline-item>
389+
</ui5-timeline-group-item>
390+
</ui5-timeline>
391+
</div>
392+
</section>
393+
367394
<section style="width: 100%;">
368395
<h2>Timeline with Various Timeline Item States</h2>
369396
<div style="width: 50%; margin: 1rem;">

0 commit comments

Comments
 (0)