+ {{#unless _isXXLBreakpoint }}
{{#if hasSearchField}}
{{#if _fullWidthSearch}}
@@ -143,6 +135,19 @@
.accessibilityAttributes={{accInfo.search.accessibilityAttributes}}
>
{{/if}}
+ {{/unless}}
+
+ {{#if showCoPilot}}
+
+ {{/if}}
{{#each customItemsInfo}}
{{/inline}}
-
-{{#*inline "coPilot"}}
-
-{{/inline}}
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index e85375f8039d..c552b4e36d13 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -16,6 +16,7 @@ import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Lis
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import Popover from "@ui5/webcomponents/dist/Popover.js";
import Button from "@ui5/webcomponents/dist/Button.js";
+import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
import type Input from "@ui5/webcomponents/dist/Input.js";
import type { IButton } from "@ui5/webcomponents/dist/Interfaces.js";
import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
@@ -37,6 +38,10 @@ import ShellBarPopoverTemplate from "./generated/templates/ShellBarPopoverTempla
import shellBarStyles from "./generated/themes/ShellBar.css.js";
import ShellBarPopoverCss from "./generated/themes/ShellBarPopover.css.js";
+// Icons
+import "@ui5/webcomponents-icons/dist/da.js";
+import "@ui5/webcomponents-icons/dist/da-2.js";
+
import {
SHELLBAR_LABEL,
SHELLBAR_LOGO,
@@ -402,12 +407,6 @@ class ShellBar extends UI5Element {
@property()
breakpointSize!: string;
- /**
- * @private
- */
- @property({ type: Boolean })
- coPilotActive!: boolean;
-
/**
* @private
*/
@@ -429,6 +428,12 @@ class ShellBar extends UI5Element {
@property({ type: Boolean, noAttribute: true })
_fullWidthSearch!: boolean;
+ @property({ type: Boolean, noAttribute: true })
+ _coPilotPressed!: boolean;
+
+ @property({ type: Boolean, noAttribute: true })
+ _isXXLBreakpoint!: boolean;
+
/**
* Defines the
ui5-shellbar aditional items.
*
@@ -498,11 +503,20 @@ class ShellBar extends UI5Element {
_defaultItemPressPrevented: boolean;
menuItemsObserver: MutationObserver;
coPilot?: ShellBarCoPilot;
+ _coPilotIcon: string;
_debounceInterval?: Timeout | null;
_hiddenIcons?: Array
;
_handleResize: ResizeObserverCallback;
_headerPress: () => Promise;
+ static get CO_PILOT_ICON_PRESSED() {
+ return "sap-icon://da-2";
+ }
+
+ static get CO_PILOT_ICON_UNPRESSED() {
+ return "sap-icon://da";
+ }
+
static get FIORI_3_BREAKPOINTS() {
return [
599,
@@ -528,6 +542,7 @@ class ShellBar extends UI5Element {
this._itemsInfo = [];
this._isInitialRendering = true;
+ this._coPilotIcon = ShellBar.CO_PILOT_ICON_UNPRESSED;
// marks if preventDefault() is called in item's press handler
this._defaultItemPressPrevented = false;
@@ -554,6 +569,12 @@ class ShellBar extends UI5Element {
};
}
+ _toggleCoPilotIcon(button: ToggleButton) {
+ this._coPilotIcon = !this._coPilotPressed ? ShellBar.CO_PILOT_ICON_PRESSED : ShellBar.CO_PILOT_ICON_UNPRESSED;
+ button.icon = this._coPilotIcon;
+ this._coPilotPressed = !this._coPilotPressed;
+ }
+
_debounce(fn: () => Promise, delay: number) {
clearTimeout(this._debounceInterval!);
this._debounceInterval = setTimeout(() => {
@@ -616,34 +637,15 @@ class ShellBar extends UI5Element {
}
}
- _fireCoPilotClick() {
+ _fireCoPilotClick(e: Event) {
this.fireEvent("co-pilot-click", {
targetRef: this.shadowRoot!.querySelector(".ui5-shellbar-coPilot")!,
});
+ this._toggleCoPilotIcon(e.target as ToggleButton);
}
- _coPilotClick() {
- this._fireCoPilotClick();
- }
-
- _coPilotKeydown(e: KeyboardEvent) {
- if (isSpace(e)) {
- this.coPilotActive = true;
- e.preventDefault();
- return;
- }
-
- if (isEnter(e)) {
- this.coPilotActive = true;
- this._fireCoPilotClick();
- }
- }
-
- _coPilotKeyup(e: KeyboardEvent) {
- if (isSpace(e)) {
- this._fireCoPilotClick();
- }
- this.coPilotActive = false;
+ _coPilotClick(e: MouseEvent) {
+ this._fireCoPilotClick(e);
}
onBeforeRendering() {
@@ -693,6 +695,7 @@ class ShellBar extends UI5Element {
this.breakpointSize = mappedSize;
}
+ this._isXXLBreakpoint = this.breakpointSize === "XXL";
return mappedSize;
}
@@ -953,6 +956,19 @@ class ShellBar extends UI5Element {
press: this._handleSearchIconPress.bind(this),
show: !!this.searchField.length,
},
+ {
+ icon: this._coPilotIcon,
+ text: this._copilotText,
+ classes: `${this.showCoPilot ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
+ priority: 4,
+ domOrder: this.showCoPilot ? (++domOrder) : -1,
+ styles: {
+ order: this.showCoPilot ? 1 : -10,
+ },
+ id: `${this.id}-item-coPilot`,
+ press: this._coPilotClick.bind(this),
+ show: !!this.showCoPilot,
+ },
...this.items.map((item: ShellBarItem) => {
item._getRealDomRef = () => this.getDomRef()!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
return {
@@ -1108,6 +1124,9 @@ class ShellBar extends UI5Element {
search: {
"ui5-shellbar-hidden-button": this.isIconHidden("search"),
},
+ copilot: {
+ "ui5-shellbar-hidden-button": this.isIconHidden(this._coPilotIcon),
+ },
overflow: {
"ui5-shellbar-hidden-button": this.isIconHidden("overflow"),
},
diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties
index f4d37b6c7f1f..021810113044 100644
--- a/packages/fiori/src/i18n/messagebundle.properties
+++ b/packages/fiori/src/i18n/messagebundle.properties
@@ -119,7 +119,7 @@ SHELLBAR_LABEL = Shell Bar
SHELLBAR_LOGO = Logo
#XACT: ARIA announcement for the CoPilot button
-SHELLBAR_COPILOT = CoPilot
+SHELLBAR_COPILOT = Joule
#XACT: ARIA announcement for the notifications button
SHELLBAR_NOTIFICATIONS = {0} Notifications
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
index fb624ce70459..ecf216dcf123 100644
--- a/packages/fiori/src/themes/ShellBar.css
+++ b/packages/fiori/src/themes/ShellBar.css
@@ -10,6 +10,8 @@
--_ui5_input_border_radius: var(--_ui5_shellbar_input_border_radius);
--_ui5_input_focus_border_radius: var(--_ui5_shellbar_input_focus_border_radius);
--_ui5_input_background_color: var(--_ui5_shellbar_input_background_color);
+ --_ui5_input_focus_outline_color: var(--_ui5_shellbar_input_focus_outline_color);
+ --_ui5_input_margin_top_bottom: 0;
}
.ui5-shellbar-root {
@@ -72,10 +74,6 @@
color: var(--_ui5_shellbar_button_active_color);
}
-.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow {
- border-top-color: var(--_ui5_shellbar_button_active_color);
-}
-
.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus {
outline: var(--_ui5_shellbar_logo_outline);
outline-offset: var(--_ui5_shellbar_outline_offset);
@@ -97,6 +95,7 @@ slot[name="profile"] {
border: none;
}
+.ui5-shellbar-menu-button-arrow,
.ui5-shellbar-menu-button-title,
.ui5-shellbar-title {
display: inline-block;
@@ -127,16 +126,7 @@ slot[name="profile"] {
}
.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
- display: inline-block;
margin-inline-start: 0.375rem;
- width: 10px;
- height: 10px;
- width: 0px;
- height: 0px;
- color: var(--sapShell_InteractiveTextColor);
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid var(--sapShell_TextColor);
}
.ui5-shellbar-overflow-container {
@@ -152,10 +142,19 @@ slot[name="profile"] {
height: var(--_ui5_shellbar_overflow_container_middle_height);
width: 0;
flex-shrink: 0;
+ width: 7.5rem;
+}
+
+:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-middle {
+ width: 0;
}
-:host([show-co-pilot]) .ui5-shellbar-overflow-container-middle {
- width: 3rem;
+:host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-middle {
+ width: 35rem;
+}
+
+:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-left {
+ flex-shrink: 0;
}
:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
@@ -207,6 +206,19 @@ slot[name="profile"] {
border-radius: var(--_ui5_shellbar_logo_border_radius);
}
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
+ box-shadow: var(--_ui5_shellbar_button_box_shadow);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active {
+ box-shadow: var(--_ui5_shellbar_button_box_shadow_active);
+}
+
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow,
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-title {
+ color: var(--sapShell_Active_TextColor);
+}
+
.ui5-shellbar-menu-button .ui5-shellbar-logo:hover {
box-shadow: none;
}
@@ -247,7 +259,7 @@ slot[name="profile"] {
justify-content: flex-start;
margin-inline-end: 0.5rem;
max-width: 75%;
- flex-shrink: 0;
+ flex-shrink: 1;
flex-grow: 0;
}
@@ -255,13 +267,9 @@ slot[name="profile"] {
margin-inline-end: 0.5rem;
}
-:host([show-co-pilot]) .ui5-shellbar-overflow-container-left {
+:host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-left {
flex-basis: 50%;
- max-width: calc(50% - 1.5rem);
-}
-
-:host([show-co-pilot]) .ui5-shellbar-title {
- flex-grow: 0;
+ max-width: calc(50% - 18.25rem);
}
.ui5-shellbar-menu-button {
@@ -281,7 +289,9 @@ slot[name="profile"] {
-moz-user-select: none;
user-select: none;
cursor: pointer;
+ background: var(--sapButton_Lite_Background);
border: var(--_ui5_shellbar_button_border);
+ color: var(--sapShell_TextColor);
}
:host(:not([with-logo])) .ui5-shellbar-menu-button {
@@ -298,10 +308,6 @@ slot[name="profile"] {
max-width: 100%;
}
-:host([show-co-pilot]) .ui5-shellbar-overflow-container-right {
- flex-basis: 0%;
-}
-
:host(:not([show-search-field])) .ui5-shellbar-overflow-container-right {
padding-inline-start: 8rem;
}
@@ -342,12 +348,6 @@ slot[name="profile"] {
visibility: hidden;
}
-.ui5-shellbar-coPilot {
- height: 100%;
- background-color: transparent;
- cursor: pointer;
-}
-
:host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
padding-inline-start: 1rem;
}
@@ -428,6 +428,7 @@ slot[name="profile"] {
::slotted([ui5-input]) {
background: var(--_ui5_shellbar_search_field_background);
border: var(--_ui5_shellbar_search_field_border);
+ box-shadow: var(--_ui5_shellbar_search_field_box_shadow);
color: var(--_ui5_shellbar_search_field_color);
height: 2.25rem;
width: 100%;
@@ -447,74 +448,11 @@ slot[name="profile"] {
pointer-events: none;
}
-.ui5-shellbar-copilot-wrapper {
- position: relative;
- outline: none;
- box-sizing: border-box;
- height: 100%;
-}
-
-.ui5-shellbar-copilot-wrapper:hover {
- border-radius: var(--sapButton_BorderCornerRadius);
- background: var(--sapShell_Hover_Background);
-}
-
-.ui5-shellbar-copilot-wrapper:active,
-.ui5-shellbar-copilot-wrapper[active] {
- background: var(--sapShell_Active_Background);
-}
-
-.ui5-shellbar-copilot-wrapper:hover::after,
-.ui5-shellbar-copilot-wrapper:focus::after {
- content: "";
- position: absolute;
- left: var(--_ui5_shellbar_copilot_focus_offset);
- right: var(--_ui5_shellbar_copilot_focus_offset);
- top: var(--_ui5_shellbar_copilot_focus_offset);
- bottom: var(--_ui5_shellbar_copilot_focus_offset);
- outline: none;
- pointer-events: none;
- border-radius: var(--_ui5_shellbar_logo_outline_border_radius);
-}
-
-.ui5-shellbar-copilot-wrapper:hover::after {
- background: transparent;
- box-shadow: var(--sapContent_Interaction_Shadow);
-}
-
-.ui5-shellbar-copilot-wrapper:focus::after {
- border: var(--_ui5_shellbar_logo_outline);
-}
-
.ui5-shellbar-co-pilot-placeholder {
width: 2.75rem;
height: 2.75rem;
}
-.ui5-shellbar-co-pilot-circle {
- fill: var(--sapShellColor);
-}
-
-.ui5-shellbar-co-pilot-color1 {
- stop-color: var(--_ui5_shellbar_copilot_stop_color1);
-}
-
-.ui5-shellbar-co-pilot-color2 {
- stop-color: var(--_ui5_shellbar_copilot_stop_color2);
-}
-
-.ui5-shellbar-co-pilot-opacity7 {
- stop-opacity: 0.7;
-}
-
-.ui5-shellbar-co-pilot-opacity36 {
- stop-opacity: 0.36;
-}
-
-.ui5-shellbar-co-pilot-opacity2 {
- stop-opacity: 0.2;
-}
-
::slotted([ui5-button][slot="startButton"]) {
margin-inline: 0 0.5rem;
justify-content: center;
diff --git a/packages/fiori/src/themes/base/ShellBar-parameters.css b/packages/fiori/src/themes/base/ShellBar-parameters.css
index c7f1385e75f1..b84e3a44f8b1 100644
--- a/packages/fiori/src/themes/base/ShellBar-parameters.css
+++ b/packages/fiori/src/themes/base/ShellBar-parameters.css
@@ -5,6 +5,7 @@
--_ui5_shellbar_outline_offset: -0.0625rem;
--_ui5_shellbar_logo_outline_offset: var(--_ui5_shellbar_outline_offset);
--_ui5_shellbar_button_box_shadow: none;
+ --_ui5_shellbar_button_box_shadow_active: none;
--_ui5_shellbar_button_border: none;
--_ui5_shellbar_button_border_radius: 0.25rem;
--_ui5_shellbar_button_focused_border: 0.0625rem dotted var(--sapContent_FocusColor);
@@ -17,9 +18,11 @@
--_ui5_shellbar_search_field_height: 2.25rem;
--_ui5_shellbar_search_button_border_radius: 0.25rem;
--_ui5_shellbar_search_field_background: var(--sapShellColor);
- --_ui5_shellbar_search_field_border: 1px solid var(--sapShell_InteractiveBorderColor);
+ --_ui5_shellbar_search_field_border: 0.0625rem solid var(--sapShell_InteractiveBorderColor);
+ --_ui5_shellbar_search_field_box_shadow: none;
--_ui5_shellbar_search_field_color: var(--sapShell_TextColor);
- --_ui5_shellbar_search_field_outline_focused: 1px dotted var(--sapContent_ContrastFocusColor);
+ --_ui5_shellbar_search_field_outline_focused: 0.0625rem dotted var(--sapContent_ContrastFocusColor);
+ --_ui5_shellbar_input_focus_outline_color: inherit;
--_ui5_shellbar_overflow_container_middle_height: 2.5rem;
--_ui5_shellbar_menu_button_title_font_size: 0.75rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css
index d50e620170ae..4600c81998a2 100644
--- a/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css
@@ -3,7 +3,7 @@
--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);
--_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);
--_ui5_shellbar_logo_outline_offset: -0.125rem;
- --_ui5_shellbar_outline_offset: -0.1875rem;
+ --_ui5_shellbar_outline_offset: -0.25rem;
--_ui5_shellbar_button_border: none;
--_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius);
@@ -11,6 +11,7 @@
--_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground);
--_ui5_shellbar_logo_border_radius: 0.5rem;
--_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow);
+ --_ui5_shellbar_button_box_shadow_active: inset 0 0 0 0.0625rem var(--sapButton_Lite_Active_BorderColor);
--_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor);
--_ui5_shellbar_logo_outline_border_radius: var(--sapField_BorderCornerRadius);
--_ui5_shellbar_copilot_stop_color1: #0070F2;
@@ -23,7 +24,9 @@
--_ui5_shellbar_search_field_border: none;
--_ui5_shellbar_search_field_color: var(--sapShell_InteractiveTextColor);
--_ui5_shellbar_search_field_background_hover: var(--sapShell_Hover_Background);
- --_ui5_shellbar_search_field_box_shadow_hover: var(--sapContent_Interaction_Shadow);
+ --_ui5_shellbar_search_field_box_shadow: var(--sapField_Shadow), inset 0 -.0625rem var(--sapField_BorderColor);
+ --_ui5_shellbar_search_field_box_shadow_hover: var(--sapField_Hover_Shadow), inset 0 -.0625rem var(--sapField_Hover_BorderColor);
+ --_ui5_shellbar_input_focus_outline_color: var(--sapField_Active_BorderColor);
--_ui5_shellbar_overflow_container_middle_height: 3rem;
--_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size);
}
diff --git a/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css
index 89ea7fecf7bd..4600c81998a2 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css
@@ -3,7 +3,7 @@
--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);
--_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);
--_ui5_shellbar_logo_outline_offset: -0.125rem;
- --_ui5_shellbar_outline_offset: -0.1875rem;
+ --_ui5_shellbar_outline_offset: -0.25rem;
--_ui5_shellbar_button_border: none;
--_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius);
@@ -11,6 +11,7 @@
--_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground);
--_ui5_shellbar_logo_border_radius: 0.5rem;
--_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow);
+ --_ui5_shellbar_button_box_shadow_active: inset 0 0 0 0.0625rem var(--sapButton_Lite_Active_BorderColor);
--_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor);
--_ui5_shellbar_logo_outline_border_radius: var(--sapField_BorderCornerRadius);
--_ui5_shellbar_copilot_stop_color1: #0070F2;
@@ -23,13 +24,15 @@
--_ui5_shellbar_search_field_border: none;
--_ui5_shellbar_search_field_color: var(--sapShell_InteractiveTextColor);
--_ui5_shellbar_search_field_background_hover: var(--sapShell_Hover_Background);
- --_ui5_shellbar_search_field_box_shadow_hover: var(--sapContent_Interaction_Shadow);
+ --_ui5_shellbar_search_field_box_shadow: var(--sapField_Shadow), inset 0 -.0625rem var(--sapField_BorderColor);
+ --_ui5_shellbar_search_field_box_shadow_hover: var(--sapField_Hover_Shadow), inset 0 -.0625rem var(--sapField_Hover_BorderColor);
+ --_ui5_shellbar_input_focus_outline_color: var(--sapField_Active_BorderColor);
--_ui5_shellbar_overflow_container_middle_height: 3rem;
--_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size);
}
:root {
- --_ui5_shellbar_border_radius: 1.125rem;
- --_ui5_shellbar_focus_border_radius: 1.125rem;
- --_ui5_shellbar_background_color: var(--sapShell_InteractiveBackground);
+ --_ui5_shellbar_input_border_radius: 1.125rem;
+ --_ui5_shellbar_input_focus_border_radius: 1.125rem;
+ --_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground);
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_dark_exp/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_dark_exp/ShellBar-parameters.css
index 89ea7fecf7bd..7ba65246d8cc 100644
--- a/packages/fiori/src/themes/sap_horizon_dark_exp/ShellBar-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_dark_exp/ShellBar-parameters.css
@@ -11,6 +11,7 @@
--_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground);
--_ui5_shellbar_logo_border_radius: 0.5rem;
--_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow);
+ --_ui5_shellbar_button_box_shadow_active: inset 0 0 0 0.0625rem var(--sapButton_Lite_Active_BorderColor);
--_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor);
--_ui5_shellbar_logo_outline_border_radius: var(--sapField_BorderCornerRadius);
--_ui5_shellbar_copilot_stop_color1: #0070F2;
diff --git a/packages/fiori/src/themes/sap_horizon_exp/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_exp/ShellBar-parameters.css
index d50e620170ae..2c67097b637e 100644
--- a/packages/fiori/src/themes/sap_horizon_exp/ShellBar-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_exp/ShellBar-parameters.css
@@ -11,6 +11,7 @@
--_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground);
--_ui5_shellbar_logo_border_radius: 0.5rem;
--_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow);
+ --_ui5_shellbar_button_box_shadow_active: inset 0 0 0 0.0625rem var(--sapButton_Lite_Active_BorderColor);
--_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor);
--_ui5_shellbar_logo_outline_border_radius: var(--sapField_BorderCornerRadius);
--_ui5_shellbar_copilot_stop_color1: #0070F2;
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css
index b951f25a2932..a8a1a3784235 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css
@@ -9,5 +9,7 @@
--_ui5_shellbar_outline_offset: -0.1875rem;
--_ui5_shellbar_search_field_height: 2.25rem;
--_ui5_shellbar_search_field_outline_focused: none;
+ --_ui5_shellbar_search_field_background_hover: var(--sapShellColor);
+ --_ui5_shellbar_search_field_box_shadow_hover: none;
--_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size);
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css
index b951f25a2932..a8a1a3784235 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css
@@ -9,5 +9,7 @@
--_ui5_shellbar_outline_offset: -0.1875rem;
--_ui5_shellbar_search_field_height: 2.25rem;
--_ui5_shellbar_search_field_outline_focused: none;
+ --_ui5_shellbar_search_field_background_hover: var(--sapShellColor);
+ --_ui5_shellbar_search_field_box_shadow_hover: none;
--_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size);
}
\ No newline at end of file
diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js
index c8c3d96c5a2d..dfb42dbcee00 100644
--- a/packages/fiori/test/specs/ShellBar.spec.js
+++ b/packages/fiori/test/specs/ShellBar.spec.js
@@ -414,28 +414,10 @@ describe("Component Behavior", () => {
assert.strictEqual(await inputData.getValue(), "key2", "The user defined attributes are available.");
});
- it("tests if searchfield toggles when clicking on search icon", async () => {
- const searchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
- const searchField = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-field");
-
- assert.strictEqual(await searchField.isDisplayed(), false, "Search is hidden by default");
-
- await searchIcon.click();
- assert.ok(await searchField.isDisplayed(), "Search is visible after clicking on icon");
-
- await searchIcon.click();
- assert.notOk(await searchField.isDisplayed(), "Search is hidden after clicking again on the icon");
- });
-
- it("tests if searchfield toggles when altering the showSearchField property", async () => {
- const searchField = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-field");
- const shellBar = await browser.$("#shellbar");
+ it("tests if searchfield is in the middle", async () => {
+ const searchField = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-container-middle").shadow$("slot[name=searchField]");
- assert.strictEqual(await searchField.isDisplayed(), false, "Search is hidden by default");
-
- await shellBar.setProperty('showSearchField', true);
- assert.ok(await searchField.isDisplayed(), "Search is visible after altering the showSearchField property of the ShellBar");
- await shellBar.setProperty('showSearchField', false); // Clean Up
+ assert.ok(await searchField.isExisting(), "Search slot is inside middle container");
});
});
@@ -466,7 +448,7 @@ describe("Component Behavior", () => {
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
- const notificationListItem = await overflowPopover.$("ui5-list ui5-li:nth-child(4)");
+ const notificationListItem = await overflowPopover.$("ui5-list ui5-li:nth-child(5)");
const input = await browser.$("#press-input");
await overflowButton.click();
@@ -488,7 +470,7 @@ describe("Component Behavior", () => {
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
- const productSwitchIcon = await overflowPopover.$("ui5-list ui5-li:nth-child(5)");
+ const productSwitchIcon = await overflowPopover.$("ui5-list ui5-li:nth-child(6)");
const input = await browser.$("#press-input");
await overflowButton.click();
@@ -554,7 +536,7 @@ describe("Component Behavior", () => {
const popover = await getOverflowPopover("shellbar");
const items = await popover.$$("ui5-li");
- psButtonText = await [...items][4].getText();
+ psButtonText = await [...items][5].getText();
assert.strictEqual(psButtonText, await shellBar.getProperty("_productsText"), "Product switch button text is translated in overflow popover");
diff --git a/packages/playground/_stories/fiori/ShellBar/ShellBar.stories.ts b/packages/playground/_stories/fiori/ShellBar/ShellBar.stories.ts
index 4ee5ac7eb494..6d66c629638d 100644
--- a/packages/playground/_stories/fiori/ShellBar/ShellBar.stories.ts
+++ b/packages/playground/_stories/fiori/ShellBar/ShellBar.stories.ts
@@ -31,7 +31,6 @@ const Template: UI5StoryArgs = (
secondary-title="${ifDefined(args.secondaryTitle)}"
notifications-count="${ifDefined(args.notificationsCount)}"
?show-notifications="${ifDefined(args.showNotifications)}"
- ?show-product-switch="${ifDefined(args.showProductSwitch)}"
?show-co-pilot="${ifDefined(args.showCoPilot)}"
?show-search-field="${ifDefined(args.showSearchField)}"
.accessibilityRoles="${ifDefined(args.accessibilityRoles)}"
@@ -69,8 +68,8 @@ Search.args = {
searchField: ``,
};
-export const WithCoPilot = Template.bind({});
-WithCoPilot.args = {
+export const WithJoule = Template.bind({});
+WithJoule.args = {
primaryTitle: "Corporate Portal",
secondaryTitle: "secondary title",
showCoPilot: true,
@@ -91,7 +90,6 @@ export const Advanced: StoryFn = () => {
secondary-title="secondary title"
notifications-count="99+"
show-notifications=""
- show-product-switch=""
show-co-pilot=""
>