What is the best way to develop a customized dialog?

Flow
1

Hi,

I need a dialog in my project that should have its own header, content and footer styles. I am designing a component that is extended from Dialog according to the requirements. How can I make Dialog styles that will only work in this new component?

2

Apply a class name or theme to your base dialog class and reference those in your css.

3

Let’s assume that we give vaadin-dialog a classname called “command_dialog”.
How should I write a css for command_dialog so that I can change the background-color of the ‘header’ part in ‘vaadin-dialog-overlay’ to --lumo-contrast-5pct.
I could not manage to make this edit by giving classname, I would be very grateful if you can give a functional example.

4

Let’s say you have a dialog named “foo”


addThemeNames("foo");



vaadin-dialog-overlay[theme~='foo']::part(content) {
  background: black /* make the content black */
}

vaadin-dialog-overlay[theme~='foo']::part(header) {
  background: red; 
}

vaadin-dialog-overlay[theme~='foo']::part(footer) {
  background: blue; 
}

You can additionally place / style any component (you have added) within the header, footer or content as normal with any kind of css query you like.

5

Of course this can be done by defining global themes in this way. I wonder if there is a way to make these changes without a global definition.
In a large project, adding new themes to vaadin-dialog-overlay.css for each customized state is not very manageable.

6

This can be done in global css - there is no need for shadow DOM based css here.

TBH if you define a base dialog - styling should be done once; multiple times sounds like a bad design system.

7

There are some national and international visual regulations that we have to follow in the project. We do not consider the styles resulting from these regulations to be part of our design system. We may need to follow some rules outside of our design approach. I am looking for a way to keep the styles that come from these rules within their boundaries. I understood you to say that there is no way to do this with the current shadow DOM based design, I hope I understood you correctly.

I think the best way in this case is to not use the header and footer of the dialog, disable padding etc. and turn the dialog into an empty space. All the custom content will be managed by me with another layout through the content slot. Now I think it would be better to have content components that are well integrated with the Dialog, rather than a dedicated Dialog.