fix: style dialog without shadow dom, to preserve standard HTML dialo…

…g behaviour
pod-os · Mar 1, 2024 · b378655 · b378655
1 parent de98145
commit b378655
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/elements/src/components.d.ts b/elements/src/components.d.ts
@@ -31,6 +31,13 @@ export namespace Components {
     }
     interface PosDescription {
     }
+    /**
+     * Styled wrapper around native dialog element, with slots `title` and `content`
+     */
+    interface PosDialog {
+        "close": () => Promise<void>;
+        "showModal": () => Promise<void>;
+    }
     interface PosDocument {
         "alt": string;
         "src": string;
@@ -321,6 +328,15 @@ declare global {
         prototype: HTMLPosDescriptionElement;
         new (): HTMLPosDescriptionElement;
     };
+    /**
+     * Styled wrapper around native dialog element, with slots `title` and `content`
+     */
+    interface HTMLPosDialogElement extends Components.PosDialog, HTMLStencilElement {
+    }
+    var HTMLPosDialogElement: {
+        prototype: HTMLPosDialogElement;
+        new (): HTMLPosDialogElement;
+    };
     interface HTMLPosDocumentElementEventMap {
         "pod-os:init": any;
         "pod-os:resource-loaded": string;
@@ -642,6 +658,7 @@ declare global {
         "pos-container-contents": HTMLPosContainerContentsElement;
         "pos-container-item": HTMLPosContainerItemElement;
         "pos-description": HTMLPosDescriptionElement;
+        "pos-dialog": HTMLPosDialogElement;
         "pos-document": HTMLPosDocumentElement;
         "pos-error-toast": HTMLPosErrorToastElement;
         "pos-image": HTMLPosImageElement;
@@ -705,6 +722,11 @@ declare namespace LocalJSX {
     interface PosDescription {
         "onPod-os:resource"?: (event: PosDescriptionCustomEvent<any>) => void;
     }
+    /**
+     * Styled wrapper around native dialog element, with slots `title` and `content`
+     */
+    interface PosDialog {
+    }
     interface PosDocument {
         "alt"?: string;
         "onPod-os:init"?: (event: PosDocumentCustomEvent<any>) => void;
@@ -807,6 +829,7 @@ declare namespace LocalJSX {
         "pos-container-contents": PosContainerContents;
         "pos-container-item": PosContainerItem;
         "pos-description": PosDescription;
+        "pos-dialog": PosDialog;
         "pos-document": PosDocument;
         "pos-error-toast": PosErrorToast;
         "pos-image": PosImage;
@@ -844,6 +867,10 @@ declare module "@stencil/core" {
             "pos-container-contents": LocalJSX.PosContainerContents & JSXBase.HTMLAttributes<HTMLPosContainerContentsElement>;
             "pos-container-item": LocalJSX.PosContainerItem & JSXBase.HTMLAttributes<HTMLPosContainerItemElement>;
             "pos-description": LocalJSX.PosDescription & JSXBase.HTMLAttributes<HTMLPosDescriptionElement>;
+            /**
+             * Styled wrapper around native dialog element, with slots `title` and `content`
+             */
+            "pos-dialog": LocalJSX.PosDialog & JSXBase.HTMLAttributes<HTMLPosDialogElement>;
             "pos-document": LocalJSX.PosDocument & JSXBase.HTMLAttributes<HTMLPosDocumentElement>;
             "pos-error-toast": LocalJSX.PosErrorToast & JSXBase.HTMLAttributes<HTMLPosErrorToastElement>;
             "pos-image": LocalJSX.PosImage & JSXBase.HTMLAttributes<HTMLPosImageElement>;

diff --git a/elements/src/components/pos-dialog/pos-dialog.css b/elements/src/components/pos-dialog/pos-dialog.css
@@ -1,7 +1,4 @@
-:host {
-  font-family: var(--font-sans);
-  display: block;
-}
+
 
 dialog {
   background-color: var(--pos-background-color);
@@ -11,7 +8,8 @@ dialog {
   max-width: var(--width-xs);
 }
 
-dialog slot[name='title']::slotted(*) {
+dialog header > :first-child {
+  /* This is the title slot*/
   flex-grow: 1;
   font-weight: var(--weight-light);
   font-size: var(--scale-2);
@@ -20,14 +18,15 @@ dialog slot[name='title']::slotted(*) {
 dialog header {
   display: flex;
   flex-direction: row;
-  justify-content: start;
+  justify-content: space-between;
   align-items: center;
   gap: var(--scale-0);
   border-bottom-style: inset;
   padding-bottom: var(--scale-0);
 }
 
-dialog [name='content']::slotted(*) {
+dialog > :last-child {
+  /* This is the content slot*/
   margin: var(--scale-3);
 }
 

diff --git a/elements/src/components/pos-dialog/pos-dialog.tsx b/elements/src/components/pos-dialog/pos-dialog.tsx
@@ -6,7 +6,7 @@ import { Component, Host, h, Method } from '@stencil/core';
 @Component({
   tag: 'pos-dialog',
   styleUrl: 'pos-dialog.css',
-  shadow: true,
+  shadow: false, // shadow dom prevents the html dialog from working normally (autofocus, close on submit)
 })
 export class PosDialog {
   private dialog: HTMLDialogElement;