Question about slot layouts and isHidden pattern in S2 Dialog components

[alexasselin008]

Hi! 👋

We’re building on top of our company’s design system, using RAC as the foundation, and we’ve been drawing a lot of inspiration from how you structure components in S2. Really appreciate the clarity of your approach, especially the way you manage layouts with Context, slots, and CSS grid. It’s elegant and flexible.

I wanted to pick your brain on something we’re running into. The way slots are laid out with grid works really well overall, but it makes it tricky to introduce wrapper elements around specific groups of slots. For example, in our Dialog component, we want to group things like:

The top section:

• Heading + Header
• The main content
• The bottom section: Footer + ButtonGroup (or just a single button)

We noticed your use of isHidden in S2’s Dialog, and it's a clever way to handle conditional layout logic. Really like that pattern.

Here’s where our situation starts to differ. Our design is more flexible about what can appear inside the “Content” slot. In some cases, Heading, Disclosure components (which include a Heading) or even buttons can be part of the content. With the current S2-inspired setup, these nested components receive the isHidden flag and are conditionally hidden when they shouldn’t be, just because they’re inside Content.

One workaround I’ve considered is having the Content component reset or override the isHidden context for other placeholder components. But that feels a bit off, since it makes Content aware of all the other placeholder contexts, which adds coupling we’d prefer to avoid.

Curious if you’ve hit this scenario before or explored any other clean ways to solve it. Would love to hear your thoughts.

Thanks so much!

[snowystinger]

Thanks for the discussion. I think you might be interested in this PR we just made. #8321 (comment)

[alexasselin008]

Wow, great timing! thanks a lot!