fix: support of dialog in old versions of browsers (#319)

* fix(dialog): add polyfill dialog component * fix: center dialog & position backdrop * fix(dialog): add dialog polyfill operations * fix(dialog): code review and fix * style(dialog): fix style lint error * fix(dialog): fix z-index * refactor(dialog): code review and refactor dialog * refactor(dialog): refactor event listeners * refactor(dialog): revert template and fix fixme comments Co-authored-by: damla.demir1 <[email protected]> Co-authored-by: olkeoguz <[email protected]>
Trendyol · Nov 21, 2022 · 1d77755 · 1d77755
1 parent 7084627
commit 1d77755
Show file tree

Hide file tree

Showing 5 changed files with 300 additions and 197 deletions.
diff --git a/playground/template.html b/playground/template.html
@@ -30,4 +30,4 @@ <h1>Baklava Playground</h1>
 
     <bl-button>Baklava is ready</bl-button>
   </body>
-</html>
+</html>
diff --git a/src/components/dialog/bl-dialog.css b/src/components/dialog/bl-dialog.css
@@ -1,36 +1,68 @@
-dialog {
-  padding: 0;
-  border: 0;
+.container {
+  display: flex;
+  flex-direction: column;
   background: var(--bl-color-primary-background);
-  border-radius: var(--bl-border-radius-l);
   max-width: calc(100vw - var(--bl-size-4xl));
   max-height: calc(100vh - var(--bl-size-4xl));
-  overflow: hidden;
+  min-width: 424px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--bl-border-radius-l);
 }
 
-dialog::backdrop {
+.dialog,
+.dialog-polyfill .container {
+  padding: 0;
+  border: 0;
+  border-radius: var(--bl-border-radius-l);
+}
+
+.dialog-polyfill .container {
+  position: fixed;
+
+  /* FIXME: Use z-index variable */
+  z-index: 999; 
+ }
+
+.dialog::backdrop {
   background: #273142;
   opacity: 0.7;
 }
 
-dialog .container {
-  min-width: 424px;
-  min-height: 178px;
+.dialog-polyfill {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+
+  /* FIXME: Use css variables for alpha colors */
+  background: #273142b3;
+
+  /* FIXME: Use z-index variable */
+  z-index: 999; 
+ }
+
+ :host([open]) .dialog-polyfill {
+  display: flex;
 }
 
-dialog header {
+header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--bl-size-2xs);
   padding: var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl);
 }
 
-dialog header bl-button {
+header bl-button {
   margin-left: auto;
 }
 
-dialog header h2 {
+header h2 {
   font: var(--bl-font-title-1-medium);
   color: var(--bl-color-secondary);
   white-space: nowrap;
@@ -40,38 +72,31 @@ dialog header h2 {
   padding: 0;
 }
 
-dialog .content {
+.content {
   padding: var(--bl-size-xl) var(--bl-size-xl) var(--bl-size-m) var(--bl-size-xl);
   overflow: auto;
 }
 
-dialog footer {
+footer {
   padding: var(--bl-size-xl);
   display: flex;
   flex-flow: row-reverse wrap;
   gap: var(--bl-size-m);
 }
 
-dialog footer.sticky {
-  position: sticky;
-  bottom: 0;
-  z-index: 999; /* FIXME */
-  background-color: var(--bl-color-primary-background);
+footer.shadow {
   box-shadow: 0 -4px 15px #27314226;
 }
 
-@media only screen and (max-width: 469px) {
-  dialog {
+@media only screen and (max-width: 471px) {
+   .container {
     max-width: calc(100vw - var(--bl-size-2xl));
     max-height: calc(100vh - var(--bl-size-2xl));
-  }
-
-  dialog .container {
     min-width: auto;
     min-height: auto;
   }
 
-  dialog footer {
+  footer {
     flex-flow: column wrap;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,4 +30,4 @@ <h1>Baklava Playground</h1> @@
         <bl-button>Baklava is ready</bl-button>
       </body>
-    </html>
+    </html>