fix(ui5-bar): rename middleContent slot (#3440)

Part of #3107

BREAKING_CHANGE: The 'middleContent' slot is deprecated in favour of 'default' slot

Author: fifoosid

packages/fiori/src/Bar.hbs

@@ -8,7 +8,7 @@
 		<slot name="startContent"></slot>
 	</div>
 	<div class="ui5-bar-content-container ui5-bar-midcontent-container">
-		<slot name="middleContent"></slot>
+		<slot></slot>
 	</div>
 	<div class="ui5-bar-content-container ui5-bar-endcontent-container">
 		<slot name="endContent"></slot>

packages/fiori/src/Bar.js

@@ -45,15 +45,18 @@ const metadata = {
 		startContent: {
 			type: HTMLElement,
 		},
+
 		/**
 		 * Defines the content in the middle of the bar
 		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
 		 */
-		middleContent: {
+		"default": {
 			type: HTMLElement,
+			propertyName: "middleContent",
 		},
+
 		/**
 		 * Defines the content at the end of the bar
 		 * @type {HTMLElement[]}
@@ -75,7 +78,7 @@ const metadata = {
  * <h3 class="comment-api-title">Overview</h3>
  * The Bar is a container which is primarily used to hold titles, buttons and input elements
  * and its design and functionality is the basis for page headers and footers.
- * The component consists of three areas to hold its content - startContent, middleContent and endContent.
+ * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.
  * It has the capability to center content, such as a title, while having other components on the left and right side.
  *
  * <h3>Usage</h3>
@@ -84,7 +87,7 @@ const metadata = {
  * <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
  *
  * <h3>Responsive Behavior</h3>
- * The middleContent will be centered in the available space between the startContent and the endContent areas,
+ * The default slot will be centered in the available space between the startContent and the endContent areas,
  * therefore it might not always be centered in the entire bar.
  *
  * <h3>CSS Shadow Parts</h3>

packages/fiori/test/pages/Bar.html

@@ -25,7 +25,7 @@
 		<ui5-title level="3">Header design</ui5-title>
 		<ui5-bar design="Header">
 			<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
-			<ui5-label slot="middleContent">Title</ui5-label>
+			<ui5-label>Title</ui5-label>
 			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
 		</ui5-bar>
 		<br>
@@ -38,8 +38,8 @@
 				<ui5-label>Basic Label</ui5-label>
 			</div>
 
-			<ui5-button slot="middleContent">Middle1 Button</ui5-button>
-			<ui5-button slot="middleContent">Middle2 Button</ui5-button>
+			<ui5-button>Middle1 Button</ui5-button>
+			<ui5-button>Middle2 Button</ui5-button>
 
 			<ui5-label slot="endContent">Basic Label</ui5-label>
 			<ui5-button slot="endContent">End Button</ui5-button>

packages/fiori/test/pages/Page.html

@@ -30,7 +30,7 @@
 	<ui5-page id="page" background-design="List" floating-footer show-footer>
 		<ui5-bar design="Header" slot="header">
 			<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
-			<ui5-label slot="middleContent">Title</ui5-label>
+			<ui5-label>Title</ui5-label>
 			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
 		</ui5-bar>
 

packages/fiori/test/samples/Bar.sample.html

@@ -14,14 +14,14 @@ <h3>Header Bar</h3>
 	<div class="snippet">
 		<ui5-bar design="Header">
 			<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
-			<ui5-label id="basic-label" slot="middleContent">Header Title</ui5-label>
+			<ui5-label id="basic-label">Header Title</ui5-label>
 			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
 		</ui5-bar>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-bar design="Header">
 	<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
-	<ui5-label slot="middleContent">Header Title</ui5-label>
+	<ui5-label>Header Title</ui5-label>
 	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
 </ui5-bar>
 	</xmp></pre>
@@ -31,14 +31,14 @@ <h3>Subheader Bar</h3>
 	<div class="snippet">
 		<ui5-bar design="Subheader">
 			<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
-			<ui5-label id="basic-label" slot="middleContent">Subheader Title</ui5-label>
+			<ui5-label id="basic-label">Subheader Title</ui5-label>
 			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
 		</ui5-bar>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-bar design="Subheader">
 	<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
-	<ui5-label slot="middleContent">Subheader Title</ui5-label>
+	<ui5-label>Subheader Title</ui5-label>
 	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
 </ui5-bar>
 	</xmp></pre>

packages/fiori/test/samples/Page.sample.html

@@ -22,7 +22,7 @@ <h3>Page with floating footer</h3>
         <ui5-page id="page" style="height: 700px; width: 500px" background-design="List" floating-footer show-footer>
             <ui5-bar design="Header" slot="header">
                 <ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
-                <ui5-label slot="middleContent">Title</ui5-label>
+                <ui5-label>Title</ui5-label>
                 <ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
             </ui5-bar>
 
@@ -81,7 +81,7 @@ <h3>Page with floating footer</h3>
 <ui5-page id="page" background-design="List" floating-footer show-footer>
     <ui5-bar design="Header" slot="header">
         <ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
-        <ui5-label slot="middleContent">Title</ui5-label>
+        <ui5-label>Title</ui5-label>
         <ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
     </ui5-bar>