Skip to content

feat(ui5-shellbar-search): poc busy indicator prop #12484

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(ui5-shellbar-search): poc busy indicator prop #12484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 12 additions & 0 deletions packages/fiori/src/ShellBarSearch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Search from "./Search.js";
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
import ShellBarSearchTemplate from "./ShellBarSearchTemplate.js";
import ShellBarSearchCss from "./generated/themes/ShellBarSearch.css.js";
import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";

import {
SEARCH_FIELD_SEARCH_ICON,
Expand All @@ -27,6 +28,9 @@ import {
Search.styles,
ShellBarSearchCss,
],
dependencies: [
BusyIndicator,
],
})

class ShellBarSearch extends Search {
Expand All @@ -38,6 +42,14 @@ class ShellBarSearch extends Search {
@property({ type: Boolean })
autoOpen = false;

/**
* Indicates whether the search field is in busy state.
* @default false
* @public
*/
@property({ type: Boolean })
busy = false;

_handleSearchIconPress() {
super._handleSearchIconPress();

Expand Down
5 changes: 4 additions & 1 deletion packages/fiori/src/ShellBarSearchTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import SearchFieldTemplate from "./SearchFieldTemplate.js";
import type ShellBarSearch from "./ShellBarSearch.js";
import ShellBarSearchPopoverTemplate from "./ShellBarSearchPopoverTemplate.js";
import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";

export default function ShellBarSearchTemplate(this: ShellBarSearch) {
return (
<>
{ SearchFieldTemplate.call(this) }
<BusyIndicator active={this.busy} delay={0} style="width: 100%;">
{ SearchFieldTemplate.call(this) }
</BusyIndicator>
{ ShellBarSearchPopoverTemplate.call(this) }
</>
);
Expand Down
93 changes: 93 additions & 0 deletions packages/fiori/test/pages/ShellBar_with_busy_search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ShellBar - Busy Search Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<script data-ui5-config type="application/json">
{
"rtl": false
}
</script>

<script src="%VITE_BUNDLE_PATH%" type="module"></script>

<style>
body {
font-family: "72", "72full", Arial, Helvetica, sans-serif;
padding: 1rem;
}

.demo-section {
margin-bottom: 2rem;
}

h2 {
margin-bottom: 1rem;
}

.controls {
margin-bottom: 1rem;
}
</style>
</head>

<body>
<div class="demo-section">
<h2>ShellBar with Busy Search - POC</h2>
<p>This demo shows ShellBarSearch with internal BusyIndicator wrapping using the <code>busy</code> property.</p>

<div class="controls">
<ui5-button id="toggleBusy">Toggle Busy State</ui5-button>
</div>

<ui5-shellbar
id="shellbar"
primary-title="Corporate Portal"
secondary-title="secondary title"
show-notifications
notifications-count="22">

<ui5-shellbar-search
id="searchField"
slot="searchField"
placeholder="Search">
</ui5-shellbar-search>

<ui5-avatar slot="profile" initials="JD"></ui5-avatar>
</ui5-shellbar>
</div>

<div class="demo-section">
<h2>Standalone ShellBarSearch with Busy</h2>
<p>ShellBarSearch outside of ShellBar for easier testing.</p>

<div class="controls">
<ui5-button id="toggleBusyStandalone">Toggle Busy State</ui5-button>
</div>

<ui5-shellbar-search
id="standaloneSearch"
placeholder="Search items...">
</ui5-shellbar-search>
</div>

<script>
const searchField = document.getElementById("searchField");
const toggleButton = document.getElementById("toggleBusy");

toggleButton.addEventListener("click", () => {
searchField.busy = !searchField.busy;
});

const standaloneSearch = document.getElementById("standaloneSearch");
const toggleStandaloneButton = document.getElementById("toggleBusyStandalone");

toggleStandaloneButton.addEventListener("click", () => {
standaloneSearch.busy = !standaloneSearch.busy;
});
</script>
</body>
</html>

Loading