Add shellbar additional context separators (SAP#10108)

* feat(ui5-shellbar): added arrow navigation * refactor(ui5-shellbar): start and end separators --------- Co-authored-by: yanaminkova <[email protected]> Co-authored-by: PetyaMarkovaBogdanova <[email protected]>
PetyaMarkovaBogdanova · Nov 1, 2024 · d6625cf · d6625cf
1 parent 268ce0c
commit d6625cf
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs
@@ -76,25 +76,27 @@
 				{{#if _isFullVariant}}
 					{{#unless _isSBreakpoint}}
 						{{#if hasAdditionalContext}}
-							<div class="ui5-shellbar-overflow-container-additional-content">
-								{{!-- {{#if additionalContextStart}}
+						{{#if additionalContextStart}}
 									{{#if hasVisibleAdditionalContextStart}}
-										<div class="ui5-shellbar-separator"></div>
+										<div class="ui5-shellbar-separator ui5-shellbar-separator-start"></div>
 									{{/if}}
-								{{/if}} --}}
+								{{/if}}
+							<div class="ui5-shellbar-overflow-container-additional-content">
+
 								{{#each additionalContextStart}}
 									<slot name="{{this._individualSlot}}"></slot>
 								{{/each}}
 									<div class="ui5-shellbar-spacer"></div>
 								{{#each additionalContextEnd}}
 									<slot name="{{this._individualSlot}}"></slot>
 								{{/each}}
-								{{!-- {{#if additionalContextEnd}}
+
+							</div>
+							{{#if additionalContextEnd}}
 									{{#if hasVisibleAdditionalContextEnd}}
-										<div class="ui5-shellbar-separator"></div>
+										<div class="ui5-shellbar-separator ui5-shellbar-separator-end"></div>
 									{{/if}}
-								{{/if}} --}}
-							</div>
+								{{/if}}
 						{{/if}}
 					{{/unless}}
 				{{/if}}

diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
@@ -594,13 +594,12 @@ class ShellBar extends UI5Element {
 
 	_focusNextItem(items: HTMLElement[], currentIndex: number) {
 		if (currentIndex < items.length - 1) {
-			(items[currentIndex + 1] as HTMLElement).focus(); // Focus the next element
+			(items[currentIndex + 1]).focus(); // Focus the next element
 		}
 	}
-
 	_focusPreviousItem(items: HTMLElement[], currentIndex: number) {
 		if (currentIndex > 0) {
-			(items[currentIndex - 1] as HTMLElement).focus(); // Focus the previous element
+			(items[currentIndex - 1]).focus(); // Focus the previous element
 		}
 	}
 
@@ -945,7 +944,7 @@ class ShellBar extends UI5Element {
 		if (isDesktop()) {
 			this.setAttribute("desktop", "");
 		}
-		setTimeout(this._overflowActions.bind(this), 300);
+		setTimeout(this._overflowActions.bind(this), 100);
 	}
 
 	onExitDOM() {

diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
@@ -249,7 +249,7 @@ slot[name="profile"] {
 .ui5-shellbar-logo-area {
 	display: flex;
 	align-items: center;
-	padding: .25rem;
+	padding: .25rem .5rem .25rem .25rem;
 	box-sizing: border-box;
 	cursor: pointer;
 	max-width: 100%;
@@ -329,7 +329,6 @@ slot[name="profile"] {
 .ui5-shellbar-overflow-container-left {
 	padding: 0 0.125rem;
 	justify-content: flex-start;
-	margin-inline-end: 0.5rem;
 	max-width: 75%;
 	flex-shrink: 0;
 	flex-grow: 0;
@@ -371,7 +370,6 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-right {
-	padding: 0 0.125rem;
 	display: flex;
 	overflow: hidden;
 	position: relative;
@@ -389,35 +387,41 @@ slot[name="profile"] {
 	height: inherit;
 	align-items: center;
 	overflow: hidden;
-	flex: 1 1 auto;
+	flex: 1 1.2 auto;
 	max-width: max-content;
 }
 
 .ui5-shellbar-overflow-container-additional-content {
 	align-items: center;
 	display: flex;
 	justify-content: flex-end;
-	flex: 1 0 auto;
+	flex: 1 0.2 auto;
 	overflow: hidden;
 	min-width: 0;
 }
 
 .ui5-shellbar-spacer {
 	flex-grow: 1;
-	height: 1px
+	height: 1px;
+	flex-basis: 1rem;
 }
 
 ::slotted(.ui5-shellbar-separator),
 .ui5-shellbar-separator {
 	flex-grow: 0;
+	flex-shrink: 0;
 	height: 1rem;
 	width: 1px;
-	background-color: gray;
+	background-color: var(--sapToolbar_SeparatorColor);
 }
-.ui5-shellbar-separator:not(:first-child) {
-	margin-inline-start: 0.5rem;
+
+.ui5-shellbar-separator-start {
+	margin-inline-end: 0.5rem;
 }
 
+.ui5-shellbar-separator-end {
+	margin-inline-start: 0.5rem;
+}
 
 .ui5-shellbar-overflow-container-right-child .ui5-shellbar-button[data-count]:has(+ .ui5-shellbar-overflow-button)::before {
 	inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset);
@@ -457,13 +461,17 @@ slot[name="profile"] {
 	margin-inline-start: 1rem;
 }
 
-:host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
+::slotted([slot="additionalContextStart-1"]:not(:first-child):not(ui5-menu)) {
+	margin-inline-start: 0;
+}
+
+/* :host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
 	padding-inline-start: 1rem;
 }
 
 :host([breakpoint-size="XL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
 	padding-inline-start: 1rem;
-}
+} */
 
 :host(:not([notifications-count])) .ui5-shellbar-bell-button {
 	position: relative;