feat(popover): add built-in translations

src/components/popover/popover.e2e.ts

@@ -1,7 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
 
-import { accessible, defaults, hidden, renders, floatingUIOwner } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, floatingUIOwner, t9n } from "../../tests/commonTests";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -13,6 +13,8 @@ describe("calcite-popover", () => {
     );
   });
 
+  it("supports translations", () => t9n("calcite-popover"));
+
   it("should have zIndex of 900", async () => {
     const page = await newE2EPage();
 

src/components/popover/popover.tsx

@@ -17,7 +17,6 @@ import {
   ARIA_CONTROLS,
   ARIA_EXPANDED,
   HEADING_LEVEL,
-  TEXT,
   defaultPopoverPlacement
 } from "./resources";
 import {
@@ -46,6 +45,15 @@ import { HeadingLevel, Heading } from "../functional/Heading";
 
 import PopoverManager from "./PopoverManager";
 import { debounce } from "lodash-es";
+import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import {
+  connectMessages,
+  disconnectMessages,
+  setUpMessages,
+  T9nComponent,
+  updateMessages
+} from "../../utils/t9n";
+import { Messages } from "./assets/popover/t9n";
 
 const manager = new PopoverManager();
 
@@ -55,9 +63,12 @@ const manager = new PopoverManager();
 @Component({
   tag: "calcite-popover",
   styleUrl: "popover.scss",
-  shadow: true
+  shadow: true,
+  assetsDirs: ["assets"]
 })
-export class Popover implements FloatingUIComponent, OpenCloseComponent {
+export class Popover
+  implements FloatingUIComponent, OpenCloseComponent, LocalizedComponent, T9nComponent
+{
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -127,9 +138,34 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent {
    */
   @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;
+
   /** Accessible name for the component. */
   @Prop() label!: string;
 
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
+
+  @Watch("intlClose")
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    /* wired up by t9n util */
+  }
+
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  @Prop({ mutable: true }) messages: Messages;
+
   /**
    * Offsets the position of the popover away from the `referenceElement`.
    *
@@ -206,13 +242,6 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent {
    */
   @Prop({ reflect: true }) triggerDisabled = false;
 
-  /**
-   * Accessible name for the component's close button.
-   *
-   * @default "Close"
-   */
-  @Prop() intlClose = TEXT.close;
-
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -223,8 +252,17 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent {
 
   @Element() el: HTMLCalcitePopoverElement;
 
+  @State() effectiveLocale = "";
+
+  @Watch("effectiveLocale")
+  effectiveLocaleChange(): void {
+    updateMessages(this, this.effectiveLocale);
+  }
+
   @State() effectiveReferenceElement: ReferenceElement;
 
+  @State() defaultMessages: Messages;
+
   arrowEl: HTMLDivElement;
 
   closeButtonEl: HTMLCalciteActionElement;
@@ -245,6 +283,8 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent {
 
   connectedCallback(): void {
     this.setFilteredPlacements();
+    connectLocalized(this);
+    connectMessages(this);
     connectOpenCloseComponent(this);
     const closable = this.closable || this.dismissible;
     if (closable) {
@@ -256,6 +296,10 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent {
     this.setUpReferenceElement(this.hasLoaded);
   }
 
+  async componentWillLoad(): Promise<void> {
+    await setUpMessages(this);
+  }
+
   componentDidLoad(): void {
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
@@ -266,6 +310,8 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent {
 
   disconnectedCallback(): void {
     this.removeReferences();
+    disconnectLocalized(this);
+    disconnectMessages(this);
     disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);
     disconnectOpenCloseComponent(this);
   }
@@ -478,7 +524,7 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent {
   // --------------------------------------------------------------------------
 
   renderCloseButton(): VNode {
-    const { closeButton, intlClose, heading, closable } = this;
+    const { closeButton, messages, heading, closable } = this;
 
     return closable || closeButton ? (
       <div class={CSS.closeButtonContainer}>
@@ -487,7 +533,7 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent {
           onClick={this.hide}
           ref={(closeButtonEl) => (this.closeButtonEl = closeButtonEl)}
           scale={heading ? "s" : "m"}
-          text={intlClose}
+          text={messages.close}
         >
           <calcite-icon icon="x" scale={heading ? "s" : "m"} />
         </calcite-action>

src/components/popover/resources.ts

@@ -11,10 +11,6 @@ export const CSS = {
   heading: "heading"
 };
 
-export const TEXT = {
-  close: "Close"
-};
-
 export const defaultPopoverPlacement = "auto";
 export const ARIA_CONTROLS = "aria-controls";
 export const ARIA_EXPANDED = "aria-expanded";

src/utils/t9n.ts

@@ -93,6 +93,7 @@ async function fetchMessages(component: T9nComponent, lang: string): Promise<Mes
  */
 export async function updateMessages(component: T9nComponent, lang: string): Promise<void> {
   component.defaultMessages = await fetchMessages(component, lang);
+  mergeMessages(component);
 }
 
 /**
@@ -139,8 +140,6 @@ export interface T9nComponent extends LocalizedComponent {
 
   /**
    * This property holds the component's default messages.
-   *
-   * This prop should use the `@State` decorator.
    */
   defaultMessages: MessageBundle;
 
@@ -158,7 +157,6 @@ export interface T9nComponent extends LocalizedComponent {
    *
    * @Watch("intlMyPropA")
    * @Watch("intlMyPropZ")
-   * @Watch("defaultMessages")
    * @Watch("messageOverrides")
    * onMessagesChange(): void {
    *  \/* wired up by t9n util *\/