refactor(modal,notice,pagination,panel,pick-list-item,popover)!: remo…

…ved deprecated `intl*` & accessible label properties (#6050) BREAKING CHANGE: Removed deprecated intl* & accessible label properties. - modal: * Removed the property `intlClose` , use `messsageOverrides.close` instead. - notice: * Removed the property `intlClose` , use `messsageOverrides.close` instead. - pagination: * Removed the property `textLabelNext` , use `messsageOverrides.next` instead. * Removed the property `textLabelPrevious` , use `messsageOverrides.previous` instead. - panel: * Removed the property `intlClose` , use `messsageOverrides.close` instead. * Removed the property `intlOptions`, use `messsageOverrides.options` instead. - pick-list-item: * Removed the property `intlRemove` , use `messsageOverrides.remove` instead. - popover: * Removed the property `intlClose` , use `messsageOverrides.close` instead.
Esri · Dec 15, 2022 · 37637ca · 37637ca
1 parent 65ba931
commit 37637ca
Show file tree

Hide file tree

Showing 9 changed files with 7 additions and 95 deletions.
diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts
@@ -11,13 +11,6 @@ describe("calcite-modal properties", () => {
 
   it("has slots", () => slots("calcite-modal", SLOTS));
 
-  it("adds localized strings set via intl-* props", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-modal intl-close="test"></calcite-modal>`);
-    const button = await page.find("calcite-modal >>> .close");
-    expect(button).toEqualAttribute("aria-label", "test");
-  });
-
   it("should hide closeButton when disabled", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-modal></calcite-modal>");
@@ -359,7 +352,7 @@ describe("calcite-modal accessibility checks", () => {
 
   it("closes and allows re-opening when Escape key is pressed", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-modal intl-close="test"></calcite-modal>`);
+    await page.setContent(`<calcite-modal ></calcite-modal>`);
     await skipAnimations(page);
     const modal = await page.find("calcite-modal");
     await modal.setProperty("open", true);
@@ -376,7 +369,7 @@ describe("calcite-modal accessibility checks", () => {
 
   it("closes when Escape key is pressed and modal is open on page load", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-modal intl-close="test" open></calcite-modal>`);
+    await page.setContent(`<calcite-modal  open></calcite-modal>`);
     const modal = await page.find("calcite-modal");
     await page.waitForChanges();
     expect(modal).toHaveAttribute("open");
@@ -393,7 +386,7 @@ describe("calcite-modal accessibility checks", () => {
 
   it("closes and allows re-opening when Close button is clicked", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-modal intl-close="test"></calcite-modal>`);
+    await page.setContent(`<calcite-modal ></calcite-modal>`);
     await skipAnimations(page);
     const modal = await page.find("calcite-modal");
     modal.setProperty("open", true);
@@ -411,7 +404,7 @@ describe("calcite-modal accessibility checks", () => {
 
   it("should close when the scrim is clicked", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-modal intl-close="test"></calcite-modal>`);
+    await page.setContent(`<calcite-modal ></calcite-modal>`);
     const modal = await page.find("calcite-modal");
     modal.setProperty("open", true);
     await page.waitForChanges();
@@ -423,7 +416,7 @@ describe("calcite-modal accessibility checks", () => {
 
   it("should not close when the scrim is clicked", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-modal outside-close-disabled intl-close="test"></calcite-modal>`);
+    await page.setContent(`<calcite-modal outside-close-disabled ></calcite-modal>`);
     const modal = await page.find("calcite-modal");
     modal.setProperty("open", true);
     await page.waitForChanges();

diff --git a/src/components/modal/modal.stories.ts b/src/components/modal/modal.stories.ts
@@ -25,7 +25,6 @@ export const simple = (): string => html`
     ${boolean("fullscreen", false)}
     ${boolean("docked", false)}
     ${boolean("escape-disabled", false)}
-    intl-close="${text("intl-close", "Close")}"
   >
     <h3 slot="header">Small Modal</h3>
     <div slot="content">
@@ -51,7 +50,6 @@ export const darkThemeRTLCustomSize_TestOnly = (): string => html`
     ${boolean("fullscreen", false)}
     ${boolean("docked", false)}
     ${boolean("escape-disabled", false)}
-    intl-close="${text("intl-close", "Close")}"
   >
     <h3 slot="header">Small Modal</h3>
     <div slot="content">

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
@@ -111,13 +111,6 @@ export class Modal
   /** When `true`, disables the closing of the component when clicked outside. */
   @Prop({ reflect: true }) outsideCloseDisabled = false;
 
-  /**
-   * Accessible name for the component's close button.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop() intlClose: string;
-
   /** When `true`, prevents the component from expanding to the entire screen on mobile devices. */
   @Prop({ reflect: true }) docked: boolean;
 
@@ -151,7 +144,6 @@ export class Modal
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlClose")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */

diff --git a/src/components/notice/notice.tsx b/src/components/notice/notice.tsx
@@ -120,14 +120,6 @@ export class Notice
    */
   @Prop({ reflect: true }) icon: string | boolean;
 
-  /**
-   * Accessible name for the close button.
-   *
-   * @default "Close"
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop({ reflect: false }) intlClose: string;
-
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
@@ -146,7 +138,6 @@ export class Notice
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlClose")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */

diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
@@ -59,27 +59,11 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("textLabelNext")
-  @Watch("textLabelPrevious")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
   }
 
-  getExtraMessageOverrides(): Partial<Messages> {
-    const extraOverrides: Partial<Messages> = {};
-
-    if (this.textLabelNext) {
-      extraOverrides.next = this.textLabelNext;
-    }
-
-    if (this.textLabelPrevious) {
-      extraOverrides.previous = this.textLabelPrevious;
-    }
-
-    return extraOverrides;
-  }
-
   /** Specifies the number of items per page. */
   @Prop({ reflect: true }) num = 20;
 
@@ -94,20 +78,6 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
   /** Specifies the total number of items. */
   @Prop({ reflect: true }) total = 0;
 
-  /**
-   * Accessible name for the component's next button.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() textLabelNext: string;
-
-  /**
-   * Accessible name for the component's previous button.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() textLabelPrevious: string;
-
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 

diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
@@ -91,20 +91,6 @@ export class Panel
    */
   @Prop({ reflect: true }) loading = false;
 
-  /**
-   * Accessible name for the component's close button. The close button will only be shown when `closeable` is `true`.
-   *
-   * @deprecated use `calcite-flow-item` instead.
-   */
-  @Prop() intlClose: string;
-
-  /**
-   * Accessible name for the component's actions menu.
-   *
-   * @deprecated use `calcite-flow-item` instead.
-   */
-  @Prop() intlOptions: string;
-
   /**
    * The component header text.
    */
@@ -130,8 +116,6 @@ export class Panel
    */
   @Prop({ mutable: true }) messages: Messages;
 
-  @Watch("intlClose")
-  @Watch("intlOptions")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */

diff --git a/src/components/pick-list-item/pick-list-item.e2e.ts b/src/components/pick-list-item/pick-list-item.e2e.ts
@@ -139,10 +139,10 @@ describe("calcite-pick-list-item", () => {
     await page.setContent(
       html`
         <calcite-pick-list style="width: 400px">
-          <calcite-pick-list-item label="apple" value="apple" icon="circle" intl-remove="Remove">
+          <calcite-pick-list-item label="apple" value="apple" icon="circle">
             <calcite-action slot="actions-end" icon="information"></calcite-action>
           </calcite-pick-list-item>
-          <calcite-pick-list-item label="mango" value="mango" selected="" icon="circle" intl-remove="Remove">
+          <calcite-pick-list-item label="mango" value="mango" selected="" icon="circle">
             <calcite-action slot="actions-end" icon="information"></calcite-action>
           </calcite-pick-list-item>
         </calcite-pick-list>

diff --git a/src/components/pick-list-item/pick-list-item.tsx b/src/components/pick-list-item/pick-list-item.tsx
@@ -109,7 +109,6 @@ export class PickListItem
    */
   @Prop({ mutable: true }) messages: Messages;
 
-  @Watch("intlRemove")
   @Watch("defaultMessages")
   @Watch("messageOverrides")
   onMessagesChange(): void {
@@ -148,13 +147,6 @@ export class PickListItem
     this.shiftPressed = false;
   }
 
-  /**
-   * When `removable` is `true`, the accessible name for the component's remove button.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop({ reflect: true }) intlRemove: string;
-
   /**
    * The component's value.
    */

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
@@ -143,13 +143,6 @@ export class Popover
    */
   @Prop({ reflect: true }) headingLevel: HeadingLevel;
 
-  /**
-   * Accessible name for the component's close button.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlClose: string;
-
   /** Accessible name for the component. */
   @Prop() label!: string;
 
@@ -158,7 +151,6 @@ export class Popover
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlClose")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */