Skip to main content
Solved

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

  • April 15, 2021
  • 1 reply
  • 522 views
typography

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.

Best answer by Radley

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.

View original

1 reply

Radley
  • Radley
  • 11 replies
  • Answer
  • April 15, 2021

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.

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings