Booleans don't seem to work inside components

Ask the community
1

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
2

Same here, quite a strange limitation !

2 Likes
3

Same here. Not sure if itā€™s a bug or the way itā€™s supposed to work.

1 Like
4

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.

3 Likes
5

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
6

Have posted in Share an idea topic, please vote guys Boolean Variables Assignable inside component @Petrro @halkiona

1 Like
7

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:

  1. show with different states - default, hovered and focused - I used the variants property for that.
  2. ā€œ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.

8

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
9

Up. I canā€™t solve the problem

10

Same here, Iā€™m having the same issue as @Felicia_Birloi :melting_face:

11

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.