Skip to content

experiment: Dialog base styles #9438

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

experiment: Dialog base styles #9438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
187 changes: 109 additions & 78 deletions dev/dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,110 +5,141 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dialog</title>
<script type="module" src="./common.js"></script>

<script type="module">
import './common.js'; // A separate <script type="module"> for this import crashes Safari often
import '@vaadin/dialog';
import '@vaadin/button';
import '@vaadin/checkbox-group';
import '@vaadin/checkbox';
import '@vaadin/dialog';
import '@vaadin/icon';
import '@vaadin/vaadin-lumo-styles/lumo.css';
import '@vaadin/icons';
</script>
</head>

<body>
<vaadin-dialog></vaadin-dialog>
<style>
.content {
display: grid;
gap: 1rem;
justify-items: start;
max-width: 35em;
}

<vaadin-button>Open dialog 1</vaadin-button>
body > .content > div:first-child {
display: none;
}
</style>

<script type="module">
const dialog1 = document.querySelector('vaadin-dialog');
dialog1.headerTitle = 'Title';
dialog1.draggable = true;
dialog1.resizable = true;

dialog1.renderer = (root) => {
if (root.firstChild) {
return;
}

const container = document.createElement('div');
container.style.maxWidth = '40em';
container.style.minWidth = '20em';
root.appendChild(container);

// Second dialog
const dialog2 = document.createElement('vaadin-dialog');
dialog2.renderer = (root2) => {
if (root2.firstChild) {
const defaultOptions = ['title', 'header', 'footer', 'modal', 'resizable', 'draggable'];
document.querySelector('vaadin-checkbox-group').value = defaultOptions;

const openDialog = (e) => {
const dialog = document.createElement('vaadin-dialog');

const scope = e.target.closest('div.content');
const hasTitle = scope.querySelector('[value="title"]').checked;
const hasHeader = scope.querySelector('[value="header"]').checked;
const hasFooter = scope.querySelector('[value="footer"]').checked;
const isModal = scope.querySelector('[value="modal"]').checked;
const hasWidth = scope.querySelector('[value="width"]').checked;
const hasHeight = scope.querySelector('[value="height"]').checked;
const isResizable = scope.querySelector('[value="resizable"]').checked;
const isDraggable = scope.querySelector('[value="draggable"]').checked;

dialog.renderer = (root) => {
if (root.firstChild) {
return;
}

// Close second dialog
const btnClose2 = document.createElement('vaadin-button');
btnClose2.textContent = 'Close dialog 2';
btnClose2.addEventListener('click', () => {
dialog2.opened = false;
});

root2.appendChild(btnClose2);
root.append(scope.cloneNode(true));
root.querySelector('vaadin-checkbox-group').value = defaultOptions;
root.querySelector('vaadin-button').addEventListener('click', openDialog);
};

container.appendChild(dialog2);
if (hasTitle) {
dialog.headerTitle = 'Dialog Title';
}

// Open second dialog
const btnOpen2 = document.createElement('vaadin-button');
btnOpen2.textContent = 'Open dialog 2';
btnOpen2.addEventListener('click', () => {
dialog2.opened = true;
});
if (hasHeader) {
dialog.headerRenderer = (root) => {
if (root.firstChild) {
return;
}
const closeBtn = document.createElement('vaadin-button');
closeBtn.innerHTML = '<vaadin-icon icon="vaadin:close" aria-label="close dialog"></vaadin-icon>';
closeBtn.addEventListener('click', () => {
dialog.opened = false;
});

const text = document.createElement('span');
text.textContent = 'Header content';

root.append(text, closeBtn);
};
}

const text = document.createElement('p');
text.textContent =
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laborum optio quo perferendis unde, fuga reprehenderit molestias cum laboriosam ipsa enim voluptatem iusto fugit. Sed, veniam repudiandae consectetur recusandae laudantium.';
text.style.marginTop = '0';
if (hasFooter) {
dialog.footerRenderer = (root) => {
if (root.firstChild) {
return;
}
const button = document.createElement('vaadin-button');
button.textContent = 'Action';
button.setAttribute('theme', 'primary');

container.append(text, btnOpen2);
};
const button2 = document.createElement('vaadin-button');
button2.textContent = 'Action';

dialog1.headerRenderer = (root) => {
if (root.firstChild) {
return;
}
const button = document.createElement('vaadin-button');
button.innerHTML = '<vaadin-icon icon="lumo:cross" aria-label="close dialog"></vaadin-icon>';
button.theme = 'tertiary-inline icon';
button.addEventListener('click', () => {
dialog1.opened = false;
});
const text = document.createElement('span');
text.textContent = 'Footer content';

const text = document.createElement('span');
text.textContent = 'Header content';
root.append(text, button2, button);
};
}

root.append(text, button);
};
if (hasWidth) {
dialog.width = '300px';
}

dialog1.footerRenderer = (root) => {
if (root.firstChild) {
return;
if (hasHeight) {
dialog.height = '180px';
}
const button = document.createElement('vaadin-button');
button.textContent = 'Action';
button.theme = 'primary';

const button2 = document.createElement('vaadin-button');
button2.textContent = 'Action';
dialog.modeless = !isModal;
dialog.resizable = isResizable;
dialog.draggable = isDraggable;

const text = document.createElement('span');
text.textContent = 'Footer content';
document.body.append(dialog);
dialog.opened = true;

root.append(text, button2, button);
dialog.addEventListener('closed', (e) => {
dialog.parentNode.removeChild(dialog);
});
};

// Open first dialog
const btnOpen1 = document.querySelector('vaadin-button');
btnOpen1.addEventListener('click', () => {
dialog1.opened = true;
});
document.querySelector('vaadin-button').addEventListener('click', openDialog);
</script>
</head>

<body>
<div class="content">
<div
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laborum optio quo perferendis unde, fuga
reprehenderit molestias cum laboriosam ipsa enim voluptatem iusto fugit. Sed, veniam repudiandae consectetur
recusandae laudantium.</div
>

<vaadin-checkbox-group label="Features" theme="horizontal">
<vaadin-checkbox value="title" label="Title"></vaadin-checkbox>
<vaadin-checkbox value="header" label="Header"></vaadin-checkbox>
<vaadin-checkbox value="footer" label="Footer"></vaadin-checkbox>
<vaadin-checkbox value="modal" label="Modal"></vaadin-checkbox>
<vaadin-checkbox value="width" label="Width (300px)"></vaadin-checkbox>
<vaadin-checkbox value="height" label="Width (280px)"></vaadin-checkbox>
<vaadin-checkbox value="resizable" label="Resizable"></vaadin-checkbox>
<vaadin-checkbox value="draggable" label="Draggable"></vaadin-checkbox>
</vaadin-checkbox-group>

<vaadin-button>Open Dialog</vaadin-button>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/confirm-dialog/src/styles/vaadin-confirm-dialog-overlay-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { css } from 'lit';
import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-styles.js';
import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-core-styles.js';
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';

const confirmDialogOverlay = css`
Expand Down
2 changes: 1 addition & 1 deletion packages/crud/src/styles/vaadin-crud-dialog-overlay-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
* license.
*/
import { css } from 'lit';
import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-styles.js';
import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-core-styles.js';
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';

const crudDialogOverlay = css`
Expand Down
2 changes: 1 addition & 1 deletion .../styles/vaadin-dialog-overlay-styles.d.ts → ...es/vaadin-dialog-overlay-base-styles.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* @license
* Copyright (c) 2021 - 2025 Vaadin Ltd.
* Copyright (c) 2017 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import type { CSSResult } from 'lit';
Expand Down
Loading