Skip to content

Commit 26cf0a4

Browse files
dobrinyonkovdobrinyonkov
committed
fix: search fixes
1 parent 210698d commit 26cf0a4

11 files changed

Lines changed: 233 additions & 110 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,5 @@ packages/playground/assets/*.gif
9999
packages/playground/assets/*.css
100100
packages/playground/assets/test/pages/*.css
101101
packages/playground/assets/test/pages/*.js
102+
103+
AGENTS.md

‎AGENTS.md‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

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

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1089,7 +1089,7 @@ describe("Events", () => {
10891089
.find(".ui5-shellbar-overflow-popover")
10901090
.should("to.exist")
10911091
.invoke("prop", "open", true);
1092-
1092+
10931093
});
10941094
});
10951095
});
@@ -1199,6 +1199,60 @@ describe("ButtonBadge in ShellBar", () => {
11991199
});
12001200
});
12011201

1202+
describe("Search Controllers", () => {
1203+
it("Test search doesn't collapse in full-screen mode during resize", () => {
1204+
cy.mount(
1205+
<ShellBar id="shellbar" showSearchField={true} showNotifications={true} showProductSwitch={true}>
1206+
<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
1207+
<ShellBarSearch id="search" slot="searchField"></ShellBarSearch>
1208+
<ShellBarItem icon={activities} text="Action"></ShellBarItem>
1209+
<Button slot="content">Button</Button>
1210+
</ShellBar>
1211+
);
1212+
1213+
// search not focused
1214+
cy.get("#search").should("not.be.focused");
1215+
// search field is empty
1216+
cy.get("#search").should("have.value", "");
1217+
1218+
cy.viewport(400, 800);
1219+
cy.wait(RESIZE_THROTTLE_RATE);
1220+
1221+
cy.get("#shellbar").should("have.prop", "showSearchField", true);
1222+
1223+
cy.viewport(360, 800);
1224+
cy.wait(RESIZE_THROTTLE_RATE);
1225+
1226+
cy.get("#shellbar").should("have.prop", "showSearchField", true);
1227+
});
1228+
1229+
it("Test legacy search doesn't collapse in full-screen mode during resize", () => {
1230+
cy.mount(
1231+
<ShellBar id="shellbar" showSearchField={true} showNotifications={true} showProductSwitch={true}>
1232+
<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
1233+
<Input id="search" slot="searchField"></Input>
1234+
<ShellBarItem icon={activities} text="Action"></ShellBarItem>
1235+
<Button slot="content">Button</Button>
1236+
</ShellBar>
1237+
);
1238+
1239+
// search not focused
1240+
cy.get("#search").should("not.be.focused");
1241+
// search field is empty
1242+
cy.get("#search").should("have.value", "");
1243+
1244+
cy.viewport(400, 800);
1245+
cy.wait(RESIZE_THROTTLE_RATE);
1246+
1247+
cy.get("#shellbar").should("have.prop", "showSearchField", true);
1248+
1249+
cy.viewport(360, 800);
1250+
cy.wait(RESIZE_THROTTLE_RATE);
1251+
1252+
cy.get("#shellbar").should("have.prop", "showSearchField", true);
1253+
});
1254+
});
1255+
12021256
describe("Keyboard Navigation", () => {
12031257
it("Test logo area elements are not rendered when no logo and primaryTitle are provided", () => {
12041258
cy.mount(<ShellBar></ShellBar>);

‎packages/fiori/src/ShellBarV2Template.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,13 @@ export default function ShellBarV2Template(this: ShellBarV2) {
4343
<div class="ui5-shellbar-wrapper">
4444

4545
{this.enabledFeatures.startButton && (
46-
<div class="ui5-shellbar-start-button">
46+
<div class="ui5-shellbar-start-button ui5-shellbar-gap-end">
4747
<slot name="startButton"></slot>
4848
</div>
4949
)}
5050

5151
{this.enabledFeatures.branding && (
52-
<div class={{
53-
"ui5-shellbar-branding-area": true,
54-
"ui5-shellbar-gap-start": this.enabledFeatures.startButton,
55-
}}>
52+
<div class="ui5-shellbar-branding-area">
5653
<slot name="branding"></slot>
5754
</div>
5855
)}

‎packages/fiori/src/shellbarv2/ShellBarSearch.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ class ShellBarV2Search implements IShellBarSearchController {
2727
private getSearchState: () => boolean;
2828
private setSearchState: (expanded: boolean) => void;
2929
private getCSSVariable: (variable: string) => string;
30+
private initialRender = true;
3031

3132
constructor({
3233
getOverflowed,
@@ -74,13 +75,20 @@ class ShellBarV2Search implements IShellBarSearchController {
7475

7576
const searchHasFocus = document.activeElement === this.getSearchField();
7677
const searchHasValue = !!this.getSearchField()?.value;
77-
const preventCollapse = searchHasFocus || searchHasValue;
78+
79+
// On initial load, allow search to collapse even if it would trigger full-screen mode.
80+
// This prevents search from showing in full-screen when page loads on small screens.
81+
// After initial render, prevent collapse in full-screen mode during resize.
82+
const inFullScreen = !this.initialRender && this.shouldShowFullScreen();
83+
const preventCollapse = searchHasFocus || searchHasValue || inFullScreen;
7884

7985
if (hiddenItems > 0 && !preventCollapse) {
8086
this.setSearchState(false);
8187
} else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {
8288
this.setSearchState(true);
8389
}
90+
91+
this.initialRender = false;
8492
}
8593

8694
/**

‎packages/fiori/src/shellbarv2/ShellBarSearchLegacy.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ class ShellBarV2SearchLegacy implements IShellBarSearchController {
2424
private setSearchState: (expanded: boolean) => void;
2525
private getCSSVariable: (variable: string) => string;
2626
private getDisableSearchCollapse: () => boolean;
27+
private initialRender = true;
2728

2829
constructor({
2930
getOverflowed,
@@ -75,13 +76,20 @@ class ShellBarV2SearchLegacy implements IShellBarSearchController {
7576
const searchField = this.getSearchField();
7677
const searchHasFocus = searchField?.contains(document.activeElement) || false;
7778
const searchHasValue = this.hasValue(searchField);
78-
const preventCollapse = searchHasFocus || searchHasValue;
79+
80+
// On initial load, allow search to collapse even if it would trigger full-screen mode.
81+
// This prevents search from showing in full-screen when page loads on small screens.
82+
// After initial render, prevent collapse in full-screen mode during resize.
83+
const inFullScreen = !this.initialRender && this.shouldShowFullScreen();
84+
const preventCollapse = searchHasFocus || searchHasValue || inFullScreen;
7985

8086
if (hiddenItems > 0 && !preventCollapse) {
8187
this.setSearchState(false);
8288
} else if (availableSpace + this.getSearchButtonSize() > searchFieldWidth) {
8389
this.setSearchState(true);
8490
}
91+
92+
this.initialRender = false;
8593
}
8694

8795
/**

‎packages/fiori/src/shellbarv2/templates/ShellBarSearchLegacyTemplate.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Button from "@ui5/webcomponents/dist/Button.js";
2+
import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
23
import type ShellBarV2 from "../../ShellBarV2.js";
34

45
function ShellBarV2SearchField(this: ShellBarV2) {
@@ -23,6 +24,7 @@ function ShellBarV2SearchFieldFullWidth(this: ShellBarV2) {
2324
</div>
2425
<Button
2526
class="ui5-shellbar-cancel-button ui5-shellbar-gap-start"
27+
design={ButtonDesign.Transparent}
2628
onClick={this.handleCancelButtonClick}
2729
>
2830
Cancel

‎packages/fiori/src/shellbarv2/templates/ShellBarSearchTemplate.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Button from "@ui5/webcomponents/dist/Button.js";
2+
import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
23
import type ShellBarV2 from "../../ShellBarV2.js";
34

45
function ShellBarV2SearchField(this: ShellBarV2) {
@@ -21,6 +22,7 @@ function ShellBarV2SearchFieldFullWidth(this: ShellBarV2) {
2122
</div>
2223
<Button
2324
class="ui5-shellbar-cancel-button ui5-shellbar-gap-start"
25+
design={ButtonDesign.Transparent}
2426
onClick={this.handleCancelButtonClick}
2527
>
2628
Cancel

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -319,16 +319,6 @@ slot[name="profile"] {
319319
flex: 1;
320320
}
321321

322-
.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-cancel-button {
323-
width: auto;
324-
flex-shrink: 0;
325-
color: var(--_ui5-shellbar_cancel-button-color);
326-
}
327-
328-
.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-cancel-button:hover {
329-
color: var(--_ui5-shellbar_cancel-button-color);
330-
}
331-
332322
.ui5-shellbar-search-full-width-wrapper ::slotted([ui5-shellbar-search]) {
333323
max-width: unset;
334324
width: 100%;

0 commit comments

Comments
 (0)