feat(ui5-popup): аdd default responsive paddings

[LidiyaGeorgieva]

Default responsive paddings are added for all popups.
In the controls that they are not needed they are removed.
Sample with way to remove the paddings by the user added in the test pages.

Affected components: Dialog, Popover, ResponsivePopover, ColorPalettePopover, WizardPopover, BreadcrumbsPopover, DatePickerPopover, ViewSettingsDialog, ComboBox Suggestion popover, Input, File Uploader, MultiComboBox, Select, TabContainer, TimePicker, Tokenizer, BarcodeScanner, Breadcrumbs, ShellBar

Fixes: #4402

Thank you for your contribution! 👏

To get it merged faster, kindly review the checklist below:

Pull Request Checklist

• Reviewed the Contributing Guidelines
  • Especially the How to Contribute section
• Correct commit message style

[MapTo0]

Do we really need to expose those parts? I am okay with that just asking if we need to make them public. Did you check IE?

[LidiyaGeorgieva]

Do we really need to expose those parts? I am okay with that just asking if we need to make them public. Did you check IE?

We don't need to expose those parts. It's just one way to do it (removing the default responsive paddings).
The other way is to provide class, that can be used by the application.
We should decide which approach is better.

Removing of the paddings in IE does not work if "parts" are used for it.

[tsanislavgatev]

ViewSettingsDialog header padding is now too big and it pushes the bar content too much into the middle of the control.
The rest of the controls on our side look fine.

[MapTo0]

Yes, we investigate and discuss the @MapTo0's proposal.
Before the start of the implementation there was a long discussion about the approach (on mail, with people from different teams).
"Parts" was the chosen one since it is more flexible - there is more use-cases than just remove all default paddings (remove left, right, set fixed paddings, etc.). This flexibility will be useful not only in the web components, but also in the applications.

Having specific left / right padding can be controlled in the specific components, but IMHO having or not paddings in general can be handled in the popups (and every components sets e.g. left padding if needed). However, I am fine with the change so far. Looks good to me.

Small diffs I manage to find testing against master:

• ComboBox and Input (on mobile) after the change the footer of the Dialog has some paddings. Is this desired behaviour?
• ShellBar's popover's paddings (when items are truncated on smaller screens are wrong) @nnaydenow check please
• Wizard's Progress Navigator Steps popover on small screens - paddings are broken after the change

Basically all controls with popups and predefined paddings are still broken and you have to check all components in the library.
Please do more testing and go trough all components.

[LidiyaGeorgieva]

ViewSettingsDialog header padding is now too big and it pushes the bar content too much into the middle of the control. The rest of the controls on our side look fine.

ViewSettingsDialog Header on the left has 1 padding and 2 margins in addition of the default responsive paddings. Header on the right side and Footer also have additional paddings. The design should be checked and aligned, but this is valid for other controls also. Probably this will be follow up task on every team.

[LidiyaGeorgieva]

Small diffs I manage to find testing against master:

• ComboBox and Input (on mobile) after the change the footer of the Dialog has some paddings. Is this desired behaviour?
• ShellBar's popover's paddings (when items are truncated on smaller screens are wrong) @nnaydenow check please
• Wizard's Progress Navigator Steps popover on small screens - paddings are broken after the change

ComboBox and Input (on mobile) -> Paddings should be responsive for the header, footer and the content. The target is all elements to be vertically aligned.

ShellBar's popover's paddings -> Why wrong? Before there was 7px padding (--_ui5_popup_content_padding, which was not by design), now it is the new one (responsive)

Wizard's Progress Navigator Steps popover -> same as ShellBar

[nnaydenow]

Hi @LidiyaGeorgieva,

Sorry for inconvenience. Could you please recheck BarcodeScanner, Breadcrumbs, ShellBar components.

Regards,
Nayden

[LidiyaGeorgieva]

BarcodeScanner

Thank you for noticing that. I checked them. For all three of them is the same:
Before there was 7px padding (--_ui5_popup_content_padding, which was not by design), now they have the new one (responsive)

please check my reply

[dimovpetar]

• ColorPalettePopover has extra padding now in the header, when on mobile. Check if its own can be removed, and only use the one from the dialog
• BarCodeScanner has extra padding in the footer, check if its own can be removed

Changes are done

Done