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

Modals have incorrect bottom padding with empty modal actions container #187

Closed astorije-vmware closed 1 year ago

astorije-vmware commented 1 year ago

Describe the bug

Screen Shot 2022-10-27 at 6 42 58 PM Screen Shot 2022-10-27 at 6 43 10 PM

How to reproduce

Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/cds-modal-actions-padding-b1fl7t
  2. You will need to open the preview in a dedicated window. Click "Open in New Window"
  3. Open modal 1 to see the correct padding, modal 2 for the incorrect padding

Expected behavior

Both modal 1 and 2 should look identical.

Versions

Clarity project:

Clarity version:

Framework:

Framework version:

React 18

Additional notes

Why rendering an empty CdsModalActions in the first place?

We need empty actions because we display the action button conditionally. We initially wrapped the conditional around the entire container (instead of just the button) as a workaround, but another issue kicked in: when the modal is opened and the actions container is meant to render later, it simply... does not appear.

I opened https://github.com/vmware-clarity/core/issues/188 to report this behavior as well.

ashleyryan commented 1 year ago

cds-modal-actions is an html element. If instead of a component, you were to render <div class="my-footer"></div> you wouldn't expect it to behave any differently than it does now. Yes, you're going to get a gap between the body and the actions when you include the cds-modal-actions element, just like if you used a div. They're both HTML Elements.

Looping @colinreedmiller in to chime in, but I don't think this is something we'll fix (I will try and fix the linked issue, however).

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.