Positioning and background of Dialog is wrong when opened without a trigger button

[HDinger]

Version

0.18.1

Steps to reroduce

• Render a Dialog without calling with_show_button , e.g very simplified:

render(Primer::Alpha::Dialog.new(title: 'My awesome title', open: true)) do |d|
  d.with_body { 'Some modal text' }
end

Actual behavior

• The dialog is not rendered in the middle of the page, but at the top.

• The dark overlaying background is missing

Expected behavior

• Similar to how it behaves when opened via a button, the modal should be in the middle of the page.

• There should be a dark background

Notes

Both issues are a result of pseudo-selectors not being applied, when opened without the trigger. :backdrop (responsible for the dark background) and :modal (responsible for the positioning) are only applied when the a dialog tag is opened via HTMLDialogElement.showModal().

I don't know if I am missing something here, but I the fact that show_button is an optional slot, let's me assume that I should be able to render a Dialog from rails without the use of additional Javascript. I'd appreciate any input on this :)

[keithamus]

If you're using the JS API the call has changed from .show() to .showModal(), as it is now using the native <dialog> element which has both. The with_show_button has changed to use this too.