refactor(popover)!: Remove deprecated properties. #5798

Esri · Nov 29, 2022 · 70f6946 · 70f6946
1 parent 32ad03f
commit 70f6946
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 90 deletions.
diff --git a/src/components/popover/popover.e2e.ts b/src/components/popover/popover.e2e.ts
@@ -37,10 +37,6 @@ describe("calcite-popover", () => {
   it("is accessible when open", async () =>
     accessible(`<calcite-popover label="test" open reference-element="ref"></calcite-popover><div id="ref">😄</div>`));
 
-  it("is accessible with close button (deprecated)", async () =>
-    accessible(
-      `<calcite-popover label="test" open dismissible reference-element="ref"></calcite-popover><div id="ref">😄</div>`
-    ));
   it("is accessible with close button", async () =>
     accessible(
       `<calcite-popover label="test" open closable reference-element="ref"></calcite-popover><div id="ref">😄</div>`
@@ -70,10 +66,6 @@ describe("calcite-popover", () => {
         propertyName: "open",
         defaultValue: false
       },
-      {
-        propertyName: "dismissible",
-        defaultValue: false
-      },
       {
         propertyName: "closable",
         defaultValue: false
@@ -195,28 +187,6 @@ describe("calcite-popover", () => {
     expect(computedStyle.transform).not.toBe("matrix(0, 0, 0, 0, 0, 0)");
   });
 
-  it("should show closeButton when enabled (deprecated)", async () => {
-    const page = await newE2EPage();
-
-    await page.setContent(
-      `<calcite-popover placement="auto" reference-element="ref" open>content</calcite-popover><div id="ref">referenceElement</div>`
-    );
-
-    await page.waitForChanges();
-
-    let closeButton = await page.find(`calcite-popover >>> .${CSS.closeButton}`);
-
-    expect(closeButton).toBe(null);
-
-    const element = await page.find("calcite-popover");
-
-    element.setProperty("dismissible", true);
-
-    await page.waitForChanges();
-
-    closeButton = await page.find(`calcite-popover >>> .${CSS.closeButton}`);
-  });
-
   it("should show closeButton when enabled with closable prop", async () => {
     const page = await newE2EPage();
 
@@ -684,28 +654,6 @@ describe("calcite-popover", () => {
     expect(await shadowPopover.getProperty("open")).toBe(false);
   });
 
-  it("should set dismissible prop to true when closable is true", async () => {
-    const page = await newE2EPage();
-
-    await page.setContent(
-      html`<calcite-popover label="Example label" reference-element="popover-button" closable>
-        <p style="padding:0 10px;display:flex;flex-direction:row">
-          <calcite-icon icon="3d-glasses"></calcite-icon> Popover content here
-        </p>
-      </calcite-popover>`
-    );
-
-    await page.waitForChanges();
-    const popoverEl = await page.find("calcite-popover");
-
-    expect(await popoverEl.getProperty("closable")).toBe(true);
-
-    popoverEl.setProperty("dismissible", false);
-    await page.waitForChanges();
-
-    expect(await popoverEl.getProperty("closable")).toBe(false);
-  });
-
   it("should still function when disconnected and reconnected", async () => {
     const page = await newE2EPage();
 

diff --git a/src/components/popover/popover.stories.ts b/src/components/popover/popover.stories.ts
@@ -29,7 +29,7 @@ export const simple = (): string => html`
   <div style="width: 400px;">
     ${referenceElementHTML}
     <calcite-popover
-      ${boolean("dismissible", false)}
+      ${boolean("closable", false)}
       ${boolean("disable-flip", false)}
       ${boolean("disable-pointer", false)}
       reference-element="reference-element"
@@ -47,7 +47,7 @@ export const simple = (): string => html`
 export const darkThemeRTL_TestOnly = (): string => html` <div style="width: 400px;">
   ${referenceElementHTML}
   <calcite-popover
-    ${boolean("dismissible", false)}
+    ${boolean("closable", false)}
     ${boolean("disable-flip", false)}
     ${boolean("disable-pointer", false)}
     reference-element="reference-element"
@@ -69,15 +69,15 @@ export const nested = (): string => html`
   <div style="width: 400px;">
     ${referenceElementHTML}
     <calcite-popover
-      ${boolean("dismissible", true)}
+      ${boolean("closable", true)}
       reference-element="reference-element"
       placement="${select("placement", placements, defaultPopoverPlacement)}"
       ${boolean("open", true)}
     >
       <div style="width: 300px; padding:12px 16px;">${nestedReferenceElementHTML}</div>
       <calcite-popover
         heading="${text("heading", "Heading")}"
-        ${boolean("dismissible", true)}
+        ${boolean("closable", true)}
         reference-element="reference-element-nested"
         placement="${select("placement", placements, defaultPopoverPlacement)}"
         ${boolean("open", true)}
@@ -110,7 +110,7 @@ export const scaleConsistencyPopoverHeadingActionSlottedIcon_TestOnly = (): stri
       reference-element="reference-element"
       placement="auto"
       open
-      dismissible
+      closable
       scale="m"
     >
       ${contentHTML}

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
@@ -78,33 +78,9 @@ export class Popover
    */
   @Prop({ reflect: true }) autoClose = false;
 
-  /**
-   * When `true`, a close button is added to the component.
-   *
-   * @deprecated use dismissible instead.
-   */
-  @Prop({ reflect: true }) closeButton = false;
-
-  /**
-   * When `true`, a close button is added to the component.
-   *
-   * @deprecated use `closable` instead.
-   */
-  @Prop({ mutable: true, reflect: true }) dismissible = false;
-
-  @Watch("dismissible")
-  handleDismissible(value: boolean): void {
-    this.closable = value;
-  }
-
   /** When `true`, display a close button within the component. */
   @Prop({ mutable: true, reflect: true }) closable = false;
 
-  @Watch("closable")
-  handleClosable(value: boolean): void {
-    this.dismissible = value;
-  }
-
   /**
    * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.
    */
@@ -274,13 +250,6 @@ export class Popover
   connectedCallback(): void {
     this.setFilteredPlacements();
     connectOpenCloseComponent(this);
-    const closable = this.closable || this.dismissible;
-    if (closable) {
-      this.handleDismissible(closable);
-    }
-    if (closable) {
-      this.handleClosable(closable);
-    }
     this.setUpReferenceElement(this.hasLoaded);
   }
 
@@ -526,9 +495,9 @@ export class Popover
   // --------------------------------------------------------------------------
 
   renderCloseButton(): VNode {
-    const { closeButton, intlClose, closable } = this;
+    const { intlClose, closable } = this;
 
-    return closable || closeButton ? (
+    return closable ? (
       <div class={CSS.closeButtonContainer}>
         <calcite-action
           class={CSS.closeButton}