Allow components event to change states of other components
New states feature is excellent but restricted for self components interaction. In many cases, especially in web and desktop apps, there are cases where a component event should affect another element on screen.
It would be a super powerful option to allow a component event to change states of another component.
Currently if i use component A inside component B, i can't use A to change state of B, even though A is part of B.
-
Niklas Drugge commented
Yes absolutely! The new component states are just what was needed for XD, but without this functionality they offer very limited benefits.
I was also trying to achieve something very similar an bumped into this problem. I was hoping to do a list element with a checkbox inside it - and by clicking the checkbox it would change the list element to "selected" state. Obviously I would like to keep the checkbox as a component to use elsewhere in the design as well.
However, since the checkbox is a component, it cannot control the parent elements state - thus making it impossible to change the state of its parent, the list element.
Non-component items CAN control the parent's state, so I would think this would not be that big of a deal to fix. So for example if I make the checkbox not a component, it would work just as intended.
One workaround would be to place an invisible box on top of the checkbox component, that would then control the parent's state, but that's such a dirty way to fix it, that I would prefer not to use it.
TL;DR Nested component interaction destination cannot be set to change parent state - this is a problem!
-
Morgan Caldbeck commented
I do agree, that we should have the ability to use a state change trigger the state of an otherwise unrelated component.
For example, when building a mega menu, I have a list of items on the left side. I want to be able to “click” that item (thus triggering a state change), and further have that change my items list on the right to a state reflecting the clicked category with its appropriate set of items.
This would allow us to create fully functional site demos.
-
Morgan Caldbeck commented
There is the ability to use components inside of components in different states. As of now, we can set component A to a different state, if component B is inside of A, we can set A to, for example hover state, and in design mode, with A set to hover, we can set B to a different state as well.
With this method, you can alternate states of components within other components based on the parents state.
That may be hard to understand but that’s a very brief summary of doing what your talking about here to a limited degree.
-
Victor Bergh commented
This would be extremely useful! If that is made, XD will be more or less complete!
-
Xavier commented
Absolutely right, like a real app.
> events bubble up. The super-component composed of sub-components have the ability to hook each events trigger by the sub-component.
> event go down. Super-component can trigger event hook by sub-component.Like this each sub-component keep their life and if they are part of a super-component this one become the chef.