feat(ui5-bar): initial implementation

[tsanislavgatev]

FIXES #2434

[CLAassistant]

All committers have signed the CLA.

[vladitasev]

Good job, Tsani!

I have a couple of high-level remarks:

1. Although Bar is in sap.m, for the webcomponents it logically belongs to the fiori package because this is a fiori/sap concept, and not something widely recognizable on the internet. Please move it.

2. The sample should demonstrate also how we have the bar in the page. Or better, please use a bar inside the page sample ;)

3. I would like more opinions on the usage. But I think it would be best to rework it so that we expect content directly in the 3 slots without a wrapper div.

[ilhan007]

Let move the component to fiori, as the Page also will be in fiori, and this is a Fiori concept related component

[tsanislavgatev]

Let move the component to fiori, as the Page also will be in fiori, and this is a Fiori concept related component

If we still don't have the page, should we stick to the Bar sample and then when the Page is implemented to add the Bar to the sample?
@ilhan007 @vladitasev

[ilhan007]

There is one samples_prepare.js file, where we should mark the Bar as new component by adding "Bar" in the newComponents array

[ilhan007]

Almost ready to be merged, just few minor things left

[unazko]

Can we have a header and sub header section at the same time. It seems possible by visual specification.
It is showcased with buttons in the header section and a search field in the sub-header section.

[ilhan007]

Can we have a header and sub header section at the same time. It seems possible by visual specification.
It is showcased with buttons in the header section and a search field in the sub-header section.

Yes, it is possible not only because of the visual spec, it is possible in general. The users can do everything, use arbitrary number of bars in different designs. Bars can be placed one below another like the Header + Subheader group, showed in the Visual spec. For this case I think we are fine as long as the users can remove the bar's border (box-shadow) with standard CSS and the default margin to remove the space between the bars.

ui5-bar {
  box-shadow: none;
  margin: 0
}

outdated

[vladitasev]

Everything looks good. The next step would be to create a BarDesign=Auto property and have the page set it (very similar to how the avatar group can set some properties to the avatar)