Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components Enhancement - Dynamic Header #5160

Open
rebecagm opened this issue Feb 5, 2024 · 0 comments
Open

Components Enhancement - Dynamic Header #5160

rebecagm opened this issue Feb 5, 2024 · 0 comments

Comments

@rebecagm
Copy link

rebecagm commented Feb 5, 2024

Is your feature request related to a problem? Please describe.
The current implementation of the 'Dynamic Header' does not support the behaviour or aesthetics envisioned by the Fiori Design System. Several developers have been facing issues in achieving our design proposal where the 'Dynamic Header' counts with an 'Avatar' and a 'Message Strip,' while fd-dynamic-page-subheader [collapsed]="true" [collapsible]="false".

Is this issue related to a specific component?
fd-dynamic-page-header and fd-dynamic-page-subheader
Dynamic Page with Facets Stackblitz: https://stackblitz.com/run?file=package.json

What browser are you working in?
Microsoft Edge

What version of Fundamental Library Styles are you using?
Latest, v0.48.4

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
Commerce Cloud - SaaS Tooling / Extensibility

What front-end framework are you implementing in, e.g., Angular, React, etc.?
Angular

Describe the solution you'd like
To achieve the proposed design, we request the following:

(1) Add an extra div container to the fd-dynamic-page-header immediately below div class="fd-dynamic-page__main-container". So, the developers can place the fd-message-strip at the 'Dynamic Header' without interfering with the fd-dynamic-page-subheader collapse functionality. Or have the fd-avatar as a facet directly at the fd-dynamic-page-header.

(2) Improve margins and paddings according to the following specifications.

Dynamic Header Specifications

Describe alternatives you've considered
The developers have unsuccessfully tried several different tricks with the code to achieve the desired result, including:

(1) Placing the 'Message Strip' inside the 'Subtitle'

<ng-container *fdDynamicPageHeaderSubtitle="let collapsed">
Subtitle {{ collapsed ? 'collapsed' : 'expanded' }}

Screenshot 2024-02-05 at 17 14 41

Additional context
The additional request regarding the margins and paddings review is due to the 2rem (32px) between 'Avatar' and 'Page Title' at the current implementation. The VD specifications suggest the padding between those components should be 1rem (16px) when the 'Dynamic Header' is collapsed (at the header) and 2rem (32px) when expanded (at the sub-header).

Screenshot 2024-02-05 at 16 24 08 Screenshot 2024-02-05 at 17 34 20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant