ui5-dialog: change default alignment and add paddings for footer

[MarcusNotheis]

Feature Request Description

I would like to have an easy way of placing a single button into the footer slot of the ui5-dialog and have the correct, Fiori compliant alignment.

Proposed Solution

1. Change the default flex-box alignment of the Popup footer to end
   

   ui5-webcomponents/packages/main/src/themes/PopupsCommon.css

   Lines 39 to 54 in 379cc7b

   	.ui5-popup-footer-root {
   	background: var(--sapPageFooter_Background);
   	border-top: 1px solid var(--sapPageFooter_BorderColor);
   	color: var(--sapPageFooter_TextColor);
   	}
   	.ui5-popup-header-root,
   	.ui5-popup-footer-root,
   	:host([header-text]) .ui5-popup-header-text {
   	margin: 0;
   	font-size: 1rem;
   	font-family: "72override", var(--_ui5_popup_header_font_family);
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	}

2. Set the default height of the footer depending on the content density to 2.5rem (Compact) or 2.75rem (Cozy).

These changes would allow such a pattern:

<ui5-dialog>
  <span>Hello World</span>
  <ui5-button slot="footer">Close</span>
</ui5-dialog>

which is in my opinion way more convenient than the current solution:

<ui5-dialog>
  <span>Hello World</span>
  <div slot="footer" style="display: flex; align-items: center; justify-content: end; width: 100%; box-sizing: border-box; height: 2.5rem">
    <ui5-button>Close</span>
  </div>
</ui5-dialog>

Proposed Alternatives

I could add a custom flex box or use the ui5-bar with the end-content slot (but this would lead to incorrect paddings).

Additional Context

Basically I want to have a similar behaviour to the buttons aggregation of the sap.m.Dialog SAPUI5 Control:

Buttons which are inside this aggregation are aligned at the right side (left side in RTL mode) of the footer instead of in the middle of the footer.

Priority

• Low
• Medium
• High
• Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: UI5 Web Components for React

[PetyaMarkovaBogdanova]

Hi team,
can you, please, take a look at the above comment and consider if it is applicable item for an enhancement request,
or it could be taken as a fix?
Thank you!
Best regards,
Petya Markova.
(UI5 Web components dispatcher)

[vladitasev]

Hi @MarcusNotheis

The intention of ui5-dialog is to be as open as possible and have as few presumptions (such as having buttons in the footer) as possible.

Therefore, it is an intentional decision to provide a footer slot (semantics are the app passes a single element that serves as a footer, although technically one can pass multiple elements to any slot). If we were to change the alignment, making it easier for people to directly pass buttons (and skip the footer itself), the footer semantics would change from footer to footer item (such as a button). The "ideal" way to use the footer slot is to pass a single item (div/toolbar) with 100% width which regardless of alignment would take up the whole space.

As for the height, we discussed and agreed to pre-set the height of the footer to 2.5rem (Compact) or 2.75rem (Cozy). We are going to follow up with a PR for this.

Regards,
Vladi

[olannyv]

Internal BLI is created BGSOFUIRODOPI-2810 and the fix is in progress