From ed5c20ffb42dd5f3eb81f77819fd40a9f7abbe08 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Fri, 26 Jan 2024 14:58:35 +0200 Subject: [PATCH] feat(ui5-shellbar): introducing Joule (#8036) --- packages/fiori/src/ShellBar.hbs | 58 +++----- packages/fiori/src/ShellBar.ts | 77 +++++++---- .../fiori/src/i18n/messagebundle.properties | 2 +- packages/fiori/src/themes/ShellBar.css | 128 +++++------------- .../src/themes/base/ShellBar-parameters.css | 7 +- .../sap_horizon/ShellBar-parameters.css | 7 +- .../sap_horizon_dark/ShellBar-parameters.css | 13 +- .../ShellBar-parameters.css | 1 + .../sap_horizon_exp/ShellBar-parameters.css | 1 + .../sap_horizon_hcb/ShellBar-parameters.css | 2 + .../sap_horizon_hcw/ShellBar-parameters.css | 2 + packages/fiori/test/specs/ShellBar.spec.js | 30 +--- .../fiori/ShellBar/ShellBar.stories.ts | 6 +- 13 files changed, 135 insertions(+), 199 deletions(-) diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs index 2513b531f37a..2e41248ff559 100644 --- a/packages/fiori/src/ShellBar.hbs +++ b/packages/fiori/src/ShellBar.hbs @@ -55,7 +55,9 @@ {{/if}} - + + {{/if}} {{/if}} @@ -88,27 +90,17 @@
- {{#if showCoPilot}} -
- {{> coPilot}} -
- {{else}} - + {{#if _isXXLBreakpoint}} + {{#if hasSearchField}} + + {{/if}} {{/if}}
+ {{#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="" >