Is there an input I can use to exempt a property from a Variant?

Ask the community
1

I’m designing a Navigation Bar component for both mobile and desktop. On Mobile I have many variants like dark/light mode, optional icon, optional avatar, optional title, etc. On desktop I do not need all of these variants, only really need light/dark mode.

I’d like to call them both Navigation Bar, and be able to toggle between mobile/web with variants but I’d love to be able to input “N/A” or something else into the optional icon, avatar, title fields for my desktop version so that those properties do not show up in the side panel.

Essentially it’s like an “if” statement…if Navigation Bar = Desktop, don’t show “X” properties in the side panel.

Does that make sense? The only workaround I can find is to make the mobile and desktop variants separate components so that they have their own property types. If I do this I need to name them different things like “Mobile Navigation Bar” and “Desktop Navigation Bar” which I’d like to avoid.

2

I spend so much time planning out variants that I often forget that there’s nothing wrong with just using components.

Consider renaming them “Navigation Bar / Mobile Nav” and “Navigation Bar / Desktop Nav”. Then instead of swapping variant values, you swap two “versions” of a component.

I’m sure this approach will still be easy for your designers to use. Plus it will be less likely to break between files.