@ui5/webcomponents-fiori 2.8.0-rc.1 → 2.8.0-rc.2

package/src/ShellBarTemplate.tsx

@@ -73,135 +73,163 @@ export default function ShellBarTemplate(this: ShellBar) {
 					</div>
 				)}
 				<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
-					{this.hasAdditionalContext && (
-						<>
-							<div style={this.styles.additionalContext.start.separator} class="ui5-shellbar-separator ui5-shellbar-separator-start"></div>
-							<div class="ui5-shellbar-overflow-container-additional-content" aria-label={this._additionalContextText} role={this._additionalContextRole}>
-								{this.startContent.map(item => (
-									<div key={item._individualSlot} id={item._individualSlot} class="ui5-shellbar-additional-content-item">
-										<slot name={item._individualSlot}></slot>
-									</div>
-								))}
-								<div class="ui5-shellbar-spacer"></div>
-								{this.endContent.map(item => (
-									<div key={item._individualSlot} id={item._individualSlot} class="ui5-shellbar-additional-content-item">
-										<slot name={item._individualSlot}></slot>
-									</div>
-								))}
-							</div>
-							<div style={this.styles.additionalContext.end.separator} class="ui5-shellbar-separator ui5-shellbar-separator-end"></div>
-						</>
-					)}
-					{!this.hasAdditionalContext && <div class="ui5-shellbar-spacer"></div>}
-					<div class="ui5-shellbar-overflow-container-right-child" role={this._rightChildRole}>
-						{this.hasSearchField && (
+					<div class="ui5-shellbar-overflow-container-right-inner">
+						{this.hasContentItems && (
 							<>
-								{this._showFullWidthSearch && (
-									<div class="ui5-shellbar-search-full-width-wrapper" style={this.styles.searchField}>
-										<div class="ui5-shellbar-search-full-field">
-											<slot name="searchField"></slot>
+								{this.showStartSeparatorInWrapper && (
+									<div class={{
+										"ui5-shellbar-separator": true,
+										"ui5-shellbar-separator-start": true,
+									}}></div>
+								)}
+								{this.startContent.map((item, index) => {
+									const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
+									return (
+										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes}>
+											{!this.showStartSeparatorInWrapper && index === 0 && (
+												<div class={{
+													"ui5-shellbar-separator": true,
+													"ui5-shellbar-separator-start": true,
+												}}></div>
+											)}
+											<slot name={item._individualSlot}></slot>
 										</div>
-										<Button
-											onClick={this._handleCancelButtonPress}
-											class="ui5-shellbar-button ui5-shellbar-cancel-button"
-											data-ui5-stable="cancel-search">
-											{this._cancelBtnText}
-										</Button>
-									</div>
+									);
+								})}
+								<div class="ui5-shellbar-spacer"></div>
+								{this.endContent.map((item, index) => {
+									const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
+									return (
+										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes}>
+											<slot name={item._individualSlot}></slot>
+											{!this.showEndSeparatorInWrapper && index === this.endContent.length - 1 && (
+												<div class={{
+													"ui5-shellbar-separator": true,
+													"ui5-shellbar-separator-end": true,
+												}}></div>
+											)}
+										</div>
+									);
+								})}
+								{this.showEndSeparatorInWrapper && (
+									<div class={{
+										"ui5-shellbar-separator": true,
+										"ui5-shellbar-separator-end": true,
+									}}></div>
 								)}
-								<div class="ui5-shellbar-search-field" style={this.styles.searchField}>
-									{!this._showFullWidthSearch && <slot name="searchField"></slot>}
+							</>
+						)}
+						{!this.hasContentItems && <div class="ui5-shellbar-spacer"></div>}
+						<div class="ui5-shellbar-overflow-container-right-child" role={this._rightChildRole}>
+							{this.hasSearchField && (
+								<>
+									{this.showFullWidthSearch && (
+										<div class="ui5-shellbar-search-full-width-wrapper" style={this.styles.searchField}>
+											<div class="ui5-shellbar-search-full-field">
+												<slot name="searchField"></slot>
+											</div>
+											<Button
+												onClick={this._handleCancelButtonPress}
+												class="ui5-shellbar-button ui5-shellbar-cancel-button"
+												data-ui5-stable="cancel-search">
+												{this._cancelBtnText}
+											</Button>
+										</div>
+									)}
+									<div class="ui5-shellbar-search-field" style={this.styles.searchField}>
+										<slot name="searchField"></slot>
+									</div>
+									<Button
+										id={`${this._id}-item-1`}
+										class={{
+											"ui5-shellbar-button": true,
+											"ui5-shellbar-search-button": true,
+											"ui5-shellbar-search-item-for-arrow-nav": true,
+											...this.classes.search,
+										}}
+										icon="sap-icon://search"
+										data-ui5-text="Search"
+										data-ui5-notifications-count={this.notificationsCount}
+										data-ui5-stable="toggle-search"
+										onClick={this._handleSearchIconPress}
+										tooltip={this._searchBtnOpen}
+										aria-label={this._searchBtnOpen}
+										aria-expanded={this.showSearchField}
+										accessibilityAttributes={this.accInfo.search.accessibilityAttributes}
+									/>
+								</>
+							)}
+							{this.hasAssistant && (
+								<div id={`${this._id}-assistant`} class={this.classes.assistant}>
+									<slot name="assistant"></slot>
 								</div>
+							)}
+							{this.showNotifications && (
 								<Button
-									id={`${this._id}-item-1`}
+									id={`${this._id}-item-2`}
 									class={{
 										"ui5-shellbar-button": true,
-										"ui5-shellbar-search-button": true,
-										"ui5-shellbar-search-item-for-arrow-nav": true,
-										...this.classes.search,
+										"ui5-shellbar-bell-button": true,
+										"ui5-shellbar-items-for-arrow-nav": true,
+										...this.classes.notification,
 									}}
-									icon="sap-icon://search"
-									data-ui5-text="Search"
+									icon="sap-icon://bell"
+									data-ui5-text="Notifications"
 									data-ui5-notifications-count={this.notificationsCount}
-									data-ui5-stable="toggle-search"
-									onClick={this._handleSearchIconPress}
-									tooltip={this._searchBtnOpen}
-									aria-label={this._searchBtnOpen}
-									aria-expanded={this._searchFieldExpanded}
-									accessibilityAttributes={this.accInfo.search.accessibilityAttributes}
+									onClick={this._handleNotificationsPress}
+									tooltip={this._notificationsText}
+									accessibilityAttributes={this.accInfo.notifications.accessibilityAttributes}
+									data-ui5-stable="notifications"
 								/>
-							</>
-						)}
-						{this.hasAssistant && (
-							<div id="assistant" class={this.classes.assistant}>
-								<slot name="assistant"></slot>
-							</div>
-						)}
-						{this.showNotifications && (
-							<Button
-								id={`${this._id}-item-2`}
-								class={{
-									"ui5-shellbar-button": true,
-									"ui5-shellbar-bell-button": true,
-									"ui5-shellbar-items-for-arrow-nav": true,
-									...this.classes.notification,
-								}}
-								icon="sap-icon://bell"
-								data-ui5-text="Notifications"
-								data-ui5-notifications-count={this.notificationsCount}
-								onClick={this._handleNotificationsPress}
-								tooltip={this._notificationsText}
-								accessibilityAttributes={this.accInfo.notifications.accessibilityAttributes}
-								data-ui5-stable="notifications"
-							/>
-						)}
-						{this.customItemsInfo.map(item => (
-							<Button
-								key={item.id}
-								id={item.id}
-								class={`${item.classes} ui5-shellbar-items-for-arrow-nav`}
-								icon={item.icon}
-								tooltip={item.tooltip}
-								data-count={item.count}
-								data-ui5-notifications-count={this.notificationsCount}
-								data-ui5-external-action-item-id={item.refItemid}
-								data-ui5-stable={item.stableDomRef}
-								onClick={item.press}
-							/>
-						))}
-						<Button
-							id={`${this._id}-item-5`}
-							class={{
-								"ui5-shellbar-no-overflow-button": true, // always visible
-								"ui5-shellbar-button": true,
-								"ui5-shellbar-overflow-button": true,
-								...this.classes.overflow,
-							}}
-							icon="sap-icon://overflow"
-							data-count={this._overflowNotifications}
-							onClick={this._handleOverflowPress}
-							tooltip={this._overflowText}
-							accessibilityAttributes={this.accInfo.overflow.accessibilityAttributes}
-							data-ui5-stable="overflow"
-						/>
-						{this.hasProfile && profileButton.call(this)}
-						{this.showProductSwitch && (
-							<Button
-								id={`${this._id}-item-4`}
-								class={`ui5-shellbar-no-overflow-button ui5-shellbar-button ui5-shellbar-button-product-switch ui5-shellbar-items-for-arrow-nav`}
-								icon="sap-icon://grid"
-								data-ui5-text="Product Switch"
-								onClick={this._handleProductSwitchPress}
-								tooltip={this._productsText}
-								aria-label={this._productSwitchBtnText}
-								aria-haspopup="dialog"
-								aria-expanded={this.accInfo.products.accessibilityAttributes.expanded}
-								accessibilityAttributes={this.accInfo.products.accessibilityAttributes}
-								data-ui5-stable="product-switch"
-							/>
-						)}
+							)}
+							{this.customItemsInfo.map(item => (
+								<Button
+									key={item.id}
+									id={item.id}
+									class={`${item.classes} ui5-shellbar-items-for-arrow-nav`}
+									icon={item.icon}
+									tooltip={item.tooltip}
+									data-count={item.count}
+									data-ui5-notifications-count={this.notificationsCount}
+									data-ui5-external-action-item-id={item.refItemid}
+									data-ui5-stable={item.stableDomRef}
+									onClick={item.press}
+								/>
+							))}
+						</div>
 					</div>
 				</div>
