Fylgja component - Dialog

Table of Contents

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 import
@import "@fylgja/dialog";

How to use

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

Hello There! Hello World! Welcome!

<button class="btn -theme" onclick="document.querySelector('#dialog-modal').showModal()">Open Modal</button>
<dialog id="dialog-modal">
<p>Hello There! Hello World! Welcome!</p>
<button class="btn" onclick="document.querySelector('#dialog-modal').close()">Close</button>
</dialog>

Use the .offcanvas or .offcanvas-end to turn the modal to a offcanvas style.

As for the .snackbar make sure to also use the show() function instead of the showModal() function;

Hello There!

<button class="btn -theme" onclick="document.querySelector('#dialog-snackbar').show()">Show Notification</button>
<dialog id="dialog-snackbar" class="snackbar" style="--dialog-padding: 1em 2em;">
<div class="flex items-center">
<p class="my-0 me-4">Hello There!</p>
<button class="btn" onclick="document.querySelector('#dialog-snackbar').close()">Close</button>
</div>
</dialog>

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-offcanvas" class="offcanvas">
<div>Offcanvas Title</div>
<div class="dialog-inner">...</div>
<div><button>Submit</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.