Problem/Motivation

Currently, there is no option (neither in core) to display an "X" on the top right side of the dialog window, which closes the dialog:
screenshot1

Implement such a feature. https://web.dev/learn/html/dialog might be a good start.

Steps to reproduce

Proposed resolution

Implement an "x to close" dialog option

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
2024-01-19 13_46_38-Clipboard.png16.29 KBgrevil

Issue fork dialog_native-3415831

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Grevil created an issue. See original summary.

grevil’s picture

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

finnsky commented

Gonna work on it.

finnsky opened merge request !2

finnsky’s picture

finnsky commented

Added theming functions for dialog content header and buttons. What will be useful for custom theme developers.
Added close button which triggers customEvent with bubble.

Also added small code improvements.

1. Core version +11
2. Grouped dialog settings like 


    if (settings.width) {
      if (Number.isInteger(settings.width)) {
        dialogContainer.style.setProperty('width', `${settings.width}px`);
      } else {
        dialogContainer.style.setProperty('width', settings.width);
      }
    }

TO:

    [
      'width',
      'height',
      'minWidth',
      'maxWidth',
      'minHeight',
      'maxHeight'
    ].forEach(dimension => {
finnsky’s picture

finnsky commented
Status: Active » Needs review
grevil’s picture

grevil commented
Status: Needs review » Needs work

Added a few comments, couldn't review completely yet.

finnsky’s picture

finnsky commented
Status: Needs work » Needs review
grevil’s picture

grevil commented
Status: Needs review » Needs work

Great stuff!! Thanks a lot @finnsky!

I guess we still should add some styling to the close button, currently it is quite lackluster. Is there any drupal native "x" button, where we could clone the styling from?
Furthermore, it might make sense to have an optional parameter for the close button in "Drupal.theme.dialogHeader". I am not a theming expert, but this would only make sense to me.

Otherwise, LGTM!

grevil’s picture

grevil commented
Related issues: +#3415826: The styling of the dialog element needs adjusting.
grevil’s picture

grevil commented

Let's move the styling part to #3415826: The styling of the dialog element needs adjusting..

grevil’s picture

grevil commented

@finnsky we could also create a follow-up ticket for only styling the close button, feel free to decide yourself here.

finnsky’s picture

finnsky commented

Thank you for review.

it might make sense to have an optional parameter for the close button in "Drupal.theme.dialogHeader".

in fact `Drupal.theme.dialogHeader"` it is the option for theme developer for overriding header.

On my side i would better to move with webcomponent and slots.

grevil’s picture

grevil commented
Status: Needs work » Reviewed & tested by the community

Alright! I am not too knowledgeable on Drupal theme development, just was something I thought would make sense hear.

RTBC then!

  • Grevil committed c71bf872 on 1.x authored by finnsky 
    Issue #3415831 by finnsky, Grevil: Implement an "x to close" dialog...
grevil’s picture

grevil commented
Status: Reviewed & tested by the community » Fixed

  • Grevil committed 2c9b84f1 on 1.x 
    Variable name change related to Issue #3415831

  • Grevil committed 28345c38 on 1.x 
    Fix version requirement related to Issue #3415831

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.