fix(dialog): show dialog by default (#37)

If the `open` attribute is initially present on the `twc-dialog`
element, we want to show the dialog.

Author: abeidahmed

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Fixed
 
+- Show dialog by default if `twc-dialog` element has the `open` attribute
 - Nested dialog resets `body` padding
 
 ## [0.3.0] - 2024-03-08

packages/core/src/elements/dialog/README.md

@@ -31,6 +31,16 @@ button.addEventListener('click', openDialog);
 
 ## Examples
 
+### Show dialog by default
+
+You can add the `open` attribute on the `twc-dialog` element, and the dialog will be shown by default.
+
+```html
+<twc-dialog open>
+  <dialog data-target="twc-dialog.dialog">Contents</dialog>
+</twc-dialog>
+```
+
 ### Programmatically toggling the visiblity state
 
 ```html

packages/core/src/elements/dialog/index.test.ts

@@ -49,6 +49,18 @@ describe('Dialog', async () => {
     expect(document.body).not.to.have.style('overflow', 'hidden');
   });
 
+  it('opens the dialog by default', async () => {
+    const el = await fixture<DialogElement>(html`
+      <twc-dialog open>
+        <dialog data-target="twc-dialog.dialog">Contents</dialog>
+      </twc-dialog>
+    `);
+    const dialog = el.querySelector('dialog')!;
+
+    assertDialogShown(el, dialog);
+    expect(document.body).to.have.style('overflow', 'hidden');
+  });
+
   it('closes the dialog when clicked outside', async () => {
     const el = await fixture<DialogElement>(html`
       <twc-dialog>

packages/core/src/elements/dialog/index.ts

@@ -19,6 +19,15 @@ export default class DialogElement extends ImpulseElement {
     this.handleClose = this.handleClose.bind(this);
   }
 
+  /**
+   * Called when the element is connected to the DOM.
+   */
+  connected() {
+    if (this.open) {
+      this.showModal();
+    }
+  }
+
   /**
    * Called when the element is removed from the DOM.
    */