Merge branch 'master' into release-rc.12

SAP · Feb 18, 2021 · 261944f · 261944f
2 parents 0a7043a + 3fb02f3
commit 261944f
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 9 deletions.
diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
@@ -13,11 +13,14 @@
 			{{#if header.length}}
 				<slot slot="header" name="header"></slot>
 			{{else}}
-				<header class="ui5-responsive-popover-header">
-					<ui5-title level="H5" class="ui5-responsive-popover-header-text">{{headerText}}</ui5-title>
+				<header class="{{dialogClasses.header}}">
+					{{#if headerText }}
+						<ui5-title level="H2" class="ui5-popup-header-text ui5-responsive-popover-header-text">{{headerText}}</ui5-title>
+					{{/if}}
 					<ui5-button
 						icon="decline"
 						design="Transparent"
+						aria-label="{{_closeDialogAriaLabel}}"
 						@click="{{close}}"
 					>
 					</ui5-button>

diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js
@@ -1,4 +1,6 @@
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON } from "./generated/i18n/i18n-defaults.js";
 import { getNextZIndex } from "./popup-utils/PopupUtils.js";
 import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js";
 import Popover from "./Popover.js";
@@ -75,18 +77,32 @@ const metadata = {
  * @public
  */
 class ResponsivePopover extends Popover {
+	constructor() {
+		super();
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
 	static get metadata() {
 		return metadata;
 	}
 
 	static get styles() {
 		return [Popover.styles, ResponsivePopoverCss];
 	}
-
+
+	get dialogClasses() {
+		return {
+			header: {
+				"ui5-responsive-popover-header": true,
+				"ui5-responsive-popover-header-no-title": !this.headerText,
+			}
+		}
+	}
+
 	static get template() {
 		return ResponsivePopoverTemplate;
 	}
-
+	
 	static get dependencies() {
 		return [
 			Button,
@@ -170,6 +186,10 @@ class ResponsivePopover extends Popover {
 		return this._isPhone || !this.contentOnlyOnDesktop;
 	}
 
+	get _closeDialogAriaLabel() {
+		return this.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
+	}
+
 	_afterDialogOpen(event) {
 		this.opened = true;
 		this._propagateDialogEvent(event);
@@ -185,6 +205,10 @@ class ResponsivePopover extends Popover {
 
 		this.fireEvent(type, event.detail);
 	}
+
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
 }
 
 ResponsivePopover.define();

diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -127,6 +127,9 @@ RATING_INDICATOR_TOOLTIP_TEXT=Rating
 #XBUT: Rating indicator aria-roledescription text
 RATING_INDICATOR_TEXT=Rating Indicator
 
+#XFLD: ResponsivePopover's button's text which closes the dialog
+RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=Decline
+
 #XACT: ARIA description for the segmented button
 SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button
 

diff --git a/packages/main/src/themes/ResponsivePopover.css b/packages/main/src/themes/ResponsivePopover.css
@@ -26,7 +26,9 @@
 }
 
 .ui5-responsive-popover-header-text {
-	display: flex;
-	align-items: center;
 	width: calc(100% - var(--_ui5_button_base_min_width));
 }
+
+.ui5-responsive-popover-header-no-title {
+	justify-content: flex-end;
+}
diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css
@@ -120,8 +120,6 @@
 }
 
 .ui5-responsive-popover-header-text {
-	display: flex;
-	align-items: center;
 	width: calc(100% - var(--_ui5_button_base_min_width));
 }
 

diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
@@ -116,7 +116,7 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 			respPopover3.close();
 		});
 		btnOpenDialog.addEventListener('click', function (event) {
-			dialog.open();
+			dialog.open(btnOpenDialog);
 		});
 	</script>
 </body>