From bcd02d775443de7789fe547246e3fa1274b1b4e3 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 10 Oct 2022 18:42:08 -0700 Subject: [PATCH 1/5] feat(popover): add built-in translations --- src/components/popover/popover.e2e.ts | 4 +- src/components/popover/popover.tsx | 53 +++++++++++++++++++++------ src/components/popover/resources.ts | 4 -- 3 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/components/popover/popover.e2e.ts b/src/components/popover/popover.e2e.ts index 93d5c958cfa..baece0c01ab 100644 --- a/src/components/popover/popover.e2e.ts +++ b/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(); diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index d2168a418da..8efc62829b5 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -17,7 +17,6 @@ import { ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, - TEXT, defaultPopoverPlacement } from "./resources"; import { @@ -46,6 +45,9 @@ 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, T9nComponent } from "../../utils/t9n"; +import { Messages } from "./assets/popover/t9n"; const manager = new PopoverManager(); @@ -57,7 +59,9 @@ const manager = new PopoverManager(); styleUrl: "popover.scss", shadow: true }) -export class Popover implements FloatingUIComponent, OpenCloseComponent { +export class Popover + implements FloatingUIComponent, OpenCloseComponent, LocalizedComponent, T9nComponent +{ // -------------------------------------------------------------------------- // // Properties @@ -127,9 +131,35 @@ 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; + + @Watch("intlClose") + @Watch("defaultMessages") + @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 +236,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 +246,12 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent { @Element() el: HTMLCalcitePopoverElement; + @State() effectiveLocale = ""; + @State() effectiveReferenceElement: ReferenceElement; + @State() defaultMessages: Messages; + arrowEl: HTMLDivElement; closeButtonEl: HTMLCalciteActionElement; @@ -245,6 +272,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) { @@ -266,6 +295,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 +509,7 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent { // -------------------------------------------------------------------------- renderCloseButton(): VNode { - const { closeButton, intlClose, heading, closable } = this; + const { closeButton, messages, heading, closable } = this; return closable || closeButton ? (
@@ -487,7 +518,7 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent { onClick={this.hide} ref={(closeButtonEl) => (this.closeButtonEl = closeButtonEl)} scale={heading ? "s" : "m"} - text={intlClose} + text={messages.close} > diff --git a/src/components/popover/resources.ts b/src/components/popover/resources.ts index 445ea15c5da..da10d77fb58 100644 --- a/src/components/popover/resources.ts +++ b/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"; From ee3c40fdeb0136bb269378e9fabe565e83081066 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 10 Oct 2022 19:39:54 -0700 Subject: [PATCH 2/5] set asset dir --- src/components/popover/popover.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index 8efc62829b5..71386f193e8 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -57,7 +57,8 @@ const manager = new PopoverManager(); @Component({ tag: "calcite-popover", styleUrl: "popover.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) export class Popover implements FloatingUIComponent, OpenCloseComponent, LocalizedComponent, T9nComponent From 56c932dae46a69d7d7027507c34f2883fc67925c Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 11 Oct 2022 10:00:49 -0700 Subject: [PATCH 3/5] add initial message load --- src/components/popover/popover.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index 71386f193e8..8946f4b7f0f 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -46,7 +46,7 @@ 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, T9nComponent } from "../../utils/t9n"; +import { connectMessages, disconnectMessages, setUpMessages, T9nComponent } from "../../utils/t9n"; import { Messages } from "./assets/popover/t9n"; const manager = new PopoverManager(); @@ -286,6 +286,10 @@ export class Popover this.setUpReferenceElement(this.hasLoaded); } + async componentWillLoad(): Promise { + await setUpMessages(this); + } + componentDidLoad(): void { if (this.referenceElement && !this.effectiveReferenceElement) { this.setUpReferenceElement(); From 3e498813582ada3a3cb37b24df2ab47a48ee5f5d Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 11 Oct 2022 11:24:25 -0700 Subject: [PATCH 4/5] add effectiveLocale watcher --- src/components/popover/popover.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index 8946f4b7f0f..cc6218c3a5c 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -46,7 +46,13 @@ 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 } from "../../utils/t9n"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; import { Messages } from "./assets/popover/t9n"; const manager = new PopoverManager(); @@ -249,6 +255,11 @@ export class Popover @State() effectiveLocale = ""; + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + @State() effectiveReferenceElement: ReferenceElement; @State() defaultMessages: Messages; From af1046c3f3c01531c519d6a68e3018d5efe495b8 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 12 Oct 2022 01:23:54 -0700 Subject: [PATCH 5/5] simplify pattern by not needing to watch default messages --- src/components/popover/popover.tsx | 1 - src/utils/t9n.ts | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index cc6218c3a5c..2071e7bb224 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -154,7 +154,6 @@ export class Popover @Prop({ mutable: true }) messageOverrides: Partial; @Watch("intlClose") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/utils/t9n.ts b/src/utils/t9n.ts index f900a1f4ba3..ac3a94e2579 100644 --- a/src/utils/t9n.ts +++ b/src/utils/t9n.ts @@ -93,6 +93,7 @@ async function fetchMessages(component: T9nComponent, lang: string): Promise { 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 *\/