search

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
163 stars 42 forks source link

CdsModalActions is not visible when rendered after a timeout #188

Closed astorije-vmware closed 1 year ago

astorije-vmware commented 1 year ago

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 version:

Framework:

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 commented 1 year ago

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[bot] commented 1 year ago

:tada: This issue has been resolved in version 6.2.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 1 year ago

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.