CdsModalActions is not visible when rendered after a timeout

[astorije-vmware]

Describe the bug

When CdsModalActions is rendered after a timeout, nothing appears. This is better demonstrated on the sandbox below.

How to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/cds-modal-actions-timeout-7xpf0c
2. Click on "Open modal"
3. Wait 3 seconds to see the content change. When that happens, the actions should be visible as well, but they are not.

Expected behavior

The button should appear at the same time as the content changes.

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v5.x
• v6.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:

React 18

Additional notes

This can be mitigated by rendering the button conditionally only, and not the CdsModalActions container, but when doing so I run into #187.

[ashleyryan]

I think I know why this is happening and I'm trying to think of the best way to fix it without messing up all of the CSS.

We conditionally render the footer slot, if it's supplied. This works for the first render. The problem is that after the first render, that slot no longer exists, so when you try and add content with that slot name, it has nowhere to go. I think we need to get rid of the gap the cds-layout uses and conditionally apply top margin if the footer slot exists instead.

[github-actions]

🎉 This issue has been resolved in version 6.2.2 🎉

The release is available on:

• GitHub release
• v6.2.2

Your semantic-release bot 📦🚀

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.