I have run into a bug / limitation on Boolean variables.
I created a button component with an active and a disabled state. The property to switch between them is a true / false Boolean.
I set a boolean variable #decementActive
This is used in a layout with buttons, one that increments a count upward, and another that increments down. The boolean property is tied to the #decrmentActive variable for the button that decrements.
It is set to false by default, meaning the decrement button is disabled state.
When the user clicks the increment button, it sets #decrmentActive to true and the decrement button becomes active. So far, so good.
If I convert this into a component, the boolean no longer works on this or any other button or anything else. Other assigned variables ā color, numbers, strings ā are fine. It strips booleans from the button and I cannot reattach them.
Is this a bug? A limitation? Am I missing something?
5 Likes
Same here, quite a strange limitation !
2 Likes
Same here. Not sure if itās a bug or the way itās supposed to work.
1 Like
For some reason boolean variables can be assigned to the instances only at this moment. If the instance is a part of a different set of components, the variable connection is broken and cannot be re-applied.
Example: I have a simple tree where I keep selection only to a single node using boolean variables - pretty much a straightforward turn off Row1,2,3 and 5 by clicking on Row4 etc.
The moment I want to use this tree in a bigger design, nested in a component that will have its own Variants and states, it all falls apart. Only the last instance in a chain can have boolean variables applied. Which breaks my intended āonly one node selectionā functionality completely. And that is just one example.
Having it this way makes zero sense; pretty much all of my designs use nested components instances.
Functionalities that are intended for components lower on the Atomic Design chain will straight wont work until this is fixed. And it needs to be fixed, as I see no reason for it to be anything else but a bug.
4 Likes
Letās Ask for this feature to be enabled, because without that reusable components are at stake. I will post this as an idea. Guys please vote @David_Putney @Fabien_Moreno
1 Like
Hi,
Iām not sure if this is my problem as well, please advise:
Inside a component I have some icons that I need to:
- show with different states - default, hovered and focused - I used the variants property for that.
- āshow/hideā - I used the boolean property for that
Now, the issue Iām facing is that the boolean properties appear only for an instance of the first variant in the component set, and not for the rest of them.
I feel like Iām missing something, not sure what and already spent a while on this.
Hey all! I found that booleans DO work inside componentsābut only if you have 2 variants total. One must be named āTrueā and the other must be named āFalseā.
You can also name the variant layer as such: [component name]=True
Otherwise you can only tag variants with a string value. Hope this helps!
1 Like
Up. I canāt solve the problem
Same here, Iām having the same issue as @Felicia_Birloi
You LIFE SAVER.
I had 3 states in my component - True, False and ālogo onlyā. Removed the Logo only state and I can now select the boolean variable.
A weird limitation on Figmaās part, but I can work around it.