[ch-dialog][ch-popover] Rename property name hidden to show

src/components/combo-box/combo-box.tsx

@@ -972,7 +972,7 @@ export class ChComboBoxRender
                   blockAlign="outside-end"
                   inlineAlign={this.popoverInlineAlign}
                   closeOnClickOutside
-                  hidden={false}
+                  show
                   popover="manual"
                   resizable={this.resizable}
                   inlineSizeMatch="action-element-as-minimum"

src/components/dialog/dialog.scss

@@ -150,6 +150,10 @@ $ch-dialog-y--same-layer: calc(
   display: contents;
 }
 
+:host(.ch-dialog--hidden) {
+  display: none;
+}
+
 // - - - - - - - - - - - - - - - -
 //             Header
 // - - - - - - - - - - - - - - - -

src/components/dialog/dialog.tsx

@@ -268,21 +268,20 @@ export class ChDialog {
   @Prop() readonly closeButtonAccessibleName?: string;
 
   /**
-   * Specifies whether the dialog is hidden or visible.
+   * Specifies whether the dialog is shown or not.
    */
-  // eslint-disable-next-line @stencil-community/ban-default-true
-  @Prop({ mutable: true, reflect: true }) hidden = true;
-  @Watch("hidden")
-  handleHiddenChange(hidden: boolean) {
+  @Prop({ mutable: true }) show: boolean = false;
+  @Watch("show")
+  showChanged(show: boolean) {
     // Schedule update for watchers
     this.#checkBorderSizeWatcher = true;
     this.#checkPositionWatcher = true;
 
     // Update the dialog visualization
-    if (hidden) {
-      this.#dialogRef.close();
-    } else {
+    if (show) {
       this.#showModal();
+    } else {
+      this.#dialogRef.close();
     }
   }
 
@@ -291,7 +290,7 @@ export class ChDialog {
    * interrupt interaction with the rest of the page being inert, while
    * non-modal dialog boxes allow interaction with the rest of the page.
    *
-   * Note: If `hidden !== false`, this property does not reflect changes on
+   * Note: If `show !== true`, this property does not reflect changes on
    * runtime, since at the time of writing browsers do not support switching
    * from modal to not-modal, (or vice-versa).
    */
@@ -351,14 +350,12 @@ export class ChDialog {
       this.#checkBorderSizeWatcher = false;
 
       // Wait until the resize edges have been rendered
-      requestAnimationFrame(() => {
-        this.#setBorderSizeWatcher();
-      });
+      requestAnimationFrame(() => setTimeout(this.#setBorderSizeWatcher));
     }
   }
 
   componentDidLoad() {
-    if (!this.hidden) {
+    if (this.show) {
       // Schedule update for watchers
       this.#checkBorderSizeWatcher = true;
       this.#checkPositionWatcher = true;
@@ -398,7 +395,7 @@ export class ChDialog {
   };
 
   #handleDialogClose = () => {
-    this.hidden = true;
+    this.show = false;
     // Emit events only when the action is committed by the user
     this.dialogClosed.emit();
     document.removeEventListener("click", this.#evaluateClickOnDocument, {
@@ -505,7 +502,7 @@ export class ChDialog {
   };
 
   #closeHandler = () => {
-    this.hidden = true;
+    this.show = false;
   };
 
   #evaluateClickOnDocument = (e: MouseEvent) => {
@@ -653,7 +650,7 @@ export class ChDialog {
    */
   // eslint-disable-next-line @stencil-community/own-props-must-be-private
   #setBorderSizeWatcher = () => {
-    if (!this.resizable || this.hidden) {
+    if (!this.resizable || !this.show) {
       this.#removeBorderSizeWatcher();
       return;
     }
@@ -734,9 +731,10 @@ export class ChDialog {
     return (
       <Host
         class={{
-          "gx-dialog-header-drag": !this.hidden && this.allowDrag === "header",
+          "gx-dialog-header-drag": this.show && this.allowDrag === "header",
           "ch-dialog--modal": this.modal,
           "ch-dialog--non-modal": !this.modal,
+          "ch-dialog--hidden": !this.show,
           [RESIZING_CLASS]: this.resizing
         }}
       >
@@ -783,7 +781,7 @@ export class ChDialog {
           )}
 
           {this.resizable &&
-            !this.hidden && [
+            this.show && [
               <div
                 key="edge-block-start"
                 class="edge__block-start"

src/components/dialog/readme.md

@@ -12,17 +12,17 @@ interactive component.
 
 ## Properties
 
-| Property                    | Attribute                      | Description                                                                                                                                                                                                                                                                                                                                                                                         | Type                        | Default     |
-| --------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ----------- |
-| `adjustPositionAfterResize` | `adjust-position-after-resize` | `true` if the dialog should be repositioned after resize.                                                                                                                                                                                                                                                                                                                                           | `boolean`                   | `false`     |
-| `allowDrag`                 | `allow-drag`                   | "box" will allow the dialog to be draggable from both the header and the content. "header" will allow the dialog to be draggable only from the header. "no" disables dragging completely.                                                                                                                                                                                                           | `"box" \| "header" \| "no"` | `"no"`      |
-| `caption`                   | `caption`                      | Refers to the dialog title. I will ve visible if 'showHeader´is true.                                                                                                                                                                                                                                                                                                                               | `string`                    | `undefined` |
-| `closeButtonAccessibleName` | `close-button-accessible-name` | Specifies a short string, typically 1 to 3 words, that authors associate with an element to provide users of assistive technologies with a label for the element. This label is used for the close button of the header.                                                                                                                                                                            | `string`                    | `undefined` |
-| `hidden`                    | `hidden`                       | Specifies whether the dialog is hidden or visible.                                                                                                                                                                                                                                                                                                                                                  | `boolean`                   | `true`      |
-| `modal`                     | `modal`                        | Specifies whether the dialog is a modal or not. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.  Note: If `hidden !== false`, this property does not reflect changes on runtime, since at the time of writing browsers do not support switching from modal to not-modal, (or vice-versa). | `boolean`                   | `true`      |
-| `resizable`                 | `resizable`                    | Specifies whether the control can be resized. If `true` the control can be resized at runtime by dragging the edges or corners.                                                                                                                                                                                                                                                                     | `boolean`                   | `false`     |
-| `showFooter`                | `show-footer`                  | Specifies whether the dialog footer is hidden or visible.                                                                                                                                                                                                                                                                                                                                           | `boolean`                   | `false`     |
-| `showHeader`                | `show-header`                  | Specifies whether the dialog header is hidden or visible.                                                                                                                                                                                                                                                                                                                                           | `boolean`                   | `false`     |
+| Property                    | Attribute                      | Description                                                                                                                                                                                                                                                                                                                                                                                      | Type                        | Default     |
+| --------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- | ----------- |
+| `adjustPositionAfterResize` | `adjust-position-after-resize` | `true` if the dialog should be repositioned after resize.                                                                                                                                                                                                                                                                                                                                        | `boolean`                   | `false`     |
+| `allowDrag`                 | `allow-drag`                   | "box" will allow the dialog to be draggable from both the header and the content. "header" will allow the dialog to be draggable only from the header. "no" disables dragging completely.                                                                                                                                                                                                        | `"box" \| "header" \| "no"` | `"no"`      |
+| `caption`                   | `caption`                      | Refers to the dialog title. I will ve visible if 'showHeader´is true.                                                                                                                                                                                                                                                                                                                            | `string`                    | `undefined` |
+| `closeButtonAccessibleName` | `close-button-accessible-name` | Specifies a short string, typically 1 to 3 words, that authors associate with an element to provide users of assistive technologies with a label for the element. This label is used for the close button of the header.                                                                                                                                                                         | `string`                    | `undefined` |
+| `modal`                     | `modal`                        | Specifies whether the dialog is a modal or not. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.  Note: If `show !== true`, this property does not reflect changes on runtime, since at the time of writing browsers do not support switching from modal to not-modal, (or vice-versa). | `boolean`                   | `true`      |
+| `resizable`                 | `resizable`                    | Specifies whether the control can be resized. If `true` the control can be resized at runtime by dragging the edges or corners.                                                                                                                                                                                                                                                                  | `boolean`                   | `false`     |
+| `show`                      | `show`                         | Specifies whether the dialog is shown or not.                                                                                                                                                                                                                                                                                                                                                    | `boolean`                   | `false`     |
+| `showFooter`                | `show-footer`                  | Specifies whether the dialog footer is hidden or visible.                                                                                                                                                                                                                                                                                                                                        | `boolean`                   | `false`     |
+| `showHeader`                | `show-header`                  | Specifies whether the dialog header is hidden or visible.                                                                                                                                                                                                                                                                                                                                        | `boolean`                   | `false`     |
 
 
 ## Events

src/components/dialog/tests/accessibility.e2e.ts

@@ -0,0 +1,41 @@
+import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
+
+describe("[ch-dialog][accessibility]", () => {
+  let page: E2EPage;
+  let dialogRef: E2EElement;
+
+  beforeEach(async () => {
+    page = await newE2EPage({
+      html: `<ch-dialog></ch-dialog>`,
+      failOnConsoleError: true
+    });
+
+    dialogRef = await page.find("ch-dialog");
+
+    // Set Properties
+    dialogRef.setProperty("showHeader", true);
+    dialogRef.setProperty("showFooter", true);
+    dialogRef.setProperty("show", true);
+    await page.waitForChanges();
+  });
+
+  it("should not render a header element", async () => {
+    const headerEl = await page.find("ch-dialog >>> header");
+    expect(headerEl).toBeFalsy();
+  });
+
+  it("should not render a footer element", async () => {
+    const footerEl = await page.find("ch-dialog >>> footer");
+    expect(footerEl).toBeFalsy();
+  });
+
+  it("should not include a role attribute on the part='header' element", async () => {
+    const headerPartRef = await page.find("ch-dialog >>> [part='header']");
+    expect(headerPartRef).not.toHaveAttribute("role");
+  });
+
+  it("should not include a role attribute on the part='footer' element", async () => {
+    const footerPartRef = await page.find("ch-dialog >>> [part='footer']");
+    expect(footerPartRef).not.toHaveAttribute("role");
+  });
+});

src/components/dialog/tests/basic.e2e.ts

@@ -0,0 +1,99 @@
+import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
+
+describe("[ch-dialog][basic]", () => {
+  let page: E2EPage;
+  let dialogRef: E2EElement;
+
+  const testDefaultProperty = async (
+    propertyName: string,
+    expectedValue: any
+  ) => {
+    it(`the "${propertyName}" property should be ${
+      expectedValue === undefined ? "undefined" : `"${expectedValue}"`
+    }`, async () => {
+      const propertyValue = await dialogRef.getProperty(propertyName);
+      if (expectedValue === undefined) {
+        expect(propertyValue).toBeUndefined();
+      } else {
+        expect(propertyValue).toBe(expectedValue);
+      }
+    });
+  };
+
+  beforeEach(async () => {
+    page = await newE2EPage({
+      html: `<ch-dialog></ch-dialog>`,
+      failOnConsoleError: true
+    });
+
+    dialogRef = await page.find("ch-dialog");
+  });
+
+  // Validate shadowRoot
+
+  it("should have a shadowRoot", async () => {
+    expect(dialogRef.shadowRoot).toBeTruthy();
+  });
+
+  // Validate properties default values
+
+  testDefaultProperty("adjustPositionAfterResize", false);
+
+  testDefaultProperty("allowDrag", "no");
+
+  testDefaultProperty("caption", undefined);
+
+  testDefaultProperty("closeButtonAccessibleName", undefined);
+
+  testDefaultProperty("show", false);
+
+  testDefaultProperty("modal", true);
+
+  testDefaultProperty("resizable", false);
+
+  testDefaultProperty("showFooter", false);
+
+  testDefaultProperty("showHeader", false);
+
+  // Validate id's
+
+  it("should not include an id on any of the resize-bar elements", async () => {
+    dialogRef.setProperty("resizable", true);
+    dialogRef.setProperty("show", true);
+    await page.waitForChanges();
+
+    const partsNames = [
+      "edge edge-block-start",
+      "edge edge-inline-end",
+      "edge edge-block-end",
+      "edge edge-inline-start",
+      "corner corner-block-start-inline-start",
+      "corner corner-block-start-inline-end",
+      "corner corner-block-end-inline-start",
+      "corner corner-block-end-inline-end"
+    ];
+
+    for (const part of partsNames) {
+      const resizePartRef = await page.find(`ch-dialog >>> [part="${part}"]`);
+      expect(resizePartRef).not.toHaveAttribute("id");
+    }
+  });
+
+  it("should not include an id on the part='content' element", async () => {
+    dialogRef.setProperty("show", true);
+    await page.waitForChanges();
+    const contentPartRef = await page.find("ch-dialog >>> [part='content']");
+    expect(contentPartRef).not.toHaveAttribute("id");
+  });
+
+  it("should not include an id on the part='close-button' element", async () => {
+    dialogRef.setProperty("showHeader", true);
+    dialogRef.setProperty("show", true);
+    await page.waitForChanges();
+
+    const closeButtonPartRef = await page.find(
+      "ch-dialog >>> [part='close-button']"
+    );
+    expect(closeButtonPartRef).not.toHaveAttribute("id");
+  });
+});

src/components/dropdown/internal/dropdown/dropdown.tsx

@@ -473,7 +473,7 @@ export class ChDropDown implements ChComponent {
         actionElement={this.#mainAction as HTMLButtonElement}
         firstLayer={this.level === -1 || this.actionGroupParent}
         popover="manual"
-        hidden={!this.expanded}
+        show={this.expanded}
         inlineAlign={xAlignMapping}
         blockAlign={yAlignMapping}
       >