@ui5/webcomponents-fiori 2.19.2 → 2.20.0-rc.1

package/src/shellbar/templates/ShellBarSearchLegacyTemplate.tsx

@@ -0,0 +1,61 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import type ShellBar from "../../ShellBar.js";
+
+function ShellBarSearchField(this: ShellBar) {
+	return (
+		// .ui5-shellbar-search-field-area is used to measure the width of
+		// the search field. It must be present even if the search is in full-width mode.
+		<div class="ui5-shellbar-search-field-area">
+			{this.showSearchField && !this.showFullWidthSearch && (
+				<div class="ui5-shellbar-search-field ui5-shellbar-gap-start">
+					<slot name="searchField"></slot>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function ShellBarSearchFieldFullWidth(this: ShellBar) {
+	return (
+		<div class="ui5-shellbar-search-full-width-wrapper">
+			<div class="ui5-shellbar-search-full-field">
+				<slot name="searchField"></slot>
+			</div>
+			<Button
+				class="ui5-shellbar-cancel-button ui5-shellbar-gap-start"
+				design={ButtonDesign.Transparent}
+				onClick={this.handleCancelButtonClick}
+			>
+				Cancel
+			</Button>
+		</div>
+	);
+}
+
+function ShellBarSearchButton(this: ShellBar) {
+	const searchAction = this.getAction("search");
+	return (
+		<>
+			{!this.hideSearchButton && (
+				<Button
+					data-ui5-stable={searchAction?.stableDomRef}
+					class="ui5-shellbar-search-button ui5-shellbar-action-button ui5-shellbar-gap-start ui5-shellbar-search-toggle"
+					icon={searchAction?.icon}
+					design="Transparent"
+					onClick={this.handleSearchButtonClick}
+					tooltip={this.actionsAccessibilityInfo.search.title}
+					aria-expanded={this.showSearchField}
+					accessibilityAttributes={this.actionsAccessibilityInfo.search.accessibilityAttributes}
+				/>
+			)}
+		</>
+
+	);
+}
+
+export {
+	ShellBarSearchField,
+	ShellBarSearchButton,
+	ShellBarSearchFieldFullWidth,
+};

package/src/shellbar/templates/ShellBarSearchTemplate.tsx

@@ -0,0 +1,40 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import type ShellBar from "../../ShellBar.js";
+
+function ShellBarSearchField(this: ShellBar) {
+	return (
+		// .ui5-shellbar-search-field-area is used to measure the width of
+		// the search field. It must be present even if the search is in full-width mode.
+		<div class={{
+			"ui5-shellbar-search-field-area ui5-shellbar-gap-start ui5-shellbar-search-toggle": true,
+			"ui5-shellbar-hidden": this.isHidden("search")
+		}}>
+			{!this.showFullWidthSearch && (
+				<slot name="searchField"></slot>
+			)}
+		</div>
+	);
+}
+
+function ShellBarSearchFieldFullWidth(this: ShellBar) {
+	return (
+		<div class="ui5-shellbar-search-full-width-wrapper">
+			<div class="ui5-shellbar-search-full-field">
+				<slot name="searchField"></slot>
+			</div>
+			<Button
+				class="ui5-shellbar-cancel-button ui5-shellbar-gap-start"
+				design={ButtonDesign.Transparent}
+				onClick={this.handleCancelButtonClick}
+			>
+				Cancel
+			</Button>
+		</div>
+	);
+}
+
+export {
+	ShellBarSearchField,
+	ShellBarSearchFieldFullWidth,
+};

package/src/themes/NavigationLayout.css

@@ -86,6 +86,7 @@
 	transform: translateX(100%);
 }
 
+:host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]),
 :host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]) {
 	padding-inline: 0.875rem 1rem;
 }