fix: hide dialog when hidden is applied (#9866)

* fix: hide dialog when hidden is applied

* simplify selectors

Author: sissbruecker

packages/confirm-dialog/src/vaadin-confirm-dialog.js

@@ -72,16 +72,16 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
 
   static get styles() {
     return css`
-      :host,
-      [hidden] {
-        display: none !important;
-      }
-
       :host([opened]),
       :host([opening]),
       :host([closing]) {
         display: contents !important;
       }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
+      }
     `;
   }
 

packages/confirm-dialog/test/confirm-dialog.test.js

@@ -31,18 +31,23 @@ describe('vaadin-confirm-dialog', () => {
       confirm = fixtureSync('<vaadin-confirm-dialog></vaadin-confirm-dialog>');
     });
 
-    it('should enforce display: none to hide the host element', () => {
-      confirm.style.display = 'block';
+    it('should use display: none when not opened', () => {
       expect(getComputedStyle(confirm).display).to.equal('none');
     });
 
     ['opened', 'opening', 'closing'].forEach((state) => {
-      it(`should enforce display: contents when ${state} attribute is set`, () => {
-        confirm.style.display = 'block';
+      it(`should use display: contents when ${state} attribute is set`, () => {
         confirm.setAttribute(state, '');
         expect(getComputedStyle(confirm).display).to.equal('contents');
       });
     });
+
+    it('should use display: none when hidden while opened', async () => {
+      confirm.opened = true;
+      confirm.hidden = true;
+      await nextRender();
+      expect(getComputedStyle(confirm).display).to.equal('none');
+    });
   });
 
   describe('properties', () => {

packages/crud/src/vaadin-crud-dialog.js

@@ -97,16 +97,16 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
 
   static get styles() {
     return css`
-      :host,
-      [hidden] {
-        display: none !important;
-      }
-
       :host([opened]),
       :host([opening]),
       :host([closing]) {
         display: contents !important;
       }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
+      }
     `;
   }
 

packages/dialog/src/vaadin-dialog.js

@@ -102,16 +102,16 @@ class Dialog extends DialogSizeMixin(
 
   static get styles() {
     return css`
-      :host,
-      [hidden] {
-        display: none !important;
-      }
-
       :host([opened]),
       :host([opening]),
       :host([closing]) {
         display: contents !important;
       }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
+      }
     `;
   }
 

packages/dialog/test/dialog.test.js

@@ -31,18 +31,23 @@ describe('vaadin-dialog', () => {
       await nextRender();
     });
 
-    it('should enforce display: none to hide the host element', () => {
-      dialog.style.display = 'block';
+    it('should use display: none when not opened', () => {
       expect(getComputedStyle(dialog).display).to.equal('none');
     });
 
     ['opened', 'opening', 'closing'].forEach((state) => {
-      it(`should enforce display: contents when ${state} attribute is set`, () => {
-        dialog.style.display = 'block';
+      it(`should use display: contents when ${state} attribute is set`, () => {
         dialog.setAttribute(state, '');
         expect(getComputedStyle(dialog).display).to.equal('contents');
       });
     });
+
+    it('should use display: none when hidden while opened', async () => {
+      dialog.opened = true;
+      dialog.hidden = true;
+      await nextRender();
+      expect(getComputedStyle(dialog).display).to.equal('none');
+    });
   });
 
   describe('opened', () => {

packages/rich-text-editor/src/vaadin-rich-text-editor-popup.js

@@ -32,15 +32,16 @@ class RichTextEditorPopup extends PolylitMixin(LitElement) {
 
   static get styles() {
     return css`
-      :host {
-        display: none !important;
-      }
-
       :host([opened]),
       :host([opening]),
       :host([closing]) {
         display: contents !important;
       }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
+      }
     `;
   }