fix(ui5-bar): align of elements is now correct (#3719)

Fixes: #3456
Closes:  #3456

Author: tsanislavgatev

packages/fiori/src/Bar.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-bar-root"
+	class="{{classes.root}}"
 	aria-label="{{accInfo.label}}"
 	role="toolbar"
 	part="bar"

packages/fiori/src/Bar.js

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import BarTemplate from "./generated/templates/BarTemplate.lit.js";
 import BarDesign from "./types/BarDesign.js";
 
@@ -34,6 +35,15 @@ const metadata = {
 			type: BarDesign,
 			defaultValue: BarDesign.Header,
 		},
+
+		/**
+		 * Defines if the component middle area needs to be centered between start and end area
+		 * @type {Boolean}
+		 * @private
+		 */
+		_shrinked: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.Bar.prototype */ {
 		/**
@@ -133,6 +143,38 @@ class Bar extends UI5Element {
 			"label": this.design,
 		};
 	}
+
+	constructor() {
+		super();
+
+		this._handleResizeBound = this.handleResize.bind(this);
+	}
+
+	handleResize() {
+		const bar = this.getDomRef();
+		const barWidth = bar.offsetWidth;
+
+		this._shrinked = Array.from(bar.children).some(element => {
+			return barWidth / 3 < element.offsetWidth;
+		});
+	}
+
+	get classes() {
+		return {
+			root: {
+				"ui5-bar-root": true,
+				"ui5-bar-root-shrinked": this._shrinked,
+			},
+		};
+	}
+
+	onEnterDOM() {
+		ResizeHandler.register(this, this._handleResizeBound);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._handleResizeBound);
+	}
 }
 
 Bar.define();

packages/fiori/src/themes/Bar.css

@@ -22,20 +22,32 @@
 	display: flex;
 	flex-direction: row;
 	align-items: center;
+	justify-content: flex-start;
+}
+
+.ui5-bar-root .ui5-bar-content-container {
+	min-width: 30%;
+}
+
+.ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
+	min-width: 0px;
+	overflow: hidden;
 }
 
 .ui5-bar-root .ui5-bar-endcontent-container {
 	padding-right: 0.5rem;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
+	justify-content: flex-end;
 }
 .ui5-bar-root .ui5-bar-midcontent-container {
 	padding-left: 0.5rem;
 	padding-right: 0.5rem;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
+	justify-content: center;
 }
 
 :host([design="Footer"]){

packages/fiori/test/pages/Bar.html

@@ -43,6 +43,9 @@
 
 			<ui5-label slot="endContent">Basic Label</ui5-label>
 			<ui5-button slot="endContent">End Button</ui5-button>
+			<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
+			<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
+			<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
 		</ui5-bar>
 
 		<br>