ShellBar responsive behavior

[ericobranco]

Hi colleagues,

As a non-developer, I will try to explain the issue as best as I am able to:

Our application is hosted by another team, whose Shellbar we inherit. It seems that this ShellBar is using the size “S” margins even on size “M” and “L” screens. This leads to our horizontal tab navigation directly below the Shellbar and subsequent content appearing to be indented in relation to the Shellbar content:

I have reached out to the team responsible for the platform our application is being hosted at (and also to the Fundamental team), and was told the Luigi framework is being implemented there, and that the Shellbar comes with default margin values (which they are not sure could be dynamically changed).
Would someone be able to bring some clarity as to why the Shellbar isn't dynamically adopting the correct margin to the screen size? (One suggestion I got was that maybe this is rather a Toolheader control instead of a Shellbar)

Thank you in advance for the support!

[hardl]

Hi @ericobranco,

luigi is indeed using fundamentals shellbar component, so in theory it behaves like defined there.
However, the application using luigi has full control about its styling (see https://docs.luigi-project.io/docs/faq?section=ui-questions).
I assume, if it is only about different margins for different screen sizes, it should be easily doable with a small custom css snippet with some media queries.

BR

[JenniferStamm]

Hi @hardl ,

I don't understand why that burden falls onto Luigi users. In my opinion, it would add more value if Luigi would take care of adding the necessary modifiers from fundamental-styles to make the default shellbar responsive. Responsiveness should be an essential requirement to most consumers, isn't it? So your suggestion means that every single consumer adds custom styles or implements Javascript to manipulate the DOM and add the missing fundamental-style classes. That's a lot of repeated code that you could provide, right?

The fundamental-styles' documentation of fd-shellbar includes examples on how to add the modifiers (e.g. fd-shellbar--l) for different screensizes. I haven't found any of them applied in this code base, but I'm not familiar with Svelte, so I might have missed it.

[hardl]

Hi @JenniferStamm,

maybe my answer was a bit too generic here and therefore I failed to explain my opinion about this particular issue, sorry for that ;)
Also my answer was not meant to be end of discussion but rather the beginning.
Let me try to make it more clear:

1. When it comes to styling and visual behaviour according to standard Fiori3 specs, I don't say that this burden should be on luigi users, not at all. This should work indeed out-of-the-box.
2. We assume that styling and visual behaviour is provided by fundamental styles, that is what I meant when I said ' it behaves like defined there'.
3. If luigi users have issues with the styling and visual behaviour luigi provides, be it because of a bug in luigi/fundamental styles or because they want to have custom styling, it is possible to (temporarily) customize it, i.e. they are not "blocked".

Now to your particular issue:
I will start a discussion with fundamentals team to clarify the issue, imho you are absolutely right by saying "Responsiveness should be an essential requirement to most consumers", and I think not only for luigi customers but also for fundamental library customers. I don't see a good reason why fd styles shouldn't provide this responsiveness oob instead of providing these modifiers (which is kind of the opposite of responsive) but maybe there is one. In that case, we will consider handling it on our end.

BR,
Philipp

[hardl]

Fd styles PR: SAP/fundamental-styles#3698

[hardl]

Feature will be available with #2764.