Allow nested components to trigger parent component states
Currently, a nested components cannot trigger a component state. You would have to ungroup it, so that it is no longer a component in order to be able to target a component state.
eg. I have a card component which has multiple states. Inside the default state, I have a button (which is a component). When I select to Tap that button component, I do not have the option to target the other states of that component. It only displays artboards as potential targets.
Julie Jacob commented
FURTHER, I have a button component, that component is part of a button group component that, in turn, is part of a control modal component. I need to be able to attach one of two actions to the button click/tap. Either one that changes the state of the button group, or one that changes the state of the modal (grandparent) component. We just need to have more capabilities between these nested components, period. And we needed this last year.
Wael Al Masri commented
I've been able to achieve this by adding a plain rectangle (not component) with 0 opacity top/behind the child component that has it's own state. Then in prototype mode, if you added this rectangle in the same group as the parent component you will be able to set the target of the tap/hover/action to a state of the parent component. This can be combined with states of child components as well. (Check the video, apologies for the poor quality of recording )
Stu Nami commented
Grouping components works in some instances. But try that with a Select Dropdown Form Element with a submenu that has nested submenu items that need to trigger the parent state where the name changes. Unless I'm m missing something. DO I create invisible hotspots in parent componentt on top of the submenu items to enable more than one trigger?
item 1 Item 2 item 3
After clicking on a submenu item the word "Select" changes in the dropdown element. I am able to achieve everything up to the point of changing out the parent text.
TAke a look in this tutorial
Take a look at this tutorial.
I have a layout component where several things change based on the state of a nested toggle control.
When the toggle changes, I need the parent component's state to change.
There already are a lot of requests of nested components, I'll just sum-up some of those:
1. Nested components to be able to trigger parent components states.
2. Components when nested retain their value/state (eg. color picking) in the default parent component state when following by the next component trigger
3. Components working in harmony: one component pops up a box overlapping the other components (not Overlay transition) regardless of the order in the layers panel AND while overlapped the hidden component be disabled (to avoid accidental click-through through the box)
Andrew Hart commented
SOLUTION FYI, if I understand you correctly, you can actually achieve this by adding a dummy enclosing group for each of the components that you wish to nest. You can then use these groups to create a component add triggers onto each group to change the state of the enclosing component. You need to remove the triggers from the sub-components or you get unpredictable trigger results. However, you do end up with a subcomponent that will modify its attributes when the main component is edited.
E.g. You have a traditional radio button component with 2 states. Unselected/Selected
You want a block of radio buttons where only one of the radio buttons can be sekected at any one time.
I.e. If you click on any of the radio buttons the other radio buttons are de-selected.
I'm sure that's enough info, but I like to be thorough, so below is a step by step
Add one radio button component to your artboard
Remove all state change triggers in this component
Copy the modified radio button component as many times as required
Right click on each radio button component and select Group.
Select all the radio button groups and create a component
Create a new state in the enclosing component, one for each radio button
E.g. Radio button 1 selected; Radio button 2 selected etc
For each state drill down in the appropriate radio button to the embedded component to change its state to selected
For each state, add a Tap trigger on each radio button group (ie not the encloded component) that chooses the appropriate state of the enclosing component.
FOR ADOBE XD
Even though it is possible to achieve the desired result using this procedure, I suspect that many people willnot easily figure this out. You should be able to do this without going through the rigmarole of enclosing each component in a dummy group. I consider this a bug.
If, e.g. I created a button with multiple states as a components and then used that button within another component (popup/modal) it would be good to be able to set and action on the button component to change the state of the, e.g. popup/modal component.