Booleans don't seem to work inside components

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?

3 Likes

Same here, quite a strange limitation !

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

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.

2 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

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

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.