[DynamicPage]: Subtitle Placement Issue in Web Design Guidelines
bomasap opened this issue · 1 comments
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
- Access StackBlitz .
- Observe the position of the subtitle relative to the Header.
- 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](https://private-user-images.githubusercontent.com/169193249/345194096-6746858d-2390-45cd-9800-1264bf7d5293.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI4MDg0MzcsIm5iZiI6MTcyMjgwODEzNywicGF0aCI6Ii8xNjkxOTMyNDkvMzQ1MTk0MDk2LTY3NDY4NThkLTIzOTAtNDVjZC05ODAwLTEyNjRiZjdkNTI5My5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODA0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgwNFQyMTQ4NTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03NzdjMTVjN2NlZGRmZGIzMzhmZDViZjI2NDQxNTIwYjk2NjM5MGMzY2Y4ODE4OGRmNjc3NDg5MjUxNGYxN2JkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.uzC-663ike3Oz4SETKKxRffj6CglOQ67aA_rGP42wpU)
![Screenshot 2024-07-02 at 4 40 38 PM](https://private-user-images.githubusercontent.com/169193249/345194126-e0294ce0-6404-4ea5-972d-eb7681bab2cb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI4MDg0MzcsIm5iZiI6MTcyMjgwODEzNywicGF0aCI6Ii8xNjkxOTMyNDkvMzQ1MTk0MTI2LWUwMjk0Y2UwLTY0MDQtNGVhNS05NzJkLWViNzY4MWJhYjJjYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODA0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgwNFQyMTQ4NTdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zY2U4YmQxYTgxN2UyM2FiMDg5ZDVjZmJkNGUyY2NjMDc4NzMwNmY2NTFjYjJkZTZiODYyZDNiZmViMTBjMGU3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.m0T4QWt0DtKhISxZKfCuWcw-Ho06Awy2_8qSBH7GKXE)
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
- I’m not disclosing any internal or sensitive information.
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.