refactor(notice)!: remove deprecated properties

src/components/flow-item/flow-item.e2e.ts

@@ -104,22 +104,22 @@ describe("calcite-flow-item", () => {
       <calcite-flow style="height: 300px">
         <calcite-flow-item heading="Flow heading" id="flowOrPanel">
           <calcite-block heading="Block example" summary="Some subtext" collapsible open>
-            <calcite-notice active>
+            <calcite-notice open>
               <div slot="message">An excellent assortment of content.</div>
             </calcite-notice>
           </calcite-block>
           <calcite-block heading="Block example" summary="Some subtext" collapsible open>
-            <calcite-notice active>
+            <calcite-notice open>
               <div slot="message">An excellent assortment of content.</div>
             </calcite-notice>
           </calcite-block>
           <calcite-block heading="Block example" summary="Some subtext" collapsible open>
-            <calcite-notice active>
+            <calcite-notice open>
               <div slot="message">An excellent assortment of content.</div>
             </calcite-notice>
           </calcite-block>
           <calcite-block heading="Block example" summary="Some subtext" collapsible open>
-            <calcite-notice active>
+            <calcite-notice open>
               <div slot="message">An excellent assortment of content.</div>
             </calcite-notice>
           </calcite-block>

src/components/notice/notice.e2e.ts

@@ -17,8 +17,6 @@ describe("calcite-notice", () => {
   it("is accessible with icon", async () => accessible(`<calcite-notice icon open>${noticeContent}</calcite-notice>`));
   it("is accessible with close button", async () =>
     accessible(`<calcite-notice closable open>${noticeContent}</calcite-notice>`));
-  it("is accessible with icon and close button (deprecated)", async () =>
-    accessible(`<calcite-notice icon dismissible open>${noticeContent}</calcite-notice>`));
   it("is accessible with icon and close button", async () =>
     accessible(`<calcite-notice icon closable open>${noticeContent}</calcite-notice>`));
 
@@ -56,19 +54,6 @@ describe("calcite-notice", () => {
     expect(icon).toBeNull();
   });
 
-  it("renders an icon and close button when requested (deprecated)", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-    <calcite-notice icon closable>
-    ${noticeContent}
-    </calcite-notice>`);
-
-    const close = await page.find(`calcite-notice >>> .${CSS.close}`);
-    const icon = await page.find(`calcite-notice >>> .${CSS.icon}`);
-    expect(close).not.toBeNull();
-    expect(icon).not.toBeNull();
-  });
-
   it("renders an icon and close button when requested", async () => {
     const page = await newE2EPage();
     await page.setContent(`
@@ -82,25 +67,6 @@ describe("calcite-notice", () => {
     expect(icon).not.toBeNull();
   });
 
-  it("successfully closes a dismissible notice (deprecated)", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-    <calcite-notice id="notice-1" active dismissible>
-    ${noticeContent}
-    </calcite-notice>
-    `);
-
-    const notice1 = await page.find("#notice-1 >>> .container");
-    const noticeclose1 = await page.find(`#notice-1 >>> .${CSS.close}`);
-    const animationDurationInMs = 400;
-
-    expect(await notice1.isVisible()).toBe(true);
-
-    await noticeclose1.click();
-    await page.waitForTimeout(animationDurationInMs);
-    expect(await notice1.isVisible()).not.toBe(true);
-  });
-
   it("successfully closes a closable notice", async () => {
     const page = await newE2EPage();
     await page.setContent(`
@@ -120,35 +86,6 @@ describe("calcite-notice", () => {
     expect(await notice1.isVisible()).not.toBe(true);
   });
 
-  describe("focusable (deprecated)", () => {
-    it("with link and dismissible  => focuses on link", () =>
-      focusable(html` <calcite-notice id="notice-1" active dismissible> ${noticeContent}</calcite-notice>`, {
-        focusTargetSelector: `calcite-link`
-      }));
-
-    it("when dismissible => focuses on close button", () =>
-      focusable(
-        html` <calcite-notice id="notice-1" active dismissible>
-          <div slot="title">Title Text</div>
-          <div slot="message">Message Text</div>
-        </calcite-notice>`,
-        {
-          shadowFocusTargetSelector: `.${CSS.close}`
-        }
-      ));
-
-    it("without link nor dismissible => does not focus", () =>
-      focusable(
-        html` <calcite-notice id="notice-1" active>
-          <div slot="title">Title Text</div>
-          <div slot="message">Message Text</div>
-        </calcite-notice>`,
-        {
-          focusTargetSelector: "body"
-        }
-      ));
-  });
-
   describe("focusable", () => {
     it("with link and closable => focuses on link", () =>
       focusable(html` <calcite-notice id="notice-1" open closable> ${noticeContent}</calcite-notice>`, {

src/components/notice/notice.tsx

@@ -38,7 +38,7 @@ import {
 /**
  * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
- * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
+ * They are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not
  * to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
  */
 
@@ -72,49 +72,15 @@ export class Notice
   //
   //---------------------------------------------------------------------------
 
-  /**
-   * When `true`, the component is active.
-   *
-   * @deprecated Use `open` instead.
-   */
-  @Prop({ reflect: true, mutable: true }) active = false;
-
-  @Watch("active")
-  activeHandler(value: boolean): void {
-    this.open = value;
-  }
-
   /** When `true`, the component is visible. */
   @Prop({ reflect: true, mutable: true }) open = false;
 
-  @Watch("open")
-  openHandler(value: boolean): void {
-    this.active = value;
-  }
-
   /** The color for the component's top border and icon. */
   @Prop({ reflect: true }) color: StatusColor = "blue";
 
-  /**
-   * When `true`, a close button is added to the component.
-   *
-   * @deprecated use `closable` instead.
-   */
-  @Prop({ reflect: true }) dismissible = false;
-
-  @Watch("dismissible")
-  handleDismissible(value: boolean): void {
-    this.closable = value;
-  }
-
   /** When `true`, a close button is added to the component. */
   @Prop({ reflect: true }) closable = false;
 
-  @Watch("closable")
-  handleClosable(value: boolean): void {
-    this.dismissible = value;
-  }
-
   /**
    * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
    */
@@ -168,19 +134,6 @@ export class Notice
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
-
-    const isOpen = this.active || this.open;
-
-    if (isOpen) {
-      this.activeHandler(isOpen);
-      this.openHandler(isOpen);
-    }
-    if (this.dismissible) {
-      this.handleDismissible(this.dismissible);
-    }
-    if (this.closable) {
-      this.handleClosable(this.closable);
-    }
   }
 
   disconnectedCallback(): void {

src/components/notice/readme.md

@@ -7,7 +7,7 @@
 ### Basic
 
 ```html
-<calcite-notice scale="l" width="half" active>
+<calcite-notice scale="l" width="half" open>
   <div slot="title">Something failed</div>
   <div slot="message">That thing you wanted to do didn't work as expected</div>
   <calcite-link slot="link" href="/">View details</calcite-link>

src/components/notice/usage/Basic.md

@@ -1,5 +1,5 @@
 ```html
-<calcite-notice scale="l" width="half" active>
+<calcite-notice scale="l" width="half" open>
   <div slot="title">Something failed</div>
   <div slot="message">That thing you wanted to do didn't work as expected</div>
   <calcite-link slot="link" href="/">View details</calcite-link>

src/components/stepper/stepper.stories.ts

@@ -27,29 +27,29 @@ export const simple = (): string => html`
       description="${text("description-1", "Add members without sending invitations")}"
       complete
     >
-      <calcite-notice active width="full"><div slot="message">Step 1 Content Goes Here</div></calcite-notice>
+      <calcite-notice open width="full"><div slot="message">Step 1 Content Goes Here</div></calcite-notice>
     </calcite-stepper-item>
     <calcite-stepper-item
       heading="${text("heading-2", "Compile member list")}"
       description="${text("description-2", "")}"
       complete
       error
     >
-      <calcite-notice active width="full"><div slot="message">Step 2 Content Goes Here</div></calcite-notice>
+      <calcite-notice open width="full"><div slot="message">Step 2 Content Goes Here</div></calcite-notice>
     </calcite-stepper-item>
     <calcite-stepper-item
       heading="${text("heading-3", "Set member properties")}"
       description="${text("description-3", "")}"
       selected
     >
-      <calcite-notice active width="full"><div slot="message">Step 3 Content Goes Here</div></calcite-notice>
+      <calcite-notice open width="full"><div slot="message">Step 3 Content Goes Here</div></calcite-notice>
     </calcite-stepper-item>
     <calcite-stepper-item
       heading="${text("heading-4", "Confirm and complete")}"
       description="${text("description-4", "Disabled example")}"
       disabled
     >
-      <calcite-notice active width="full"><div slot="message">Step 4 Content Goes Here</div></calcite-notice>
+      <calcite-notice open width="full"><div slot="message">Step 4 Content Goes Here</div></calcite-notice>
     </calcite-stepper-item>
   </calcite-stepper>
   <h1>No Content</h1>
@@ -103,29 +103,29 @@ export const darkThemeRTL_TestOnly = (): string => html`
       description="${text("description-1", "Add members without sending invitations")}"
       complete
     >
-      <calcite-notice active width="full"><div slot=message">Step 1 Content Goes Here</div></calcite-notice>
+      <calcite-notice open width="full"><div slot=message">Step 1 Content Goes Here</div></calcite-notice>
     </calcite-stepper-item>
     <calcite-stepper-item
       heading="${text("heading-2", "Compile member list")}"
       description="${text("description-2", "")}"
       complete
       error
     >
-      <calcite-notice active width="full"><div slot="message">Step 2 Content Goes Here</div></calcite-notice>
+      <calcite-notice open width="full"><div slot="message">Step 2 Content Goes Here</div></calcite-notice>
     </calcite-stepper-item>
     <calcite-stepper-item
       heading="${text("heading-3", "Set member properties")}"
       description="${text("description-3", "")}"
       selected
     >
-      <calcite-notice active width="full"><div slot="message">Step 3 Content Goes Here</div></calcite-notice>
+      <calcite-notice open width="full"><div slot="message">Step 3 Content Goes Here</div></calcite-notice>
     </calcite-stepper-item>
     <calcite-stepper-item
       heading="${text("heading-4", "Confirm and complete")}"
       description="${text("description-4", "Disabled example")}"
       disabled
     >
-      <calcite-notice active width="full"><div slot="message">Step 4 Content Goes Here</div></calcite-notice>
+      <calcite-notice open width="full"><div slot="message">Step 4 Content Goes Here</div></calcite-notice>
     </calcite-stepper-item>
   </calcite-stepper>
 </div>
@@ -135,22 +135,22 @@ darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
 
 export const overriddenWidth_TestOnly = (): string => html` <calcite-stepper numbered style="width: 50vw">
   <calcite-stepper-item heading="Choose method" description="Add members without sending invitations" complete>
-    <calcite-notice active width="full">
+    <calcite-notice open width="full">
       <div slot="message">Step 1 Content Goes Here</div>
     </calcite-notice>
   </calcite-stepper-item>
   <calcite-stepper-item heading="Compile member list" complete error>
-    <calcite-notice active width="full">
+    <calcite-notice open width="full">
       <div slot="message">Step 2 Content Goes Here</div>
     </calcite-notice>
   </calcite-stepper-item>
   <calcite-stepper-item heading="Set member properties" description="" selected>
-    <calcite-notice active width="full">
+    <calcite-notice open width="full">
       <div slot="message">Step 3 Content Goes Here</div>
     </calcite-notice>
   </calcite-stepper-item>
   <calcite-stepper-item heading="Confirm and complete" description="Disabled example" disabled="">
-    <calcite-notice active width="full">
+    <calcite-notice open width="full">
       <div slot="message">Step 4 Content Goes Here</div>
     </calcite-notice>
   </calcite-stepper-item>
@@ -171,22 +171,22 @@ export const arabicNumberingSystem_TestOnly = (): string => html` <calcite-stepp
   scale="s"
 >
   <calcite-stepper-item heading="الخطوةالاولى" complete>
-    <calcite-notice active width="full">
+    <calcite-notice open width="full">
       <div slot="message">الخطوة الأولى للمحتوى هنا</div>
     </calcite-notice>
   </calcite-stepper-item>
   <calcite-stepper-item heading="الخطوة الثانية" complete>
-    <calcite-notice active width="full">
+    <calcite-notice open width="full">
       <div slot="message">الخطوة الثانية للمحتوى هنا</div>
     </calcite-notice>
   </calcite-stepper-item>
   <calcite-stepper-item heading="الخطوة الثالثة" description="بعض النصوص الفرعية" selected>
-    <calcite-notice active width="full">
+    <calcite-notice open width="full">
       <div slot="message">الخطوة الثالثة المحتوى يذهب هنا</div>
     </calcite-notice>
   </calcite-stepper-item>
   <calcite-stepper-item heading="الخطوة الرابعة">
-    <calcite-notice active width="full">
+    <calcite-notice open width="full">
       <div slot="message">الخطوة الرابعة المحتوى يذهب هنا</div>
     </calcite-notice>
   </calcite-stepper-item>