vuestorefront
[RFC] Framework Level Z index Config
Describe how this feature will help us improve In a design system, i think it's important to define relationship between components, and Z index is an important way of defining a hierarchal or importance. For reference i think we can take examples from design systems that are already out there like Ionic (link to how they manage global z-indexes that can then be customized by developers.)
By giving sidebar or drop-downs a higher default z index than the bottom nav, we would be saying that interacting with this element is more important than the bottom navigation.
Is your proposal related to a problem? Without framework level z-index definition, when developers work on their apps, they have to manually manage z-indexes.
This either requires they first create a global z-index framework themselves or manually update values every time they want to change something or realize that they want to fit something between two items in the stacking context.
Describe the solution you'd considered Either in the layout helper .scss file or an independent helper file, we'd manage css or sass variables (not sure which would be better here) that would classify z-index variables in a declarative way. This way they can be used on components in the framework as needed and used by developers who might create their own components.
For example, if someone creates a custom modal/popover, instead of guessing or researching the best z-index value to use, they would simply use "$z-index-overlay" and not worry about the actual number.
Would love to hear what the community thinks. I think this would make general development easier since components are stacked in a very consistent manner in every app, so this isn't something that developers are going to constantly customize or butt their head against. If anything, its just one less thing to think about.
┆Issue is synchronized with this Jira Zadanie by Unito
Given the consistent way of how components are stacked across apps I would like to see default z-indexes for all components. I don't have a preference where or how it is managed, but forcing developers to define these themselves seems like creating an unnecessary barrier to adoption.
Hey @dt2patel, thanks for filing this issue!
It indeed looks as a good addition, but as SFUI1 is now in LTS mode and the team is now focusing on SFUI2 I must say there is not enough capacity for us to tackle this feature request.
That's why I have question for you (or maybe other community members if they're reading this): Would you be willing to develop this change in our library? If so - I would love to discuss this addition with you on our discord channel and guide you through with development! 🚀
I'll leave this ticket open for a week to wait for an answer - after that I'll close this issue as it doesn't falls under our LTS scope.
Waiting to hear from you!
Hi @FRSgit, I won't be able to add this. You can go ahead and close this ticket.
Okay, I'm closing the issue then.
You can try on using SFUI2 which is tailwind-based which means that there is z-index configuration possible via tailwind.config.
If anyone will be willing to add this feature to SFUI1 in the future - feel free to respond here or contact us on our discord server!