Component Props - Parent/Child Layer booleans?

I think the current behavior is logical. A nested layer shouldn’t be hidden (its visibility settings) if its parent is hidden. Each element has its own visibility settings.

You may notice a dot instead of an eye in the layers panel, which means that the element isn’t visible due to its parent’s visibility settings.

It’s the same in code: you can control the visibility of the parent instead of changing the visibility settings of its children.

For example:

<!-- HTML -->
<div class='parent'>
    <div class='child'>
        <p>Something</p>
    </div>
</div>

---

/* CSS */
.parent {
    display: none
}

.child {
    display: block
}

p {
    display: initial
}

Will pass this along to the team. Currently, for the parent to know which of the children containing props are also related to its action, the children would need to have the same ‘actions’ boolean applied. Since the children are also booleans this isn’t possible, and this behavior is only possible with instance swap or text props as children of booleans today.

For this example structure I’m curious if the actions prop is needed? Are there cases where a banner could be dismissible without it containing buttons? Would it be cleaner to apply a boolean for the buttons to toggle their visibility (framed or each individually) and another prop for the dismissible action?

I think it might be logical to some people, but I believe most users (consumers, designers using instances, etc.) would be confused by this behavior.

@chad yup, my solution for now is one boolean for “Dismissable” and another one for the two buttons “Actions”. So this way we’re not counting the “X” icon button an “action” per se.

I don’t think that’s how the engineers will implement it (I believe they’ll group all buttons in an “actions” group), but it gets the job done for now. 👍

Appreciate the response!

Note: I’ll communicate this to my engineering partners so we’re aligned, in case anyone was wondering about that. 😜

I wonder if another way would be to show some visual representation of the nesting. That way users can see the relationship between the parent and child props. As a work around you could manually add that representation using the return right ⮑ unicode symbol. I wonder if as well as the nesting, there should be a different toggle icon for the nested props just like how the eye icon changes for layers.

Yes, I often find myself setting up a component this way only to see it not remove the props of children. It always confuses me because if you have a swap prop, it does go away if you hide the parent so I always expect same behaviour…

Exactly! this would be super useful! this is def something that I would love to have for the next launch of our design system

Came across a bug today (I believe it’s a bug at least?) related to this. More specifically, this is a result of NOT having Parent/Child layer booleans.

I have two Layer booleans for two nested objects in an Auto Layout group. If both objects within are hidden, shouldn’t the parent shrink to a width of 0px?? And yes, the parent does have Hug contents. If not, I’m very confused by the current behavior. I reported this to support, thinking that this is a bug.

@Ridd @chad @Gavin have you come across this issue before?

To “fix” this issue, I’m going to have to provide an extra prop for the parent now, or ungroup them out of the “actions” group (for now hopefully.)

Yup. Same issue here 😔 I would love either one of these solutions:

1. If the parent size respects the hidden children vs. preserving the width/height as if it’s not set to hug contents

2. Or if adding a boolean prop to the parent also hides the child boolean props when hidden. This is how it works for instance swaps. Not sure why it doesn’t work this way for boolean properties too.

Thanks for sharing that post @tank666. I’m sharing my post (this thread) with Support too.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.