fix: quick fix for shadowDom issue in dialog

qupaya · Aug 1, 2024 · 5e4b8f0 · 5e4b8f0
1 parent a3204f6
commit 5e4b8f0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/apps/demo-app/src/styles.css b/apps/demo-app/src/styles.css
@@ -16,7 +16,6 @@
 * {
   padding: 0;
   margin: 0;
-  box-sizing: border-box;
 }
 
 html,

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -15,15 +15,22 @@
   --sk-dialog-backdrop-blur: 0;
 }
 
+.display-flex {
+  display: flex;
+}
+
 .sk-dialog {
-  width: var(--sk-dialog-width);
-  height: var(--sk-dialog-height);
+  width: 100vw;
+  height: 100vh;
   max-width: 100%;
   max-height: 100%;
   padding: 0;
   border: none;
   outline: none;
   background-color: transparent;
+  position: relative;
+  align-items: center;
+  justify-content: center;
 }
 
 .sk-dialog:has(::backdrop) {
@@ -59,16 +66,13 @@
   right: auto;
 }
 
-.sk-dialog-fullscreen-dialog {
-  height: 100%;
-}
-
 .sk-dialog-wrapper {
   position: relative;
   display: flex;
+  inset: auto;
   margin: var(--sk-dialog-margin);
-  height: calc(100% - (var(--sk-dialog-margin) * 2));
-  max-height: calc(100svh - (var(--sk-dialog-margin) * 2));
+  width: var(--sk-dialog-width);
+  height: var(--sk-dialog-height);
 }
 
 .sk-dialog-content-container {
@@ -102,3 +106,10 @@
       (var(--sk-dialog-container-padding) * 2)
   );
 }
+
+.sk-dialog-fullscreen-dialog {
+  height: calc(100% - (var(--sk-dialog-margin) * 2));
+  max-height: calc(100svh - (var(--sk-dialog-margin) * 2));
+  width: calc(100% - (var(--sk-dialog-margin) * 2));
+  max-width: calc(100svw - (var(--sk-dialog-margin) * 2));
+}
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -4,9 +4,12 @@
   skClickBackdrop
   (clickedBackdrop)="close.emit()"
   (keydown.escape)="close.emit()"
-  [ngClass]="{ 'sk-dialog-fullscreen-dialog': fullscreen() }"
+  [class.display-flex]="open()"
 >
-  <div class="sk-dialog-wrapper">
+  <div
+    class="sk-dialog-wrapper"
+    [ngClass]="{ 'sk-dialog-fullscreen-dialog': fullscreen() }"
+  >
     @if (showCloseButton()) {
     <div
       class="sk-dialog-close-button"

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.ts b/libs/sketch/src/lib/components/dialog/dialog.component.ts
@@ -5,7 +5,6 @@ import {
   output,
   viewChild,
   model,
-  ViewEncapsulation,
   untracked,
   ElementRef,
 } from '@angular/core';
@@ -23,7 +22,6 @@ export enum CloseButtonPosition {
   imports: [ClickBackdropDirective, NgClass],
   templateUrl: './dialog.component.html',
   styleUrl: './dialog.component.css',
-  encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class DialogComponent {
   readonly open = model(false);
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,6 @@ @@
     * {
       padding: 0;
       margin: 0;
-      box-sizing: border-box;
     }
     html,
@@ Expand Down @@