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
426 stars 94 forks source link

[DynamicPage]: Subtitle Placement Issue in Web Design Guidelines #6010

Closed bomasap closed 1 day ago

bomasap commented 2 days ago

Describe the bug

Based on the Fiori design for Web Design Guidelines, it has come to our attention that the subtitle should be positioned directly under the Header, rather than being horizontally aligned. This adjustment is crucial to ensure consistency with the Fiori design principles and to improve the visual hierarchy of our web pages.

Fiori design for Web Design Guidelines: https://experience.sap.com/internal/fiori-design-web/object-page/

Isolated Example

https://stackblitz.com/edit/github-t5j5mn-jgc4l1?file=src%2FApp.tsx

Reproduction steps

  1. Access StackBlitz .
  2. Observe the position of the subtitle relative to the Header.
  3. Notice that the subtitle is horizontally aligned with the Header.

Expected Behaviour

The subtitle should be placed directly below the Header.

Screenshots or Videos

Screenshot 2024-07-02 at 4 39 20 PM Screenshot 2024-07-02 at 4 40 38 PM

UI5 Web Components for React Version

1.28.4

UI5 Web Components Version

1.24.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

Lukas742 commented 1 day ago

Hi @bomasap

showHeaderRight of the DynamicPage is true per default, so to show the subtitle below the title, you must set it explicitly to false: https://stackblitz.com/edit/github-t5j5mn-rtjjhz?file=src%2FApp.tsx

With v2.0 the DynamicPage and all of its subcomponents will be replaced with the newly introduced ui5 web component alternative. There the subtitle is displayed below the title per default.