search

SAP / openui5

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.
http://openui5.org
Apache License 2.0
2.96k stars 1.24k forks source link

Cosmetics: round corners for the bottom of `sap.f.Card` #3847

Open pubmikeb opened 1 year ago

pubmikeb commented 1 year ago

Following https://github.com/SAP/openui5/issues/3842, after the fix, the bottom corners are not cutted-off anymore, but their look & feel is not consistent with the upper corners:

28_083810 vs. 28_091207

Wouldn't it better if the bottom corners would look like this way:

28_090804

Such look & feel can be achieved by applying border-radius: 0rem 0rem 1rem 1rem; CSS-property to the latest item in the card.

elenastoyanovaa commented 1 year ago

Hello @pubmikeb ,

Thank you for sharing this finding. I've created an internal incident 2370106474. The status of the issue will be updated here in GitHub.

Regards, Elena

GerganaKremenska commented 1 year ago

Hello @pubmikeb,

Thank you for your input!

As sap.f.Card is just a container and an application developer can use any kind of content inside, the guidance from designers is to use the native styling of the containing control, to ensure consistency throughout the application.

In the mentioned example, Card has a content of a sp.m.List and the focus of the list is applied.

What is the use case for sap.f.Card?

There are integration cards with predefined content which may be a better fit?

pubmikeb commented 1 year ago

@GerganaKremenska,

What is the use case for sap.f.Card?

As a widget for a dashboard or a block of a side-information and hot/available actions.

There are integration cards with predefined content which may be a better fit?

Now, I realize, that there are actually two classes (is it an unnecessary overcomplication?) of cards:

Detailed cards comparison and overview: https://ui5.sap.com/#/topic/5b46b03f024542ba802d99d67bc1a3f4

Perhaps, the integration cards suit more to my case.

P.S. The UI Integration Cards Explorer has a great look & feel, it would be great to make some facelifting to the UI5 Documentation by aligning its UI/UX with the UI Integration Cards Explorer one.

pubmikeb commented 1 year ago

To conclude, even though the sap.f.Card may include any kind of content, it would be great if sap.f.Card bottom focus decoration would be adjusted to the included content, where it's possible.

In case of a sap.m.List content, which is, probably, the most popular scenario, it looks perfectly polished, when the bottom decoration of sap.m.List is combined with one of sap.f.Card:

28_090804

simlin commented 1 year ago

I forwarded this feedback to our design department (FIORITECHE1-7689).

When looking on a concrete scenario like the card above then, yes, such an adjusted focus CSS could make sense. But when there are some items more and a scrollbar appears, at least for the right side the rounded focus is not appropriate anymore. The content in Cards and other similar containers (e.g. dialogs) is arbitrary. It also depends on this content whether such a special bottom focus does fit or not. Maybe someone has added additional controls after the list?

Therefore our design department offered the solution with the gap on the bottom of such containers as a generic and pragmatic approach for many different cases.

Indeed for some special scenarios there might be also a more specific handling in future. But I don't think that there will be a quick and especially not an automatic solution for this.