search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
439 stars 98 forks source link

[Object Page Component]: facets design inconsistencies #5811

Closed ShirSAP closed 4 months ago

ShirSAP commented 4 months ago

Bug Description

Today in the object page facet area, it seems that the display mode form are not using the correct parameters and padding.

This is how the component shows up without custom coding in our system: image Both the form label as well as the paddings are incorrect.

Affected Component

https://sap.github.io/ui5-webcomponents-react/?path=/docs/layouts-floorplans-objectpage--docs

Expected Behaviour

Form Label should use: image Form text value should use: image

Taken from the following wiki: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2697896853

In vertical layout the padding between label and text value should be: image

Taken from the following wiki: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2698913658

Isolated Example

No response

Steps to Reproduce

1. 2. 3. ...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.18.0

Browser

Chrome

Operating System

OS

Additional Context

No response

Organization

SAP Build

Declaration

ilhan007 commented 4 months ago

Hello @ShirSAP and colleagues there is no Object Page in UI5 Web Components project, the links from the issue description are from the UI5 Web Components For React Project => transferring the issue to https://github.com/SAP/ui5-webcomponents-react repository.

Lukas742 commented 4 months ago

Hi @ShirSAP

although the screenshots you posted don't contain any sensitive information, please be aware that this is a public GitHub repository and that we generally delete content that we think might be compromising or just shouldn't be made public. I only mention this to raise awareness - it's always better to be safe than sorry.

This is how the component shows up without custom coding in our system:

The DynamicPageHeader accepts any content developers define, so without a reproducible example I can't really tell what components you used. Please add an isolated, reproducible example by using this StackBlitz template, so we can assist you further.

Also, we're currently not offering any "Facet" components, so it's up to developers to define them on their end. If you feel like one of these facets should be available as component, please create a feature request for the respective component.

In vertical layout the padding between label and text value should be:

Since you have linked the specifications of the Form component here, I have checked them and found no inconsistencies with our implementation in the vertical layout. If I have missed something, please indicate specifically what is not implemented according to the guidelines. Please note that only the visual aspect has to comply with the guidelines, e.g. it doesn't matter if we use gap instead of padding, it just has to reflect the values defined in the wiki.

ShirSAP commented 4 months ago

Hello @Lukas742,

Appreciate your awareness comment and super quick response 😇 I've requested the support of a developer in providing a StackBlitz example for you.

Hopefully he could get this to us soon.

ShirSAP commented 4 months ago

Hello @Lukas742 My development team got back to me, it seems that although the screenshot provided above was said to be without any custom coding, there were still a little left.

In the following example you'll see that everything looks good. I'll be closing this ticket.

Thank you and my apologies for the confusion.