Fylgja component - Dialog

The dialog combines 3 components in 1, it a modal by default, and with a small change it's a offcanvas, notification popup aka the snackbar.

This code is super tiny compared to other solutions, and it's super flexible. Use it to have a modal on desktop and offcanvas on mobile, simply by changing a few CSS variables.

Installation  # 

npm install @fylgja/dialog

Then include the component in to your code via;

@use "@fylgja/dialog";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/dialog/dialog.css";

How to use  # 

To use the dialog simply create a html dialog element and a button, that can open the dialog.

<!-- Modal -->
<button onclick="document.querySelector('#dialog-modal').showModal()">Open</button>
<dialog id="dialog-modal">..</dialog>

<!-- Snackbar -->
<button onclick="document.querySelector('#dialog-snackbar').show()">Open</button>
<dialog id="dialog-snackbar" class="snackbar">..</dialog>

<!-- Offcanvas -->
<button onclick="document.querySelector('#dialog-offcanvas').showModal()">Open</button>
<dialog id="dialog-offcanvas" class="offcanvas">..</dialog>
<!-- Or use 'offcanvas-end' -->

Use the .dialog-inner if your content will be to big for specific screen sizes.

This will allow scrolling the content inside the dialog-inner.

You can combine this with a header and/or footer, that always will be visible when you are scrolling.

<dialog id="dialog-modal">
<div>Modal Title</div>
<div class="dialog-inner"></div>
<div><button>Sumbit</button></div>
</dialog>

Support  # 

You will need the polyfill until the html dialog is supported fully -> github.com/GoogleChrome/dialog-polyfill.

Data on support for the dialog feature across the major browsers from caniuse.com

Config  # 

As with almost all of our components. CSS variables can be configured to add your own look/style.

For direct control of the base styles, use the following SCSS variables can you modify.

$enable-dialog-polyfill: true !default;

// Modal (default)
$dialog-index: 9 !default;
$dialog-offset: 2em !default;
$dialog-max-width: calc(100% - #{$dialog-offset}) !default;
$dialog-max-height: $dialog-max-width !default;
$dialog-radius: 0.3em !default;
$dialog-padding: 2em !default;

$dialog-elevation: var(--elevation-z6) !default;
$dialog-bg: var(--color-bg, #{$root-bg}) !default;
$dialog-color: inherit !default;

$dialog-backdrop: rgba(black, 0.2) !default;

// Snackbar
$dialog-snackbar-from: end !default;
$dialog-snackbar-offset: 1em !default;

// Offcanvas
$dialog-offcanvas-radius: 0 !default;

Tips  # 

If you need to use the older solutions, that don't use the HTML Dialog. But you do like to use the Fylgja Dialog styles.

You can do so with the 2 extend classes available to you.

@use "@fylgja/dialog/helper" as *;

@keyframes dialog-show {
from {
opacity: 0;
transform: var(--dialog-translate, translateY(#{$dialog-offset}));
}
}

@keyframes dialog-hide {
to {
opacity: 0;
transform: var(--dialog-translate, translateY(#{$dialog-offset}));
}
}

.dialog {
@extend %dialog;

&[hidden] {
visibility: hidden;
transition: visibility 0s 200ms;
animation: dialog-hide 200ms;
}

&:not([hidden]) {
animation: dialog-show 300ms;
transition: none;
}
}

.backdrop {
@extend %backdrop-polyfill;
}

You do still have to make your own logic for the open and closed styles. As seen above.

Noticed a typo or is something unclear? Help us improve this page on GitHub.