I would like the ability to use the same boolean property to show and hide for both true and false. An example use case would be a play/pause button. I would like to have a boolean property called “playing” that if set to true, would show a “pause” icon and hide a “play” icon, and if set to false, would show and hide the reverse.
You could do that with just two icons next to each other, one that is on, and the other that isnt.
Or just nest them inside another component where you have those two things set to different variants, rather than the boolean.
1 Like
Not sure I follow you on the first suggestion.
Do you mean having a like an autolayout button, with two icons next to each other, but the button has been resized with clipping on to hide the second icon, and then set the boolean on the first icon, so that toggling just affects the first one, and swings the second one in and out of view based on whether the first icon is visible? I guess that would be a not-too-difficult workaround for this very specific use case of interchangeable icons, but I would want the props functionality I described for more complex components too - eg. show and hide multiple different sized/shaped/positioned elements in a component all with a single boolean toggle.
As for the suggestion to use variants, that is how I’ve already been doing it. The point of the component properties is to reduce the need for variants. Again, maybe not as necessary for the example I gave (I was just trying to illustrate the concept), but I want to be able to use the fewest variants and props as possible when building my components.
1 Like
Agreed, although I don’t quite see which form it could take. I’ve expanded on other examples in this thread.
In my Input field component, I want to show placeholder when show value prop is true but I am not able to do this without creating another variant. Hopefully reverse prop is something easy for Figma to implement.
This would make the boolean so much more useful.
There is probably a better way, but something like this.
5 Likes
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.