Problem/Motivation

Currently, when a dialog element is displayed as data-dialog-type="modal" it looks fine. Using data-dialog-type="dialog" instead, the styling is very off.

We did some basic styling in "dialogNative.css" but further work needs to be done here.

Steps to reproduce

Create an ajax dialog link using the WYSIWYG editor and copy in:

<a class="use-ajax" 
    data-dialog-options="{&quot;width&quot;:400}" 
    data-dialog-type="dialog" 
    href="/node/1">
    First article displayed in modal dialog.
</a>

Source: https://www.drupal.org/docs/develop/drupal-apis/ajax-api/ajax-dialog-boxes

Proposed resolution

Adjust styling of the dialog element "dialog" dialog type. The modal dialog element might also need some styling. That should also be checked please.

Only core component styles (sizes, position, ...), no "design", which is a core / contrib theme task.

Remaining tasks

User interface changes

API changes

Data model changes

Comments

Grevil created an issue. See original summary.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Issue summary: View changes
anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Issue summary: View changes
anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
grevil’s picture

grevil commented
Version: 1.0.x-dev » 1.x-dev
hexabinaer’s picture

hexabinaer
Location Berlin, Germany
commented

Awesome initiative, I've been impatiently waiting for full support on the html element - thanks for taking it even a step further!

As to the styling, please avoid overdoing. The required additions should rather go into the core themes. Module-related CSS will just make it harder to override in custom themes whereas native theming support (without the module as a dependency) in core should help a lot. After all, this is just an html element ;-)

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

@hexabinaer thanks, yes that's correct! We should eventually try to replicate the previous classes and styling in the adapter CSS as far as it makes sense. For the native css we should do as little as possible / required. Eventually just fixes to the HTML element, if needed.

Rest should go into core templates.

finnsky’s picture

finnsky commented

I think we need here:

`dialog.dialog-native:not(:modal) {`

1. avoid usage of html `dialog`. It is not really good in BEM point of view. Instead it we need simple class `.drupal-dialog` with BEM style elements. EG: `.drupal-dialog__header`
https://en.bem.info/methodology/css/#combining-a-tag-and-a-class-in-a-se...

2. Avoid complexity in CSS https://web.dev/articles/reduce-the-scope-and-complexity-of-style-calcul...
Everything should be styled with lowest possible CSS complexity. EG: `.drupal-dialog__header` :)
It was huge problem with jQuery UI `.ui-dialog .ui-dialog-header ... {} `

3. Use css custom props everywhere. It will give lot of theming options for developers.

finnsky’s picture

finnsky commented

@thomas.frobieter are you still working on it?
I have some ideas.

thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
commented

@finnsky Not started yet, and I can't tell when this will happen, as I am currently very busy. So, feel free to add your thoughts here!

grevil’s picture

grevil commented
Assigned: thomas.frobieter » Unassigned

I think @thomas.frobieter is quite busy currently, but a quick review shouldn't be a problem, so feel free to work on it yourself @finnsky! :)