+				<Button
+					id={`${this._id}-item-5`}
+					class={{
+						"ui5-shellbar-button": true,
+						"ui5-shellbar-overflow-button": true,
+						"ui5-shellbar-items-for-arrow-nav": true,
+						...this.classes.overflow,
+					}}
+					icon="sap-icon://overflow"
+					data-count={this._overflowNotifications}
+					onClick={this._handleOverflowPress}
+					tooltip={this._overflowText}
+					accessibilityAttributes={this.accInfo.overflow.accessibilityAttributes}
+					data-ui5-stable="overflow"
+				/>
+				{this.hasProfile && profileButton.call(this)}
+				{this.showProductSwitch && (
+					<Button
+						id={`${this._id}-item-4`}
+						class="ui5-shellbar-no-overflow-button ui5-shellbar-button ui5-shellbar-button-product-switch ui5-shellbar-items-for-arrow-nav"
+						icon="sap-icon://grid"
+						data-ui5-text="Product Switch"
+						onClick={this._handleProductSwitchPress}
+						tooltip={this._productsText}
+						aria-label={this._productSwitchBtnText}
+						aria-haspopup="dialog"
+						aria-expanded={this.accInfo.products.accessibilityAttributes.expanded}
+						accessibilityAttributes={this.accInfo.products.accessibilityAttributes}
+						data-ui5-stable="product-switch"
+					/>
+				)}
 			</header>
 			{ShellBarPopoverTemplate.call(this)}
 		</>

