openui5
openui5 copied to clipboard
SAP
Cosmetics: round corners for the bottom of `sap.f.Card`
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:
vs.
Wouldn't it better if the bottom corners would look like this way:
Such look & feel can be achieved by applying border-radius: 0rem 0rem 1rem 1rem; CSS-property to the latest item in the card.
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
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?
@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.
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:
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.
