diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs index 28dd661dfdfa..8fb252aa27ee 100644 --- a/packages/main/src/ResponsivePopover.hbs +++ b/packages/main/src/ResponsivePopover.hbs @@ -13,11 +13,14 @@ {{#if header.length}} {{else}} -
- {{headerText}} +
+ {{#if headerText }} + {{headerText}} + {{/if}} diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js index 4b5a507c07db..4a66fce26463 100644 --- 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,6 +77,11 @@ const metadata = { * @public */ class ResponsivePopover extends Popover { + constructor() { + super(); + this.i18nBundle = getI18nBundle("@ui5/webcomponents"); + } + static get metadata() { return metadata; } @@ -82,11 +89,20 @@ class ResponsivePopover extends Popover { 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 index 17c44114a21f..70505f97cac1 100644 --- 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 index 92ffc78180a9..9d346d1e8e4c 100644 --- 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; +} \ No newline at end of file diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css index 1a07dc7e5cb0..87f4351ae5d4 100644 --- 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 index 53a56e3ea097..1cda762807af 100644 --- a/packages/main/test/pages/ResponsivePopover.html +++ b/packages/main/test/pages/ResponsivePopover.html @@ -116,7 +116,7 @@

Inputs based component that opens popover/dialog within dialog

respPopover3.close(); }); btnOpenDialog.addEventListener('click', function (event) { - dialog.open(); + dialog.open(btnOpenDialog); });