SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
266 stars 126 forks source link

CX: Side Navigation design updates/improvements #11084

Closed droshev closed 7 months ago

droshev commented 9 months ago

Issue 1 There are some design updates/improvements for CX Side Navigation. The goal is to analyze and identify the changes (styles and ngx) and use this ticket as an overarching one.

Is this a bug, enhancement, or feature request?

enhancement

Describe your proposal.

  1. Identify what needs to be handled in Styles and implement that first
  2. Remove Rounded Corner at the Top - The rounded Corner at the top should be removed as the background might bleed through in certain scenarios. The corner needs to be removed in the variants “wide” and “narrow”.
  3. Side Navigation Items: text wrapping as default, truncation optionally - This is an Accessibility requirement coming from the Commerce product area. Text wrapping should be the default. Truncation can be optional.
  4. Introduction of Group Headers - Group Headers should be implemented for the CX Side Navigation. This is a requirement from the Commerce product area for backward compatibility with the previous implementation of the Side Navigation. The Group Headers shall be visible in the “Wide” state of the CX Side Navigation.
 In the “Narrow” state, the Group Headers should not be displayed.
  5. Animation - The transitions between the different states (Invisible, Narrow, Wide) should be animated. We suggest aligning with the versions of the Side Navigation coming from the BTP area. In this variant, the following transition is used: transition: width .3s,min-width .3s
  6. Scrollbar Issues - When the scrollbar is not suppressed on an OS-level, the regular OS / browser scrollbar is displayed. The OS / browser scrollbar is also shown when collapsed. This should not be the case as we would like to see the up/down buttons here. In some scenarios, when “height” is set to “auto”, it is also truncated at the bottom.

Can you handle that on the application side

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

If this is a bug, please provide steps for reproducing it; the exact components you are using;

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

droshev commented 8 months ago

@N1XUS Can you take this one?