Fylgja - 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.

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.