package/src/themes/FlexibleColumnLayout.css

@@ -45,11 +45,12 @@
 	border-inline-end: var(--_ui5_fcl_column_border);
 	position: relative;
 	box-sizing: border-box;
+	z-index: 1;
 }
 
-.ui5-fcl-separator:focus {
-	border:var(--_ui5_fcl_separator_focus_border);
-	outline: none;
+.ui5-fcl-separator:focus { 
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
 }
 
 .ui5-fcl-grip {

package/src/themes/ShellBar.css

@@ -33,8 +33,8 @@
 .ui5-shellbar-menu-button,
 .ui5-shellbar-button,
 .ui5-shellbar-image-button,
-::slotted([ui5-toggle-button]),
-::slotted([ui5-button]){
+::slotted([ui5-toggle-button]:not([slot^="content"])),
+::slotted([ui5-button]:not([slot^="content"])) {
 	height: 2.25rem;
 	padding: 0;
 	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
@@ -55,6 +55,14 @@
 	word-spacing: inherit;
 }
 
+::slotted([ui5-toggle-button][slot="assistant"]) {
+	margin-inline-start: 0;
+}
+
+.ui5-shellbar-assistant-button {
+	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
+}
+
 ::slotted([ui5-button][slot="startButton"]) {
 	margin-inline-start: 0;
 }
@@ -204,12 +212,14 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-logo {
+	overflow: hidden;
 	cursor: pointer;
 	max-height: 2rem;
-	padding: .25rem;
+	max-width: 3.75rem;
 }
 
 .ui5-shellbar-logo-area {
+	overflow: hidden;
 	display: flex;
 	align-items: center;
 	padding: .25rem .5rem .25rem .25rem;
@@ -222,18 +232,13 @@ slot[name="profile"] {
 	margin-inline-start: 0.125rem;
 }
 
-.ui5-shellbar-logo-area .ui5-shellbar-logo {
-	padding: 0;
-}
-
 .ui5-shellbar-logo:focus,
 .ui5-shellbar-logo-area:focus {
-	overflow: hidden;
 	outline: var(--_ui5_shellbar_logo_outline);
 	border-radius: var(--_ui5_shellbar_logo_border_radius);
 }
 
-.ui5-shellbar-logo:hover,
+.ui5-shellbar-overflow-container > .ui5-shellbar-logo:hover,
 .ui5-shellbar-logo-area:hover {
 	box-shadow: var(--_ui5_shellbar_button_box_shadow);
 	border-radius: var(--_ui5_shellbar_logo_border_radius);
@@ -340,13 +345,15 @@ slot[name="profile"] {
 	align-items: center;
 }
 
-.ui5-shellbar-overflow-container-additional-content {
-	align-items: center;
+.ui5-shellbar-overflow-container-right-inner {
 	display: flex;
-	overflow: hidden;
+	justify-content: flex-end;
+	align-items: center;
 	flex-grow: 1;
+	min-width: max-content;
 }
 
+
 .ui5-shellbar-spacer {
 	flex-grow: 1;
 	height: 1px;
@@ -362,13 +369,8 @@ slot[name="profile"] {
 	background-color: var(--sapToolbar_SeparatorColor);
 }
 
-.ui5-shellbar-separator-start {
-	margin-inline-end: 0.5rem;
-}
-
 .ui5-shellbar-separator-end {
 	margin-inline-start: 0.5rem;
-	margin-inline-end: 0.5rem;
 }
 
 .ui5-shellbar-overflow-container-right-child .ui5-shellbar-button[data-count]:has(+ .ui5-shellbar-overflow-button)::before {
@@ -386,15 +388,13 @@ slot[name="profile"] {
 	position: absolute;
 }
 
-.ui5-shellbar-additional-content-item {
+.ui5-shellbar-content-item {
+	display: flex;
+	align-items: center;
 	flex-shrink: 0;
  	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
 }
 
-.ui5-shellbar-additional-content-item:first-child {
-	padding-inline-start: 0;
-}
-
 :host(:not([notifications-count])) .ui5-shellbar-bell-button {
 	position: relative;
 }
@@ -440,6 +440,8 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-search-field {
+	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
+	min-width: var(--_ui5_shellbar_search_field_width);
 	align-items: center;
 	flex-grow: 1;
 	margin-inline-start: 0.5rem;
@@ -450,10 +452,6 @@ slot[name="profile"] {
 	margin-inline-start: 0;
 }
 
-.ui5-shellbar-with-full-searchfield .ui5-shellbar-overflow-container-additional-content {
-	max-width: 0px;
-}
-
 .ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
 	height: 2.25rem;
 	width: 100%;
@@ -506,8 +504,8 @@ slot[name="profile"] {
 
 ::slotted([slot="logo"]) {
 	max-height: 2rem;
+	max-width: 3.75rem;
 	pointer-events: none;
-	padding: 0 0.25rem;
 }
 
 .ui5-shellbar-co-pilot-placeholder {
@@ -532,7 +530,6 @@ slot[name="profile"] {
 
 /* if class contains ui5-shellbar-hidden-button */
 ::slotted(.ui5-shellbar-hidden-button),
-::slotted(.ui5-shellbar-force-hidden-button),
 .ui5-shellbar-hidden-button,
 .ui5-shellbar-invisible-button {
 	visibility: hidden;
@@ -542,6 +539,7 @@ slot[name="profile"] {
 	width: 0;
 	margin: 0;
 	padding: 0;
+	padding-inline-start: 0;
 	border: 0;
 	margin-inline-start: 0;
 }

package/src/themes/base/FlexibleColumnLayout-parameters.css

@@ -3,5 +3,4 @@
 	--_ui5_fcl_column_border: none;
 	--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapHighlightColor), transparent);
 	--_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapHighlightColor), transparent);
-	--_ui5_fcl_separator_focus_border: 0.125rem solid var(--sapContent_FocusColor); 
 }

package/src/themes/base/ShellBar-parameters.css

@@ -24,6 +24,6 @@
 	--_ui5_shellbar_overflow_container_middle_height: 2.5rem;
 	--_ui5_shellbar_menu_button_title_font_size: 0.75rem;
 	--_ui5_shellbar_image_button_border_radius: 50%;
-	--_ui5-shellbar-content-margin-start: 1rem;
+	--_ui5-shellbar-content-margin-start: 0.5rem;
 	--_ui5-shellbar-overflow-button-margin: 0.5rem;
 }