refactor(ui5-popover, ui5-dialog): remove noHeader property (#615)

BREAKING CHANGE: the property noHeader is removed, the presence of header is based on the values of "headerText" property and "header" slot
SAP · Jul 3, 2019 · 6a990a7 · 6a990a7
1 parent 1f06d10
commit 6a990a7
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 74 deletions.
diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs
@@ -30,7 +30,6 @@
 			id="{{_id}}-popover"
 			allow-target-overlap="{{_popover.allowTargetOverlap}}"
 			placement-type="{{_popover.placementType}}"
-			no-header
 			no-arrow
 			horizontal-align="{{_popover.horizontalAlign}}"
 			stay-open-on-scroll="{{_popover.stayOpenOnScroll}}"

diff --git a/packages/main/src/Dialog.hbs b/packages/main/src/Dialog.hbs
@@ -1,3 +1,5 @@
+{{>include "./Popup.hbs"}}
+
 <span class="{{classes.frame}}">
 	<span id="{{_id}}-firstfe" tabindex="0"></span>
 	<div style="{{zindex}}" class="{{classes.dialogParent}}">
@@ -16,27 +18,3 @@
 	<span id="{{_id}}-lastfe" tabindex="0"></span>
 	<div tabindex="0" id="{{_id}}-blocklayer" style="{{blockLayer}}" class="{{classes.blockLayer}}"></div>
 </span>
-
-{{#*inline "header"}}
-	{{#unless noHeader}}
-		<header>
-			{{#if header.length}}
-				<div role="heading" class="ui5-popup-wrapper-header">
-					<slot name="header"></slot>
-				</div>
-			{{else}}
-				<h2 role="heading" class="ui5-popup-wrapper-header ui5-popup-wrapper-headerText">{{headerText}}</h2>
-			{{/if}}
-		</header>
-	{{/unless}}
-{{/inline}}
-
-{{#*inline "footer"}}
-	{{#if footer.length}}
-		<footer>
-			<div class="ui5-popup-wrapper-footer">
-				<slot name="footer"></slot>
-			</div>
-		</footer>
-	{{/if}}
-{{/inline}}
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
@@ -32,7 +32,6 @@
 	{{#if showSuggestions}}
 			<ui5-popover
 				placement-type="Bottom"
-				no-header
 				no-arrow
 				horizontal-align="Stretch"
 				initial-focus="{{_id}}-inner">

diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
@@ -36,7 +36,6 @@
 	<ui5-popover 
 		class="ui5-multi-combobox-selected-items--popover"
 		horizontal-align="Stretch"
-		no-header
 		?no-arrow={{editable}}
 		placement-type="Bottom">
 		<ui5-list separators="None" mode="{{selectedItemsListMode}}"
@@ -51,7 +50,6 @@
 
 	<ui5-popover class="ui5-multi-combobox-all-items--popover"
 		no-arrow
-		no-header
 		horizontal-align="Stretch"
 		initial-focus="ui5-multi-combobox--input"
 		horizontal-align="Left"

diff --git a/packages/main/src/Popover.hbs b/packages/main/src/Popover.hbs
@@ -1,3 +1,5 @@
+{{>include "./Popup.hbs"}}
+
 <span class="{{classes.frame}}" @focusin="{{onfocusin}}">
 	<span id="{{_id}}-firstfe" tabindex="0" @focusin={{focusHelper.forwardToLast}}></span>	
 	<div style="{{styles.main}}" role="dialog" aria-labelledby="{{headerId}}" tabindex="-1" class="{{classes.main}}">
@@ -13,27 +15,3 @@
 	<span id="{{_id}}-lastfe" tabindex="0" @focusin={{focusHelper.forwardToFirst}}></span>
 	<div tabindex="0" id="{{_id}}-blocklayer" style="{{styles.blockLayer}}" class="{{classes.blockLayer}}"></div>
 </span>
-
-{{#*inline "header"}}
-	{{#unless noHeader}}
-		<header>
-			{{#if header.length}}
-				<div role="toolbar" class="ui5-popup-wrapper-header">
-					<slot name="header"></slot>
-				</div>
-			{{else}}
-				<h2 role="toolbar" class="ui5-popup-wrapper-header ui5-popup-wrapper-headerText">{{headerText}}</h2>
-			{{/if}}
-		</header>
-	{{/unless}}
-{{/inline}}
-
-{{#*inline "footer"}}
-	{{#if footer.length}}
-		<footer>
-			<div class="ui5-popup-wrapper-footer">
-				<slot name="footer"></slot>
-			</div>
-		</footer>
-	{{/if}}
-{{/inline}}
diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
@@ -467,7 +467,7 @@ class Popover extends Popup {
 
 		let maxContentHeight = Math.round(maxHeight);
 
-		if (!this.noHeader) {
+		if (this.hasHeader) {
 			const headerDomRef = this.getPopupDomRef().querySelector(".ui5-popup-wrapper-header");
 			if (headerDomRef) {
 				maxContentHeight = Math.round(maxHeight - headerDomRef.offsetHeight);
@@ -645,7 +645,7 @@ class Popover extends Popup {
 	}
 
 	get headerId() {
-		return this.noHeader ? undefined : `${this._id}-header`;
+		return this.hasHeader ? `${this._id}-header` : undefined;
 	}
 
 	get focusHelper() {
@@ -654,6 +654,10 @@ class Popover extends Popup {
 			forwardToFirst: this._focusElementsHandlers.forwardToFirst,
 		};
 	}
+
+	get role() {
+		return "toolbar";
+	}
 }
 
 Popover.define();

diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs
@@ -0,0 +1,23 @@
+{{#*inline "header"}}
+	{{#if hasHeader}}
+		<header>
+			{{#if header.length}}
+				<div role="{{role}}" class="ui5-popup-wrapper-header">
+					<slot name="header"></slot>
+				</div>
+			{{else}}
+				<h2 role="{{role}}" class="ui5-popup-wrapper-header ui5-popup-wrapper-headerText">{{headerText}}</h2>
+			{{/if}}
+		</header>
+	{{/if}}
+{{/inline}}
+
+{{#*inline "footer"}}
+	{{#if hasFooter}}
+		<footer>
+			<div class="ui5-popup-wrapper-footer">
+				<slot name="footer"></slot>
+			</div>
+		</footer>
+	{{/if}}
+{{/inline}}
diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
@@ -57,16 +57,7 @@ const metadata = {
 			type: String,
 			association: true,
 		},
-		/**
-		 * Defines whether the header is hidden.
-		 *
-		 * @type {Boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		noHeader: {
-			type: Boolean,
-		},
+
 		/**
 		 * Defines the header text.
 		 * <br><b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
@@ -443,6 +434,18 @@ class Popup extends UI5Element {
 	onExitDOM() {
 		removeBodyStyles();
 	}
+
+	get hasHeader() {
+		return !!(this.headerText.length || this.header.length);
+	}
+
+	get hasFooter() {
+		return !!this.footer.length;
+	}
+
+	get role() {
+		return "heading";
+	}
 }
 
 export default Popup;
diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
@@ -15,7 +15,6 @@
 		<ui5-popover
 			id="ui5-select--popover"
 			placement-type="Bottom"
-			no-header
 			no-arrow
 			horizontal-align="Stretch"
 			@ui5-afterOpen="{{_applyFocusAfterOpen}}"

diff --git a/packages/main/src/ShellBar.hbs b/packages/main/src/ShellBar.hbs
@@ -28,7 +28,7 @@
 			</button>
 		{{/if}}
 
-		<ui5-popover class="sapWCShellBarMenuPopover" no-header placement-type="Bottom">
+		<ui5-popover class="sapWCShellBarMenuPopover" placement-type="Bottom">
 			<ui5-list separators="None" mode="SingleSelect" @ui5-itemPress={{_menuItemPress}}>
 				<slot name="menuItems"></slot>
 			</ui5-list>
@@ -75,7 +75,7 @@
 		</div>
 	</div>
 
-	<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" no-header no-arrow>
+	<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" no-arrow>
 		<ui5-list separators="None" @ui5-itemPress="{{_actionList.itemPress}}">
 			{{#each _hiddenIcons}}
 				<ui5-li

diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
@@ -73,7 +73,6 @@
 	<ui5-popover
 		id="{{_id}}-overflowMenu"
 		no-arrow
-		no-header
 		placement-type="Bottom"
 		horizontal-align="Right">
 		<ui5-list @ui5-itemPress="{{_onOverflowListItemSelect}}">

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Popups.html b/packages/main/test/sap/ui/webcomponents/main/pages/Popups.html
@@ -66,7 +66,7 @@
 		<content id="popover"></content>
 	</div>
 
-	<ui5-popover placement-type="Bottom" horizontal-align="Stretch" no-arrow no-header initial-focus="input1" class="wcPopoverWithList">
+	<ui5-popover placement-type="Bottom" horizontal-align="Stretch" no-arrow initial-focus="input1" class="wcPopoverWithList">
 		<ui5-list id="myList" inset separators="Inner" mode="MultiSelect" footer-text="Copyright" no-data-text="No data">
 			<!-- Header -->
 			<div style="display: flex; align-items: center;" slot="header">

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html b/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html
@@ -132,7 +132,7 @@
 		<ui5-li slot="menuItems">Application 5</ui5-li>
 	</ui5-shellbar>
 
-	<ui5-popover id="popover" no-header placement-type="Bottom">
+	<ui5-popover id="popover" placement-type="Bottom">
 		<div class="popover-header">
 			<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">John Doe</ui5-title>
 		</div>
@@ -148,7 +148,7 @@
 		</div>
 	</ui5-popover>
 
-	<ui5-popover id="app-list-popover" no-header placement-type="Bottom">
+	<ui5-popover id="app-list-popover" placement-type="Bottom">
 		<ui5-list separators="None">
 			<ui5-li>Application 1</ui5-li>
 			<ui5-li>Application 2</ui5-li>
@@ -158,7 +158,7 @@
 		</ui5-list>
 	</ui5-popover>
 
-	<ui5-popover id="custom-item-popover" no-header placement-type="Bottom">
+	<ui5-popover id="custom-item-popover" placement-type="Bottom">
 		<ui5-list separators="None">
 			<ui5-li id="custom-item-1" type="Active">Custom Popover Item 1</ui5-li>
 			<ui5-li type="Active">Custom Popover Item 2</ui5-li>

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html
@@ -75,7 +75,7 @@ <h3>ShellBar</h3>
 	<ui5-li slot="menuItems">Application 5</ui5-li>
 </ui5-shellbar>
 
-<ui5-popover id="action-popover" no-header placement-type="Bottom">
+<ui5-popover id="action-popover" placement-type="Bottom">
 	<div class="action-popover-header">
 		<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">An Kimura</ui5-title>
 	</div>
@@ -128,7 +128,7 @@ <h3>ShellBar</h3>
 
 </ui5-shellbar>
 
-<ui5-popover id="popover" no-header placement-type="Bottom">
+<ui5-popover id="popover" placement-type="Bottom">
 	<div class="popover-header">
 		<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">An Kimura</ui5-title>
 	</div>