Page and Bar Components

[codefactor]

Is your feature request related to a problem? Please describe.
sap/m/Page and Bar are nice to have web components for fully featured SPA applications, like the one featured in the FlexibleColumnLayout:
https://sap.github.io/ui5-webcomponents/master/playground/components/FlexibleColumnLayout/

In this playground page, the mid and end columns would be better suited to use a Page element with 100% height - and probably the header should not scroll away when scrolling the content down. These are common patterns that would be useful for any web component using apps.

Describe the solution you'd like
A Page should be 100% height, it should have slots for header and footer (bars), the content should be put in the middle. It should have an option to be scrollable or not scrollable, inset or not inset. The header and footer should be visible while scrolling the content. If the footer is floating it should not take space, but it should add more padding to the scrolling content so that when scrolling to the very bottom of the content the content does not underlay the footer.

A Bar should have left/mid/right slots, should be flex middle aligned on the row. It should have a design attribute with at least Header, Toolbar, and Footer options. It also could be a floating footer as well.

Describe alternatives you've considered
We have custom React components to do the job already, but it would be nice to have a built-in web component that can provide these functionalities.

[ilhan007]

Hello @scott We will split the requirement into two issues Page and Bar for separate tracking.

Meanwhile, we were wondering what did you exactly mean by having a design attribute with at least Header, Toolbar, and Footer options. Perhaps, we will discuss it on the next regular sync, but if we can clarify it upfront we can plan the execution.
Our understanding is that the Bar would allow placing a content at the left, at the middle and at the right and you can use it as a header, as a footer and somewhere else. What do these Header, Toolbar, and Footer options would change?

Best regards,
ilhan

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-rl this is a heads-up info about requests for two new components Page and Bar.

[codefactor]

@ilhan007 ,

We talked in a meeting - a Bar can look differently based on what design it is - you can look at the design property of a sap/m/Bar in openui5 to see the different kinds available. Most likely the "floating" aspect of a footer would be based on if you put that Bar in the Footer slot of a Page and the Page has the "floatingFooter" property set to true.

[ilhan007]

Hello @codefactor

we created separate issues as the components will be executed by different teams:
#2434
#2433

Two more question about the Bar

1. Do you expect the "middle" slot to be always centered?
2. Regarding the design property, I found the "Header" and "Footer" options in the sap.m.Bar, but the only difference I found is having or not having a top border. I asked the team to look if there is anything else, but if the different design options can be achieved with 1-2 line of standard and simple CSS, is it fine for you to do it without property?

[codefactor]

@ilhan007 ,

I am fairly sure that a Bar looks different when you put it in the content of the page (not header or footer, this was what I was calling as a "tool bar") - I'll test that out.

Regarding the border, we should not require all consumers to commonly specify the border-top with the correct CSS3 variable that would identify the color of the border. I prefer that we give the design and that way in future if we have some other distinguishing things about a footer or header it is easy to do so.

Regarding the middle - it should follow whatever the openui5 bar does, I think it is always center aligned, but you'll have to check if there are any edge cases based on how wide the left/right sections are and how much space there is available. You can maybe use snippix to play around with a Bar to see how it behaves.

~Scott

[ilhan007]

All right,
We will continue tracking the request with these two issues:
#2434
#2433