From ac26754e23769ff5ab76255b09e04752e60d60a1 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 13 Oct 2022 12:46:26 -0500 Subject: [PATCH 01/59] feat: add built-in translations From 52a9d65e02c391ee7fefd5d1fad5db3783cefc56 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 17 Oct 2022 08:35:58 -0700 Subject: [PATCH 02/59] feat(color-picker): add built-in translations (#5431) * feat(color-picker): add built-in translations * drop defaults since these are now translated * remove leftover default prop assertion Co-authored-by: Anveshreddy mekala --- .../color-picker/color-picker.e2e.ts | 84 +------ src/components/color-picker/color-picker.tsx | 208 +++++++++++------- 2 files changed, 129 insertions(+), 163 deletions(-) diff --git a/src/components/color-picker/color-picker.e2e.ts b/src/components/color-picker/color-picker.e2e.ts index 0a91c94dfb6..f98b695d195 100644 --- a/src/components/color-picker/color-picker.e2e.ts +++ b/src/components/color-picker/color-picker.e2e.ts @@ -1,11 +1,9 @@ -import { accessible, defaults, hidden, reflects, renders, focusable, disabled } from "../../tests/commonTests"; - +import { accessible, defaults, hidden, reflects, renders, focusable, disabled, t9n } from "../../tests/commonTests"; import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, TEXT } from "./resources"; import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing"; import { ColorValue } from "./interfaces"; import SpyInstance = jest.SpyInstance; import { GlobalTestProps, selectText, getElementXY } from "../../tests/utils"; - describe("calcite-color-picker", () => { let consoleSpy: SpyInstance; @@ -72,82 +70,6 @@ describe("calcite-color-picker", () => { propertyName: "format", defaultValue: "auto" }, - { - propertyName: "intlB", - defaultValue: TEXT.b - }, - { - propertyName: "intlBlue", - defaultValue: TEXT.blue - }, - { - propertyName: "intlDeleteColor", - defaultValue: TEXT["deleteColor"] - }, - { - propertyName: "intlG", - defaultValue: TEXT.g - }, - { - propertyName: "intlGreen", - defaultValue: TEXT.green - }, - { - propertyName: "intlH", - defaultValue: TEXT.h - }, - { - propertyName: "intlHsv", - defaultValue: TEXT["hsv"] - }, - { - propertyName: "intlHex", - defaultValue: TEXT.hex - }, - { - propertyName: "intlHue", - defaultValue: TEXT.hue - }, - { - propertyName: "intlNoColor", - defaultValue: TEXT.noColor - }, - { - propertyName: "intlR", - defaultValue: TEXT.r - }, - { - propertyName: "intlRed", - defaultValue: TEXT.red - }, - { - propertyName: "intlRgb", - defaultValue: TEXT.rgb - }, - { - propertyName: "intlS", - defaultValue: TEXT.s - }, - { - propertyName: "intlSaturation", - defaultValue: TEXT.saturation - }, - { - propertyName: "intlSaveColor", - defaultValue: TEXT.saveColor - }, - { - propertyName: "intlSaved", - defaultValue: TEXT.saved - }, - { - propertyName: "intlV", - defaultValue: TEXT.v - }, - { - propertyName: "intlValue", - defaultValue: TEXT.value - }, { propertyName: "scale", defaultValue: "m" @@ -161,6 +83,8 @@ describe("calcite-color-picker", () => { // #408047 is a color in the middle of the color field it("can be disabled", () => disabled("")); + it("supports translations", () => t9n("")); + it(`should set all internal calcite-button types to 'button'`, async () => { const page = await newE2EPage({ html: "" @@ -319,7 +243,7 @@ describe("calcite-color-picker", () => { }; function assertUnsupportedValueMessage(value: string | object | null, format: string): void { - expect(consoleSpy).toBeCalledTimes(1); + expect(consoleSpy).toHaveBeenCalledTimes(1); expect(consoleSpy).toHaveBeenCalledWith( expect.stringMatching( new RegExp( diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 86b75639f23..2d6d1264bc6 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -21,8 +21,7 @@ import { DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, - RGB_LIMITS, - TEXT + RGB_LIMITS } from "./resources"; import { Direction, focusElement, getElementDir } from "../../utils/dom"; import { colorEqual, CSSColorMode, Format, normalizeHex, parseMode, SupportedMode } from "./utils"; @@ -30,7 +29,16 @@ import { throttle } from "lodash-es"; import { clamp } from "../../utils/math"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { Messages } from "./assets/color-picker/t9n"; import { isActivationKey } from "../../utils/key"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { NumberingSystem } from "../../utils/locale"; const throttleFor60FpsInMs = 16; @@ -40,9 +48,10 @@ const defaultFormat = "auto"; @Component({ tag: "calcite-color-picker", styleUrl: "color-picker.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class ColorPicker implements InteractiveComponent { +export class ColorPicker implements InteractiveComponent, T9nComponent { //-------------------------------------------------------------------------- // // Element @@ -113,135 +122,136 @@ export class ColorPicker implements InteractiveComponent { /** * Label used for the blue channel * - * @default "B" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlB = TEXT.b; + @Prop() intlB: string; /** * Label used for the blue channel description * - * @default "Blue" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlBlue = TEXT.blue; + @Prop() intlBlue: string; /** * Label used for the delete color button. * - * @default "Delete color" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlDeleteColor = TEXT.deleteColor; + @Prop() intlDeleteColor: string; /** * Label used for the green channel * * @default "G" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlG = TEXT.g; + @Prop() intlG: string; /** * Label used for the green channel description * - * @default "Green" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlGreen = TEXT.green; + @Prop() intlGreen: string; /** * Label used for the hue channel * - * @default "H" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlH = TEXT.h; + @Prop() intlH: string; /** * Label used for the HSV mode * - * @default "HSV" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlHsv = TEXT.hsv; + @Prop() intlHsv: string; /** * Label used for the hex input * - * @default "Hex" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlHex = TEXT.hex; + @Prop() intlHex: string; /** * Label used for the hue channel description * - * @default "Hue" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlHue = TEXT.hue; + @Prop() intlHue: string; /** * Label used for the hex input when there is no color selected. * - * @default "No color" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlNoColor = TEXT.noColor; + @Prop() intlNoColor: string; /** * Label used for the red channel * - * @default "R" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlR = TEXT.r; + @Prop() intlR: string; /** * Label used for the red channel description * - * @default "Red" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlRed = TEXT.red; + @Prop() intlRed: string; /** * Label used for the RGB mode * - * @default "RGB" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlRgb = TEXT.rgb; + @Prop() intlRgb: string; /** * Label used for the saturation channel * - * @default "S" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlS = TEXT.s; + @Prop() intlS: string; /** * Label used for the saturation channel description * - * @default "Saturation" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlSaturation = TEXT.saturation; + @Prop() intlSaturation: string; /** * Label used for the save color button. * - * @default "Save color" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlSaveColor = TEXT.saveColor; + @Prop() intlSaveColor: string; /** * Label used for the saved colors section * - * @default "Saved" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlSaved = TEXT.saved; + @Prop() intlSaved: string; /** * Label used for the value channel * - * @default "V" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlV = TEXT.v; + @Prop() intlV: string; /** * Label used for the * - * @default "Value" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlValue = TEXT.value; + @Prop() intlValue: string; /** * The scale of the color picker. @@ -259,6 +269,37 @@ export class ColorPicker implements InteractiveComponent { */ @Prop({ reflect: true }) storageId: string; + /** + * Use this property to override individual strings used by the component. + */ + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("intlG") + @Watch("intlB") + @Watch("intlV") + @Watch("intlBlue") + @Watch("intlDeleteColor") + @Watch("intlGreen") + @Watch("intlH") + @Watch("intlHsv") + @Watch("intlHex") + @Watch("intlHue") + @Watch("intlNoColor") + @Watch("intlR") + @Watch("intlRed") + @Watch("intlRgb") + @Watch("intlS") + @Watch("intlSaturation") + @Watch("intlSaveColor") + @Watch("intlSaved") + @Watch("intlV") + @Watch("intlValue") + @Watch("defaultMessages") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + /** Specifies the Unicode numeral system used by the component for localization. */ @Prop({ reflect: true }) numberingSystem?: NumberingSystem; @@ -349,6 +390,8 @@ export class ColorPicker implements InteractiveComponent { private sliderThumbState: "idle" | "hover" | "drag" = "idle"; + @State() defaultMessages: Messages; + @State() colorFieldAndSliderInteractive = false; @State() channelMode: ColorMode = "rgb"; @@ -357,6 +400,20 @@ export class ColorPicker implements InteractiveComponent { @State() dimensions = DIMENSIONS.m; + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + /** + * Made into a prop for testing purposes only + * + * @internal + */ + @Prop({ mutable: true }) messages: Messages; + @State() savedColors: string[] = []; @State() colorFieldScopeTop: number; @@ -734,7 +791,7 @@ export class ColorPicker implements InteractiveComponent { // //-------------------------------------------------------------------------- - componentWillLoad(): void { + async componentWillLoad(): Promise { const { allowEmpty, color, format, value } = this; const willSetNoColor = allowEmpty && !value; @@ -757,11 +814,20 @@ export class ColorPicker implements InteractiveComponent { if (this.storageId && localStorage.getItem(storageKey)) { this.savedColors = JSON.parse(localStorage.getItem(storageKey)); } + + await setUpMessages(this); + } + + connectedCallback(): void { + connectLocalized(this); + connectMessages(this); } disconnectedCallback(): void { document.removeEventListener("pointermove", this.globalPointerMoveHandler); document.removeEventListener("pointerup", this.globalPointerUpHandler); + disconnectLocalized(this); + disconnectMessages(this); } componentDidRender(): void { @@ -775,19 +841,8 @@ export class ColorPicker implements InteractiveComponent { //-------------------------------------------------------------------------- render(): VNode { - const { - allowEmpty, - color, - intlDeleteColor, - hideHex, - hideChannels, - hideSaved, - intlHex, - intlSaved, - intlSaveColor, - savedColors, - scale - } = this; + const { allowEmpty, color, messages, hideHex, hideChannels, hideSaved, savedColors, scale } = + this; const selectedColorInHex = color ? color.hex() : null; const hexInputScale = scale === "l" ? "m" : "s"; const { @@ -821,7 +876,7 @@ export class ColorPicker implements InteractiveComponent { ref={this.initColorFieldAndSlider} />
- {intlHex} + {messages.hex}
- +
{ - const { channelMode: activeChannelMode, intlRgb, intlHsv } = this; + const { channelMode: activeChannelMode, messages } = this; const active = channelMode === activeChannelMode; - const label = channelMode === "rgb" ? intlRgb : intlHsv; + const label = channelMode === "rgb" ? messages.rgb : messages.hsv; return ( { - const { - channelMode: activeChannelMode, - channels, - intlB, - intlBlue, - intlG, - intlGreen, - intlH, - intlHue, - intlR, - intlRed, - intlS, - intlSaturation, - intlV, - intlValue - } = this; - + const { channelMode: activeChannelMode, channels, messages } = this; const active = channelMode === activeChannelMode; const isRgb = channelMode === "rgb"; - const channelLabels = isRgb ? [intlR, intlG, intlB] : [intlH, intlS, intlV]; + const channelLabels = isRgb + ? [messages.r, messages.g, messages.b] + : [messages.h, messages.s, messages.v]; const channelAriaLabels = isRgb - ? [intlRed, intlGreen, intlBlue] - : [intlHue, intlSaturation, intlValue]; + ? [messages.red, messages.green, messages.blue] + : [messages.hue, messages.saturation, messages.value]; const direction = getElementDir(this.el); return ( @@ -1026,6 +1067,7 @@ export class ColorPicker implements InteractiveComponent { data-channel-index={index} dir={direction} label={ariaLabel} + lang={this.effectiveLocale} numberButtonType="none" numberingSystem={this.numberingSystem} onCalciteInputChange={this.handleChannelChange} From 71726ced119b5fedfbb125cd7f49e93e16bd4fa0 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 17 Oct 2022 11:14:54 -0700 Subject: [PATCH 03/59] feat(scrim): add built-in translations (#5435) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(scrim): add built-in translations * set asset dir and drop optional prop as all props are made optional * wire up lifecycle utils * fix copy pasta 🍝🤦 * add effectiveLocale watcher --- src/components/scrim/resources.ts | 4 -- src/components/scrim/scrim.e2e.ts | 4 +- src/components/scrim/scrim.tsx | 80 +++++++++++++++++++++++++++---- 3 files changed, 75 insertions(+), 13 deletions(-) diff --git a/src/components/scrim/resources.ts b/src/components/scrim/resources.ts index 06afcb25051..3b943747318 100644 --- a/src/components/scrim/resources.ts +++ b/src/components/scrim/resources.ts @@ -2,7 +2,3 @@ export const CSS = { scrim: "scrim", content: "content" }; - -export const TEXT = { - loading: "Loading" -}; diff --git a/src/components/scrim/scrim.e2e.ts b/src/components/scrim/scrim.e2e.ts index 193327bb9bf..da8ae687583 100644 --- a/src/components/scrim/scrim.e2e.ts +++ b/src/components/scrim/scrim.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, hidden, renders } from "../../tests/commonTests"; +import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests"; import { CSS } from "./resources"; describe("calcite-scrim", () => { @@ -19,6 +19,8 @@ describe("calcite-scrim", () => { } ])); + it("supports translations", () => t9n("calcite-scrim")); + it("shows loading component", async () => { const page = await newE2EPage(); diff --git a/src/components/scrim/scrim.tsx b/src/components/scrim/scrim.tsx index cb8856b6136..aa1babd4dc3 100644 --- a/src/components/scrim/scrim.tsx +++ b/src/components/scrim/scrim.tsx @@ -1,6 +1,15 @@ -import { Component, Element, Prop, h, VNode } from "@stencil/core"; +import { Component, Element, Prop, h, VNode, Watch, State } from "@stencil/core"; -import { CSS, TEXT } from "./resources"; +import { CSS } from "./resources"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { Messages } from "./assets/scrim/t9n"; /** * @slot - A slot for adding custom content, primarily loading information. @@ -8,9 +17,10 @@ import { CSS, TEXT } from "./resources"; @Component({ tag: "calcite-scrim", styleUrl: "scrim.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class Scrim { +export class Scrim implements LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- // // Properties @@ -20,15 +30,34 @@ export class Scrim { /** * Accessible name when the component is loading. * - * @default "Loading" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlLoading?: string = TEXT.loading; + @Prop() intlLoading: string; /** * When true, a busy indicator is displayed. */ @Prop({ reflect: true }) loading = false; + /** + * Made into a prop for testing purposes only + * + * @internal + */ + @Prop({ mutable: true }) messages: Messages; + + /** + * Use this property to override individual strings used by the component. + */ + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("intlLoading") + @Watch("defaultMessages") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + // -------------------------------------------------------------------------- // // Private Properties @@ -37,6 +66,41 @@ export class Scrim { @Element() el: HTMLCalciteScrimElement; + // -------------------------------------------------------------------------- + // + // Private State / Properties + // + // -------------------------------------------------------------------------- + + @State() defaultMessages: Messages; + + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + connectedCallback(): void { + connectLocalized(this); + connectMessages(this); + } + + async componentWillLoad(): Promise { + await setUpMessages(this); + } + + disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); + } + // -------------------------------------------------------------------------- // // Render Method @@ -44,9 +108,9 @@ export class Scrim { // -------------------------------------------------------------------------- render(): VNode { - const { el, loading, intlLoading } = this; + const { el, loading, messages } = this; const hasContent = el.innerHTML.trim().length > 0; - const loaderNode = loading ? : null; + const loaderNode = loading ? : null; const contentNode = hasContent ? (
From 2b2b9cc5cd69dc95908bc1cdf45016dad65ed464 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 17 Oct 2022 11:29:38 -0700 Subject: [PATCH 04/59] feat(popover): add built-in translations (#5436) * feat(popover): add built-in translations * set asset dir * add initial message load * add effectiveLocale watcher * simplify pattern by not needing to watch default messages --- src/components/popover/popover.e2e.ts | 4 +- src/components/popover/popover.tsx | 70 ++++++++++++++++++++++----- src/components/popover/resources.ts | 4 -- src/utils/t9n.ts | 4 +- 4 files changed, 62 insertions(+), 20 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..2071e7bb224 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,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; + + @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 { + 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 ? (
@@ -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} > 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"; 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 *\/ From db02d5878e147850c1ea1c832cba37f0402cf6c5 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 17 Oct 2022 13:54:29 -0700 Subject: [PATCH 05/59] feat(flow-item, panel): add built-in translations (#5433) * feat(panel): add built-in translations * add deprecation note * add t9n bundle for flow-item and wire it up for translations * add test * add initial message load * remove duplicate identifiers Co-authored-by: Anveshreddy mekala --- .../assets/flow-item/t9n/messages.json | 5 + .../assets/flow-item/t9n/messages_ar.json | 5 + .../assets/flow-item/t9n/messages_bg.json | 5 + .../assets/flow-item/t9n/messages_bs.json | 5 + .../assets/flow-item/t9n/messages_ca.json | 5 + .../assets/flow-item/t9n/messages_cs.json | 5 + .../assets/flow-item/t9n/messages_da.json | 5 + .../assets/flow-item/t9n/messages_de.json | 5 + .../assets/flow-item/t9n/messages_el.json | 5 + .../assets/flow-item/t9n/messages_en.json | 5 + .../assets/flow-item/t9n/messages_es.json | 5 + .../assets/flow-item/t9n/messages_et.json | 5 + .../assets/flow-item/t9n/messages_fi.json | 5 + .../assets/flow-item/t9n/messages_fr.json | 5 + .../assets/flow-item/t9n/messages_he.json | 5 + .../assets/flow-item/t9n/messages_hr.json | 5 + .../assets/flow-item/t9n/messages_hu.json | 5 + .../assets/flow-item/t9n/messages_id.json | 5 + .../assets/flow-item/t9n/messages_it.json | 5 + .../assets/flow-item/t9n/messages_ja.json | 5 + .../assets/flow-item/t9n/messages_ko.json | 5 + .../assets/flow-item/t9n/messages_lt.json | 5 + .../assets/flow-item/t9n/messages_lv.json | 5 + .../assets/flow-item/t9n/messages_nl.json | 5 + .../assets/flow-item/t9n/messages_no.json | 5 + .../assets/flow-item/t9n/messages_pl.json | 5 + .../assets/flow-item/t9n/messages_pt-BR.json | 5 + .../assets/flow-item/t9n/messages_pt-PT.json | 5 + .../assets/flow-item/t9n/messages_ro.json | 5 + .../assets/flow-item/t9n/messages_ru.json | 5 + .../assets/flow-item/t9n/messages_sk.json | 5 + .../assets/flow-item/t9n/messages_sl.json | 5 + .../assets/flow-item/t9n/messages_sr.json | 5 + .../assets/flow-item/t9n/messages_sv.json | 5 + .../assets/flow-item/t9n/messages_th.json | 5 + .../assets/flow-item/t9n/messages_tr.json | 5 + .../assets/flow-item/t9n/messages_uk.json | 5 + .../assets/flow-item/t9n/messages_vi.json | 5 + .../assets/flow-item/t9n/messages_zh-CN.json | 5 + .../assets/flow-item/t9n/messages_zh-HK.json | 5 + .../assets/flow-item/t9n/messages_zh-TW.json | 5 + src/components/flow-item/flow-item.e2e.ts | 4 +- src/components/flow-item/flow-item.tsx | 93 +++++++--- src/components/flow-item/resources.ts | 4 - .../panel/assets/panel/t9n/messages.json | 1 - .../panel/assets/panel/t9n/messages_ar.json | 1 - .../panel/assets/panel/t9n/messages_bg.json | 1 - .../panel/assets/panel/t9n/messages_bs.json | 1 - .../panel/assets/panel/t9n/messages_ca.json | 1 - .../panel/assets/panel/t9n/messages_cs.json | 1 - .../panel/assets/panel/t9n/messages_da.json | 1 - .../panel/assets/panel/t9n/messages_de.json | 1 - .../panel/assets/panel/t9n/messages_el.json | 1 - .../panel/assets/panel/t9n/messages_en.json | 1 - .../panel/assets/panel/t9n/messages_es.json | 1 - .../panel/assets/panel/t9n/messages_et.json | 1 - .../panel/assets/panel/t9n/messages_fi.json | 1 - .../panel/assets/panel/t9n/messages_fr.json | 1 - .../panel/assets/panel/t9n/messages_he.json | 1 - .../panel/assets/panel/t9n/messages_hr.json | 1 - .../panel/assets/panel/t9n/messages_hu.json | 1 - .../panel/assets/panel/t9n/messages_id.json | 1 - .../panel/assets/panel/t9n/messages_it.json | 1 - .../panel/assets/panel/t9n/messages_ja.json | 1 - .../panel/assets/panel/t9n/messages_ko.json | 1 - .../panel/assets/panel/t9n/messages_lt.json | 1 - .../panel/assets/panel/t9n/messages_lv.json | 1 - .../panel/assets/panel/t9n/messages_nl.json | 1 - .../panel/assets/panel/t9n/messages_no.json | 1 - .../panel/assets/panel/t9n/messages_pl.json | 1 - .../assets/panel/t9n/messages_pt-BR.json | 1 - .../assets/panel/t9n/messages_pt-PT.json | 1 - .../panel/assets/panel/t9n/messages_ro.json | 1 - .../panel/assets/panel/t9n/messages_ru.json | 1 - .../panel/assets/panel/t9n/messages_sk.json | 1 - .../panel/assets/panel/t9n/messages_sl.json | 1 - .../panel/assets/panel/t9n/messages_sr.json | 1 - .../panel/assets/panel/t9n/messages_sv.json | 1 - .../panel/assets/panel/t9n/messages_th.json | 1 - .../panel/assets/panel/t9n/messages_tr.json | 1 - .../panel/assets/panel/t9n/messages_uk.json | 1 - .../panel/assets/panel/t9n/messages_vi.json | 1 - .../assets/panel/t9n/messages_zh-CN.json | 1 - .../assets/panel/t9n/messages_zh-HK.json | 1 - .../assets/panel/t9n/messages_zh-TW.json | 1 - src/components/panel/panel.e2e.ts | 4 +- src/components/panel/panel.tsx | 165 +++++++++++------- src/components/panel/resources.ts | 7 - t9nmanifest.txt | 3 +- 89 files changed, 392 insertions(+), 134 deletions(-) create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_ar.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_bg.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_bs.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_ca.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_cs.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_da.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_de.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_el.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_en.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_es.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_et.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_fi.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_fr.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_he.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_hr.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_hu.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_id.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_it.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_ja.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_ko.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_lt.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_lv.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_nl.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_no.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_pl.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_pt-BR.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_pt-PT.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_ro.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_ru.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_sk.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_sl.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_sr.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_sv.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_th.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_tr.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_uk.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_vi.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_zh-CN.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_zh-HK.json create mode 100644 src/components/flow-item/assets/flow-item/t9n/messages_zh-TW.json diff --git a/src/components/flow-item/assets/flow-item/t9n/messages.json b/src/components/flow-item/assets/flow-item/t9n/messages.json new file mode 100644 index 00000000000..ec7982d0cc8 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages.json @@ -0,0 +1,5 @@ +{ + "back": "Back", + "close": "Close", + "options": "Options" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_ar.json b/src/components/flow-item/assets/flow-item/t9n/messages_ar.json new file mode 100644 index 00000000000..7311539c541 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_ar.json @@ -0,0 +1,5 @@ +{ + "back": "بيت_Back_________لاحقة", + "close": "بيت_Close___________لاحقة", + "options": "بيت_Options_______________لاحقة" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_bg.json b/src/components/flow-item/assets/flow-item/t9n/messages_bg.json new file mode 100644 index 00000000000..23a257b7919 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_bg.json @@ -0,0 +1,5 @@ +{ + "back": "й_Back_________й", + "close": "й_Close___________й", + "options": "й_Options_______________й" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_bs.json b/src/components/flow-item/assets/flow-item/t9n/messages_bs.json new file mode 100644 index 00000000000..cd1ab943845 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_bs.json @@ -0,0 +1,5 @@ +{ + "back": "Č_Back_________ž", + "close": "Č_Close___________ž", + "options": "Č_Options_______________ž" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_ca.json b/src/components/flow-item/assets/flow-item/t9n/messages_ca.json new file mode 100644 index 00000000000..05b4dfc37c0 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_ca.json @@ -0,0 +1,5 @@ +{ + "back": "ó_Back_________à", + "close": "ó_Close___________à", + "options": "ó_Options_______________à" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_cs.json b/src/components/flow-item/assets/flow-item/t9n/messages_cs.json new file mode 100644 index 00000000000..206daf1cb1f --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_cs.json @@ -0,0 +1,5 @@ +{ + "back": "Ř_Back_________ů", + "close": "Ř_Close___________ů", + "options": "Ř_Options_______________ů" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_da.json b/src/components/flow-item/assets/flow-item/t9n/messages_da.json new file mode 100644 index 00000000000..370b5fcabeb --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_da.json @@ -0,0 +1,5 @@ +{ + "back": "ø_Back_________å", + "close": "ø_Close___________å", + "options": "ø_Options_______________å" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_de.json b/src/components/flow-item/assets/flow-item/t9n/messages_de.json new file mode 100644 index 00000000000..ca77a3a4a20 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_de.json @@ -0,0 +1,5 @@ +{ + "back": "ä_Back_________Ü", + "close": "ä_Close___________Ü", + "options": "ä_Options_______________Ü" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_el.json b/src/components/flow-item/assets/flow-item/t9n/messages_el.json new file mode 100644 index 00000000000..5f9ab037f79 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_el.json @@ -0,0 +1,5 @@ +{ + "back": "Đ_Back_________ớ", + "close": "Đ_Close___________ớ", + "options": "Đ_Options_______________ớ" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_en.json b/src/components/flow-item/assets/flow-item/t9n/messages_en.json new file mode 100644 index 00000000000..ec7982d0cc8 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_en.json @@ -0,0 +1,5 @@ +{ + "back": "Back", + "close": "Close", + "options": "Options" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_es.json b/src/components/flow-item/assets/flow-item/t9n/messages_es.json new file mode 100644 index 00000000000..155c00dd346 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_es.json @@ -0,0 +1,5 @@ +{ + "back": "á_Back_________Ó", + "close": "á_Close___________Ó", + "options": "á_Options_______________Ó" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_et.json b/src/components/flow-item/assets/flow-item/t9n/messages_et.json new file mode 100644 index 00000000000..1f23ea01091 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_et.json @@ -0,0 +1,5 @@ +{ + "back": "Š_Back_________ä", + "close": "Š_Close___________ä", + "options": "Š_Options_______________ä" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_fi.json b/src/components/flow-item/assets/flow-item/t9n/messages_fi.json new file mode 100644 index 00000000000..7eaa51c6978 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_fi.json @@ -0,0 +1,5 @@ +{ + "back": "Å_Back_________ö", + "close": "Å_Close___________ö", + "options": "Å_Options_______________ö" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_fr.json b/src/components/flow-item/assets/flow-item/t9n/messages_fr.json new file mode 100644 index 00000000000..5088cb84710 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_fr.json @@ -0,0 +1,5 @@ +{ + "back": "æ_Back_________Â", + "close": "æ_Close___________Â", + "options": "æ_Options_______________Â" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_he.json b/src/components/flow-item/assets/flow-item/t9n/messages_he.json new file mode 100644 index 00000000000..549e0840a83 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_he.json @@ -0,0 +1,5 @@ +{ + "back": "כן_Back_________ש", + "close": "כן_Close___________ש", + "options": "כן_Options_______________ש" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_hr.json b/src/components/flow-item/assets/flow-item/t9n/messages_hr.json new file mode 100644 index 00000000000..cd1ab943845 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_hr.json @@ -0,0 +1,5 @@ +{ + "back": "Č_Back_________ž", + "close": "Č_Close___________ž", + "options": "Č_Options_______________ž" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_hu.json b/src/components/flow-item/assets/flow-item/t9n/messages_hu.json new file mode 100644 index 00000000000..10edd5c1c6a --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_hu.json @@ -0,0 +1,5 @@ +{ + "back": "í_Back_________ő", + "close": "í_Close___________ő", + "options": "í_Options_______________ő" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_id.json b/src/components/flow-item/assets/flow-item/t9n/messages_id.json new file mode 100644 index 00000000000..ff8527a25e9 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_id.json @@ -0,0 +1,5 @@ +{ + "back": "ng_Back_________ny", + "close": "ng_Close___________ny", + "options": "ng_Options_______________ny" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_it.json b/src/components/flow-item/assets/flow-item/t9n/messages_it.json new file mode 100644 index 00000000000..782bdc63ab7 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_it.json @@ -0,0 +1,5 @@ +{ + "back": "é_Back_________È", + "close": "é_Close___________È", + "options": "é_Options_______________È" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_ja.json b/src/components/flow-item/assets/flow-item/t9n/messages_ja.json new file mode 100644 index 00000000000..79af4978778 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_ja.json @@ -0,0 +1,5 @@ +{ + "back": "須_Back_________鷗", + "close": "須_Close___________鷗", + "options": "須_Options_______________鷗" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_ko.json b/src/components/flow-item/assets/flow-item/t9n/messages_ko.json new file mode 100644 index 00000000000..66d13238e8e --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_ko.json @@ -0,0 +1,5 @@ +{ + "back": "한_Back_________빠", + "close": "한_Close___________빠", + "options": "한_Options_______________빠" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_lt.json b/src/components/flow-item/assets/flow-item/t9n/messages_lt.json new file mode 100644 index 00000000000..abec72d1381 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_lt.json @@ -0,0 +1,5 @@ +{ + "back": "Į_Back_________š", + "close": "Į_Close___________š", + "options": "Į_Options_______________š" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_lv.json b/src/components/flow-item/assets/flow-item/t9n/messages_lv.json new file mode 100644 index 00000000000..7bfdcbdfee2 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_lv.json @@ -0,0 +1,5 @@ +{ + "back": "ķ_Back_________ū", + "close": "ķ_Close___________ū", + "options": "ķ_Options_______________ū" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_nl.json b/src/components/flow-item/assets/flow-item/t9n/messages_nl.json new file mode 100644 index 00000000000..58e1b41055d --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_nl.json @@ -0,0 +1,5 @@ +{ + "back": "IJ_Back_________ä", + "close": "IJ_Close___________ä", + "options": "IJ_Options_______________ä" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_no.json b/src/components/flow-item/assets/flow-item/t9n/messages_no.json new file mode 100644 index 00000000000..69d69782cfb --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_no.json @@ -0,0 +1,5 @@ +{ + "back": "å_Back_________ø", + "close": "å_Close___________ø", + "options": "å_Options_______________ø" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_pl.json b/src/components/flow-item/assets/flow-item/t9n/messages_pl.json new file mode 100644 index 00000000000..daef8e8b049 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_pl.json @@ -0,0 +1,5 @@ +{ + "back": "ł_Back_________ą", + "close": "ł_Close___________ą", + "options": "ł_Options_______________ą" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_pt-BR.json b/src/components/flow-item/assets/flow-item/t9n/messages_pt-BR.json new file mode 100644 index 00000000000..82377115d11 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_pt-BR.json @@ -0,0 +1,5 @@ +{ + "back": "ã_Back_________Ç", + "close": "ã_Close___________Ç", + "options": "ã_Options_______________Ç" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_pt-PT.json b/src/components/flow-item/assets/flow-item/t9n/messages_pt-PT.json new file mode 100644 index 00000000000..82377115d11 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_pt-PT.json @@ -0,0 +1,5 @@ +{ + "back": "ã_Back_________Ç", + "close": "ã_Close___________Ç", + "options": "ã_Options_______________Ç" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_ro.json b/src/components/flow-item/assets/flow-item/t9n/messages_ro.json new file mode 100644 index 00000000000..7740f573054 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_ro.json @@ -0,0 +1,5 @@ +{ + "back": "Ă_Back_________ș", + "close": "Ă_Close___________ș", + "options": "Ă_Options_______________ș" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_ru.json b/src/components/flow-item/assets/flow-item/t9n/messages_ru.json new file mode 100644 index 00000000000..b49006cd695 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_ru.json @@ -0,0 +1,5 @@ +{ + "back": "Ж_Back_________Я", + "close": "Ж_Close___________Я", + "options": "Ж_Options_______________Я" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_sk.json b/src/components/flow-item/assets/flow-item/t9n/messages_sk.json new file mode 100644 index 00000000000..e51adb5cf1f --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_sk.json @@ -0,0 +1,5 @@ +{ + "back": "ĺ_Back_________ľ", + "close": "ĺ_Close___________ľ", + "options": "ĺ_Options_______________ľ" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_sl.json b/src/components/flow-item/assets/flow-item/t9n/messages_sl.json new file mode 100644 index 00000000000..4f748c971a2 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_sl.json @@ -0,0 +1,5 @@ +{ + "back": "Š_Back_________č", + "close": "Š_Close___________č", + "options": "Š_Options_______________č" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_sr.json b/src/components/flow-item/assets/flow-item/t9n/messages_sr.json new file mode 100644 index 00000000000..cd1ab943845 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_sr.json @@ -0,0 +1,5 @@ +{ + "back": "Č_Back_________ž", + "close": "Č_Close___________ž", + "options": "Č_Options_______________ž" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_sv.json b/src/components/flow-item/assets/flow-item/t9n/messages_sv.json new file mode 100644 index 00000000000..7eaa51c6978 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_sv.json @@ -0,0 +1,5 @@ +{ + "back": "Å_Back_________ö", + "close": "Å_Close___________ö", + "options": "Å_Options_______________ö" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_th.json b/src/components/flow-item/assets/flow-item/t9n/messages_th.json new file mode 100644 index 00000000000..911ceec4702 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_th.json @@ -0,0 +1,5 @@ +{ + "back": "ก้_Back_________ษฺ", + "close": "ก้_Close___________ษฺ", + "options": "ก้_Options_______________ษฺ" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_tr.json b/src/components/flow-item/assets/flow-item/t9n/messages_tr.json new file mode 100644 index 00000000000..e324e48ea51 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_tr.json @@ -0,0 +1,5 @@ +{ + "back": "ı_Back_________İ", + "close": "ı_Close___________İ", + "options": "ı_Options_______________İ" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_uk.json b/src/components/flow-item/assets/flow-item/t9n/messages_uk.json new file mode 100644 index 00000000000..4a38aeca1d6 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_uk.json @@ -0,0 +1,5 @@ +{ + "back": "ґ_Back_________Ї", + "close": "ґ_Close___________Ї", + "options": "ґ_Options_______________Ї" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_vi.json b/src/components/flow-item/assets/flow-item/t9n/messages_vi.json new file mode 100644 index 00000000000..5f9ab037f79 --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_vi.json @@ -0,0 +1,5 @@ +{ + "back": "Đ_Back_________ớ", + "close": "Đ_Close___________ớ", + "options": "Đ_Options_______________ớ" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_zh-CN.json b/src/components/flow-item/assets/flow-item/t9n/messages_zh-CN.json new file mode 100644 index 00000000000..9001f3f03bf --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_zh-CN.json @@ -0,0 +1,5 @@ +{ + "back": "试_Back_________验", + "close": "试_Close___________验", + "options": "试_Options_______________验" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_zh-HK.json b/src/components/flow-item/assets/flow-item/t9n/messages_zh-HK.json new file mode 100644 index 00000000000..874e3a3a04d --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_zh-HK.json @@ -0,0 +1,5 @@ +{ + "back": "試_Back_________驗", + "close": "試_Close___________驗", + "options": "試_Options_______________驗" +} diff --git a/src/components/flow-item/assets/flow-item/t9n/messages_zh-TW.json b/src/components/flow-item/assets/flow-item/t9n/messages_zh-TW.json new file mode 100644 index 00000000000..874e3a3a04d --- /dev/null +++ b/src/components/flow-item/assets/flow-item/t9n/messages_zh-TW.json @@ -0,0 +1,5 @@ +{ + "back": "試_Back_________驗", + "close": "試_Close___________驗", + "options": "試_Options_______________驗" +} diff --git a/src/components/flow-item/flow-item.e2e.ts b/src/components/flow-item/flow-item.e2e.ts index 68571859306..a0142bdd741 100644 --- a/src/components/flow-item/flow-item.e2e.ts +++ b/src/components/flow-item/flow-item.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests"; +import { accessible, defaults, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests"; import { CSS, SLOTS } from "./resources"; describe("calcite-flow-item", () => { @@ -56,6 +56,8 @@ describe("calcite-flow-item", () => { shadowFocusTargetSelector: "calcite-action" })); + it("supports translations", () => t9n("calcite-flow-item")); + it("showBackButton", async () => { const page = await newE2EPage(); diff --git a/src/components/flow-item/flow-item.tsx b/src/components/flow-item/flow-item.tsx index 50f05914196..141ee7d1283 100644 --- a/src/components/flow-item/flow-item.tsx +++ b/src/components/flow-item/flow-item.tsx @@ -8,14 +8,24 @@ import { Method, Event, EventEmitter, - State + State, + Watch } from "@stencil/core"; import { getElementDir } from "../../utils/dom"; import { HeadingLevel } from "../functional/Heading"; import { Scale } from "../interfaces"; -import { CSS, ICONS, TEXT, SLOTS } from "./resources"; +import { CSS, ICONS, SLOTS } from "./resources"; import { SLOTS as PANEL_SLOTS } from "../panel/resources"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { Messages } from "./assets/flow-item/t9n"; /** * @slot - A slot for adding custom content. @@ -30,9 +40,10 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac @Component({ tag: "calcite-flow-item", styleUrl: "flow-item.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class FlowItem implements InteractiveComponent { +export class FlowItem implements InteractiveComponent, LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- // // Properties @@ -75,18 +86,24 @@ export class FlowItem implements InteractiveComponent { /** * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true. + * + * @deprecated use `calcite-flow-item` instead. */ - @Prop() intlBack?: string; + @Prop() intlBack: string; /** * Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true. + * + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlClose?: string; + @Prop() intlClose: string; /** * Accessible name for the component's actions menu. + * + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlOptions?: string; + @Prop() intlOptions: string; /** * When true, a busy indicator is displayed. @@ -98,6 +115,27 @@ export class FlowItem implements InteractiveComponent { */ @Prop({ reflect: true }) menuOpen = false; + /** + * Use this property to override individual strings used by the component. + */ + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("intlBack") + @Watch("intlClose") + @Watch("intlOptions") + @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; + /** * When true, displays a back button in the header. */ @@ -114,10 +152,24 @@ export class FlowItem implements InteractiveComponent { // //-------------------------------------------------------------------------- + connectedCallback(): void { + connectLocalized(this); + connectMessages(this); + } + + async componentWillLoad(): Promise { + await setUpMessages(this); + } + componentDidRender(): void { updateHostInteraction(this); } + disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); + } + // -------------------------------------------------------------------------- // // Events @@ -154,6 +206,15 @@ export class FlowItem implements InteractiveComponent { @State() backButtonEl: HTMLCalciteActionElement; + @State() defaultMessages: Messages; + + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + // -------------------------------------------------------------------------- // // Methods @@ -211,10 +272,6 @@ export class FlowItem implements InteractiveComponent { this.backButtonEl = node; }; - getBackLabel = (): string => { - return this.intlBack || TEXT.back; - }; - // -------------------------------------------------------------------------- // // Render Methods @@ -225,8 +282,8 @@ export class FlowItem implements InteractiveComponent { const { el } = this; const rtl = getElementDir(el) === "rtl"; - const { showBackButton, backButtonClick } = this; - const label = this.getBackLabel(); + const { showBackButton, backButtonClick, messages } = this; + const label = messages.back; const icon = rtl ? ICONS.backRight : ICONS.backLeft; return showBackButton ? ( @@ -253,15 +310,13 @@ export class FlowItem implements InteractiveComponent { heading, headingLevel, heightScale, - intlBack, - intlClose, - intlOptions, loading, menuOpen, + messages, widthScale, backButtonEl } = this; - const label = this.getBackLabel(); + const label = messages.back; return ( diff --git a/src/components/flow-item/resources.ts b/src/components/flow-item/resources.ts index 13650172cd6..9843f9f5d34 100644 --- a/src/components/flow-item/resources.ts +++ b/src/components/flow-item/resources.ts @@ -7,10 +7,6 @@ export const ICONS = { backRight: "chevron-right" }; -export const TEXT = { - back: "Back" -}; - export const SLOTS = { headerActionsStart: "header-actions-start", headerActionsEnd: "header-actions-end", diff --git a/src/components/panel/assets/panel/t9n/messages.json b/src/components/panel/assets/panel/t9n/messages.json index 645ada9b504..ec7982d0cc8 100644 --- a/src/components/panel/assets/panel/t9n/messages.json +++ b/src/components/panel/assets/panel/t9n/messages.json @@ -1,6 +1,5 @@ { "back": "Back", "close": "Close", - "open": "Open", "options": "Options" } diff --git a/src/components/panel/assets/panel/t9n/messages_ar.json b/src/components/panel/assets/panel/t9n/messages_ar.json index deede021b9b..7311539c541 100644 --- a/src/components/panel/assets/panel/t9n/messages_ar.json +++ b/src/components/panel/assets/panel/t9n/messages_ar.json @@ -1,6 +1,5 @@ { "back": "بيت_Back_________لاحقة", "close": "بيت_Close___________لاحقة", - "open": "بيت_Open_________لاحقة", "options": "بيت_Options_______________لاحقة" } diff --git a/src/components/panel/assets/panel/t9n/messages_bg.json b/src/components/panel/assets/panel/t9n/messages_bg.json index fc8033358fc..23a257b7919 100644 --- a/src/components/panel/assets/panel/t9n/messages_bg.json +++ b/src/components/panel/assets/panel/t9n/messages_bg.json @@ -1,6 +1,5 @@ { "back": "й_Back_________й", "close": "й_Close___________й", - "open": "й_Open_________й", "options": "й_Options_______________й" } diff --git a/src/components/panel/assets/panel/t9n/messages_bs.json b/src/components/panel/assets/panel/t9n/messages_bs.json index b130cde4ae9..cd1ab943845 100644 --- a/src/components/panel/assets/panel/t9n/messages_bs.json +++ b/src/components/panel/assets/panel/t9n/messages_bs.json @@ -1,6 +1,5 @@ { "back": "Č_Back_________ž", "close": "Č_Close___________ž", - "open": "Č_Open_________ž", "options": "Č_Options_______________ž" } diff --git a/src/components/panel/assets/panel/t9n/messages_ca.json b/src/components/panel/assets/panel/t9n/messages_ca.json index 5c9dee89bb1..05b4dfc37c0 100644 --- a/src/components/panel/assets/panel/t9n/messages_ca.json +++ b/src/components/panel/assets/panel/t9n/messages_ca.json @@ -1,6 +1,5 @@ { "back": "ó_Back_________à", "close": "ó_Close___________à", - "open": "ó_Open_________à", "options": "ó_Options_______________à" } diff --git a/src/components/panel/assets/panel/t9n/messages_cs.json b/src/components/panel/assets/panel/t9n/messages_cs.json index 69a435590ba..206daf1cb1f 100644 --- a/src/components/panel/assets/panel/t9n/messages_cs.json +++ b/src/components/panel/assets/panel/t9n/messages_cs.json @@ -1,6 +1,5 @@ { "back": "Ř_Back_________ů", "close": "Ř_Close___________ů", - "open": "Ř_Open_________ů", "options": "Ř_Options_______________ů" } diff --git a/src/components/panel/assets/panel/t9n/messages_da.json b/src/components/panel/assets/panel/t9n/messages_da.json index 5cc44c41c35..370b5fcabeb 100644 --- a/src/components/panel/assets/panel/t9n/messages_da.json +++ b/src/components/panel/assets/panel/t9n/messages_da.json @@ -1,6 +1,5 @@ { "back": "ø_Back_________å", "close": "ø_Close___________å", - "open": "ø_Open_________å", "options": "ø_Options_______________å" } diff --git a/src/components/panel/assets/panel/t9n/messages_de.json b/src/components/panel/assets/panel/t9n/messages_de.json index e277098040c..ca77a3a4a20 100644 --- a/src/components/panel/assets/panel/t9n/messages_de.json +++ b/src/components/panel/assets/panel/t9n/messages_de.json @@ -1,6 +1,5 @@ { "back": "ä_Back_________Ü", "close": "ä_Close___________Ü", - "open": "ä_Open_________Ü", "options": "ä_Options_______________Ü" } diff --git a/src/components/panel/assets/panel/t9n/messages_el.json b/src/components/panel/assets/panel/t9n/messages_el.json index d9ee25c6cc8..5f9ab037f79 100644 --- a/src/components/panel/assets/panel/t9n/messages_el.json +++ b/src/components/panel/assets/panel/t9n/messages_el.json @@ -1,6 +1,5 @@ { "back": "Đ_Back_________ớ", "close": "Đ_Close___________ớ", - "open": "Đ_Open_________ớ", "options": "Đ_Options_______________ớ" } diff --git a/src/components/panel/assets/panel/t9n/messages_en.json b/src/components/panel/assets/panel/t9n/messages_en.json index 645ada9b504..ec7982d0cc8 100644 --- a/src/components/panel/assets/panel/t9n/messages_en.json +++ b/src/components/panel/assets/panel/t9n/messages_en.json @@ -1,6 +1,5 @@ { "back": "Back", "close": "Close", - "open": "Open", "options": "Options" } diff --git a/src/components/panel/assets/panel/t9n/messages_es.json b/src/components/panel/assets/panel/t9n/messages_es.json index d983f2451b0..155c00dd346 100644 --- a/src/components/panel/assets/panel/t9n/messages_es.json +++ b/src/components/panel/assets/panel/t9n/messages_es.json @@ -1,6 +1,5 @@ { "back": "á_Back_________Ó", "close": "á_Close___________Ó", - "open": "á_Open_________Ó", "options": "á_Options_______________Ó" } diff --git a/src/components/panel/assets/panel/t9n/messages_et.json b/src/components/panel/assets/panel/t9n/messages_et.json index a3779033f1d..1f23ea01091 100644 --- a/src/components/panel/assets/panel/t9n/messages_et.json +++ b/src/components/panel/assets/panel/t9n/messages_et.json @@ -1,6 +1,5 @@ { "back": "Š_Back_________ä", "close": "Š_Close___________ä", - "open": "Š_Open_________ä", "options": "Š_Options_______________ä" } diff --git a/src/components/panel/assets/panel/t9n/messages_fi.json b/src/components/panel/assets/panel/t9n/messages_fi.json index 52d35453ec1..7eaa51c6978 100644 --- a/src/components/panel/assets/panel/t9n/messages_fi.json +++ b/src/components/panel/assets/panel/t9n/messages_fi.json @@ -1,6 +1,5 @@ { "back": "Å_Back_________ö", "close": "Å_Close___________ö", - "open": "Å_Open_________ö", "options": "Å_Options_______________ö" } diff --git a/src/components/panel/assets/panel/t9n/messages_fr.json b/src/components/panel/assets/panel/t9n/messages_fr.json index 4edfa71c401..5088cb84710 100644 --- a/src/components/panel/assets/panel/t9n/messages_fr.json +++ b/src/components/panel/assets/panel/t9n/messages_fr.json @@ -1,6 +1,5 @@ { "back": "æ_Back_________Â", "close": "æ_Close___________Â", - "open": "æ_Open_________Â", "options": "æ_Options_______________Â" } diff --git a/src/components/panel/assets/panel/t9n/messages_he.json b/src/components/panel/assets/panel/t9n/messages_he.json index 61330a82822..549e0840a83 100644 --- a/src/components/panel/assets/panel/t9n/messages_he.json +++ b/src/components/panel/assets/panel/t9n/messages_he.json @@ -1,6 +1,5 @@ { "back": "כן_Back_________ש", "close": "כן_Close___________ש", - "open": "כן_Open_________ש", "options": "כן_Options_______________ש" } diff --git a/src/components/panel/assets/panel/t9n/messages_hr.json b/src/components/panel/assets/panel/t9n/messages_hr.json index b130cde4ae9..cd1ab943845 100644 --- a/src/components/panel/assets/panel/t9n/messages_hr.json +++ b/src/components/panel/assets/panel/t9n/messages_hr.json @@ -1,6 +1,5 @@ { "back": "Č_Back_________ž", "close": "Č_Close___________ž", - "open": "Č_Open_________ž", "options": "Č_Options_______________ž" } diff --git a/src/components/panel/assets/panel/t9n/messages_hu.json b/src/components/panel/assets/panel/t9n/messages_hu.json index b61a2a393d7..10edd5c1c6a 100644 --- a/src/components/panel/assets/panel/t9n/messages_hu.json +++ b/src/components/panel/assets/panel/t9n/messages_hu.json @@ -1,6 +1,5 @@ { "back": "í_Back_________ő", "close": "í_Close___________ő", - "open": "í_Open_________ő", "options": "í_Options_______________ő" } diff --git a/src/components/panel/assets/panel/t9n/messages_id.json b/src/components/panel/assets/panel/t9n/messages_id.json index 01941df9cf2..ff8527a25e9 100644 --- a/src/components/panel/assets/panel/t9n/messages_id.json +++ b/src/components/panel/assets/panel/t9n/messages_id.json @@ -1,6 +1,5 @@ { "back": "ng_Back_________ny", "close": "ng_Close___________ny", - "open": "ng_Open_________ny", "options": "ng_Options_______________ny" } diff --git a/src/components/panel/assets/panel/t9n/messages_it.json b/src/components/panel/assets/panel/t9n/messages_it.json index 56241a18cf8..782bdc63ab7 100644 --- a/src/components/panel/assets/panel/t9n/messages_it.json +++ b/src/components/panel/assets/panel/t9n/messages_it.json @@ -1,6 +1,5 @@ { "back": "é_Back_________È", "close": "é_Close___________È", - "open": "é_Open_________È", "options": "é_Options_______________È" } diff --git a/src/components/panel/assets/panel/t9n/messages_ja.json b/src/components/panel/assets/panel/t9n/messages_ja.json index 839e2b112b5..79af4978778 100644 --- a/src/components/panel/assets/panel/t9n/messages_ja.json +++ b/src/components/panel/assets/panel/t9n/messages_ja.json @@ -1,6 +1,5 @@ { "back": "須_Back_________鷗", "close": "須_Close___________鷗", - "open": "須_Open_________鷗", "options": "須_Options_______________鷗" } diff --git a/src/components/panel/assets/panel/t9n/messages_ko.json b/src/components/panel/assets/panel/t9n/messages_ko.json index b7eb53930fb..66d13238e8e 100644 --- a/src/components/panel/assets/panel/t9n/messages_ko.json +++ b/src/components/panel/assets/panel/t9n/messages_ko.json @@ -1,6 +1,5 @@ { "back": "한_Back_________빠", "close": "한_Close___________빠", - "open": "한_Open_________빠", "options": "한_Options_______________빠" } diff --git a/src/components/panel/assets/panel/t9n/messages_lt.json b/src/components/panel/assets/panel/t9n/messages_lt.json index b44346b6bc5..abec72d1381 100644 --- a/src/components/panel/assets/panel/t9n/messages_lt.json +++ b/src/components/panel/assets/panel/t9n/messages_lt.json @@ -1,6 +1,5 @@ { "back": "Į_Back_________š", "close": "Į_Close___________š", - "open": "Į_Open_________š", "options": "Į_Options_______________š" } diff --git a/src/components/panel/assets/panel/t9n/messages_lv.json b/src/components/panel/assets/panel/t9n/messages_lv.json index 160d44c50cf..7bfdcbdfee2 100644 --- a/src/components/panel/assets/panel/t9n/messages_lv.json +++ b/src/components/panel/assets/panel/t9n/messages_lv.json @@ -1,6 +1,5 @@ { "back": "ķ_Back_________ū", "close": "ķ_Close___________ū", - "open": "ķ_Open_________ū", "options": "ķ_Options_______________ū" } diff --git a/src/components/panel/assets/panel/t9n/messages_nl.json b/src/components/panel/assets/panel/t9n/messages_nl.json index e015221ff79..58e1b41055d 100644 --- a/src/components/panel/assets/panel/t9n/messages_nl.json +++ b/src/components/panel/assets/panel/t9n/messages_nl.json @@ -1,6 +1,5 @@ { "back": "IJ_Back_________ä", "close": "IJ_Close___________ä", - "open": "IJ_Open_________ä", "options": "IJ_Options_______________ä" } diff --git a/src/components/panel/assets/panel/t9n/messages_no.json b/src/components/panel/assets/panel/t9n/messages_no.json index 143f06cb4a3..69d69782cfb 100644 --- a/src/components/panel/assets/panel/t9n/messages_no.json +++ b/src/components/panel/assets/panel/t9n/messages_no.json @@ -1,6 +1,5 @@ { "back": "å_Back_________ø", "close": "å_Close___________ø", - "open": "å_Open_________ø", "options": "å_Options_______________ø" } diff --git a/src/components/panel/assets/panel/t9n/messages_pl.json b/src/components/panel/assets/panel/t9n/messages_pl.json index 6e4d63ec10e..daef8e8b049 100644 --- a/src/components/panel/assets/panel/t9n/messages_pl.json +++ b/src/components/panel/assets/panel/t9n/messages_pl.json @@ -1,6 +1,5 @@ { "back": "ł_Back_________ą", "close": "ł_Close___________ą", - "open": "ł_Open_________ą", "options": "ł_Options_______________ą" } diff --git a/src/components/panel/assets/panel/t9n/messages_pt-BR.json b/src/components/panel/assets/panel/t9n/messages_pt-BR.json index 0a912ec3f53..82377115d11 100644 --- a/src/components/panel/assets/panel/t9n/messages_pt-BR.json +++ b/src/components/panel/assets/panel/t9n/messages_pt-BR.json @@ -1,6 +1,5 @@ { "back": "ã_Back_________Ç", "close": "ã_Close___________Ç", - "open": "ã_Open_________Ç", "options": "ã_Options_______________Ç" } diff --git a/src/components/panel/assets/panel/t9n/messages_pt-PT.json b/src/components/panel/assets/panel/t9n/messages_pt-PT.json index 0a912ec3f53..82377115d11 100644 --- a/src/components/panel/assets/panel/t9n/messages_pt-PT.json +++ b/src/components/panel/assets/panel/t9n/messages_pt-PT.json @@ -1,6 +1,5 @@ { "back": "ã_Back_________Ç", "close": "ã_Close___________Ç", - "open": "ã_Open_________Ç", "options": "ã_Options_______________Ç" } diff --git a/src/components/panel/assets/panel/t9n/messages_ro.json b/src/components/panel/assets/panel/t9n/messages_ro.json index ef1a203c7a0..7740f573054 100644 --- a/src/components/panel/assets/panel/t9n/messages_ro.json +++ b/src/components/panel/assets/panel/t9n/messages_ro.json @@ -1,6 +1,5 @@ { "back": "Ă_Back_________ș", "close": "Ă_Close___________ș", - "open": "Ă_Open_________ș", "options": "Ă_Options_______________ș" } diff --git a/src/components/panel/assets/panel/t9n/messages_ru.json b/src/components/panel/assets/panel/t9n/messages_ru.json index 325680d66c8..b49006cd695 100644 --- a/src/components/panel/assets/panel/t9n/messages_ru.json +++ b/src/components/panel/assets/panel/t9n/messages_ru.json @@ -1,6 +1,5 @@ { "back": "Ж_Back_________Я", "close": "Ж_Close___________Я", - "open": "Ж_Open_________Я", "options": "Ж_Options_______________Я" } diff --git a/src/components/panel/assets/panel/t9n/messages_sk.json b/src/components/panel/assets/panel/t9n/messages_sk.json index d85f77e31d2..e51adb5cf1f 100644 --- a/src/components/panel/assets/panel/t9n/messages_sk.json +++ b/src/components/panel/assets/panel/t9n/messages_sk.json @@ -1,6 +1,5 @@ { "back": "ĺ_Back_________ľ", "close": "ĺ_Close___________ľ", - "open": "ĺ_Open_________ľ", "options": "ĺ_Options_______________ľ" } diff --git a/src/components/panel/assets/panel/t9n/messages_sl.json b/src/components/panel/assets/panel/t9n/messages_sl.json index 491693d4723..4f748c971a2 100644 --- a/src/components/panel/assets/panel/t9n/messages_sl.json +++ b/src/components/panel/assets/panel/t9n/messages_sl.json @@ -1,6 +1,5 @@ { "back": "Š_Back_________č", "close": "Š_Close___________č", - "open": "Š_Open_________č", "options": "Š_Options_______________č" } diff --git a/src/components/panel/assets/panel/t9n/messages_sr.json b/src/components/panel/assets/panel/t9n/messages_sr.json index b130cde4ae9..cd1ab943845 100644 --- a/src/components/panel/assets/panel/t9n/messages_sr.json +++ b/src/components/panel/assets/panel/t9n/messages_sr.json @@ -1,6 +1,5 @@ { "back": "Č_Back_________ž", "close": "Č_Close___________ž", - "open": "Č_Open_________ž", "options": "Č_Options_______________ž" } diff --git a/src/components/panel/assets/panel/t9n/messages_sv.json b/src/components/panel/assets/panel/t9n/messages_sv.json index 52d35453ec1..7eaa51c6978 100644 --- a/src/components/panel/assets/panel/t9n/messages_sv.json +++ b/src/components/panel/assets/panel/t9n/messages_sv.json @@ -1,6 +1,5 @@ { "back": "Å_Back_________ö", "close": "Å_Close___________ö", - "open": "Å_Open_________ö", "options": "Å_Options_______________ö" } diff --git a/src/components/panel/assets/panel/t9n/messages_th.json b/src/components/panel/assets/panel/t9n/messages_th.json index 21adb2cf5dc..911ceec4702 100644 --- a/src/components/panel/assets/panel/t9n/messages_th.json +++ b/src/components/panel/assets/panel/t9n/messages_th.json @@ -1,6 +1,5 @@ { "back": "ก้_Back_________ษฺ", "close": "ก้_Close___________ษฺ", - "open": "ก้_Open_________ษฺ", "options": "ก้_Options_______________ษฺ" } diff --git a/src/components/panel/assets/panel/t9n/messages_tr.json b/src/components/panel/assets/panel/t9n/messages_tr.json index b81d8c277bd..e324e48ea51 100644 --- a/src/components/panel/assets/panel/t9n/messages_tr.json +++ b/src/components/panel/assets/panel/t9n/messages_tr.json @@ -1,6 +1,5 @@ { "back": "ı_Back_________İ", "close": "ı_Close___________İ", - "open": "ı_Open_________İ", "options": "ı_Options_______________İ" } diff --git a/src/components/panel/assets/panel/t9n/messages_uk.json b/src/components/panel/assets/panel/t9n/messages_uk.json index c01e97cd7d7..4a38aeca1d6 100644 --- a/src/components/panel/assets/panel/t9n/messages_uk.json +++ b/src/components/panel/assets/panel/t9n/messages_uk.json @@ -1,6 +1,5 @@ { "back": "ґ_Back_________Ї", "close": "ґ_Close___________Ї", - "open": "ґ_Open_________Ї", "options": "ґ_Options_______________Ї" } diff --git a/src/components/panel/assets/panel/t9n/messages_vi.json b/src/components/panel/assets/panel/t9n/messages_vi.json index d9ee25c6cc8..5f9ab037f79 100644 --- a/src/components/panel/assets/panel/t9n/messages_vi.json +++ b/src/components/panel/assets/panel/t9n/messages_vi.json @@ -1,6 +1,5 @@ { "back": "Đ_Back_________ớ", "close": "Đ_Close___________ớ", - "open": "Đ_Open_________ớ", "options": "Đ_Options_______________ớ" } diff --git a/src/components/panel/assets/panel/t9n/messages_zh-CN.json b/src/components/panel/assets/panel/t9n/messages_zh-CN.json index 69d0ea3fb88..9001f3f03bf 100644 --- a/src/components/panel/assets/panel/t9n/messages_zh-CN.json +++ b/src/components/panel/assets/panel/t9n/messages_zh-CN.json @@ -1,6 +1,5 @@ { "back": "试_Back_________验", "close": "试_Close___________验", - "open": "试_Open_________验", "options": "试_Options_______________验" } diff --git a/src/components/panel/assets/panel/t9n/messages_zh-HK.json b/src/components/panel/assets/panel/t9n/messages_zh-HK.json index c84827c0a95..874e3a3a04d 100644 --- a/src/components/panel/assets/panel/t9n/messages_zh-HK.json +++ b/src/components/panel/assets/panel/t9n/messages_zh-HK.json @@ -1,6 +1,5 @@ { "back": "試_Back_________驗", "close": "試_Close___________驗", - "open": "試_Open_________驗", "options": "試_Options_______________驗" } diff --git a/src/components/panel/assets/panel/t9n/messages_zh-TW.json b/src/components/panel/assets/panel/t9n/messages_zh-TW.json index c84827c0a95..874e3a3a04d 100644 --- a/src/components/panel/assets/panel/t9n/messages_zh-TW.json +++ b/src/components/panel/assets/panel/t9n/messages_zh-TW.json @@ -1,6 +1,5 @@ { "back": "試_Back_________驗", "close": "試_Close___________驗", - "open": "試_Open_________驗", "options": "試_Options_______________驗" } diff --git a/src/components/panel/panel.e2e.ts b/src/components/panel/panel.e2e.ts index 52eb824914c..f67512341c7 100644 --- a/src/components/panel/panel.e2e.ts +++ b/src/components/panel/panel.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests"; +import { accessible, defaults, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS, SLOTS } from "./resources"; @@ -33,6 +33,8 @@ describe("calcite-panel", () => { it("can be disabled", () => disabled(`scrolling content`)); + it("supports translations", () => t9n("calcite-panel")); + it("honors dismissed prop (deprecated)", async () => { const page = await newE2EPage(); diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx index 8f8ed528417..34fb5cc455f 100644 --- a/src/components/panel/panel.tsx +++ b/src/components/panel/panel.tsx @@ -11,13 +11,22 @@ import { Fragment, State } from "@stencil/core"; -import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources"; +import { CSS, HEADING_LEVEL, ICONS, SLOTS } from "./resources"; import { getElementDir, toAriaBoolean } from "../../utils/dom"; import { Scale } from "../interfaces"; import { HeadingLevel, Heading } from "../functional/Heading"; import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { createObserver } from "../../utils/observers"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { Messages } from "./assets/panel/t9n"; /** * @slot - A slot for adding custom content. @@ -32,9 +41,10 @@ import { createObserver } from "../../utils/observers"; @Component({ tag: "calcite-panel", styleUrl: "panel.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class Panel implements InteractiveComponent { +export class Panel implements InteractiveComponent, LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- // // Properties @@ -42,19 +52,21 @@ export class Panel implements InteractiveComponent { // -------------------------------------------------------------------------- /** - * When `true`, hides the component. + * When provided, this method will be called before it is removed from the parent flow. * - * @deprecated use `closed` instead. + * @deprecated use `calcite-flow-item` instead. */ - @Prop({ mutable: true, reflect: true }) dismissed = false; + @Prop() beforeBack?: () => Promise; + + /** When true, displays a close button in the trailing side of the header */ + @Prop({ mutable: true, reflect: true }) closable = false; /** When `true`, the component will be hidden. */ @Prop({ mutable: true, reflect: true }) closed = false; - @Watch("dismissed") - dismissedHandler(value: boolean): void { - this.closed = value; - this.calcitePanelDismissedChange.emit(); + @Watch("closable") + closableHandler(value: boolean): void { + this.dismissible = value; } @Watch("closed") @@ -63,16 +75,22 @@ export class Panel implements InteractiveComponent { } /** - * When provided, this method will be called before it is removed from the parent flow. - * - * @deprecated use `calcite-flow-item` instead. + * When true, interaction is prevented and the component is displayed with lower opacity. */ - @Prop() beforeBack?: () => Promise; + @Prop({ reflect: true }) disabled = false; /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. + * When true, hides the component. + * + * @deprecated use closed instead */ - @Prop({ reflect: true }) disabled = false; + @Prop({ mutable: true, reflect: true }) dismissed = false; + + @Watch("dismissed") + dismissedHandler(value: boolean): void { + this.closed = value; + this.calcitePanelDismissedChange.emit(); + } /** * When `true`, a close button is added to the component. @@ -86,13 +104,13 @@ export class Panel implements InteractiveComponent { this.closable = value; } - /** When `true`, displays a close button in the trailing side of the header. */ - @Prop({ mutable: true, reflect: true }) closable = false; + /** A description for the component. */ + @Prop() description: string; - @Watch("closable") - closableHandler(value: boolean): void { - this.dismissible = value; - } + /** + * The component header text. + */ + @Prop() heading?: string; /** * Specifies the number at which section headings should start. @@ -100,28 +118,30 @@ export class Panel implements InteractiveComponent { @Prop({ reflect: true }) headingLevel: HeadingLevel; /** - * When `true`, displays a back button in the header. - * - * @deprecated use `calcite-flow-item` instead. + * Specifies the maximum height of the component. */ - @Prop({ reflect: true }) showBackButton = false; + @Prop({ reflect: true }) heightScale?: Scale; /** * Accessible name for the component's back button. The back button will only be shown when `showBackButton` is `true`. * * @deprecated use `calcite-flow-item` instead. */ - @Prop() intlBack?: string; + @Prop() intlBack: string; /** - * Specifies the maximum height of the component. + * Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true. + * + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop({ reflect: true }) heightScale?: Scale; + @Prop() intlClose: string; /** - * Specifies the width of the component. + * Accessible name for the component's actions menu. + * + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop({ reflect: true }) widthScale?: Scale; + @Prop() intlOptions: string; /** * When `true`, a busy indicator is displayed. @@ -129,19 +149,37 @@ export class Panel implements InteractiveComponent { @Prop({ reflect: true }) loading = false; /** - * Accessible name for the component's close button. The close button will only be shown when `closeable` is `true`. + * When true, the action menu items in the `header-menu-actions` slot are open. */ - @Prop() intlClose?: string; + @Prop({ reflect: true }) menuOpen = false; /** - * Accessible name for the component's actions menu. + * Use this property to override individual strings used by the component. */ - @Prop() intlOptions?: string; + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("intlBack") + @Watch("intlClose") + @Watch("intlOptions") + @Watch("defaultMessages") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } /** - * The component header text. + * Made into a prop for testing purposes only + * + * @internal */ - @Prop() heading?: string; + @Prop({ mutable: true }) messages: Messages; + + /** + * When true, displays a back button in the header. + * + * @deprecated use `calcite-flow-item` instead. + */ + @Prop({ reflect: true }) showBackButton = false; /** * Summary text. A description displayed underneath the heading. @@ -150,23 +188,10 @@ export class Panel implements InteractiveComponent { */ @Prop() summary?: string; - /** A description for the component. */ - @Prop() description: string; - /** - * When `true`, the action menu items in the `header-menu-actions` slot are open. + * Specifies the width of the component. */ - @Prop({ reflect: true }) menuOpen = false; - - //-------------------------------------------------------------------------- - // - // Lifecycle - // - //-------------------------------------------------------------------------- - - componentDidRender(): void { - updateHostInteraction(this); - } + @Prop({ reflect: true }) widthScale?: Scale; // -------------------------------------------------------------------------- // @@ -186,6 +211,15 @@ export class Panel implements InteractiveComponent { resizeObserver = createObserver("resize", () => this.resizeHandler()); + @State() defaultMessages: Messages; + + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + @State() hasStartActions = false; @State() hasEndActions = false; @@ -207,6 +241,9 @@ export class Panel implements InteractiveComponent { // -------------------------------------------------------------------------- connectedCallback(): void { + connectLocalized(this); + connectMessages(this); + const isClosed = this.dismissed || this.closed; const isClosable = this.dismissible || this.closable; @@ -221,7 +258,17 @@ export class Panel implements InteractiveComponent { } } + async componentWillLoad(): Promise { + await setUpMessages(this); + } + + componentDidRender(): void { + updateHostInteraction(this); + } + disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); this.resizeObserver?.disconnect(); } @@ -435,8 +482,8 @@ export class Panel implements InteractiveComponent { const { el } = this; const rtl = getElementDir(el) === "rtl"; - const { showBackButton, intlBack, backButtonClick } = this; - const label = intlBack || TEXT.back; + const { showBackButton, messages, backButtonClick } = this; + const label = messages.back; const icon = rtl ? ICONS.backRight : ICONS.backLeft; return showBackButton ? ( @@ -502,8 +549,8 @@ export class Panel implements InteractiveComponent { } renderHeaderActionsEnd(): VNode { - const { close, hasEndActions, intlClose, closable } = this; - const text = intlClose || TEXT.close; + const { close, hasEndActions, messages, closable } = this; + const text = messages.close; const closableNode = closable ? (
)} - + @@ -198,7 +243,7 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom onPointerLeave={() => (this.hoverValue = null)} onTouchEnd={() => (this.hoverValue = null)} > - + {this.renderStars()} {(count || average) && showChip ? ( @@ -267,6 +312,15 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom defaultValue: Rating["value"]; + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + @State() defaultMessages: Messages; + @State() hoverValue: number; @State() focusValue: number; diff --git a/src/components/rating/resources.ts b/src/components/rating/resources.ts deleted file mode 100644 index 45b731ae629..00000000000 --- a/src/components/rating/resources.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const TEXT = { - rating: "Rating", - stars: "Stars: ${num}" -}; diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 5bc09f2bfc3..a61756b07f4 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -981,25 +981,35 @@ export async function t9n( } async function assertLangSwitch(): Promise { - await page.evaluate(() => { - const orig = window.fetch; - window.fetch = async function (input, init) { - if (typeof input === "string" && input.endsWith("messages_es.json")) { - const dummyMessages = {}; - window.fetch = orig; - return new Response(new Blob([JSON.stringify(dummyMessages, null, 2)], { type: "application/json" })); - } + const enMessages = await getCurrentMessages(); + const fakeBundleIdentifier = "__fake__"; + await page.evaluate( + (enMessages, fakeBundleIdentifier) => { + const orig = window.fetch; + window.fetch = async function (input, init) { + if (typeof input === "string" && input.endsWith("messages_es.json")) { + const fakeEsMessages = { + ...enMessages, // reuse real message bundle in case component rendering depends on strings + + [fakeBundleIdentifier]: true // we inject a fake identifier for assertion-purposes + }; + window.fetch = orig; + return new Response(new Blob([JSON.stringify(fakeEsMessages, null, 2)], { type: "application/json" })); + } - return orig.call(input, init); - }; - }); + return orig.call(input, init); + }; + }, + enMessages, + fakeBundleIdentifier + ); component.setAttribute("lang", "es"); await page.waitForChanges(); await page.waitForTimeout(3000); const esMessages = await getCurrentMessages(); - expect(esMessages).toEqual({}); + expect(esMessages).toHaveProperty(fakeBundleIdentifier); // reset test changes component.removeAttribute("lang"); From ffe5f8331fd4533be1f3a4b4309efb1822ab0d8e Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 19 Oct 2022 12:17:00 -0700 Subject: [PATCH 20/59] feat(pick-list-item): add built-in translations (#5434) * feat(pick-list-item): add built-in translations * add deprecation note and wire up messages in rendering * add initial message load * add missing type Co-authored-by: anveshmekala --- .../pick-list-item/pick-list-item.e2e.ts | 4 +- .../pick-list-item/pick-list-item.tsx | 61 +++++++++++++++++-- src/components/pick-list-item/resources.ts | 4 -- .../assets/pick-list/t9n/messages.json | 3 - .../assets/pick-list/t9n/messages_ar.json | 3 - .../assets/pick-list/t9n/messages_bg.json | 3 - .../assets/pick-list/t9n/messages_bs.json | 3 - .../assets/pick-list/t9n/messages_ca.json | 3 - .../assets/pick-list/t9n/messages_cs.json | 3 - .../assets/pick-list/t9n/messages_da.json | 3 - .../assets/pick-list/t9n/messages_de.json | 3 - .../assets/pick-list/t9n/messages_el.json | 3 - .../assets/pick-list/t9n/messages_en.json | 3 - .../assets/pick-list/t9n/messages_es.json | 3 - .../assets/pick-list/t9n/messages_et.json | 3 - .../assets/pick-list/t9n/messages_fi.json | 3 - .../assets/pick-list/t9n/messages_fr.json | 3 - .../assets/pick-list/t9n/messages_he.json | 3 - .../assets/pick-list/t9n/messages_hr.json | 3 - .../assets/pick-list/t9n/messages_hu.json | 3 - .../assets/pick-list/t9n/messages_id.json | 3 - .../assets/pick-list/t9n/messages_it.json | 3 - .../assets/pick-list/t9n/messages_ja.json | 3 - .../assets/pick-list/t9n/messages_ko.json | 3 - .../assets/pick-list/t9n/messages_lt.json | 3 - .../assets/pick-list/t9n/messages_lv.json | 3 - .../assets/pick-list/t9n/messages_nl.json | 3 - .../assets/pick-list/t9n/messages_no.json | 3 - .../assets/pick-list/t9n/messages_pl.json | 3 - .../assets/pick-list/t9n/messages_pt-BR.json | 3 - .../assets/pick-list/t9n/messages_pt-PT.json | 3 - .../assets/pick-list/t9n/messages_ro.json | 3 - .../assets/pick-list/t9n/messages_ru.json | 3 - .../assets/pick-list/t9n/messages_sk.json | 3 - .../assets/pick-list/t9n/messages_sl.json | 3 - .../assets/pick-list/t9n/messages_sr.json | 3 - .../assets/pick-list/t9n/messages_sv.json | 3 - .../assets/pick-list/t9n/messages_th.json | 3 - .../assets/pick-list/t9n/messages_tr.json | 3 - .../assets/pick-list/t9n/messages_uk.json | 3 - .../assets/pick-list/t9n/messages_vi.json | 3 - .../assets/pick-list/t9n/messages_zh-CN.json | 3 - .../assets/pick-list/t9n/messages_zh-HK.json | 3 - .../assets/pick-list/t9n/messages_zh-TW.json | 3 - t9nmanifest.txt | 1 - 45 files changed, 58 insertions(+), 135 deletions(-) delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_ar.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_bg.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_bs.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_ca.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_cs.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_da.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_de.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_el.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_en.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_es.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_et.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_fi.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_fr.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_he.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_hr.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_hu.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_id.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_it.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_ja.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_ko.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_lt.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_lv.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_nl.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_no.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_pl.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_pt-BR.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_pt-PT.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_ro.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_ru.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_sk.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_sl.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_sr.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_sv.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_th.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_tr.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_uk.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_vi.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_zh-CN.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_zh-HK.json delete mode 100644 src/components/pick-list/assets/pick-list/t9n/messages_zh-TW.json diff --git a/src/components/pick-list-item/pick-list-item.e2e.ts b/src/components/pick-list-item/pick-list-item.e2e.ts index 7c62b7deaae..4642f1d4a7b 100644 --- a/src/components/pick-list-item/pick-list-item.e2e.ts +++ b/src/components/pick-list-item/pick-list-item.e2e.ts @@ -1,5 +1,5 @@ import { CSS, SLOTS } from "./resources"; -import { accessible, disabled, renders, slots, hidden } from "../../tests/commonTests"; +import { accessible, disabled, renders, slots, hidden, t9n } from "../../tests/commonTests"; import { newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; @@ -32,6 +32,8 @@ describe("calcite-pick-list-item", () => { it("can be disabled", async () => disabled("calcite-pick-list-item")); + it("supports translations", () => t9n("calcite-pick-list-item")); + it("should toggle selected attribute when clicked", async () => { const page = await newE2EPage({ html: `` }); diff --git a/src/components/pick-list-item/pick-list-item.tsx b/src/components/pick-list-item/pick-list-item.tsx index 1915d740a4d..4683b920c80 100644 --- a/src/components/pick-list-item/pick-list-item.tsx +++ b/src/components/pick-list-item/pick-list-item.tsx @@ -7,10 +7,11 @@ import { h, Method, Prop, + State, VNode, Watch } from "@stencil/core"; -import { CSS, ICONS, SLOTS, TEXT } from "./resources"; +import { CSS, ICONS, SLOTS } from "./resources"; import { ICON_TYPES } from "../pick-list/resources"; import { getSlotted, toAriaBoolean } from "../../utils/dom"; import { @@ -19,6 +20,15 @@ import { disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { Messages } from "./assets/pick-list-item/t9n"; /** * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component. @@ -27,9 +37,12 @@ import { InteractiveComponent, updateHostInteraction } from "../../utils/interac @Component({ tag: "calcite-pick-list-item", styleUrl: "pick-list-item.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class PickListItem implements ConditionalSlotComponent, InteractiveComponent { +export class PickListItem + implements ConditionalSlotComponent, InteractiveComponent, LocalizedComponent, T9nComponent +{ // -------------------------------------------------------------------------- // // Properties @@ -78,6 +91,25 @@ export class PickListItem implements ConditionalSlotComponent, InteractiveCompon this.calciteInternalListItemPropsChange.emit(); } + /** + * Use this property to override individual strings used by the component. + */ + @Prop({ mutable: true }) messageOverrides: Partial; + + /** + * Made into a prop for testing purposes only + * + * @internal + */ + @Prop({ mutable: true }) messages: Messages; + + @Watch("intlRemove") + @Watch("defaultMessages") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + /** * Provides additional metadata to the component. Primary use is for a filter on the parent list. */ @@ -113,9 +145,9 @@ export class PickListItem implements ConditionalSlotComponent, InteractiveCompon /** * When `removable` is `true`, the accessible name for the component's remove button. * - * @default "Remove" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop({ reflect: true }) intlRemove = TEXT.remove; + @Prop({ reflect: true }) intlRemove: string; /** * The component's value. @@ -139,6 +171,15 @@ export class PickListItem implements ConditionalSlotComponent, InteractiveCompon shiftPressed: boolean; + @State() defaultMessages: Messages; + + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + // -------------------------------------------------------------------------- // // Lifecycle @@ -146,10 +187,18 @@ export class PickListItem implements ConditionalSlotComponent, InteractiveCompon // -------------------------------------------------------------------------- connectedCallback(): void { + connectLocalized(this); + connectMessages(this); connectConditionalSlotComponent(this); } + async componentWillLoad(): Promise { + await setUpMessages(this); + } + disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); disconnectConditionalSlotComponent(this); } @@ -280,7 +329,7 @@ export class PickListItem implements ConditionalSlotComponent, InteractiveCompon icon={ICONS.remove} onCalciteActionClick={this.removeClickHandler} slot={SLOTS.actionsEnd} - text={this.intlRemove} + text={this.messages.remove} /> ) : null; } diff --git a/src/components/pick-list-item/resources.ts b/src/components/pick-list-item/resources.ts index ddb526cbf12..4fa55c7b67e 100644 --- a/src/components/pick-list-item/resources.ts +++ b/src/components/pick-list-item/resources.ts @@ -23,7 +23,3 @@ export const SLOTS = { actionsEnd: "actions-end", actionsStart: "actions-start" }; - -export const TEXT = { - remove: "Remove" -}; diff --git a/src/components/pick-list/assets/pick-list/t9n/messages.json b/src/components/pick-list/assets/pick-list/t9n/messages.json deleted file mode 100644 index eb4d1b1d650..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Filter results" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_ar.json b/src/components/pick-list/assets/pick-list/t9n/messages_ar.json deleted file mode 100644 index b24094bdc06..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_ar.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "بيت_Filter results_______________لاحقة" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_bg.json b/src/components/pick-list/assets/pick-list/t9n/messages_bg.json deleted file mode 100644 index 5a97d778577..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_bg.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "й_Filter results_______________й" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_bs.json b/src/components/pick-list/assets/pick-list/t9n/messages_bs.json deleted file mode 100644 index f9a3f139c28..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_bs.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Č_Filter results_______________ž" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_ca.json b/src/components/pick-list/assets/pick-list/t9n/messages_ca.json deleted file mode 100644 index 8ee8719e697..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_ca.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ó_Filter results_______________à" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_cs.json b/src/components/pick-list/assets/pick-list/t9n/messages_cs.json deleted file mode 100644 index 80b5291042e..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_cs.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Ř_Filter results_______________ů" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_da.json b/src/components/pick-list/assets/pick-list/t9n/messages_da.json deleted file mode 100644 index dc1bf979f74..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_da.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ø_Filter results_______________å" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_de.json b/src/components/pick-list/assets/pick-list/t9n/messages_de.json deleted file mode 100644 index 53296d13e8b..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_de.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ä_Filter results_______________Ü" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_el.json b/src/components/pick-list/assets/pick-list/t9n/messages_el.json deleted file mode 100644 index 070429283d7..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_el.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Đ_Filter results_______________ớ" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_en.json b/src/components/pick-list/assets/pick-list/t9n/messages_en.json deleted file mode 100644 index eb4d1b1d650..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_en.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Filter results" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_es.json b/src/components/pick-list/assets/pick-list/t9n/messages_es.json deleted file mode 100644 index cac490a1a42..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_es.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "á_Filter results_______________Ó" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_et.json b/src/components/pick-list/assets/pick-list/t9n/messages_et.json deleted file mode 100644 index 461ee852853..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_et.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Š_Filter results_______________ä" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_fi.json b/src/components/pick-list/assets/pick-list/t9n/messages_fi.json deleted file mode 100644 index 02566734c6a..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_fi.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Å_Filter results_______________ö" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_fr.json b/src/components/pick-list/assets/pick-list/t9n/messages_fr.json deleted file mode 100644 index 363923ac7bd..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_fr.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "æ_Filter results_______________Â" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_he.json b/src/components/pick-list/assets/pick-list/t9n/messages_he.json deleted file mode 100644 index b26185ba371..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_he.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "כן_Filter results_______________ש" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_hr.json b/src/components/pick-list/assets/pick-list/t9n/messages_hr.json deleted file mode 100644 index f9a3f139c28..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_hr.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Č_Filter results_______________ž" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_hu.json b/src/components/pick-list/assets/pick-list/t9n/messages_hu.json deleted file mode 100644 index 40b8913c2ba..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_hu.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "í_Filter results_______________ő" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_id.json b/src/components/pick-list/assets/pick-list/t9n/messages_id.json deleted file mode 100644 index e51e6660b7a..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_id.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ng_Filter results_______________ny" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_it.json b/src/components/pick-list/assets/pick-list/t9n/messages_it.json deleted file mode 100644 index d868519daf0..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_it.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "é_Filter results_______________È" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_ja.json b/src/components/pick-list/assets/pick-list/t9n/messages_ja.json deleted file mode 100644 index 6012e535ccd..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_ja.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "須_Filter results_______________鷗" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_ko.json b/src/components/pick-list/assets/pick-list/t9n/messages_ko.json deleted file mode 100644 index 584378f4255..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_ko.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "한_Filter results_______________빠" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_lt.json b/src/components/pick-list/assets/pick-list/t9n/messages_lt.json deleted file mode 100644 index 49d89be916f..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_lt.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Į_Filter results_______________š" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_lv.json b/src/components/pick-list/assets/pick-list/t9n/messages_lv.json deleted file mode 100644 index 5266f3c73ad..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_lv.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ķ_Filter results_______________ū" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_nl.json b/src/components/pick-list/assets/pick-list/t9n/messages_nl.json deleted file mode 100644 index 7f7ca902469..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_nl.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "IJ_Filter results_______________ä" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_no.json b/src/components/pick-list/assets/pick-list/t9n/messages_no.json deleted file mode 100644 index e9511b1b29c..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_no.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "å_Filter results_______________ø" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_pl.json b/src/components/pick-list/assets/pick-list/t9n/messages_pl.json deleted file mode 100644 index c5409e4df25..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_pl.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ł_Filter results_______________ą" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_pt-BR.json b/src/components/pick-list/assets/pick-list/t9n/messages_pt-BR.json deleted file mode 100644 index 31778c8e7cb..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_pt-BR.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ã_Filter results_______________Ç" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_pt-PT.json b/src/components/pick-list/assets/pick-list/t9n/messages_pt-PT.json deleted file mode 100644 index 31778c8e7cb..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_pt-PT.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ã_Filter results_______________Ç" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_ro.json b/src/components/pick-list/assets/pick-list/t9n/messages_ro.json deleted file mode 100644 index 91d3c78ba76..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_ro.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Ă_Filter results_______________ș" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_ru.json b/src/components/pick-list/assets/pick-list/t9n/messages_ru.json deleted file mode 100644 index de6cb4ef594..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_ru.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Ж_Filter results_______________Я" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_sk.json b/src/components/pick-list/assets/pick-list/t9n/messages_sk.json deleted file mode 100644 index 37719f3bf61..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_sk.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ĺ_Filter results_______________ľ" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_sl.json b/src/components/pick-list/assets/pick-list/t9n/messages_sl.json deleted file mode 100644 index 4cc2718559c..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_sl.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Š_Filter results_______________č" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_sr.json b/src/components/pick-list/assets/pick-list/t9n/messages_sr.json deleted file mode 100644 index f9a3f139c28..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_sr.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Č_Filter results_______________ž" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_sv.json b/src/components/pick-list/assets/pick-list/t9n/messages_sv.json deleted file mode 100644 index 02566734c6a..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_sv.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Å_Filter results_______________ö" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_th.json b/src/components/pick-list/assets/pick-list/t9n/messages_th.json deleted file mode 100644 index 26ed1ad799f..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_th.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ก้_Filter results_______________ษฺ" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_tr.json b/src/components/pick-list/assets/pick-list/t9n/messages_tr.json deleted file mode 100644 index 289ff0c9b55..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_tr.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ı_Filter results_______________İ" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_uk.json b/src/components/pick-list/assets/pick-list/t9n/messages_uk.json deleted file mode 100644 index 2242af3a6b8..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_uk.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "ґ_Filter results_______________Ї" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_vi.json b/src/components/pick-list/assets/pick-list/t9n/messages_vi.json deleted file mode 100644 index 070429283d7..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_vi.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "Đ_Filter results_______________ớ" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_zh-CN.json b/src/components/pick-list/assets/pick-list/t9n/messages_zh-CN.json deleted file mode 100644 index 03698e13984..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_zh-CN.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "试_Filter results_______________验" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_zh-HK.json b/src/components/pick-list/assets/pick-list/t9n/messages_zh-HK.json deleted file mode 100644 index eff92909ff6..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_zh-HK.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "試_Filter results_______________驗" -} diff --git a/src/components/pick-list/assets/pick-list/t9n/messages_zh-TW.json b/src/components/pick-list/assets/pick-list/t9n/messages_zh-TW.json deleted file mode 100644 index eff92909ff6..00000000000 --- a/src/components/pick-list/assets/pick-list/t9n/messages_zh-TW.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "filterResults": "試_Filter results_______________驗" -} diff --git a/t9nmanifest.txt b/t9nmanifest.txt index 1baa7b57d03..1d58f64f726 100644 --- a/t9nmanifest.txt +++ b/t9nmanifest.txt @@ -22,7 +22,6 @@ src\components\notice\assets\notice\t9n src\components\pagination\assets\pagination\t9n src\components\panel\assets\panel\t9n src\components\pick-list-item\assets\pick-list-item\t9n -src\components\pick-list\assets\pick-list\t9n src\components\popover\assets\popover\t9n src\components\rating\assets\rating\t9n src\components\scrim\assets\scrim\t9n From d47cb2de1c90b50e9f56ed3ff9f90e1c89ca99a6 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 19 Oct 2022 12:21:28 -0700 Subject: [PATCH 21/59] feat(pagination): add built-in translations (#5432) * feat(pagination): add built-in translations * simplify string keys to match others * add deprecation note * introduce context for locale lookup as translation locales do not necessarily map to supported ones * standardize Norwegian language code Co-authored-by: Anveshreddy mekala --- .../assets/pagination/t9n/messages.json | 4 +- .../assets/pagination/t9n/messages_ar.json | 4 +- .../assets/pagination/t9n/messages_bg.json | 4 +- .../assets/pagination/t9n/messages_bs.json | 4 +- .../assets/pagination/t9n/messages_ca.json | 4 +- .../assets/pagination/t9n/messages_cs.json | 4 +- .../assets/pagination/t9n/messages_da.json | 4 +- .../assets/pagination/t9n/messages_de.json | 4 +- .../assets/pagination/t9n/messages_el.json | 4 +- .../assets/pagination/t9n/messages_en.json | 4 +- .../assets/pagination/t9n/messages_es.json | 4 +- .../assets/pagination/t9n/messages_et.json | 4 +- .../assets/pagination/t9n/messages_fi.json | 4 +- .../assets/pagination/t9n/messages_fr.json | 4 +- .../assets/pagination/t9n/messages_he.json | 4 +- .../assets/pagination/t9n/messages_hr.json | 4 +- .../assets/pagination/t9n/messages_hu.json | 4 +- .../assets/pagination/t9n/messages_id.json | 4 +- .../assets/pagination/t9n/messages_it.json | 4 +- .../assets/pagination/t9n/messages_ja.json | 4 +- .../assets/pagination/t9n/messages_ko.json | 4 +- .../assets/pagination/t9n/messages_lt.json | 4 +- .../assets/pagination/t9n/messages_lv.json | 4 +- .../assets/pagination/t9n/messages_nl.json | 4 +- .../assets/pagination/t9n/messages_no.json | 4 +- .../assets/pagination/t9n/messages_pl.json | 4 +- .../assets/pagination/t9n/messages_pt-BR.json | 4 +- .../assets/pagination/t9n/messages_pt-PT.json | 4 +- .../assets/pagination/t9n/messages_ro.json | 4 +- .../assets/pagination/t9n/messages_ru.json | 4 +- .../assets/pagination/t9n/messages_sk.json | 4 +- .../assets/pagination/t9n/messages_sl.json | 4 +- .../assets/pagination/t9n/messages_sr.json | 4 +- .../assets/pagination/t9n/messages_sv.json | 4 +- .../assets/pagination/t9n/messages_th.json | 4 +- .../assets/pagination/t9n/messages_tr.json | 4 +- .../assets/pagination/t9n/messages_uk.json | 4 +- .../assets/pagination/t9n/messages_vi.json | 4 +- .../assets/pagination/t9n/messages_zh-CN.json | 4 +- .../assets/pagination/t9n/messages_zh-HK.json | 4 +- .../assets/pagination/t9n/messages_zh-TW.json | 4 +- src/components/pagination/pagination.e2e.ts | 5 +- src/components/pagination/pagination.tsx | 77 ++++++++++++++++--- src/components/pagination/resources.ts | 5 -- src/utils/locale.ts | 43 ++++++----- 45 files changed, 175 insertions(+), 119 deletions(-) diff --git a/src/components/pagination/assets/pagination/t9n/messages.json b/src/components/pagination/assets/pagination/t9n/messages.json index 1ca08101c5e..21646b5de96 100644 --- a/src/components/pagination/assets/pagination/t9n/messages.json +++ b/src/components/pagination/assets/pagination/t9n/messages.json @@ -1,4 +1,4 @@ { - "nextLabel": "Next", - "previousLabel": "Previous" + "next": "Next", + "previous": "Previous" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_ar.json b/src/components/pagination/assets/pagination/t9n/messages_ar.json index 57c9e6bebfc..176ffc82f44 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_ar.json +++ b/src/components/pagination/assets/pagination/t9n/messages_ar.json @@ -1,4 +1,4 @@ { - "nextLabel": "بيت_Next_________لاحقة", - "previousLabel": "بيت_Previous_________________لاحقة" + "next": "بيت_Next_________لاحقة", + "previous": "بيت_Previous_________________لاحقة" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_bg.json b/src/components/pagination/assets/pagination/t9n/messages_bg.json index c5d16df9711..a845ad99e6d 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_bg.json +++ b/src/components/pagination/assets/pagination/t9n/messages_bg.json @@ -1,4 +1,4 @@ { - "nextLabel": "й_Next_________й", - "previousLabel": "й_Previous_________________й" + "next": "й_Next_________й", + "previous": "й_Previous_________________й" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_bs.json b/src/components/pagination/assets/pagination/t9n/messages_bs.json index 8b4a7cd5bdc..9f1e26c1859 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_bs.json +++ b/src/components/pagination/assets/pagination/t9n/messages_bs.json @@ -1,4 +1,4 @@ { - "nextLabel": "Č_Next_________ž", - "previousLabel": "Č_Previous_________________ž" + "next": "Č_Next_________ž", + "previous": "Č_Previous_________________ž" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_ca.json b/src/components/pagination/assets/pagination/t9n/messages_ca.json index 6300fdd906e..2eed6db9b53 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_ca.json +++ b/src/components/pagination/assets/pagination/t9n/messages_ca.json @@ -1,4 +1,4 @@ { - "nextLabel": "ó_Next_________à", - "previousLabel": "ó_Previous_________________à" + "next": "ó_Next_________à", + "previous": "ó_Previous_________________à" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_cs.json b/src/components/pagination/assets/pagination/t9n/messages_cs.json index 0a123054732..07c5e8b5f49 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_cs.json +++ b/src/components/pagination/assets/pagination/t9n/messages_cs.json @@ -1,4 +1,4 @@ { - "nextLabel": "Ř_Next_________ů", - "previousLabel": "Ř_Previous_________________ů" + "next": "Ř_Next_________ů", + "previous": "Ř_Previous_________________ů" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_da.json b/src/components/pagination/assets/pagination/t9n/messages_da.json index 74865f1af59..6037664de94 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_da.json +++ b/src/components/pagination/assets/pagination/t9n/messages_da.json @@ -1,4 +1,4 @@ { - "nextLabel": "ø_Next_________å", - "previousLabel": "ø_Previous_________________å" + "next": "ø_Next_________å", + "previous": "ø_Previous_________________å" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_de.json b/src/components/pagination/assets/pagination/t9n/messages_de.json index 2725cf9521e..d5c5f38ba19 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_de.json +++ b/src/components/pagination/assets/pagination/t9n/messages_de.json @@ -1,4 +1,4 @@ { - "nextLabel": "ä_Next_________Ü", - "previousLabel": "ä_Previous_________________Ü" + "next": "ä_Next_________Ü", + "previous": "ä_Previous_________________Ü" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_el.json b/src/components/pagination/assets/pagination/t9n/messages_el.json index b7b032585ee..063258231d7 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_el.json +++ b/src/components/pagination/assets/pagination/t9n/messages_el.json @@ -1,4 +1,4 @@ { - "nextLabel": "Đ_Next_________ớ", - "previousLabel": "Đ_Previous_________________ớ" + "next": "Đ_Next_________ớ", + "previous": "Đ_Previous_________________ớ" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_en.json b/src/components/pagination/assets/pagination/t9n/messages_en.json index 1ca08101c5e..21646b5de96 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_en.json +++ b/src/components/pagination/assets/pagination/t9n/messages_en.json @@ -1,4 +1,4 @@ { - "nextLabel": "Next", - "previousLabel": "Previous" + "next": "Next", + "previous": "Previous" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_es.json b/src/components/pagination/assets/pagination/t9n/messages_es.json index 50b0c93c110..3b6ac990fb9 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_es.json +++ b/src/components/pagination/assets/pagination/t9n/messages_es.json @@ -1,4 +1,4 @@ { - "nextLabel": "á_Next_________Ó", - "previousLabel": "á_Previous_________________Ó" + "next": "á_Next_________Ó", + "previous": "á_Previous_________________Ó" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_et.json b/src/components/pagination/assets/pagination/t9n/messages_et.json index f4056eba105..26dbb7e2de8 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_et.json +++ b/src/components/pagination/assets/pagination/t9n/messages_et.json @@ -1,4 +1,4 @@ { - "nextLabel": "Š_Next_________ä", - "previousLabel": "Š_Previous_________________ä" + "next": "Š_Next_________ä", + "previous": "Š_Previous_________________ä" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_fi.json b/src/components/pagination/assets/pagination/t9n/messages_fi.json index 34b962ad0b6..9a736f1a436 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_fi.json +++ b/src/components/pagination/assets/pagination/t9n/messages_fi.json @@ -1,4 +1,4 @@ { - "nextLabel": "Å_Next_________ö", - "previousLabel": "Å_Previous_________________ö" + "next": "Å_Next_________ö", + "previous": "Å_Previous_________________ö" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_fr.json b/src/components/pagination/assets/pagination/t9n/messages_fr.json index e64f0ad38c4..10dd40a25d4 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_fr.json +++ b/src/components/pagination/assets/pagination/t9n/messages_fr.json @@ -1,4 +1,4 @@ { - "nextLabel": "æ_Next_________Â", - "previousLabel": "æ_Previous_________________Â" + "next": "æ_Next_________Â", + "previous": "æ_Previous_________________Â" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_he.json b/src/components/pagination/assets/pagination/t9n/messages_he.json index 362f5edd6ed..b80ea22f91c 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_he.json +++ b/src/components/pagination/assets/pagination/t9n/messages_he.json @@ -1,4 +1,4 @@ { - "nextLabel": "כן_Next_________ש", - "previousLabel": "כן_Previous_________________ש" + "next": "כן_Next_________ש", + "previous": "כן_Previous_________________ש" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_hr.json b/src/components/pagination/assets/pagination/t9n/messages_hr.json index 8b4a7cd5bdc..9f1e26c1859 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_hr.json +++ b/src/components/pagination/assets/pagination/t9n/messages_hr.json @@ -1,4 +1,4 @@ { - "nextLabel": "Č_Next_________ž", - "previousLabel": "Č_Previous_________________ž" + "next": "Č_Next_________ž", + "previous": "Č_Previous_________________ž" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_hu.json b/src/components/pagination/assets/pagination/t9n/messages_hu.json index 6cd82131823..2cf676a68bc 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_hu.json +++ b/src/components/pagination/assets/pagination/t9n/messages_hu.json @@ -1,4 +1,4 @@ { - "nextLabel": "í_Next_________ő", - "previousLabel": "í_Previous_________________ő" + "next": "í_Next_________ő", + "previous": "í_Previous_________________ő" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_id.json b/src/components/pagination/assets/pagination/t9n/messages_id.json index 24d23806750..a2a37a28825 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_id.json +++ b/src/components/pagination/assets/pagination/t9n/messages_id.json @@ -1,4 +1,4 @@ { - "nextLabel": "ng_Next_________ny", - "previousLabel": "ng_Previous_________________ny" + "next": "ng_Next_________ny", + "previous": "ng_Previous_________________ny" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_it.json b/src/components/pagination/assets/pagination/t9n/messages_it.json index df8030ac546..3f296b80221 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_it.json +++ b/src/components/pagination/assets/pagination/t9n/messages_it.json @@ -1,4 +1,4 @@ { - "nextLabel": "é_Next_________È", - "previousLabel": "é_Previous_________________È" + "next": "é_Next_________È", + "previous": "é_Previous_________________È" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_ja.json b/src/components/pagination/assets/pagination/t9n/messages_ja.json index fa487baba2c..01e5d851814 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_ja.json +++ b/src/components/pagination/assets/pagination/t9n/messages_ja.json @@ -1,4 +1,4 @@ { - "nextLabel": "須_Next_________鷗", - "previousLabel": "須_Previous_________________鷗" + "next": "須_Next_________鷗", + "previous": "須_Previous_________________鷗" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_ko.json b/src/components/pagination/assets/pagination/t9n/messages_ko.json index e2723b10230..8586533cf17 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_ko.json +++ b/src/components/pagination/assets/pagination/t9n/messages_ko.json @@ -1,4 +1,4 @@ { - "nextLabel": "한_Next_________빠", - "previousLabel": "한_Previous_________________빠" + "next": "한_Next_________빠", + "previous": "한_Previous_________________빠" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_lt.json b/src/components/pagination/assets/pagination/t9n/messages_lt.json index 86f506394e6..578bb0ff7dc 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_lt.json +++ b/src/components/pagination/assets/pagination/t9n/messages_lt.json @@ -1,4 +1,4 @@ { - "nextLabel": "Į_Next_________š", - "previousLabel": "Į_Previous_________________š" + "next": "Į_Next_________š", + "previous": "Į_Previous_________________š" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_lv.json b/src/components/pagination/assets/pagination/t9n/messages_lv.json index 047d2ea50bf..ba925a3eb8c 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_lv.json +++ b/src/components/pagination/assets/pagination/t9n/messages_lv.json @@ -1,4 +1,4 @@ { - "nextLabel": "ķ_Next_________ū", - "previousLabel": "ķ_Previous_________________ū" + "next": "ķ_Next_________ū", + "previous": "ķ_Previous_________________ū" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_nl.json b/src/components/pagination/assets/pagination/t9n/messages_nl.json index 17e5d8622e7..9c95ad22f06 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_nl.json +++ b/src/components/pagination/assets/pagination/t9n/messages_nl.json @@ -1,4 +1,4 @@ { - "nextLabel": "IJ_Next_________ä", - "previousLabel": "IJ_Previous_________________ä" + "next": "IJ_Next_________ä", + "previous": "IJ_Previous_________________ä" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_no.json b/src/components/pagination/assets/pagination/t9n/messages_no.json index 3c3eb232847..02adc0132b4 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_no.json +++ b/src/components/pagination/assets/pagination/t9n/messages_no.json @@ -1,4 +1,4 @@ { - "nextLabel": "å_Next_________ø", - "previousLabel": "å_Previous_________________ø" + "next": "å_Next_________ø", + "previous": "å_Previous_________________ø" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_pl.json b/src/components/pagination/assets/pagination/t9n/messages_pl.json index 30274ac45e4..978a5675af5 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_pl.json +++ b/src/components/pagination/assets/pagination/t9n/messages_pl.json @@ -1,4 +1,4 @@ { - "nextLabel": "ł_Next_________ą", - "previousLabel": "ł_Previous_________________ą" + "next": "ł_Next_________ą", + "previous": "ł_Previous_________________ą" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_pt-BR.json b/src/components/pagination/assets/pagination/t9n/messages_pt-BR.json index 1944d20ab1f..aa195ec0bc1 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_pt-BR.json +++ b/src/components/pagination/assets/pagination/t9n/messages_pt-BR.json @@ -1,4 +1,4 @@ { - "nextLabel": "ã_Next_________Ç", - "previousLabel": "ã_Previous_________________Ç" + "next": "ã_Next_________Ç", + "previous": "ã_Previous_________________Ç" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_pt-PT.json b/src/components/pagination/assets/pagination/t9n/messages_pt-PT.json index 1944d20ab1f..aa195ec0bc1 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_pt-PT.json +++ b/src/components/pagination/assets/pagination/t9n/messages_pt-PT.json @@ -1,4 +1,4 @@ { - "nextLabel": "ã_Next_________Ç", - "previousLabel": "ã_Previous_________________Ç" + "next": "ã_Next_________Ç", + "previous": "ã_Previous_________________Ç" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_ro.json b/src/components/pagination/assets/pagination/t9n/messages_ro.json index ddc28cacc1c..5d7bfc72f3f 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_ro.json +++ b/src/components/pagination/assets/pagination/t9n/messages_ro.json @@ -1,4 +1,4 @@ { - "nextLabel": "Ă_Next_________ș", - "previousLabel": "Ă_Previous_________________ș" + "next": "Ă_Next_________ș", + "previous": "Ă_Previous_________________ș" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_ru.json b/src/components/pagination/assets/pagination/t9n/messages_ru.json index 3df23e3880a..4f561f7bea6 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_ru.json +++ b/src/components/pagination/assets/pagination/t9n/messages_ru.json @@ -1,4 +1,4 @@ { - "nextLabel": "Ж_Next_________Я", - "previousLabel": "Ж_Previous_________________Я" + "next": "Ж_Next_________Я", + "previous": "Ж_Previous_________________Я" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_sk.json b/src/components/pagination/assets/pagination/t9n/messages_sk.json index 918296b7acc..a4aa78f2ab1 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_sk.json +++ b/src/components/pagination/assets/pagination/t9n/messages_sk.json @@ -1,4 +1,4 @@ { - "nextLabel": "ĺ_Next_________ľ", - "previousLabel": "ĺ_Previous_________________ľ" + "next": "ĺ_Next_________ľ", + "previous": "ĺ_Previous_________________ľ" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_sl.json b/src/components/pagination/assets/pagination/t9n/messages_sl.json index 5768e870df8..16072e870fd 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_sl.json +++ b/src/components/pagination/assets/pagination/t9n/messages_sl.json @@ -1,4 +1,4 @@ { - "nextLabel": "Š_Next_________č", - "previousLabel": "Š_Previous_________________č" + "next": "Š_Next_________č", + "previous": "Š_Previous_________________č" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_sr.json b/src/components/pagination/assets/pagination/t9n/messages_sr.json index 8b4a7cd5bdc..9f1e26c1859 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_sr.json +++ b/src/components/pagination/assets/pagination/t9n/messages_sr.json @@ -1,4 +1,4 @@ { - "nextLabel": "Č_Next_________ž", - "previousLabel": "Č_Previous_________________ž" + "next": "Č_Next_________ž", + "previous": "Č_Previous_________________ž" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_sv.json b/src/components/pagination/assets/pagination/t9n/messages_sv.json index 34b962ad0b6..9a736f1a436 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_sv.json +++ b/src/components/pagination/assets/pagination/t9n/messages_sv.json @@ -1,4 +1,4 @@ { - "nextLabel": "Å_Next_________ö", - "previousLabel": "Å_Previous_________________ö" + "next": "Å_Next_________ö", + "previous": "Å_Previous_________________ö" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_th.json b/src/components/pagination/assets/pagination/t9n/messages_th.json index 7d035101ba2..ea2bbf20b64 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_th.json +++ b/src/components/pagination/assets/pagination/t9n/messages_th.json @@ -1,4 +1,4 @@ { - "nextLabel": "ก้_Next_________ษฺ", - "previousLabel": "ก้_Previous_________________ษฺ" + "next": "ก้_Next_________ษฺ", + "previous": "ก้_Previous_________________ษฺ" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_tr.json b/src/components/pagination/assets/pagination/t9n/messages_tr.json index 5e4fcb4be06..2d8e76b1243 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_tr.json +++ b/src/components/pagination/assets/pagination/t9n/messages_tr.json @@ -1,4 +1,4 @@ { - "nextLabel": "ı_Next_________İ", - "previousLabel": "ı_Previous_________________İ" + "next": "ı_Next_________İ", + "previous": "ı_Previous_________________İ" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_uk.json b/src/components/pagination/assets/pagination/t9n/messages_uk.json index 5b952fddbe5..51e89f2fd13 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_uk.json +++ b/src/components/pagination/assets/pagination/t9n/messages_uk.json @@ -1,4 +1,4 @@ { - "nextLabel": "ґ_Next_________Ї", - "previousLabel": "ґ_Previous_________________Ї" + "next": "ґ_Next_________Ї", + "previous": "ґ_Previous_________________Ї" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_vi.json b/src/components/pagination/assets/pagination/t9n/messages_vi.json index b7b032585ee..063258231d7 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_vi.json +++ b/src/components/pagination/assets/pagination/t9n/messages_vi.json @@ -1,4 +1,4 @@ { - "nextLabel": "Đ_Next_________ớ", - "previousLabel": "Đ_Previous_________________ớ" + "next": "Đ_Next_________ớ", + "previous": "Đ_Previous_________________ớ" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_zh-CN.json b/src/components/pagination/assets/pagination/t9n/messages_zh-CN.json index e3d49539330..5aaafb95845 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_zh-CN.json +++ b/src/components/pagination/assets/pagination/t9n/messages_zh-CN.json @@ -1,4 +1,4 @@ { - "nextLabel": "试_Next_________验", - "previousLabel": "试_Previous_________________验" + "next": "试_Next_________验", + "previous": "试_Previous_________________验" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_zh-HK.json b/src/components/pagination/assets/pagination/t9n/messages_zh-HK.json index 2a0c34a11fd..7478d4eae23 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_zh-HK.json +++ b/src/components/pagination/assets/pagination/t9n/messages_zh-HK.json @@ -1,4 +1,4 @@ { - "nextLabel": "試_Next_________驗", - "previousLabel": "試_Previous_________________驗" + "next": "試_Next_________驗", + "previous": "試_Previous_________________驗" } diff --git a/src/components/pagination/assets/pagination/t9n/messages_zh-TW.json b/src/components/pagination/assets/pagination/t9n/messages_zh-TW.json index 2a0c34a11fd..7478d4eae23 100644 --- a/src/components/pagination/assets/pagination/t9n/messages_zh-TW.json +++ b/src/components/pagination/assets/pagination/t9n/messages_zh-TW.json @@ -1,4 +1,4 @@ { - "nextLabel": "試_Next_________驗", - "previousLabel": "試_Previous_________________驗" + "next": "試_Next_________驗", + "previous": "試_Previous_________________驗" } diff --git a/src/components/pagination/pagination.e2e.ts b/src/components/pagination/pagination.e2e.ts index 736bf1e9d38..5169f58da31 100644 --- a/src/components/pagination/pagination.e2e.ts +++ b/src/components/pagination/pagination.e2e.ts @@ -1,14 +1,17 @@ import { newE2EPage, E2EElement, E2EPage } from "@stencil/core/testing"; -import { accessible, hidden, renders } from "../../tests/commonTests"; +import { accessible, hidden, renders, t9n } from "../../tests/commonTests"; import { CSS } from "./resources"; import { html } from "../../../support/formatting"; describe("calcite-pagination", () => { it("renders", async () => renders("calcite-pagination", { display: "flex" })); + it("honors hidden attribute", async () => hidden("calcite-pagination")); it("is accessible", async () => accessible(``)); + it("supports translations", () => t9n("calcite-pagination")); + describe("page links", () => { it("should render only one page when total is less than num", async () => { const page = await newE2EPage(); diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 9cdcdb69d4e..80e09e4a051 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -8,7 +8,8 @@ import { Method, VNode, Fragment, - State + State, + Watch } from "@stencil/core"; import { Scale } from "../interfaces"; import { @@ -18,7 +19,15 @@ import { numberStringFormatter, NumberingSystem } from "../../utils/locale"; -import { CSS, TEXT } from "./resources"; +import { CSS } from "./resources"; +import { Messages } from "./assets/pagination/t9n"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; const maxPagesDisplayed = 5; export interface PaginationDetail { @@ -30,9 +39,10 @@ export interface PaginationDetail { @Component({ tag: "calcite-pagination", styleUrl: "pagination.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class Pagination implements LocalizedComponent { +export class Pagination implements LocalizedComponent, T9nComponent { //-------------------------------------------------------------------------- // // Public Properties @@ -44,6 +54,33 @@ export class Pagination implements LocalizedComponent { */ @Prop({ reflect: true }) groupSeparator = false; + /** + * Use this property to override individual strings used by the component. + */ + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("textLabelNext") + @Watch("textLabelPrevious") + @Watch("defaultMessages") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + + getExtraMessageOverrides(): Partial { + const extraOverrides: Partial = {}; + + 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; @@ -61,16 +98,16 @@ export class Pagination implements LocalizedComponent { /** * Accessible name for the component's next button. * - * @default "Next" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() textLabelNext: string = TEXT.nextLabel; + @Prop() textLabelNext: string; /** * Accessible name for the component's previous button. * - * @default "Previous" + * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() textLabelPrevious: string = TEXT.previousLabel; + @Prop() textLabelPrevious: string; /** Specifies the size of the component. */ @Prop({ reflect: true }) scale: Scale = "m"; @@ -88,8 +125,22 @@ export class Pagination implements LocalizedComponent { // //-------------------------------------------------------------------------- + @State() defaultMessages: Messages; + @State() effectiveLocale = ""; + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + /** + * Made into a prop for testing purposes only + * + * @internal + */ + @Prop({ mutable: true }) messages: Messages; + //-------------------------------------------------------------------------- // // Events @@ -118,10 +169,16 @@ export class Pagination implements LocalizedComponent { connectedCallback(): void { connectLocalized(this); + connectMessages(this); + } + + async componentWillLoad(): Promise { + await setUpMessages(this); } disconnectedCallback(): void { disconnectLocalized(this); + disconnectMessages(this); } // -------------------------------------------------------------------------- @@ -278,7 +335,7 @@ export class Pagination implements LocalizedComponent { return (
@@ -244,6 +297,15 @@ export class Button implements LabelableComponent, InteractiveComponent, FormOwn /** determine if loader present for styling purposes */ @State() private hasLoader = false; + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + @State() defaultMessages: Messages; + private updateHasContent() { const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0; this.hasContent = diff --git a/src/components/button/resources.ts b/src/components/button/resources.ts index 19205fe40d8..d6c5caed49c 100644 --- a/src/components/button/resources.ts +++ b/src/components/button/resources.ts @@ -10,7 +10,3 @@ export const CSS = { iconStartEmpty: "icon-start-empty", iconEndEmpty: "icon-end-empty" }; - -export const TEXT = { - loading: "Loading" -}; diff --git a/src/utils/config.ts b/src/utils/config.ts new file mode 100644 index 00000000000..189fdfd5d28 --- /dev/null +++ b/src/utils/config.ts @@ -0,0 +1,21 @@ +/** + * This module helps users provide custom configuration for component internals. + * + * @internal + */ + +const configOverrides = globalThis["calciteComponentsConfig"]; + +const config = { + /** + * We apply a custom fix to improve positioning for non-Chromium browsers. + * The fix comes at a performance cost, so provides users a way to opt-out if necessary. + * + * @internal + */ + floatingUINonChromiumPositioningFix: true, + + ...configOverrides +}; + +export { config }; diff --git a/src/utils/floating-ui/nonChromiumPlatformUtils.ts b/src/utils/floating-ui/nonChromiumPlatformUtils.ts new file mode 100644 index 00000000000..ef3e974ae0d --- /dev/null +++ b/src/utils/floating-ui/nonChromiumPlatformUtils.ts @@ -0,0 +1,599 @@ +import { rectToClientRect, Strategy } from "@floating-ui/core"; +import type { ElementRects } from "@floating-ui/dom"; +import { FloatingElement, ReferenceElement } from "@floating-ui/dom/src/types"; + +/** + * This module provides utils to fix positioning across shadow DOM in non-Chromium browsers + * + * It is based on floating-ui's distributable + */ + +/** + * 👇 the following are needed to fix shadow DOM positioning 👇️ + * + * @param element + */ +function getTrueOffsetParent(element) { + if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") { + return null; + } + + return composedOffsetParent(element); +} + +/** + * Polyfills the old offsetParent behavior from before the spec was changed: + * https://github.com/w3c/csswg-drafts/issues/159 + * + * @param element + */ +function composedOffsetParent(element) { + let { offsetParent } = element; + let ancestor = element; + let foundInsideSlot = false; + + while (ancestor && ancestor !== offsetParent) { + const { assignedSlot } = ancestor; + + if (assignedSlot) { + let newOffsetParent = assignedSlot.offsetParent; + + if (getComputedStyle(assignedSlot).display === "contents") { + const hadStyleAttribute = assignedSlot.hasAttribute("style"); + const oldDisplay = assignedSlot.style.display; + assignedSlot.style.display = getComputedStyle(ancestor).display; + newOffsetParent = assignedSlot.offsetParent; + assignedSlot.style.display = oldDisplay; + + if (!hadStyleAttribute) { + assignedSlot.removeAttribute("style"); + } + } + + ancestor = assignedSlot; + + if (offsetParent !== newOffsetParent) { + offsetParent = newOffsetParent; + foundInsideSlot = true; + } + } else if (isShadowRoot(ancestor) && ancestor.host && foundInsideSlot) { + break; + } + + ancestor = (isShadowRoot(ancestor) && ancestor.host) || ancestor.parentNode; + } + + return offsetParent; +} + +function getElementRects(_ref: { + reference: ReferenceElement; + floating: FloatingElement; + strategy: Strategy; +}): ElementRects { + const { reference, floating, strategy } = _ref; + return { + reference: getRectRelativeToOffsetParent(reference, getOffsetParent(floating), strategy), + floating: { ...getDimensions(floating), x: 0, y: 0 } + }; +} + +export { getClippingRect, getElementRects, getOffsetParent }; + +/** + * ☝️ the following are needed to fix shadow DOM positioning ☝️ + */ + +/** + * 👇 the following are taken directly from floating-ui's ESM distributable to support the exports above 👇️ + * + * **Notes**: + * unused functions are removed + * ESLint is disabled + * TS-warnings are suppressed + */ +/* eslint-disable */ + +function isWindow(value) { + return value && value.document && value.location && value.alert && value.setInterval; +} +function getWindow(node) { + if (node == null) { + return window; + } + + if (!isWindow(node)) { + const ownerDocument = node.ownerDocument; + return ownerDocument ? ownerDocument.defaultView || window : window; + } + + return node; +} + +function getComputedStyle(element) { + return getWindow(element).getComputedStyle(element); +} + +function getNodeName(node) { + return isWindow(node) ? "" : node ? (node.nodeName || "").toLowerCase() : ""; +} + +function getUAString() { + // @ts-ignore + const uaData = navigator.userAgentData; + + if (uaData != null && uaData.brands) { + return uaData.brands.map((item) => item.brand + "/" + item.version).join(" "); + } + + return navigator.userAgent; +} + +function isHTMLElement(value) { + return value instanceof getWindow(value).HTMLElement; +} +function isElement(value) { + return value instanceof getWindow(value).Element; +} +function isNode(value) { + return value instanceof getWindow(value).Node; +} +function isShadowRoot(node) { + // Browsers without `ShadowRoot` support + if (typeof ShadowRoot === "undefined") { + return false; + } + + const OwnElement = getWindow(node).ShadowRoot; + return node instanceof OwnElement || node instanceof ShadowRoot; +} +function isOverflowElement(element) { + // Firefox wants us to check `-x` and `-y` variations as well + const { overflow, overflowX, overflowY, display } = getComputedStyle(element); + return ( + /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display) + ); +} +function isTableElement(element) { + return ["table", "td", "th"].includes(getNodeName(element)); +} +function isContainingBlock(element) { + // TODO: Try and use feature detection here instead + const isFirefox = /firefox/i.test(getUAString()); + const css = getComputedStyle(element); // This is non-exhaustive but covers the most common CSS properties that + // create a containing block. + // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block + + return ( + css.transform !== "none" || + css.perspective !== "none" || + (isFirefox && css.willChange === "filter") || + (isFirefox && (css.filter ? css.filter !== "none" : false)) || + ["transform", "perspective"].some((value) => css.willChange.includes(value)) || + ["paint", "layout", "strict", "content"].some( + // TS 4.1 compat + (value) => { + const contain = css.contain; + return contain != null ? contain.includes(value) : false; + } + ) + ); +} +function isLayoutViewport() { + // Not Safari + return !/^((?!chrome|android).)*safari/i.test(getUAString()); // Feature detection for this fails in various ways + // • Always-visible scrollbar or not + // • Width of , etc. + // const vV = win.visualViewport; + // return vV ? Math.abs(win.innerWidth / vV.scale - vV.width) < 0.5 : true; +} +function isLastTraversableNode(node) { + return ["html", "body", "#document"].includes(getNodeName(node)); +} + +const min = Math.min; +const max = Math.max; +const round = Math.round; + +function getBoundingClientRect(element, includeScale, isFixedStrategy) { + var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2; + + if (includeScale === void 0) { + includeScale = false; + } + + if (isFixedStrategy === void 0) { + isFixedStrategy = false; + } + + const clientRect = element.getBoundingClientRect(); + let scaleX = 1; + let scaleY = 1; + + if (includeScale && isHTMLElement(element)) { + scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1; + scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1; + } + + const win = isElement(element) ? getWindow(element) : window; + const addVisualOffsets = !isLayoutViewport() && isFixedStrategy; + const x = + (clientRect.left + + (addVisualOffsets + ? (_win$visualViewport$o = + (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null + ? _win$visualViewport$o + : 0 + : 0)) / + scaleX; + const y = + (clientRect.top + + (addVisualOffsets + ? (_win$visualViewport$o2 = + (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null + ? _win$visualViewport$o2 + : 0 + : 0)) / + scaleY; + const width = clientRect.width / scaleX; + const height = clientRect.height / scaleY; + return { + width, + height, + top: y, + right: x + width, + bottom: y + height, + left: x, + x, + y + }; +} + +function getDocumentElement(node) { + return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement; +} + +function getNodeScroll(element) { + if (isElement(element)) { + return { + scrollLeft: element.scrollLeft, + scrollTop: element.scrollTop + }; + } + + return { + scrollLeft: element.pageXOffset, + scrollTop: element.pageYOffset + }; +} + +function getWindowScrollBarX(element) { + // If has a CSS width greater than the viewport, then this will be + // incorrect for RTL. + // @ts-ignore + return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft; +} + +function isScaled(element) { + // @ts-ignore + const rect = getBoundingClientRect(element); + return round(rect.width) !== element.offsetWidth || round(rect.height) !== element.offsetHeight; +} + +function getRectRelativeToOffsetParent(element, offsetParent, strategy) { + const isOffsetParentAnElement = isHTMLElement(offsetParent); + const documentElement = getDocumentElement(offsetParent); + const rect = getBoundingClientRect( + element, // @ts-ignore - checked above (TS 4.1 compat) + isOffsetParentAnElement && isScaled(offsetParent), + strategy === "fixed" + ); + let scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + const offsets = { + x: 0, + y: 0 + }; + + if (isOffsetParentAnElement || (!isOffsetParentAnElement && strategy !== "fixed")) { + if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) { + scroll = getNodeScroll(offsetParent); + } + + if (isHTMLElement(offsetParent)) { + // @ts-ignore + const offsetRect = getBoundingClientRect(offsetParent, true); + offsets.x = offsetRect.x + offsetParent.clientLeft; + offsets.y = offsetRect.y + offsetParent.clientTop; + } else if (documentElement) { + offsets.x = getWindowScrollBarX(documentElement); + } + } + + return { + x: rect.left + scroll.scrollLeft - offsets.x, + y: rect.top + scroll.scrollTop - offsets.y, + width: rect.width, + height: rect.height + }; +} + +function getParentNode(node) { + if (getNodeName(node) === "html") { + return node; + } + + return ( + // this is a quicker (but less type safe) way to save quite some bytes from the bundle + // @ts-ignore + node.assignedSlot || // step into the shadow DOM of the parent of a slotted node + node.parentNode || // DOM Element detected + (isShadowRoot(node) ? node.host : null) || // ShadowRoot detected + getDocumentElement(node) // fallback + ); +} + +function getContainingBlock(element) { + let currentNode = getParentNode(element); + + if (isShadowRoot(currentNode)) { + currentNode = currentNode.host; + } + + while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) { + if (isContainingBlock(currentNode)) { + return currentNode; + } else { + const parent = currentNode.parentNode; + currentNode = isShadowRoot(parent) ? parent.host : parent; + } + } + + return null; +} // Gets the closest ancestor positioned element. Handles some edge cases, +// such as table ancestors and cross browser bugs. + +function getOffsetParent(element) { + const window = getWindow(element); + let offsetParent = getTrueOffsetParent(element); + + while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === "static") { + offsetParent = getTrueOffsetParent(offsetParent); + } + + if ( + offsetParent && + (getNodeName(offsetParent) === "html" || + (getNodeName(offsetParent) === "body" && + getComputedStyle(offsetParent).position === "static" && + !isContainingBlock(offsetParent))) + ) { + return window; + } + + return offsetParent || getContainingBlock(element) || window; +} + +function getDimensions(element) { + if (isHTMLElement(element)) { + return { + width: element.offsetWidth, + height: element.offsetHeight + }; + } + + // @ts-ignore + const rect = getBoundingClientRect(element); + return { + width: rect.width, + height: rect.height + }; +} + +function getViewportRect(element, strategy) { + const win = getWindow(element); + const html = getDocumentElement(element); + const visualViewport = win.visualViewport; + let width = html.clientWidth; + let height = html.clientHeight; + let x = 0; + let y = 0; + + if (visualViewport) { + width = visualViewport.width; + height = visualViewport.height; + const layoutViewport = isLayoutViewport(); + + if (layoutViewport || (!layoutViewport && strategy === "fixed")) { + x = visualViewport.offsetLeft; + y = visualViewport.offsetTop; + } + } + + return { + width, + height, + x, + y + }; +} + +// of the `` and `` rect bounds if horizontally scrollable + +function getDocumentRect(element) { + var _element$ownerDocumen; + + const html = getDocumentElement(element); + const scroll = getNodeScroll(element); + const body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; + const width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); + const height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); + let x = -scroll.scrollLeft + getWindowScrollBarX(element); + const y = -scroll.scrollTop; + + if (getComputedStyle(body || html).direction === "rtl") { + x += max(html.clientWidth, body ? body.clientWidth : 0) - width; + } + + return { + width, + height, + x, + y + }; +} + +function getNearestOverflowAncestor(node) { + const parentNode = getParentNode(node); + + if (isLastTraversableNode(parentNode)) { + // @ts-ignore assume body is always available + return node.ownerDocument.body; + } + + if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) { + return parentNode; + } + + return getNearestOverflowAncestor(parentNode); +} + +function getOverflowAncestors(node, list) { + var _node$ownerDocument; + + if (list === void 0) { + list = []; + } + + const scrollableAncestor = getNearestOverflowAncestor(node); + const isBody = + scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body); + const win = getWindow(scrollableAncestor); + const target = isBody + ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) + : scrollableAncestor; + const updatedList = list.concat(target); + return isBody + ? updatedList // @ts-ignore: isBody tells us target will be an HTMLElement here + : updatedList.concat(getOverflowAncestors(target)); +} + +function contains(parent, child) { + const rootNode = child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method + + if (parent.contains(child)) { + return true; + } // then fallback to custom implementation with Shadow DOM support + else if (rootNode && isShadowRoot(rootNode)) { + let next = child; + + do { + // use `===` replace node.isSameNode() + if (next && parent === next) { + return true; + } // @ts-ignore: need a better way to handle this... + + next = next.parentNode || next.host; + } while (next); + } + + return false; +} + +function getNearestParentCapableOfEscapingClipping(element, clippingAncestors) { + let currentNode = element; + + while (currentNode && !isLastTraversableNode(currentNode) && !clippingAncestors.includes(currentNode)) { + if (isElement(currentNode) && ["absolute", "fixed"].includes(getComputedStyle(currentNode).position)) { + break; + } + + const parentNode = getParentNode(currentNode); + currentNode = isShadowRoot(parentNode) ? parentNode.host : parentNode; + } + + return currentNode; +} + +function getInnerBoundingClientRect(element, strategy) { + const clientRect = getBoundingClientRect(element, false, strategy === "fixed"); + const top = clientRect.top + element.clientTop; + const left = clientRect.left + element.clientLeft; + return { + top, + left, + x: left, + y: top, + right: left + element.clientWidth, + bottom: top + element.clientHeight, + width: element.clientWidth, + height: element.clientHeight + }; +} + +function getClientRectFromClippingAncestor(element, clippingParent, strategy) { + if (clippingParent === "viewport") { + return rectToClientRect(getViewportRect(element, strategy)); + } + + if (isElement(clippingParent)) { + return getInnerBoundingClientRect(clippingParent, strategy); + } + + return rectToClientRect(getDocumentRect(getDocumentElement(element))); +} // A "clipping ancestor" is an overflowable container with the characteristic of +// clipping (or hiding) overflowing elements with a position different from +// `initial` + +function getClippingAncestors(element) { + // @ts-ignore + const clippingAncestors = getOverflowAncestors(element); + const nearestEscapableParent = getNearestParentCapableOfEscapingClipping(element, clippingAncestors); + let clipperElement = null; + + if (nearestEscapableParent && isHTMLElement(nearestEscapableParent)) { + const offsetParent = getOffsetParent(nearestEscapableParent); + + if (isOverflowElement(nearestEscapableParent)) { + clipperElement = nearestEscapableParent; + } else if (isHTMLElement(offsetParent)) { + clipperElement = offsetParent; + } + } + + if (!isElement(clipperElement)) { + return []; + } // @ts-ignore isElement check ensures we return Array + + return clippingAncestors.filter( + (clippingAncestors) => + clipperElement && + isElement(clippingAncestors) && + contains(clippingAncestors, clipperElement) && + getNodeName(clippingAncestors) !== "body" + ); +} // Gets the maximum area that the element is visible in due to any number of +// clipping ancestors + +function getClippingRect(_ref) { + let { element, boundary, rootBoundary, strategy } = _ref; + const mainClippingAncestors = boundary === "clippingAncestors" ? getClippingAncestors(element) : [].concat(boundary); + const clippingAncestors = [...mainClippingAncestors, rootBoundary]; + const firstClippingAncestor = clippingAncestors[0]; + const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => { + const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy); + accRect.top = max(rect.top, accRect.top); + accRect.right = min(rect.right, accRect.right); + accRect.bottom = min(rect.bottom, accRect.bottom); + accRect.left = max(rect.left, accRect.left); + return accRect; + }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy)); + return { + width: clippingRect.right - clippingRect.left, + height: clippingRect.bottom - clippingRect.top, + x: clippingRect.left, + y: clippingRect.top + }; +} diff --git a/src/utils/locale.ts b/src/utils/locale.ts index 5a65f88731f..7035f580a10 100644 --- a/src/utils/locale.ts +++ b/src/utils/locale.ts @@ -147,19 +147,18 @@ export const getSupportedNumberingSystem = (numberingSystem: string): NumberingS */ export function getSupportedLocale(locale: string, context: "cldr" | "t9n" = "cldr"): string { const contextualLocales = context === "cldr" ? locales : t9nLocales; - + if (contextualLocales.includes(locale)) { return locale; } locale = locale.toLowerCase(); - + // we support both 'nb' and 'no' (BCP 47) for Norwegian but only `no` has corresponding bundle - if (locale === "nb" ) { + if (locale === "nb") { return "no"; } - // we use `pt-BR` as it will have the same translations as `pt`, which has no corresponding bundle if (context === "t9n" && locale === "pt") { return "pt-BR"; From 964e741cf5fa290462255a34170d5f97bff22900 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Wed, 26 Oct 2022 17:43:16 -0500 Subject: [PATCH 26/59] feat(action,action-bar, action-group,action-pad): add built in translation support (#5423) * feat: add built-in translations * add bundles * remove obsolete folder * add type generator * rename type's file * delete non-t9n file * commit lock file * rename type generating script and tidy up * regenerate interface files * update color-picker file * add missing value-list entries * inline common strings until we have common bundle wired up * revert unnecessary tsconfig changes * update interface files * add util to fetchbundles and supported locale * feedback changes * more cleanup * remove intl default value validation in e2e * sync en.json with en-US.json bundle * rename script * refactor script file * remove console.log * refactor & add back types to intl props in colorpicker * add util method for string over rides * tidy up * simplify t9n pattern * fix issue caused by type + interface TS shape confusion * support nb&no for norwegian locale * add cache for stringBundle fetch * tidy up * drop intl from string bundle keys * update scripts to use messages as string bundle name * rename bundles * rename interface props * add t9ntest util methods * restore intlProp watching to pattern * use extended mutation observer to simplify unobserving * add intl prop watcher doc * add support for cascading lang * tidy up * update conventions doc with pattern info * update doc * drop and ignore generated d.ts files and tweak messages type names * wire up interface generation before build * merge w other * refactor localized components pattern * refactor t9n pattern to work w/ localized component * tidy up * fix utils depending on defined locale and not placeholder one * consolidate t9n tests and make intl prop merging happen at run time * Updated Pseudo i18n - @jian9413 * ensure connectLocale happens before code that depends on locale * cherry pick lang inheritance changes * update doc * make lang lookup more robust * update doc * feat(action): add built-in localization support * change effectiveLocale prop to state * localizify action-bar, action-group & action-pad components * fix test errors * fix test error * revert color-picker changes * fix test errors * fix build errors * remove browser build conditional * clean up Co-authored-by: JC Franco Co-authored-by: Ben Elan Co-authored-by: jona7150 --- src/components/action-bar/action-bar.e2e.ts | 4 +- src/components/action-bar/action-bar.tsx | 78 ++++++++++++++----- src/components/action-bar/resources.ts | 5 -- .../action-group/action-group.e2e.ts | 4 +- src/components/action-group/action-group.tsx | 64 +++++++++++++-- src/components/action-group/resources.ts | 4 - src/components/action-pad/action-pad.e2e.ts | 4 +- src/components/action-pad/action-pad.tsx | 78 ++++++++++++++----- src/components/action-pad/resources.ts | 5 -- src/components/action/action.e2e.ts | 4 +- src/components/action/action.tsx | 65 ++++++++++++++-- src/components/action/resources.ts | 4 - src/utils/locale.ts | 2 +- 13 files changed, 243 insertions(+), 78 deletions(-) diff --git a/src/components/action-bar/action-bar.e2e.ts b/src/components/action-bar/action-bar.e2e.ts index 9b839b4dea2..2e31257b066 100755 --- a/src/components/action-bar/action-bar.e2e.ts +++ b/src/components/action-bar/action-bar.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests"; +import { accessible, defaults, focusable, hidden, reflects, renders, slots, t9n } from "../../tests/commonTests"; import { CSS, SLOTS } from "./resources"; import { overflowActionsDebounceInMs } from "./utils"; import { html } from "../../../support/formatting"; @@ -382,4 +382,6 @@ describe("calcite-action-bar", () => { expect(await page.findAll(slottedActionsSelector)).toHaveLength(2); }); }); + + it("supports translation", () => t9n("calcite-action-bar")); }); diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx index 9dcdb73017d..4bcbf346d07 100755 --- a/src/components/action-bar/action-bar.tsx +++ b/src/components/action-bar/action-bar.tsx @@ -8,11 +8,12 @@ import { Watch, h, VNode, - Method + Method, + State } from "@stencil/core"; import { Position, Scale, Layout } from "../interfaces"; import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; -import { CSS, SLOTS, TEXT } from "./resources"; +import { CSS, SLOTS } from "./resources"; import { getSlotted, focusElement } from "../../utils/dom"; import { geActionDimensions, @@ -28,6 +29,15 @@ import { disconnectConditionalSlotComponent, ConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { Messages } from "./assets/action-bar/t9n"; /** * @slot - A slot for adding `calcite-action`s that will appear at the top of the action bar. @@ -37,9 +47,10 @@ import { @Component({ tag: "calcite-action-bar", styleUrl: "action-bar.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class ActionBar implements ConditionalSlotComponent { +export class ActionBar implements ConditionalSlotComponent, LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- // // Properties @@ -69,11 +80,15 @@ export class ActionBar implements ConditionalSlotComponent { /** * Specifies the label of the expand icon when the component is collapsed. + * + * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides` */ @Prop() intlExpand?: string; /** * Specifies the label of the collapse icon when the component is expanded. + * + * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides` */ @Prop() intlCollapse?: string; @@ -104,6 +119,26 @@ export class ActionBar implements ConditionalSlotComponent { */ @Prop({ reflect: true }) scale: Scale; + /** + * Made into a prop for testing purposes only + * + * @internal + */ + @Prop({ mutable: true }) messages: Messages; + + /** + * Use this property to override individual strings used by the component. + */ + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("intlCollapse") + @Watch("intlExpand") + @Watch("defaultMessages") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + // -------------------------------------------------------------------------- // // Events @@ -133,6 +168,15 @@ export class ActionBar implements ConditionalSlotComponent { expandToggleEl: HTMLCalciteActionElement; + @State() effectiveLocale: string; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + @State() defaultMessages: Messages; + // -------------------------------------------------------------------------- // // Lifecycle @@ -146,6 +190,8 @@ export class ActionBar implements ConditionalSlotComponent { connectedCallback(): void { const { el, expanded } = this; + connectLocalized(this); + connectMessages(this); toggleChildActionText({ parent: el, expanded }); this.mutationObserver?.observe(el, { childList: true, subtree: true }); @@ -158,10 +204,16 @@ export class ActionBar implements ConditionalSlotComponent { connectConditionalSlotComponent(this); } + async componentWillLoad(): Promise { + await setUpMessages(this); + } + disconnectedCallback(): void { this.mutationObserver?.disconnect(); this.resizeObserver?.disconnect(); disconnectConditionalSlotComponent(this); + disconnectLocalized(this); + disconnectMessages(this); } // -------------------------------------------------------------------------- @@ -277,28 +329,16 @@ export class ActionBar implements ConditionalSlotComponent { // -------------------------------------------------------------------------- renderBottomActionGroup(): VNode { - const { - expanded, - expandDisabled, - intlExpand, - intlCollapse, - el, - position, - toggleExpand, - scale, - layout - } = this; + const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this; const tooltip = getSlotted(el, SLOTS.expandTooltip) as HTMLCalciteTooltipElement; - const expandLabel = intlExpand || TEXT.expand; - const collapseLabel = intlCollapse || TEXT.collapse; const expandToggleNode = !expandDisabled ? ( { expect(await menu.getProperty("scale")).toBe("l"); }); + + it("support translation", () => t9n("calcite-action-group")); }); diff --git a/src/components/action-group/action-group.tsx b/src/components/action-group/action-group.tsx index 2ecfb10f1d6..c3e62d645e9 100755 --- a/src/components/action-group/action-group.tsx +++ b/src/components/action-group/action-group.tsx @@ -1,6 +1,6 @@ import { Component, Element, h, Prop, Watch } from "@stencil/core"; -import { ICONS, SLOTS, TEXT } from "./resources"; -import { Fragment, VNode } from "@stencil/core/internal"; +import { ICONS, SLOTS } from "./resources"; +import { Fragment, State, VNode } from "@stencil/core/internal"; import { getSlotted } from "../../utils/dom"; import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; import { Columns, Layout, Scale } from "../interfaces"; @@ -10,6 +10,15 @@ import { disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; import { CalciteActionMenuCustomEvent } from "../../components"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { Messages } from "./assets/action-group/t9n"; /** * @slot - A slot for adding a group of `calcite-action`s. @@ -19,9 +28,10 @@ import { CalciteActionMenuCustomEvent } from "../../components"; @Component({ tag: "calcite-action-group", styleUrl: "action-group.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class ActionGroup implements ConditionalSlotComponent { +export class ActionGroup implements ConditionalSlotComponent, LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- // // Properties @@ -50,6 +60,8 @@ export class ActionGroup implements ConditionalSlotComponent { /** * Specifies a text string for the `calcite-action-menu`. + * + * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides` */ @Prop() intlMore?: string; @@ -63,13 +75,41 @@ export class ActionGroup implements ConditionalSlotComponent { */ @Prop({ reflect: true }) scale: Scale; + /** + * Made into a prop for testing purposes only + * + * @internal + */ + @Prop({ mutable: true }) messages: Messages; + + /** + * Use this property to override individual strings used by the component. + */ + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("intlMore") + @Watch("defaultMessages") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + // -------------------------------------------------------------------------- // // Private Properties // // -------------------------------------------------------------------------- + @Element() + el: HTMLCalciteActionGroupElement; - @Element() el: HTMLCalciteActionGroupElement; + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + @State() defaultMessages: Messages; // -------------------------------------------------------------------------- // @@ -78,13 +118,21 @@ export class ActionGroup implements ConditionalSlotComponent { // -------------------------------------------------------------------------- connectedCallback(): void { + connectLocalized(this); + connectMessages(this); connectConditionalSlotComponent(this); } disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); disconnectConditionalSlotComponent(this); } + async componentWillLoad(): Promise { + await setUpMessages(this); + } + // -------------------------------------------------------------------------- // // Component Methods @@ -99,7 +147,7 @@ export class ActionGroup implements ConditionalSlotComponent { } renderMenu(): VNode { - const { el, expanded, intlMore, menuOpen, scale, layout } = this; + const { el, expanded, menuOpen, scale, layout, messages } = this; const hasMenuItems = getSlotted(el, SLOTS.menuActions); @@ -107,7 +155,7 @@ export class ActionGroup implements ConditionalSlotComponent { diff --git a/src/components/action-group/resources.ts b/src/components/action-group/resources.ts index 089c5f8dc54..1839580729c 100644 --- a/src/components/action-group/resources.ts +++ b/src/components/action-group/resources.ts @@ -3,10 +3,6 @@ export const SLOTS = { menuTooltip: "menu-tooltip" }; -export const TEXT = { - more: "More" -}; - export const ICONS = { menu: "ellipsis" }; diff --git a/src/components/action-pad/action-pad.e2e.ts b/src/components/action-pad/action-pad.e2e.ts index 2c25882d5b4..5f48367546f 100755 --- a/src/components/action-pad/action-pad.e2e.ts +++ b/src/components/action-pad/action-pad.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, defaults, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests"; +import { accessible, defaults, focusable, hidden, reflects, renders, slots, t9n } from "../../tests/commonTests"; import { CSS, SLOTS } from "./resources"; import { html } from "../../../support/formatting"; @@ -250,4 +250,6 @@ describe("calcite-action-pad", () => { expect(await button.getProperty("scale")).toBe("l"); }); + + it("supports translation", () => t9n("calcite-action-pad")); }); diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx index c4045b426e6..fc43f105739 100755 --- a/src/components/action-pad/action-pad.tsx +++ b/src/components/action-pad/action-pad.tsx @@ -8,17 +8,27 @@ import { Watch, h, VNode, - Method + Method, + State } from "@stencil/core"; import { Layout, Position, Scale } from "../interfaces"; import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; import { focusElement, getSlotted } from "../../utils/dom"; -import { CSS, TEXT, SLOTS } from "./resources"; +import { CSS, SLOTS } from "./resources"; import { ConditionalSlotComponent, connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; +import { Messages } from "./assets/action-pad/t9n"; /** * @slot - A slot for adding `calcite-action`s to the component. @@ -27,9 +37,10 @@ import { @Component({ tag: "calcite-action-pad", styleUrl: "action-pad.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class ActionPad implements ConditionalSlotComponent { +export class ActionPad implements ConditionalSlotComponent, LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- // // Properties @@ -58,11 +69,15 @@ export class ActionPad implements ConditionalSlotComponent { /** * Specifies the label of the expand icon when the component is collapsed. + * + * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides` */ @Prop() intlExpand?: string; /** * Specifies the label of the collapse icon when the component is expanded. + * + * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides` */ @Prop() intlCollapse?: string; @@ -76,6 +91,26 @@ export class ActionPad implements ConditionalSlotComponent { */ @Prop({ reflect: true }) scale: Scale; + /** + * Made into a prop for testing purposes only + * + * @internal + */ + @Prop({ mutable: true }) messages: Messages; + + /** + * Use this property to override individual strings used by the component. + */ + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("intlCollapse") + @Watch("intlExpand") + @Watch("defaultMessages") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + // -------------------------------------------------------------------------- // // Events @@ -97,6 +132,15 @@ export class ActionPad implements ConditionalSlotComponent { expandToggleEl: HTMLCalciteActionElement; + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + @State() defaultMessages: Messages; + // -------------------------------------------------------------------------- // // Lifecycle @@ -104,16 +148,20 @@ export class ActionPad implements ConditionalSlotComponent { // -------------------------------------------------------------------------- connectedCallback(): void { + connectLocalized(this); + connectMessages(this); connectConditionalSlotComponent(this); } disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); disconnectConditionalSlotComponent(this); } - componentWillLoad(): void { + async componentWillLoad(): Promise { const { el, expanded } = this; - + await setUpMessages(this); toggleChildActionText({ parent: el, expanded }); } @@ -171,28 +219,16 @@ export class ActionPad implements ConditionalSlotComponent { // -------------------------------------------------------------------------- renderBottomActionGroup(): VNode { - const { - expanded, - expandDisabled, - intlExpand, - intlCollapse, - el, - position, - toggleExpand, - scale, - layout - } = this; + const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout } = this; const tooltip = getSlotted(el, SLOTS.expandTooltip) as HTMLCalciteTooltipElement; - const expandLabel = intlExpand || TEXT.expand; - const collapseLabel = intlCollapse || TEXT.collapse; const expandToggleNode = !expandDisabled ? ( { @@ -127,4 +127,6 @@ describe("calcite-action", () => { const referenceElement: HTMLElement = await tooltip.getProperty("referenceElement"); expect(referenceElement).toBeDefined(); }); + + it("support translation", () => t9n("calcite-action")); }); diff --git a/src/components/action/action.tsx b/src/components/action/action.tsx index 26e94997d3d..33ab2e34c74 100755 --- a/src/components/action/action.tsx +++ b/src/components/action/action.tsx @@ -8,16 +8,28 @@ import { Prop, h, forceUpdate, - VNode + VNode, + Watch, + State, + Build } from "@stencil/core"; import { Alignment, Appearance, Scale } from "../interfaces"; -import { CSS, TEXT, SLOTS } from "./resources"; +import { CSS, SLOTS } from "./resources"; import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { toAriaBoolean } from "../../utils/dom"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { Messages } from "./assets/action/t9n"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages +} from "../../utils/t9n"; /** * @slot - A slot for adding a `calcite-icon`. @@ -25,9 +37,10 @@ import { toAriaBoolean } from "../../utils/dom"; @Component({ tag: "calcite-action", styleUrl: "action.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) -export class Action implements InteractiveComponent { +export class Action implements InteractiveComponent, LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- // // Properties @@ -69,8 +82,9 @@ export class Action implements InteractiveComponent { * Specifies the text label to display while loading. * * @default "Loading" + * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides` */ - @Prop() intlLoading?: string = TEXT.loading; + @Prop() intlLoading?: string; /** * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop. @@ -97,6 +111,25 @@ export class Action implements InteractiveComponent { */ @Prop({ reflect: true }) textEnabled = false; + /** + * Made into a prop for testing purposes only + * + * @internal + */ + @Prop({ mutable: true }) messages: Messages; + + /** + * Use this property to override individual strings used by the component. + */ + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("intlLoading") + @Watch("defaultMessages") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + // -------------------------------------------------------------------------- // // Events @@ -122,6 +155,14 @@ export class Action implements InteractiveComponent { mutationObserver = createObserver("mutation", () => forceUpdate(this)); + @State() effectiveLocale = ""; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + @State() defaultMessages: Messages; // -------------------------------------------------------------------------- // // Lifecycle @@ -129,10 +170,14 @@ export class Action implements InteractiveComponent { // -------------------------------------------------------------------------- connectedCallback(): void { + connectLocalized(this); + connectMessages(this); this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); } disconnectedCallback(): void { + disconnectLocalized(this); + disconnectMessages(this); this.mutationObserver?.disconnect(); } @@ -140,6 +185,12 @@ export class Action implements InteractiveComponent { updateHostInteraction(this); } + async componentWillLoad(): Promise { + if (Build.isBrowser) { + await setUpMessages(this); + } + } + // -------------------------------------------------------------------------- // // Methods @@ -174,11 +225,11 @@ export class Action implements InteractiveComponent { } renderIconContainer(): VNode { - const { loading, icon, scale, el, intlLoading } = this; + const { loading, icon, scale, el } = this; const iconScale = scale === "l" ? "m" : "s"; const loaderScale = scale === "l" ? "l" : "m"; const calciteLoaderNode = loading ? ( - + ) : null; const calciteIconNode = icon ? : null; const iconNode = calciteLoaderNode || calciteIconNode; diff --git a/src/components/action/resources.ts b/src/components/action/resources.ts index e2c11addf89..8571b79b7bb 100644 --- a/src/components/action/resources.ts +++ b/src/components/action/resources.ts @@ -9,10 +9,6 @@ export const CSS = { textContainerVisible: "text-container--visible" }; -export const TEXT = { - loading: "Loading" -}; - export const SLOTS = { tooltip: "tooltip" }; diff --git a/src/utils/locale.ts b/src/utils/locale.ts index 7035f580a10..0f3fe4e0db9 100644 --- a/src/utils/locale.ts +++ b/src/utils/locale.ts @@ -222,7 +222,7 @@ export function connectLocalized(component: LocalizedComponent): void { updateEffectiveLocale(component); if (connectedComponents.size === 0) { - mutationObserver.observe(document.documentElement, { + mutationObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"], subtree: true From 25425340519be217ac684aa5c2600731a357c47f Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 21 Nov 2022 10:40:09 -0600 Subject: [PATCH 27/59] removed unused imports --- src/components/filter/filter.tsx | 2 +- src/components/input-number/input-number.tsx | 1 - src/components/input-text/input-text.tsx | 2 +- src/components/notice/notice.tsx | 2 +- src/components/panel/panel.tsx | 2 +- src/components/popover/popover.tsx | 2 +- src/components/rating/rating.tsx | 2 +- src/components/value-list/value-list.tsx | 2 +- 8 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx index bb7c6672010..90d44896083 100644 --- a/src/components/filter/filter.tsx +++ b/src/components/filter/filter.tsx @@ -17,7 +17,7 @@ import { Scale } from "../interfaces"; import { focusElement } from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { filter } from "../../utils/filter"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { connectMessages, disconnectMessages, diff --git a/src/components/input-number/input-number.tsx b/src/components/input-number/input-number.tsx index dec6d5e4cbe..7293339fbb1 100644 --- a/src/components/input-number/input-number.tsx +++ b/src/components/input-number/input-number.tsx @@ -34,7 +34,6 @@ import { NumberingSystem, numberStringFormatter, defaultNumberingSystem, - LocalizedComponent, disconnectLocalized, connectLocalized, updateEffectiveLocale diff --git a/src/components/input-text/input-text.tsx b/src/components/input-text/input-text.tsx index a7ec3a6a438..9fac673deb3 100644 --- a/src/components/input-text/input-text.tsx +++ b/src/components/input-text/input-text.tsx @@ -27,7 +27,7 @@ import { import { CSS_UTILITY } from "../../utils/resources"; import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { connectMessages, disconnectMessages, diff --git a/src/components/notice/notice.tsx b/src/components/notice/notice.tsx index b5d5a993821..02284d08b76 100644 --- a/src/components/notice/notice.tsx +++ b/src/components/notice/notice.tsx @@ -19,7 +19,7 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { connectMessages, disconnectMessages, diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx index 480bd704127..7e8b8ac2379 100644 --- a/src/components/panel/panel.tsx +++ b/src/components/panel/panel.tsx @@ -18,7 +18,7 @@ import { HeadingLevel, Heading } from "../functional/Heading"; import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { createObserver } from "../../utils/observers"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { connectMessages, disconnectMessages, diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index d38a1a12b4d..171da939ab9 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -46,7 +46,7 @@ import { HeadingLevel, Heading } from "../functional/Heading"; import { Scale } from "../interfaces"; import PopoverManager from "./PopoverManager"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { connectMessages, disconnectMessages, diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx index 4a053aa3aa3..392daf04578 100644 --- a/src/components/rating/rating.tsx +++ b/src/components/rating/rating.tsx @@ -18,7 +18,7 @@ import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/l import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { connectMessages, disconnectMessages, diff --git a/src/components/value-list/value-list.tsx b/src/components/value-list/value-list.tsx index 97256877259..b92797f8003 100644 --- a/src/components/value-list/value-list.tsx +++ b/src/components/value-list/value-list.tsx @@ -40,7 +40,7 @@ import List from "../pick-list/shared-list-render"; import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { getHandleAndItemElement, getScreenReaderText } from "./utils"; -import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { connectMessages, disconnectMessages, From 8cbf985ef55eba170aa0ee33e3b0e6c2fe0c3f07 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 21 Nov 2022 10:57:28 -0600 Subject: [PATCH 28/59] update package-lock --- package-lock.json | 60 ++++++++++++++++------------------------------- 1 file changed, 20 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5bdbe026e39..5bcd76ec8cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36207,8 +36207,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz", "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==", - "dev": true, - "requires": {} + "dev": true }, "@devtools-ds/object-inspector": { "version": "1.2.0", @@ -37494,8 +37493,7 @@ "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", - "dev": true, - "requires": {} + "dev": true }, "@mdx-js/util": { "version": "1.6.22", @@ -37648,8 +37646,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz", "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==", - "dev": true, - "requires": {} + "dev": true }, "@octokit/plugin-rest-endpoint-methods": { "version": "5.11.1", @@ -37849,8 +37846,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-2.0.0.tgz", "integrity": "sha512-Be7Tz7YJnMzloot0aG3m2wTVt9Dg0rjOU+ZVx49ts9+hyeW+NEmvSWPv6bhypblRXbSGik2Cc3AYboTma4Qpgg==", - "dev": true, - "requires": {} + "dev": true }, "@stencil/state-tunnel": { "version": "1.0.1", @@ -39230,8 +39226,7 @@ "version": "8.9.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.9.0.tgz", "integrity": "sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -40841,8 +40836,7 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true, - "requires": {} + "dev": true }, "acorn-node": { "version": "1.8.2", @@ -40933,15 +40927,13 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "dev": true, - "requires": {} + "dev": true }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "ansi-align": { "version": "3.0.1", @@ -41548,8 +41540,7 @@ "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==", - "dev": true, - "requires": {} + "dev": true }, "babel-jest": { "version": "27.5.1", @@ -46889,8 +46880,7 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz", "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==", - "dev": true, - "requires": {} + "dev": true }, "eslint-plugin-jest": { "version": "27.1.2", @@ -51244,8 +51234,7 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "dev": true, - "requires": {} + "dev": true }, "jest-regex-util": { "version": "26.0.0", @@ -52436,8 +52425,7 @@ "version": "7.5.9", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -55138,15 +55126,13 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", - "dev": true, - "requires": {} + "dev": true }, "postcss-scss": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.2.tgz", "integrity": "sha512-xfdkU128CkKKKVAwkyt0M8OdnelJ3MRcIRAPPQkRpoPeuzWY3RIeg7piRCpZ79MK7Q16diLXMMAD9dN5mauPlQ==", - "dev": true, - "requires": {} + "dev": true }, "postcss-selector-parser": { "version": "6.0.10", @@ -55545,8 +55531,7 @@ "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -55827,8 +55812,7 @@ "version": "5.5.1", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", - "dev": true, - "requires": {} + "dev": true }, "react-dom": { "version": "16.14.0", @@ -58461,8 +58445,7 @@ "version": "0.3.3", "resolved": "https://registry.npmjs.org/storybook-rtl-addon/-/storybook-rtl-addon-0.3.3.tgz", "integrity": "sha512-yb8lsbarWua84yyVhJ4RIzZf8qbfLxdO5bncJ9xzWfYet7/BUhpIbyg0uAkkf0nOcVeVcOr2jbpx7gSVd4Ph8A==", - "dev": true, - "requires": {} + "dev": true }, "stream-browserify": { "version": "2.0.2", @@ -58877,8 +58860,7 @@ "version": "9.0.0", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz", "integrity": "sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==", - "dev": true, - "requires": {} + "dev": true }, "stylelint-config-recommended-scss": { "version": "8.0.0", @@ -58908,8 +58890,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-4.1.0.tgz", "integrity": "sha512-uZ5mOST2gZ2QDUhX5JwXMojSibWrHw774wUvLr+OcGluXeh8WYp8AzS0d2ilqrX6Ao2xGCARUAA3pEO7y4kDgg==", - "dev": true, - "requires": {} + "dev": true }, "supports-color": { "version": "5.5.0", @@ -61153,8 +61134,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz", "integrity": "sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==", - "dev": true, - "requires": {} + "dev": true }, "webpack-hot-middleware": { "version": "2.25.2", From bf04ed4280bfe3d0fcecb08dca2d0212e599e231 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 5 Dec 2022 15:35:01 -0600 Subject: [PATCH 29/59] fix test errors --- src/components/chip/chip.tsx | 2 ++ src/components/pagination/pagination.tsx | 17 ++++++++-------- .../panel/assets/panel/t9n/messages.json | 1 - .../panel/assets/panel/t9n/messages_ar.json | 1 - .../panel/assets/panel/t9n/messages_bg.json | 1 - .../panel/assets/panel/t9n/messages_bs.json | 1 - .../panel/assets/panel/t9n/messages_ca.json | 1 - .../panel/assets/panel/t9n/messages_cs.json | 1 - .../panel/assets/panel/t9n/messages_da.json | 1 - .../panel/assets/panel/t9n/messages_de.json | 1 - .../panel/assets/panel/t9n/messages_el.json | 1 - .../panel/assets/panel/t9n/messages_en.json | 1 - .../panel/assets/panel/t9n/messages_es.json | 1 - .../panel/assets/panel/t9n/messages_et.json | 1 - .../panel/assets/panel/t9n/messages_fi.json | 1 - .../panel/assets/panel/t9n/messages_fr.json | 1 - .../panel/assets/panel/t9n/messages_he.json | 1 - .../panel/assets/panel/t9n/messages_hr.json | 1 - .../panel/assets/panel/t9n/messages_hu.json | 1 - .../panel/assets/panel/t9n/messages_id.json | 1 - .../panel/assets/panel/t9n/messages_it.json | 1 - .../panel/assets/panel/t9n/messages_ja.json | 1 - .../panel/assets/panel/t9n/messages_ko.json | 1 - .../panel/assets/panel/t9n/messages_lt.json | 1 - .../panel/assets/panel/t9n/messages_lv.json | 1 - .../panel/assets/panel/t9n/messages_nl.json | 1 - .../panel/assets/panel/t9n/messages_no.json | 1 - .../panel/assets/panel/t9n/messages_pl.json | 1 - .../assets/panel/t9n/messages_pt-BR.json | 1 - .../assets/panel/t9n/messages_pt-PT.json | 1 - .../panel/assets/panel/t9n/messages_ro.json | 1 - .../panel/assets/panel/t9n/messages_ru.json | 1 - .../panel/assets/panel/t9n/messages_sk.json | 1 - .../panel/assets/panel/t9n/messages_sl.json | 1 - .../panel/assets/panel/t9n/messages_sr.json | 1 - .../panel/assets/panel/t9n/messages_sv.json | 1 - .../panel/assets/panel/t9n/messages_th.json | 1 - .../panel/assets/panel/t9n/messages_tr.json | 1 - .../panel/assets/panel/t9n/messages_uk.json | 1 - .../panel/assets/panel/t9n/messages_vi.json | 1 - .../assets/panel/t9n/messages_zh-CN.json | 1 - .../assets/panel/t9n/messages_zh-HK.json | 1 - .../assets/panel/t9n/messages_zh-TW.json | 1 - src/components/panel/panel.e2e.ts | 20 ------------------- src/components/panel/panel.tsx | 12 ++++++----- 45 files changed, 18 insertions(+), 74 deletions(-) diff --git a/src/components/chip/chip.tsx b/src/components/chip/chip.tsx index 9ebe4ecd59c..899113f300d 100644 --- a/src/components/chip/chip.tsx +++ b/src/components/chip/chip.tsx @@ -129,6 +129,8 @@ export class Chip implements ConditionalSlotComponent, LoadableComponent, T9nCom connectedCallback(): void { connectConditionalSlotComponent(this); + connectLocalized(this); + connectMessages(this); } componentDidLoad(): void { diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 46c26d8ebf0..195d3a17eb0 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -134,6 +134,15 @@ export class Pagination implements LocalizedComponent, T9nComponent { updateMessages(this, this.effectiveLocale); } + @Watch("effectiveLocale") + effectiveLocaleWatcher(): void { + numberStringFormatter.numberFormatOptions = { + locale: this.effectiveLocale, + numberingSystem: this.numberingSystem, + useGrouping: this.groupSeparator + }; + } + /** * Made into a prop for testing purposes only * @@ -240,14 +249,6 @@ export class Pagination implements LocalizedComponent, T9nComponent { this.calcitePaginationUpdate.emit(changePayload); } - effectiveLocaleWatcher(): void { - numberStringFormatter.numberFormatOptions = { - locale: this.effectiveLocale, - numberingSystem: this.numberingSystem, - useGrouping: this.groupSeparator - }; - } - //-------------------------------------------------------------------------- // // Render Methods diff --git a/src/components/panel/assets/panel/t9n/messages.json b/src/components/panel/assets/panel/t9n/messages.json index ec7982d0cc8..2741baa1f33 100644 --- a/src/components/panel/assets/panel/t9n/messages.json +++ b/src/components/panel/assets/panel/t9n/messages.json @@ -1,5 +1,4 @@ { - "back": "Back", "close": "Close", "options": "Options" } diff --git a/src/components/panel/assets/panel/t9n/messages_ar.json b/src/components/panel/assets/panel/t9n/messages_ar.json index 15c59681b0f..927875e0767 100644 --- a/src/components/panel/assets/panel/t9n/messages_ar.json +++ b/src/components/panel/assets/panel/t9n/messages_ar.json @@ -1,5 +1,4 @@ { - "back": "رجوع", "close": "إغلاق", "options": "خيارات" } diff --git a/src/components/panel/assets/panel/t9n/messages_bg.json b/src/components/panel/assets/panel/t9n/messages_bg.json index 8a99e0c3d44..8675604f7cf 100644 --- a/src/components/panel/assets/panel/t9n/messages_bg.json +++ b/src/components/panel/assets/panel/t9n/messages_bg.json @@ -1,5 +1,4 @@ { - "back": "Назад", "close": "Затваряне", "options": "Опции" } diff --git a/src/components/panel/assets/panel/t9n/messages_bs.json b/src/components/panel/assets/panel/t9n/messages_bs.json index e1ecdf1af0d..d19edbca26a 100644 --- a/src/components/panel/assets/panel/t9n/messages_bs.json +++ b/src/components/panel/assets/panel/t9n/messages_bs.json @@ -1,5 +1,4 @@ { - "back": "Natrag", "close": "Zatvori", "options": "Opcije" } diff --git a/src/components/panel/assets/panel/t9n/messages_ca.json b/src/components/panel/assets/panel/t9n/messages_ca.json index 56ba3601860..56193f84d3b 100644 --- a/src/components/panel/assets/panel/t9n/messages_ca.json +++ b/src/components/panel/assets/panel/t9n/messages_ca.json @@ -1,5 +1,4 @@ { - "back": "Enrere", "close": "Tanca", "options": "Opcions" } diff --git a/src/components/panel/assets/panel/t9n/messages_cs.json b/src/components/panel/assets/panel/t9n/messages_cs.json index 1dbb0c3e094..7ed6fcae2d1 100644 --- a/src/components/panel/assets/panel/t9n/messages_cs.json +++ b/src/components/panel/assets/panel/t9n/messages_cs.json @@ -1,5 +1,4 @@ { - "back": "Zpět", "close": "Zavřít", "options": "Možnosti" } diff --git a/src/components/panel/assets/panel/t9n/messages_da.json b/src/components/panel/assets/panel/t9n/messages_da.json index 9fec6f18716..20ccca90f0c 100644 --- a/src/components/panel/assets/panel/t9n/messages_da.json +++ b/src/components/panel/assets/panel/t9n/messages_da.json @@ -1,5 +1,4 @@ { - "back": "Tilbage", "close": "Luk", "options": "Indstillinger" } diff --git a/src/components/panel/assets/panel/t9n/messages_de.json b/src/components/panel/assets/panel/t9n/messages_de.json index f4255d1922b..163e7762436 100644 --- a/src/components/panel/assets/panel/t9n/messages_de.json +++ b/src/components/panel/assets/panel/t9n/messages_de.json @@ -1,5 +1,4 @@ { - "back": "Zurück", "close": "Schließen", "options": "Optionen" } diff --git a/src/components/panel/assets/panel/t9n/messages_el.json b/src/components/panel/assets/panel/t9n/messages_el.json index d263d05d60c..b89fbc360c5 100644 --- a/src/components/panel/assets/panel/t9n/messages_el.json +++ b/src/components/panel/assets/panel/t9n/messages_el.json @@ -1,5 +1,4 @@ { - "back": "Πίσω", "close": "Κλείσιμο", "options": "Επιλογές" } diff --git a/src/components/panel/assets/panel/t9n/messages_en.json b/src/components/panel/assets/panel/t9n/messages_en.json index ec7982d0cc8..2741baa1f33 100644 --- a/src/components/panel/assets/panel/t9n/messages_en.json +++ b/src/components/panel/assets/panel/t9n/messages_en.json @@ -1,5 +1,4 @@ { - "back": "Back", "close": "Close", "options": "Options" } diff --git a/src/components/panel/assets/panel/t9n/messages_es.json b/src/components/panel/assets/panel/t9n/messages_es.json index 5f8dd95c16c..cf45c8db18d 100644 --- a/src/components/panel/assets/panel/t9n/messages_es.json +++ b/src/components/panel/assets/panel/t9n/messages_es.json @@ -1,5 +1,4 @@ { - "back": "Atrás", "close": "Cerrar", "options": "Opciones" } diff --git a/src/components/panel/assets/panel/t9n/messages_et.json b/src/components/panel/assets/panel/t9n/messages_et.json index 8130fc483cb..aa790384983 100644 --- a/src/components/panel/assets/panel/t9n/messages_et.json +++ b/src/components/panel/assets/panel/t9n/messages_et.json @@ -1,5 +1,4 @@ { - "back": "Tagasi", "close": "Sule", "options": "Valikud" } diff --git a/src/components/panel/assets/panel/t9n/messages_fi.json b/src/components/panel/assets/panel/t9n/messages_fi.json index 0a7f62d82e5..35484e9972f 100644 --- a/src/components/panel/assets/panel/t9n/messages_fi.json +++ b/src/components/panel/assets/panel/t9n/messages_fi.json @@ -1,5 +1,4 @@ { - "back": "Takaisin", "close": "Sulje", "options": "Asetukset" } diff --git a/src/components/panel/assets/panel/t9n/messages_fr.json b/src/components/panel/assets/panel/t9n/messages_fr.json index 479afb1a51f..3afe6ce0d0b 100644 --- a/src/components/panel/assets/panel/t9n/messages_fr.json +++ b/src/components/panel/assets/panel/t9n/messages_fr.json @@ -1,5 +1,4 @@ { - "back": "Retour", "close": "Fermer", "options": "Options" } diff --git a/src/components/panel/assets/panel/t9n/messages_he.json b/src/components/panel/assets/panel/t9n/messages_he.json index 40470830e46..24684fe9985 100644 --- a/src/components/panel/assets/panel/t9n/messages_he.json +++ b/src/components/panel/assets/panel/t9n/messages_he.json @@ -1,5 +1,4 @@ { - "back": "חזור", "close": "סגירה", "options": "אפשרויות" } diff --git a/src/components/panel/assets/panel/t9n/messages_hr.json b/src/components/panel/assets/panel/t9n/messages_hr.json index e1ecdf1af0d..d19edbca26a 100644 --- a/src/components/panel/assets/panel/t9n/messages_hr.json +++ b/src/components/panel/assets/panel/t9n/messages_hr.json @@ -1,5 +1,4 @@ { - "back": "Natrag", "close": "Zatvori", "options": "Opcije" } diff --git a/src/components/panel/assets/panel/t9n/messages_hu.json b/src/components/panel/assets/panel/t9n/messages_hu.json index eb5d466eebe..9f3c45526d6 100644 --- a/src/components/panel/assets/panel/t9n/messages_hu.json +++ b/src/components/panel/assets/panel/t9n/messages_hu.json @@ -1,5 +1,4 @@ { - "back": "Vissza", "close": "Bezárás", "options": "Beállítási lehetőségek" } diff --git a/src/components/panel/assets/panel/t9n/messages_id.json b/src/components/panel/assets/panel/t9n/messages_id.json index 34a0870f299..7ac4f0dfa98 100644 --- a/src/components/panel/assets/panel/t9n/messages_id.json +++ b/src/components/panel/assets/panel/t9n/messages_id.json @@ -1,5 +1,4 @@ { - "back": "Kembali", "close": "Tutup", "options": "Opsi" } diff --git a/src/components/panel/assets/panel/t9n/messages_it.json b/src/components/panel/assets/panel/t9n/messages_it.json index b069db9d55d..b5394436393 100644 --- a/src/components/panel/assets/panel/t9n/messages_it.json +++ b/src/components/panel/assets/panel/t9n/messages_it.json @@ -1,5 +1,4 @@ { - "back": "Indietro", "close": "Chiudi", "options": "Opzioni" } diff --git a/src/components/panel/assets/panel/t9n/messages_ja.json b/src/components/panel/assets/panel/t9n/messages_ja.json index 5807a010cff..4a5d4b377bf 100644 --- a/src/components/panel/assets/panel/t9n/messages_ja.json +++ b/src/components/panel/assets/panel/t9n/messages_ja.json @@ -1,5 +1,4 @@ { - "back": "戻る", "close": "閉じる", "options": "オプション" } diff --git a/src/components/panel/assets/panel/t9n/messages_ko.json b/src/components/panel/assets/panel/t9n/messages_ko.json index 83d3bc71f54..94e494110f6 100644 --- a/src/components/panel/assets/panel/t9n/messages_ko.json +++ b/src/components/panel/assets/panel/t9n/messages_ko.json @@ -1,5 +1,4 @@ { - "back": "뒤로", "close": "닫기", "options": "옵션" } diff --git a/src/components/panel/assets/panel/t9n/messages_lt.json b/src/components/panel/assets/panel/t9n/messages_lt.json index 638f55adb00..b44fedd8dc9 100644 --- a/src/components/panel/assets/panel/t9n/messages_lt.json +++ b/src/components/panel/assets/panel/t9n/messages_lt.json @@ -1,5 +1,4 @@ { - "back": "Atgal", "close": "Uždaryti", "options": "Parinktys" } diff --git a/src/components/panel/assets/panel/t9n/messages_lv.json b/src/components/panel/assets/panel/t9n/messages_lv.json index 84821665437..a4519931f7d 100644 --- a/src/components/panel/assets/panel/t9n/messages_lv.json +++ b/src/components/panel/assets/panel/t9n/messages_lv.json @@ -1,5 +1,4 @@ { - "back": "Atpakaļ", "close": "Aizvērt", "options": "Opcijas" } diff --git a/src/components/panel/assets/panel/t9n/messages_nl.json b/src/components/panel/assets/panel/t9n/messages_nl.json index 0e802cbeb55..f0749730c87 100644 --- a/src/components/panel/assets/panel/t9n/messages_nl.json +++ b/src/components/panel/assets/panel/t9n/messages_nl.json @@ -1,5 +1,4 @@ { - "back": "Terug", "close": "Sluiten", "options": "Opties" } diff --git a/src/components/panel/assets/panel/t9n/messages_no.json b/src/components/panel/assets/panel/t9n/messages_no.json index fb4b89b92a6..900c98c58a9 100644 --- a/src/components/panel/assets/panel/t9n/messages_no.json +++ b/src/components/panel/assets/panel/t9n/messages_no.json @@ -1,5 +1,4 @@ { - "back": "Tilbake", "close": "Lukk", "options": "Alternativer" } diff --git a/src/components/panel/assets/panel/t9n/messages_pl.json b/src/components/panel/assets/panel/t9n/messages_pl.json index f9f1b6251af..552e72369af 100644 --- a/src/components/panel/assets/panel/t9n/messages_pl.json +++ b/src/components/panel/assets/panel/t9n/messages_pl.json @@ -1,5 +1,4 @@ { - "back": "Wstecz", "close": "Zamknij", "options": "Opcje" } diff --git a/src/components/panel/assets/panel/t9n/messages_pt-BR.json b/src/components/panel/assets/panel/t9n/messages_pt-BR.json index 8564e8ed3c7..0997ea84b45 100644 --- a/src/components/panel/assets/panel/t9n/messages_pt-BR.json +++ b/src/components/panel/assets/panel/t9n/messages_pt-BR.json @@ -1,5 +1,4 @@ { - "back": "Voltar", "close": "Fechar", "options": "Opções" } diff --git a/src/components/panel/assets/panel/t9n/messages_pt-PT.json b/src/components/panel/assets/panel/t9n/messages_pt-PT.json index 5f9e6d2a326..0997ea84b45 100644 --- a/src/components/panel/assets/panel/t9n/messages_pt-PT.json +++ b/src/components/panel/assets/panel/t9n/messages_pt-PT.json @@ -1,5 +1,4 @@ { - "back": "Retroceder", "close": "Fechar", "options": "Opções" } diff --git a/src/components/panel/assets/panel/t9n/messages_ro.json b/src/components/panel/assets/panel/t9n/messages_ro.json index 6b295f27e24..dd9ac03695f 100644 --- a/src/components/panel/assets/panel/t9n/messages_ro.json +++ b/src/components/panel/assets/panel/t9n/messages_ro.json @@ -1,5 +1,4 @@ { - "back": "Înapoi", "close": "Închidere", "options": "Opţiuni" } diff --git a/src/components/panel/assets/panel/t9n/messages_ru.json b/src/components/panel/assets/panel/t9n/messages_ru.json index e94663a7c4c..2bdb81508b9 100644 --- a/src/components/panel/assets/panel/t9n/messages_ru.json +++ b/src/components/panel/assets/panel/t9n/messages_ru.json @@ -1,5 +1,4 @@ { - "back": "Назад", "close": "Закрыть", "options": "Опции" } diff --git a/src/components/panel/assets/panel/t9n/messages_sk.json b/src/components/panel/assets/panel/t9n/messages_sk.json index 351134f692e..ed5fb7dd75f 100644 --- a/src/components/panel/assets/panel/t9n/messages_sk.json +++ b/src/components/panel/assets/panel/t9n/messages_sk.json @@ -1,5 +1,4 @@ { - "back": "Späť", "close": "Zatvoriť", "options": "Možnosti" } diff --git a/src/components/panel/assets/panel/t9n/messages_sl.json b/src/components/panel/assets/panel/t9n/messages_sl.json index a0144706ec5..2280da31188 100644 --- a/src/components/panel/assets/panel/t9n/messages_sl.json +++ b/src/components/panel/assets/panel/t9n/messages_sl.json @@ -1,5 +1,4 @@ { - "back": "Nazaj", "close": "Zapri", "options": "Možnosti" } diff --git a/src/components/panel/assets/panel/t9n/messages_sr.json b/src/components/panel/assets/panel/t9n/messages_sr.json index 77ec7f1a142..d19edbca26a 100644 --- a/src/components/panel/assets/panel/t9n/messages_sr.json +++ b/src/components/panel/assets/panel/t9n/messages_sr.json @@ -1,5 +1,4 @@ { - "back": "Nazad", "close": "Zatvori", "options": "Opcije" } diff --git a/src/components/panel/assets/panel/t9n/messages_sv.json b/src/components/panel/assets/panel/t9n/messages_sv.json index 342ed703cd8..416661385b3 100644 --- a/src/components/panel/assets/panel/t9n/messages_sv.json +++ b/src/components/panel/assets/panel/t9n/messages_sv.json @@ -1,5 +1,4 @@ { - "back": "Bakåt", "close": "Stäng", "options": "Alternativ" } diff --git a/src/components/panel/assets/panel/t9n/messages_th.json b/src/components/panel/assets/panel/t9n/messages_th.json index fb5e66db9be..a8f8c6996d7 100644 --- a/src/components/panel/assets/panel/t9n/messages_th.json +++ b/src/components/panel/assets/panel/t9n/messages_th.json @@ -1,5 +1,4 @@ { - "back": "กลับ", "close": "ปิด", "options": "ตัวเลือก" } diff --git a/src/components/panel/assets/panel/t9n/messages_tr.json b/src/components/panel/assets/panel/t9n/messages_tr.json index 442309dec39..b21a1ef9c83 100644 --- a/src/components/panel/assets/panel/t9n/messages_tr.json +++ b/src/components/panel/assets/panel/t9n/messages_tr.json @@ -1,5 +1,4 @@ { - "back": "Geri", "close": "Kapat", "options": "Seçenekler" } diff --git a/src/components/panel/assets/panel/t9n/messages_uk.json b/src/components/panel/assets/panel/t9n/messages_uk.json index b8b020d2d10..24e6d74014b 100644 --- a/src/components/panel/assets/panel/t9n/messages_uk.json +++ b/src/components/panel/assets/panel/t9n/messages_uk.json @@ -1,5 +1,4 @@ { - "back": "Назад", "close": "Закрити", "options": "Опції" } diff --git a/src/components/panel/assets/panel/t9n/messages_vi.json b/src/components/panel/assets/panel/t9n/messages_vi.json index 7db40a98e6d..75d7facb139 100644 --- a/src/components/panel/assets/panel/t9n/messages_vi.json +++ b/src/components/panel/assets/panel/t9n/messages_vi.json @@ -1,5 +1,4 @@ { - "back": "Quay lại", "close": "Đóng", "options": "Tùy chọn" } diff --git a/src/components/panel/assets/panel/t9n/messages_zh-CN.json b/src/components/panel/assets/panel/t9n/messages_zh-CN.json index 84dccfa3c19..6a9999b584a 100644 --- a/src/components/panel/assets/panel/t9n/messages_zh-CN.json +++ b/src/components/panel/assets/panel/t9n/messages_zh-CN.json @@ -1,5 +1,4 @@ { - "back": "返回", "close": "关闭", "options": "选项" } diff --git a/src/components/panel/assets/panel/t9n/messages_zh-HK.json b/src/components/panel/assets/panel/t9n/messages_zh-HK.json index 51998d0a073..e2230a0c9ac 100644 --- a/src/components/panel/assets/panel/t9n/messages_zh-HK.json +++ b/src/components/panel/assets/panel/t9n/messages_zh-HK.json @@ -1,5 +1,4 @@ { - "back": "上一步", "close": "關閉", "options": "選項" } diff --git a/src/components/panel/assets/panel/t9n/messages_zh-TW.json b/src/components/panel/assets/panel/t9n/messages_zh-TW.json index 51998d0a073..e2230a0c9ac 100644 --- a/src/components/panel/assets/panel/t9n/messages_zh-TW.json +++ b/src/components/panel/assets/panel/t9n/messages_zh-TW.json @@ -1,5 +1,4 @@ { - "back": "上一步", "close": "關閉", "options": "選項" } diff --git a/src/components/panel/panel.e2e.ts b/src/components/panel/panel.e2e.ts index c255137a4fa..0175ce19d1b 100644 --- a/src/components/panel/panel.e2e.ts +++ b/src/components/panel/panel.e2e.ts @@ -35,26 +35,6 @@ describe("calcite-panel", () => { it("supports translations", () => t9n("calcite-panel")); - it("honors dismissed prop (deprecated)", async () => { - const page = await newE2EPage(); - - await page.setContent("test"); - - const element = await page.find("calcite-panel"); - const container = await page.find(`calcite-panel >>> .${CSS.container}`); - - await page.waitForChanges(); - - expect(await container.isVisible()).toBe(true); - - element.setProperty("dismissed", true); - - await page.waitForChanges(); - - expect(await element.getProperty("closed")).toBe(true); - expect(await container.isVisible()).toBe(false); - }); - it("honors closed prop", async () => { const page = await newE2EPage(); diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx index 14dce4cc154..e3dd744ec6f 100644 --- a/src/components/panel/panel.tsx +++ b/src/components/panel/panel.tsx @@ -11,7 +11,7 @@ import { State, Watch } from "@stencil/core"; -import { CSS, ICONS, SLOTS, TEXT } from "./resources"; +import { CSS, ICONS, SLOTS } from "./resources"; import { toAriaBoolean } from "../../utils/dom"; import { Scale } from "../interfaces"; import { HeadingLevel, Heading } from "../functional/Heading"; @@ -48,7 +48,8 @@ import { Messages } from "./assets/panel/t9n"; @Component({ tag: "calcite-panel", styleUrl: "panel.scss", - shadow: true + shadow: true, + assetsDirs: ["assets"] }) export class Panel implements InteractiveComponent, LoadableComponent, T9nComponent { // -------------------------------------------------------------------------- @@ -146,8 +147,9 @@ export class Panel implements InteractiveComponent, LoadableComponent, T9nCompon connectMessages(this); } - componentWillLoad(): void { + async componentWillLoad(): Promise { setUpLoadableComponent(this); + await setUpMessages(this); } componentDidLoad(): void { @@ -434,8 +436,8 @@ export class Panel implements InteractiveComponent, LoadableComponent, T9nCompon } renderHeaderActionsEnd(): VNode { - const { close, hasEndActions, closable } = this; - const text = this.messages.close; + const { close, hasEndActions, messages, closable } = this; + const text = messages.close; const closableNode = closable ? ( Date: Tue, 6 Dec 2022 18:37:20 -0600 Subject: [PATCH 30/59] add screenshot tests --- .../action-bar/action-bar.stories.ts | 30 ++++++++++++++++ .../action-group/action-group.stories.ts | 36 +++++++++++++++++++ .../action-pad/action-pad.stories.ts | 31 ++++++++++++++++ .../color-picker/color-picker.stories.ts | 12 +++++++ 4 files changed, 109 insertions(+) diff --git a/src/components/action-bar/action-bar.stories.ts b/src/components/action-bar/action-bar.stories.ts index 6c44ec7b082..48b5de3c9ca 100644 --- a/src/components/action-bar/action-bar.stories.ts +++ b/src/components/action-bar/action-bar.stories.ts @@ -178,3 +178,33 @@ export const withTooltip_NoTest = (): string => withTooltip_NoTest.parameters = { chromatic: { disableSnapshot: true } }; + +export const hebrewLocale_TestOnly = (): string => ` + + +`; + +export const norwegianLocale_TestOnly = (): string => ` + + +`; + +export const FrenchLocale_TestOnly = (): string => ` + + +`; + +export const hongKongLocale_TestOnly = (): string => ` + + +`; + +export const ukranianLocale_TestOnly = (): string => ` + + +`; + +export const bosnianLocale_TestOnly = (): string => ` + + +`; diff --git a/src/components/action-group/action-group.stories.ts b/src/components/action-group/action-group.stories.ts index 294a35d7952..f00352732d1 100644 --- a/src/components/action-group/action-group.stories.ts +++ b/src/components/action-group/action-group.stories.ts @@ -41,3 +41,39 @@ export const gridCenteringOfActionsInAGroup = (): string => html`
`; + +export const arabicLocale_TestOnly = (): string => html`
+ + + +
`; + +export const germanLocale_TestOnly = (): string => html`
+ + + +
`; + +export const norwegianLocale_TestOnly = (): string => html`
+ + + +
`; + +export const ChineseLocale_TestOnly = (): string => html`
+ + + +
`; + +export const GreekLocale_TestOnly = (): string => html`
+ + + +
`; + +export const TurkishLocale_TestOnly = (): string => html`
+ + + +
`; diff --git a/src/components/action-pad/action-pad.stories.ts b/src/components/action-pad/action-pad.stories.ts index 46f87f4b1ff..ec98183e869 100644 --- a/src/components/action-pad/action-pad.stories.ts +++ b/src/components/action-pad/action-pad.stories.ts @@ -142,3 +142,34 @@ export const withTooltip_NoTest = (): string => withTooltip_NoTest.parameters = { chromatic: { disableSnapshot: true } }; + +export const hebrewLocale_TestOnly = (): string => ` + + +`; + +export const norwegianLocale_TestOnly = (): string => ` + + +`; + +export const spanishLocale_TestOnly = (): string => ` + + +`; + +export const taiwanLocale_TestOnly = (): string => ` + + +`; + +export const russianLocale_TestOnly = (): string => ` + + +`; + +export const romanianMoldovaLocale_TestOnly = + (): string => ` + + +`; diff --git a/src/components/color-picker/color-picker.stories.ts b/src/components/color-picker/color-picker.stories.ts index d838afb8d6a..06c9bd9d0c5 100644 --- a/src/components/color-picker/color-picker.stories.ts +++ b/src/components/color-picker/color-picker.stories.ts @@ -105,3 +105,15 @@ export const colorFieldAndHueSliderAreResizedAfterScaleChange_TestOnly = stepSto .executeScript(`document.querySelector("calcite-color-picker").scale = "s"`) .snapshot("Color field and hue slider are resized after scale change") ); + +export const ArabicLocale_TestOnly = (): string => html` `; + +export const NorwegianLocale_TestOnly = (): string => html` `; + +export const SpanishLocale_TestOnly = (): string => html` `; + +export const JapaneseLocale_TestOnly = (): string => html` `; + +export const RussianLocale_TestOnly = (): string => html` `; + +export const ThaiLocale_TestOnly = (): string => html` `; From 86db26dedea7f60f3632b15498ffd373a4421f73 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 8 Dec 2022 11:23:32 -0600 Subject: [PATCH 31/59] update internationalization doc --- conventions/Internationalization.md | 1 + 1 file changed, 1 insertion(+) diff --git a/conventions/Internationalization.md b/conventions/Internationalization.md index d156086da0e..2c8153edb4a 100644 --- a/conventions/Internationalization.md +++ b/conventions/Internationalization.md @@ -52,6 +52,7 @@ This pattern enables components to support built-in translations. In order to su - If a message string has a matching `intl` prop, its translation bundle message keys must match the same prop name without the `intl` prefix (e.g., `intlClose` -> `close`) - You can also look at the interface and util documentation for additional info. - The internal `messages` prop should be used as the source of truth for translations in rendering. +- List of supported locales can be found [here](https://developers.arcgis.com/calcite-design-system/localization/#locale-support). ## Translated strings From 6a4525c6112ec529021f76e6e29d9b45af3715d6 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 8 Dec 2022 13:41:30 -0600 Subject: [PATCH 32/59] cleanup --- src/components/action-bar/action-bar.tsx | 1 - src/components/action-group/action-group.tsx | 4 +- src/components/action-pad/action-pad.tsx | 1 - src/components/action/action.tsx | 1 - src/components/alert/alert.tsx | 1 - .../block-section/block-section.tsx | 1 - src/components/block/block.tsx | 8 ---- src/components/button/button.tsx | 1 - src/components/card/card.tsx | 5 +- src/components/chip/chip.tsx | 7 +-- src/components/color-picker/color-picker.tsx | 7 +-- src/components/combobox/combobox.tsx | 1 - src/components/date-picker/date-picker.tsx | 1 - src/components/filter/filter.tsx | 7 +-- src/components/flow-item/flow-item.tsx | 7 +-- .../inline-editable/inline-editable.tsx | 10 ++-- src/components/input-number/input-number.tsx | 5 +- src/components/input-text/input-text.tsx | 4 +- src/components/input/input.tsx | 5 +- src/components/modal/modal.tsx | 4 +- src/components/notice/notice.tsx | 7 +-- src/components/pagination/pagination.tsx | 3 +- src/components/panel/panel.tsx | 7 +-- src/components/popover/popover.tsx | 3 +- src/components/rating/rating.tsx | 48 +++++++++---------- src/components/scrim/scrim.tsx | 5 +- src/components/time-picker/time-picker.tsx | 5 +- src/components/value-list/value-list.tsx | 5 +- src/utils/t9n.ts | 2 +- 29 files changed, 79 insertions(+), 87 deletions(-) diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx index ce29be7540e..015f8e30f2a 100755 --- a/src/components/action-bar/action-bar.tsx +++ b/src/components/action-bar/action-bar.tsx @@ -141,7 +141,6 @@ export class ActionBar @Watch("intlCollapse") @Watch("intlExpand") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/action-group/action-group.tsx b/src/components/action-group/action-group.tsx index 3b3abab46f7..e21d0b8936b 100755 --- a/src/components/action-group/action-group.tsx +++ b/src/components/action-group/action-group.tsx @@ -88,7 +88,6 @@ export class ActionGroup implements ConditionalSlotComponent, LocalizedComponent @Prop({ mutable: true }) messageOverrides: Partial; @Watch("intlMore") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ @@ -99,8 +98,7 @@ export class ActionGroup implements ConditionalSlotComponent, LocalizedComponent // Private Properties // // -------------------------------------------------------------------------- - @Element() - el: HTMLCalciteActionGroupElement; + @Element() el: HTMLCalciteActionGroupElement; @State() effectiveLocale = ""; diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx index 53ae21c1f5e..399e7b43a20 100755 --- a/src/components/action-pad/action-pad.tsx +++ b/src/components/action-pad/action-pad.tsx @@ -113,7 +113,6 @@ export class ActionPad @Watch("intlCollapse") @Watch("intlExpand") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/action/action.tsx b/src/components/action/action.tsx index 6dc395b1358..750b02728f3 100755 --- a/src/components/action/action.tsx +++ b/src/components/action/action.tsx @@ -135,7 +135,6 @@ export class Action @Prop({ mutable: true }) messageOverrides: Partial; @Watch("intlLoading") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx index 493c3ee4df7..e4e3b8c75a0 100644 --- a/src/components/alert/alert.tsx +++ b/src/components/alert/alert.tsx @@ -144,7 +144,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen @Prop({ mutable: true }) messageOverrides: Partial; @Watch("intlClose") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/block-section/block-section.tsx b/src/components/block-section/block-section.tsx index d8daec7dfe5..9726328a0be 100644 --- a/src/components/block-section/block-section.tsx +++ b/src/components/block-section/block-section.tsx @@ -95,7 +95,6 @@ export class BlockSection implements LocalizedComponent, T9nComponent { @Watch("intlCollapse") @Watch("intlExpand") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/block/block.tsx b/src/components/block/block.tsx index a8b914b42ce..0ffe3d97e05 100644 --- a/src/components/block/block.tsx +++ b/src/components/block/block.tsx @@ -129,13 +129,6 @@ export class Block */ @Prop() description: string; - /** - * When `true`, removes padding for the slotted content. - * - * @deprecated Use `--calcite-block-padding` CSS variable instead. - */ - @Prop({ reflect: true }) disablePadding = false; - /** * Made into a prop for testing purposes only * @@ -152,7 +145,6 @@ export class Block @Watch("intlExpand") @Watch("intlLoading") @Watch("intlOptions") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index f8488f4a959..bcb424d4f19 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -167,7 +167,6 @@ export class Button } @Watch("intlLoading") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /** referred in t9n util */ diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index 4b15ef63887..ed31c33cfa9 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -84,14 +84,14 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo * * @default "Select" */ - @Prop({ reflect: false }) intlSelect: string; + @Prop({ reflect: false }) intlSelect?: string; /** * When `selectable` is `true`, the accessible name for the component's checkbox for deselection. * * @default "Deselect" */ - @Prop({ reflect: false }) intlDeselect: string; + @Prop({ reflect: false }) intlDeselect?: string; /** Sets the placement of the thumbnail defined in the `thumbnail` slot. */ @Prop({ reflect: true }) thumbnailPosition: LogicalFlowPosition = "block-start"; @@ -111,7 +111,6 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo @Watch("intlLoading") @Watch("intlDeselect") @Watch("intlSelect") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/chip/chip.tsx b/src/components/chip/chip.tsx index 841bb37361c..91cc8968ae7 100644 --- a/src/components/chip/chip.tsx +++ b/src/components/chip/chip.tsx @@ -28,7 +28,7 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { setUpLoadableComponent, setComponentLoaded, @@ -46,7 +46,9 @@ import { shadow: true, assetsDirs: ["assets"] }) -export class Chip implements ConditionalSlotComponent, LoadableComponent, T9nComponent { +export class Chip + implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent +{ //-------------------------------------------------------------------------- // // Public Properties @@ -98,7 +100,6 @@ export class Chip implements ConditionalSlotComponent, LoadableComponent, T9nCom @Prop({ mutable: true }) messages: Messages; @Watch("dismissLabel") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 029ec123c97..09bfb21f148 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -38,7 +38,7 @@ import { T9nComponent, updateMessages } from "../../utils/t9n"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { NumberingSystem } from "../../utils/locale"; import { setUpLoadableComponent, @@ -57,7 +57,9 @@ const defaultFormat = "auto"; shadow: true, assetsDirs: ["assets"] }) -export class ColorPicker implements InteractiveComponent, LoadableComponent, T9nComponent { +export class ColorPicker + implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent +{ //-------------------------------------------------------------------------- // // Element @@ -300,7 +302,6 @@ export class ColorPicker implements InteractiveComponent, LoadableComponent, T9n @Watch("intlSaved") @Watch("intlV") @Watch("intlValue") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx index db8312e4741..04b119e51c2 100644 --- a/src/components/combobox/combobox.tsx +++ b/src/components/combobox/combobox.tsx @@ -259,7 +259,6 @@ export class Combobox @Prop({ mutable: true }) messageOverrides: Partial; @Watch("intlRemoveTag") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx index 6534e3e6900..1eb6d79a0cf 100644 --- a/src/components/date-picker/date-picker.tsx +++ b/src/components/date-picker/date-picker.tsx @@ -219,7 +219,6 @@ export class DatePicker implements LocalizedComponent, T9nComponent { @Watch("intlNextMonth") @Watch("intlPrevMonth") @Watch("intlYear") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx index 0f15882681f..38195ef413c 100644 --- a/src/components/filter/filter.tsx +++ b/src/components/filter/filter.tsx @@ -17,7 +17,7 @@ import { Scale } from "../interfaces"; import { focusElement } from "../../utils/dom"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { filter } from "../../utils/filter"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -39,7 +39,9 @@ import { shadow: true, assetsDirs: ["assets"] }) -export class Filter implements InteractiveComponent, LoadableComponent, T9nComponent { +export class Filter + implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent +{ // -------------------------------------------------------------------------- // // Properties @@ -116,7 +118,6 @@ export class Filter implements InteractiveComponent, LoadableComponent, T9nCompo @Watch("intlClear") @Watch("intlLabel") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/flow-item/flow-item.tsx b/src/components/flow-item/flow-item.tsx index f88d54fa9b1..c9d3da0c88d 100644 --- a/src/components/flow-item/flow-item.tsx +++ b/src/components/flow-item/flow-item.tsx @@ -17,7 +17,7 @@ import { Scale } from "../interfaces"; import { CSS, ICONS, SLOTS } from "./resources"; import { SLOTS as PANEL_SLOTS } from "../panel/resources"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -49,7 +49,9 @@ import { shadow: true, assetsDirs: ["assets"] }) -export class FlowItem implements InteractiveComponent, LoadableComponent, T9nComponent { +export class FlowItem + implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent +{ // -------------------------------------------------------------------------- // // Properties @@ -127,7 +129,6 @@ export class FlowItem implements InteractiveComponent, LoadableComponent, T9nCom @Watch("intlBack") @Watch("intlClose") @Watch("intlOptions") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx index 69a18cd7688..edb8e7d4ad6 100644 --- a/src/components/inline-editable/inline-editable.tsx +++ b/src/components/inline-editable/inline-editable.tsx @@ -17,7 +17,7 @@ import { CSS } from "./resources"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -43,7 +43,12 @@ import { assetsDirs: ["assets"] }) export class InlineEditable - implements InteractiveComponent, LabelableComponent, LoadableComponent, T9nComponent + implements + InteractiveComponent, + LabelableComponent, + LoadableComponent, + LocalizedComponent, + T9nComponent { //-------------------------------------------------------------------------- // @@ -137,7 +142,6 @@ export class InlineEditable @Watch("intlCancelEditing") @Watch("intlConfirmChanges") @Watch("intlEnableEditing") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/input-number/input-number.tsx b/src/components/input-number/input-number.tsx index 5376230501a..04c4def0ffd 100644 --- a/src/components/input-number/input-number.tsx +++ b/src/components/input-number/input-number.tsx @@ -35,7 +35,8 @@ import { numberStringFormatter, defaultNumberingSystem, disconnectLocalized, - connectLocalized + connectLocalized, + LocalizedComponent } from "../../utils/locale"; import { numberKeys } from "../../utils/key"; import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number"; @@ -75,6 +76,7 @@ export class InputNumber LabelableComponent, FormComponent, InteractiveComponent, + LocalizedComponent, T9nComponent, LoadableComponent { @@ -288,7 +290,6 @@ export class InputNumber @Watch("intlClear") @Watch("intlLoading") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/input-text/input-text.tsx b/src/components/input-text/input-text.tsx index 0fc2e4c2f86..a2d26f321cf 100644 --- a/src/components/input-text/input-text.tsx +++ b/src/components/input-text/input-text.tsx @@ -27,7 +27,7 @@ import { import { CSS_UTILITY } from "../../utils/resources"; import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -60,6 +60,7 @@ export class InputText FormComponent, InteractiveComponent, LoadableComponent, + LocalizedComponent, T9nComponent { //-------------------------------------------------------------------------- @@ -227,7 +228,6 @@ export class InputText @Watch("intlClear") @Watch("intlLoading") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx index 2d8f57f2d7a..5980f55f724 100644 --- a/src/components/input/input.tsx +++ b/src/components/input/input.tsx @@ -37,7 +37,8 @@ import { numberStringFormatter, disconnectLocalized, connectLocalized, - updateEffectiveLocale + updateEffectiveLocale, + LocalizedComponent } from "../../utils/locale"; import { numberKeys } from "../../utils/key"; import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number"; @@ -78,6 +79,7 @@ export class Input FormComponent, InteractiveComponent, T9nComponent, + LocalizedComponent, LoadableComponent { //-------------------------------------------------------------------------- @@ -360,7 +362,6 @@ export class Input @Watch("intlClear") @Watch("intlLoading") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx index fa9e7d504d5..f64f1284a38 100644 --- a/src/components/modal/modal.tsx +++ b/src/components/modal/modal.tsx @@ -37,7 +37,7 @@ import { componentLoaded } from "../../utils/loadable"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -67,6 +67,7 @@ export class Modal OpenCloseComponent, FocusTrapComponent, LoadableComponent, + LocalizedComponent, T9nComponent { //-------------------------------------------------------------------------- @@ -153,7 +154,6 @@ export class Modal @Prop({ mutable: true }) messageOverrides: Partial; @Watch("intlClose") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/notice/notice.tsx b/src/components/notice/notice.tsx index cb197180573..e6ca678a38d 100644 --- a/src/components/notice/notice.tsx +++ b/src/components/notice/notice.tsx @@ -19,7 +19,7 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -55,7 +55,9 @@ import { shadow: true, assetsDirs: ["assets"] }) -export class Notice implements ConditionalSlotComponent, LoadableComponent, T9nComponent { +export class Notice + implements ConditionalSlotComponent, LoadableComponent, T9nComponent, LocalizedComponent +{ //-------------------------------------------------------------------------- // // Element @@ -145,7 +147,6 @@ export class Notice implements ConditionalSlotComponent, LoadableComponent, T9nC @Prop({ mutable: true }) messageOverrides: Partial; @Watch("intlClose") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 35fee8a9680..efdf9aedfe2 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -42,7 +42,7 @@ export interface PaginationDetail { shadow: true, assetsDirs: ["assets"] }) -export class Pagination implements LocalizedComponent, T9nComponent { +export class Pagination implements LocalizedComponent, LocalizedComponent, T9nComponent { //-------------------------------------------------------------------------- // // Public Properties @@ -61,7 +61,6 @@ export class Pagination implements LocalizedComponent, T9nComponent { @Watch("textLabelNext") @Watch("textLabelPrevious") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx index 50ca80c6a47..30377260d66 100644 --- a/src/components/panel/panel.tsx +++ b/src/components/panel/panel.tsx @@ -25,7 +25,7 @@ import { componentLoaded } from "../../utils/loadable"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -51,7 +51,9 @@ import { Messages } from "./assets/panel/t9n"; shadow: true, assetsDirs: ["assets"] }) -export class Panel implements InteractiveComponent, LoadableComponent, T9nComponent { +export class Panel + implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent +{ // -------------------------------------------------------------------------- // // Properties @@ -130,7 +132,6 @@ export class Panel implements InteractiveComponent, LoadableComponent, T9nCompon @Watch("intlClose") @Watch("intlOptions") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx index 2ab8f5352ad..f8e3f52eac1 100644 --- a/src/components/popover/popover.tsx +++ b/src/components/popover/popover.tsx @@ -46,7 +46,7 @@ import { HeadingLevel, Heading } from "../functional/Heading"; import { Scale } from "../interfaces"; import PopoverManager from "./PopoverManager"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -80,6 +80,7 @@ export class Popover OpenCloseComponent, FocusTrapComponent, LoadableComponent, + LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx index 0f45a506256..d84b2566cde 100644 --- a/src/components/rating/rating.tsx +++ b/src/components/rating/rating.tsx @@ -18,7 +18,7 @@ import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/l import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -46,6 +46,7 @@ export class Rating FormComponent, InteractiveComponent, LoadableComponent, + LocalizedComponent, T9nComponent { //-------------------------------------------------------------------------- @@ -62,15 +63,27 @@ export class Rating // // -------------------------------------------------------------------------- - /** Specifies a cumulative average from previous ratings to display. */ - @Prop({ reflect: true }) average?: number; + /** Specifies the size of the component. */ + @Prop({ reflect: true }) scale: Scale = "m"; - /** Specifies the number of previous ratings to display. */ - @Prop({ reflect: true }) count: number; + /** The component's value. */ + @Prop({ reflect: true, mutable: true }) value = 0; + + /** When `true`, the component's value can be read, but cannot be modified. */ + @Prop({ reflect: true }) readOnly = false; /** When `true`, interaction is prevented and the component is displayed with lower opacity. */ @Prop({ reflect: true }) disabled = false; + /** When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. */ + @Prop({ reflect: true }) showChip = false; + + /** Specifies the number of previous ratings to display. */ + @Prop({ reflect: true }) count: number; + + /** Specifies a cumulative average from previous ratings to display. */ + @Prop({ reflect: true }) average: number; + /** Specifies the name of the component on form submission. */ @Prop({ reflect: true }) name: string; @@ -100,17 +113,6 @@ export class Rating */ @Prop({ mutable: true }) messageOverrides: Partial; - @Watch("intlRating") - @Watch("intlStars") - @Watch("defaultMessages") - @Watch("messageOverrides") - onMessagesChange(): void { - /* wired up by t9n util */ - } - - /** When `true`, the component's value can be read, but cannot be modified. */ - @Prop({ reflect: true }) readOnly = false; - /** * When `true`, the component must have a value in order for the form to submit. * @@ -118,14 +120,12 @@ export class Rating */ @Prop({ reflect: true }) required = false; - /** Specifies the size of the component. */ - @Prop({ reflect: true }) scale: Scale = "m"; - - /** When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. */ - @Prop({ reflect: true }) showChip = false; - - /** The component's value. */ - @Prop({ reflect: true, mutable: true }) value = 0; + @Watch("intlRating") + @Watch("intlStars") + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } //-------------------------------------------------------------------------- // diff --git a/src/components/scrim/scrim.tsx b/src/components/scrim/scrim.tsx index de281b674b8..20cb56cd206 100644 --- a/src/components/scrim/scrim.tsx +++ b/src/components/scrim/scrim.tsx @@ -1,6 +1,6 @@ import { Component, Element, Prop, h, VNode, Watch, State } from "@stencil/core"; import { CSS } from "./resources"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -19,7 +19,7 @@ import { Messages } from "./assets/scrim/t9n"; shadow: true, assetsDirs: ["assets"] }) -export class Scrim implements T9nComponent { +export class Scrim implements LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- // // Properties @@ -51,7 +51,6 @@ export class Scrim implements T9nComponent { @Prop({ mutable: true }) messageOverrides: Partial; @Watch("intlLoading") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/components/time-picker/time-picker.tsx b/src/components/time-picker/time-picker.tsx index d7acd650897..a0a4d9c651d 100644 --- a/src/components/time-picker/time-picker.tsx +++ b/src/components/time-picker/time-picker.tsx @@ -64,7 +64,9 @@ function capitalize(str: string): string { shadow: true, assetsDirs: ["assets"] }) -export class TimePicker implements LocalizedComponent, LoadableComponent, T9nComponent { +export class TimePicker + implements LocalizedComponent, LoadableComponent, LocalizedComponent, T9nComponent +{ //-------------------------------------------------------------------------- // // Element @@ -233,7 +235,6 @@ export class TimePicker implements LocalizedComponent, LoadableComponent, T9nCom @Watch("intlSecondDown") @Watch("intlSecondUp") @Watch("messageOverrides") - @Watch("defaultMessages") onMessagesChange(): void { /* wired up by t9n util */ } diff --git a/src/components/value-list/value-list.tsx b/src/components/value-list/value-list.tsx index b92797f8003..9c03907d336 100644 --- a/src/components/value-list/value-list.tsx +++ b/src/components/value-list/value-list.tsx @@ -40,7 +40,7 @@ import List from "../pick-list/shared-list-render"; import { createObserver } from "../../utils/observers"; import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive"; import { getHandleAndItemElement, getScreenReaderText } from "./utils"; -import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { connectMessages, disconnectMessages, @@ -68,7 +68,7 @@ import { }) export class ValueList< ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement -> implements InteractiveComponent, LoadableComponent, T9nComponent +> implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent { // -------------------------------------------------------------------------- // @@ -185,7 +185,6 @@ export class ValueList< @Watch("intlDragHandleChange") @Watch("intlDragHandleCommit") @Watch("intlDragHandleIdle") - @Watch("defaultMessages") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ diff --git a/src/utils/t9n.ts b/src/utils/t9n.ts index 8f773a997bc..3e85c145108 100644 --- a/src/utils/t9n.ts +++ b/src/utils/t9n.ts @@ -154,7 +154,7 @@ export interface T9nComponent extends LocalizedComponent { /** * This private method ensures messages are kept in sync. * - * This method should be empty and configured to watch for changes on `defaultMessages`, `messageOverrides` and any associated Intl prop. + * This method should be empty and configured to watch for changes on `messageOverrides` and any associated Intl prop. * * @Watch("intlMyPropA") * @Watch("intlMyPropZ") From 5e5dcff8f905b8affb6f39e7781380a9b4f7e0e7 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 8 Dec 2022 15:43:35 -0600 Subject: [PATCH 33/59] overwrite git auto merge --- src/components/color-picker/color-picker.e2e.ts | 2 +- src/components/color-picker/color-picker.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/color-picker/color-picker.e2e.ts b/src/components/color-picker/color-picker.e2e.ts index f98b695d195..bb513404e7b 100644 --- a/src/components/color-picker/color-picker.e2e.ts +++ b/src/components/color-picker/color-picker.e2e.ts @@ -1,5 +1,5 @@ import { accessible, defaults, hidden, reflects, renders, focusable, disabled, t9n } from "../../tests/commonTests"; -import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, TEXT } from "./resources"; +import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS } from "./resources"; import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing"; import { ColorValue } from "./interfaces"; import SpyInstance = jest.SpyInstance; diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 09bfb21f148..1ab3c303b38 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -1027,9 +1027,9 @@ export class ColorPicker }; private renderChannelsTabTitle = (channelMode: this["channelMode"]): VNode => { - const { channelMode: activeChannelMode, intlRgb, intlHsv } = this; + const { channelMode: activeChannelMode, messages } = this; const selected = channelMode === activeChannelMode; - const label = channelMode === "rgb" ? intlRgb : intlHsv; + const label = channelMode === "rgb" ? messages.rgb : messages.hsv; return ( Date: Thu, 8 Dec 2022 16:05:29 -0600 Subject: [PATCH 34/59] revert package-lock changes --- package-lock.json | 57 ++++++++++++++++++++++++++++------------------- 1 file changed, 34 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0ce319385eb..a8f92dcb0f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36739,7 +36739,8 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz", "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==", - "dev": true + "dev": true, + "requires": {} }, "@devtools-ds/object-inspector": { "version": "1.2.0", @@ -38051,7 +38052,8 @@ "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", - "dev": true + "dev": true, + "requires": {} }, "@mdx-js/util": { "version": "1.6.22", @@ -38204,7 +38206,8 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz", "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==", - "dev": true + "dev": true, + "requires": {} }, "@octokit/plugin-rest-endpoint-methods": { "version": "5.11.1", @@ -42056,7 +42059,8 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "acorn-node": { "version": "1.8.2", @@ -42147,13 +42151,15 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "dev": true + "dev": true, + "requires": {} }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "ansi-align": { "version": "3.0.1", @@ -42767,7 +42773,8 @@ "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==", - "dev": true + "dev": true, + "requires": {} }, "babel-jest": { "version": "27.5.1", @@ -47917,7 +47924,8 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz", "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==", - "dev": true + "dev": true, + "requires": {} }, "eslint-plugin-jest": { "version": "27.1.6", @@ -52297,7 +52305,8 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", - "dev": true + "dev": true, + "requires": {} }, "jest-regex-util": { "version": "26.0.0", @@ -53488,7 +53497,8 @@ "version": "7.5.9", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", - "dev": true + "dev": true, + "requires": {} } } }, @@ -56168,13 +56178,15 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-scss": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.2.tgz", "integrity": "sha512-xfdkU128CkKKKVAwkyt0M8OdnelJ3MRcIRAPPQkRpoPeuzWY3RIeg7piRCpZ79MK7Q16diLXMMAD9dN5mauPlQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-selector-parser": { "version": "6.0.11", @@ -56561,7 +56573,8 @@ "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", - "dev": true + "dev": true, + "requires": {} } } }, @@ -56853,7 +56866,8 @@ "version": "5.5.1", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", - "dev": true + "dev": true, + "requires": {} }, "react-dom": { "version": "16.14.0", @@ -59382,7 +59396,8 @@ "version": "0.3.3", "resolved": "https://registry.npmjs.org/storybook-rtl-addon/-/storybook-rtl-addon-0.3.3.tgz", "integrity": "sha512-yb8lsbarWua84yyVhJ4RIzZf8qbfLxdO5bncJ9xzWfYet7/BUhpIbyg0uAkkf0nOcVeVcOr2jbpx7gSVd4Ph8A==", - "dev": true + "dev": true, + "requires": {} }, "stream-browserify": { "version": "2.0.2", @@ -59809,7 +59824,8 @@ "version": "9.0.0", "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz", "integrity": "sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==", - "dev": true + "dev": true, + "requires": {} }, "stylelint-config-recommended-scss": { "version": "8.0.0", @@ -59839,7 +59855,8 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/stylelint-use-logical-spec/-/stylelint-use-logical-spec-4.1.0.tgz", "integrity": "sha512-uZ5mOST2gZ2QDUhX5JwXMojSibWrHw774wUvLr+OcGluXeh8WYp8AzS0d2ilqrX6Ao2xGCARUAA3pEO7y4kDgg==", - "dev": true + "dev": true, + "requires": {} }, "supports-color": { "version": "5.5.0", @@ -62077,12 +62094,6 @@ } } }, - "webpack-filter-warnings-plugin": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz", - "integrity": "sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==", - "dev": true - }, "webpack-hot-middleware": { "version": "2.25.3", "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.3.tgz", From e54c1812e49e023d7b50efd2c85aaf1869f95d4d Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 8 Dec 2022 16:59:13 -0600 Subject: [PATCH 35/59] remove usage of intlindicator in action render methods --- src/components/action/action.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/action/action.tsx b/src/components/action/action.tsx index 750b02728f3..ea096fe8cc7 100755 --- a/src/components/action/action.tsx +++ b/src/components/action/action.tsx @@ -135,6 +135,7 @@ export class Action @Prop({ mutable: true }) messageOverrides: Partial; @Watch("intlLoading") + @Watch("intlIndicator") @Watch("messageOverrides") onMessagesChange(): void { /* wired up by t9n util */ @@ -236,7 +237,7 @@ export class Action } renderIndicatorText(): VNode { - const { indicator, intlIndicator, indicatorId, buttonId } = this; + const { indicator, messages, indicatorId, buttonId } = this; return (
- {indicator ? intlIndicator : null} + {indicator ? messages.indicator : null}
); } @@ -292,10 +293,10 @@ export class Action indicator, indicatorId, buttonId, - intlIndicator + messages } = this; - const ariaLabel = `${label || text}${indicator ? ` (${intlIndicator})` : ""}`; + const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : ""}`; const buttonClasses = { [CSS.button]: true, From 4be2cd4615600c40ddb6abd45fb7f5112493071c Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 9 Dec 2022 11:09:12 -0600 Subject: [PATCH 36/59] add type for supported locales --- src/utils/locale.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/utils/locale.ts b/src/utils/locale.ts index 4ca385cde60..88c6aaca3d2 100644 --- a/src/utils/locale.ts +++ b/src/utils/locale.ts @@ -124,8 +124,14 @@ export const numberingSystems = [ "tibt" ] as const; +export const supportedLocales = [...new Set([...t9nLocales, ...locales])] as const; + export type NumberingSystem = typeof numberingSystems[number]; +export type SupportedLocales = typeof supportedLocales[number]; + +console.log(supportedLocales); + const isNumberingSystemSupported = (numberingSystem: string): numberingSystem is NumberingSystem => numberingSystems.includes(numberingSystem as NumberingSystem); @@ -145,7 +151,8 @@ export const getSupportedNumberingSystem = (numberingSystem: string): NumberingS * @param locale – the BCP 47 locale code * @param context - specifies whether the locale code should match in the context of CLDR or T9N (translation) */ -export function getSupportedLocale(locale: string, context: "cldr" | "t9n" = "cldr"): string { +export function getSupportedLocale(locale: string, context: "cldr" | "t9n" = "cldr"): SupportedLocales { + console.log(supportedLocales); const contextualLocales = context === "cldr" ? locales : t9nLocales; if (!locale) { From 6eec2745ffb732f7df574354e52ae946c0e7a4f2 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 9 Dec 2022 11:49:51 -0600 Subject: [PATCH 37/59] feedback changes --- .../date-picker-month-header.tsx | 36 ++++++++++--------- src/components/date-picker/date-picker.tsx | 5 +-- src/components/input/input.tsx | 1 - src/components/scrim/scrim.tsx | 2 +- src/utils/locale.ts | 3 -- src/utils/t9n.ts | 2 +- 6 files changed, 22 insertions(+), 27 deletions(-) diff --git a/src/components/date-picker-month-header/date-picker-month-header.tsx b/src/components/date-picker-month-header/date-picker-month-header.tsx index 673ebbf063a..7fc045dd4d2 100644 --- a/src/components/date-picker-month-header/date-picker-month-header.tsx +++ b/src/components/date-picker-month-header/date-picker-month-header.tsx @@ -19,6 +19,7 @@ import { BUDDHIST_CALENDAR_YEAR_OFFSET, CSS, ICON } from "./resources"; import { isActivationKey } from "../../utils/key"; import { numberStringFormatter } from "../../utils/locale"; import { closestElementCrossShadowBoundary } from "../../utils/dom"; +import { Messages } from "../date-picker/assets/date-picker/t9n"; @Component({ tag: "calcite-date-picker-month-header", @@ -57,21 +58,21 @@ export class DatePickerMonthHeader { /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */ @Prop() max: Date; - /** Accessible name for the component's previous month button. */ - @Prop() intlPrevMonth: string; - - /** Accessible name for the component's next month button. */ - @Prop() intlNextMonth: string; - - /** Accessible name for the component's year input. */ - @Prop() intlYear: string; - /** Specifies the size of the component. */ @Prop({ reflect: true }) scale: Scale; /** CLDR locale data for translated calendar info */ @Prop() localeData: DateLocaleData; + /** + * This property specifies accessible strings for the component's previous month button ,next month button & year input elements. + * Made into a prop for testing purposes only. + * + * @internal + * @readonly + */ + @Prop({ mutable: true }) messages: Messages; + //-------------------------------------------------------------------------- // // Events @@ -104,7 +105,8 @@ export class DatePickerMonthHeader { } renderContent(): VNode { - if (!this.activeDate || !this.localeData) { + const { messages, localeData, activeDate } = this; + if (!activeDate || !localeData) { return null; } @@ -118,20 +120,20 @@ export class DatePickerMonthHeader { }; } - const activeMonth = this.activeDate.getMonth(); - const { months, unitOrder } = this.localeData; + const activeMonth = activeDate.getMonth(); + const { months, unitOrder } = localeData; const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth]; - const localizedYear = this.formatCalendarYear(this.activeDate.getFullYear()); + const localizedYear = this.formatCalendarYear(activeDate.getFullYear()); const iconScale = this.scale === "l" ? "m" : "s"; const order = getOrder(unitOrder); const reverse = order.indexOf("y") < order.indexOf("m"); - const suffix = this.localeData.year?.suffix; + const suffix = localeData.year?.suffix; return ( diff --git a/src/components/scrim/scrim.tsx b/src/components/scrim/scrim.tsx index 20cb56cd206..f7402ec3537 100644 --- a/src/components/scrim/scrim.tsx +++ b/src/components/scrim/scrim.tsx @@ -108,7 +108,7 @@ export class Scrim implements LocalizedComponent, T9nComponent { render(): VNode { const { el, loading, messages } = this; const hasContent = el.innerHTML.trim().length > 0; - const loaderNode = loading ? : null; + const loaderNode = loading ? : null; const contentNode = hasContent ? (
diff --git a/src/utils/locale.ts b/src/utils/locale.ts index 88c6aaca3d2..8defef66202 100644 --- a/src/utils/locale.ts +++ b/src/utils/locale.ts @@ -130,8 +130,6 @@ export type NumberingSystem = typeof numberingSystems[number]; export type SupportedLocales = typeof supportedLocales[number]; -console.log(supportedLocales); - const isNumberingSystemSupported = (numberingSystem: string): numberingSystem is NumberingSystem => numberingSystems.includes(numberingSystem as NumberingSystem); @@ -152,7 +150,6 @@ export const getSupportedNumberingSystem = (numberingSystem: string): NumberingS * @param context - specifies whether the locale code should match in the context of CLDR or T9N (translation) */ export function getSupportedLocale(locale: string, context: "cldr" | "t9n" = "cldr"): SupportedLocales { - console.log(supportedLocales); const contextualLocales = context === "cldr" ? locales : t9nLocales; if (!locale) { diff --git a/src/utils/t9n.ts b/src/utils/t9n.ts index 3e85c145108..eec3e503c45 100644 --- a/src/utils/t9n.ts +++ b/src/utils/t9n.ts @@ -135,7 +135,7 @@ export interface T9nComponent extends LocalizedComponent { /** * This property holds all messages used by the component's rendering. * - * This prop should use the `@State` decorator. + * This prop should use the `@Prop` decorator. It uses `@Prop` decorator for testing purpose only. */ messages: MessageBundle; From 90a6a696cec39892d14e48ecb1053e969f949112 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 9 Dec 2022 14:28:15 -0600 Subject: [PATCH 38/59] fix test errors --- src/components/date-picker/date-picker.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/date-picker/date-picker.e2e.ts b/src/components/date-picker/date-picker.e2e.ts index 3747f870066..452724c8502 100644 --- a/src/components/date-picker/date-picker.e2e.ts +++ b/src/components/date-picker/date-picker.e2e.ts @@ -262,12 +262,12 @@ describe("calcite-date-picker", () => { expect(minDateAsTime).toEqual(new Date(minDateString).getTime()); }); - it("passes down the default intlYear prop to child date-picker-month-header", async () => { + it("passes down the default year prop to child date-picker-month-header", async () => { const page = await newE2EPage(); await page.setContent(html``); const date = await page.find(`calcite-date-picker >>> calcite-date-picker-month-header`); - expect(await date.getProperty("intlYear")).toEqual("Year"); + expect(await date.getProperty("messages.year")).toEqual("Year"); }); it("supports translations", () => t9n("calcite-date-picker")); From 2db00c6ce9cdf5a902a9f0ed5fa5f0201e52a650 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 9 Dec 2022 16:45:18 -0600 Subject: [PATCH 39/59] fix date-picker test error --- .../date-picker-month-header.e2e.ts | 11 ++++++++++- src/components/date-picker/date-picker.e2e.ts | 6 +++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/date-picker-month-header/date-picker-month-header.e2e.ts b/src/components/date-picker-month-header/date-picker-month-header.e2e.ts index 09644dca685..8267f386b9e 100644 --- a/src/components/date-picker-month-header/date-picker-month-header.e2e.ts +++ b/src/components/date-picker-month-header/date-picker-month-header.e2e.ts @@ -50,6 +50,11 @@ describe("calcite-date-picker-month-header", () => { dateMonthHeader.activeDate = now; dateMonthHeader.selectedDate = now; dateMonthHeader.localeData = localeData; + dateMonthHeader.messages = { + nextMonth: "Next month", + prevMonth: "Previous month", + year: "Year" + }; document.body.innerHTML = ""; document.body.append(dateMonthHeader); @@ -74,7 +79,11 @@ describe("calcite-date-picker-month-header", () => { dateMonthHeader.activeDate = now; dateMonthHeader.selectedDate = now; dateMonthHeader.localeData = localeData; - dateMonthHeader.intlYear = "Year"; + dateMonthHeader.messages = { + nextMonth: "Next month", + prevMonth: "Previous month", + year: "Year" + }; document.body.innerHTML = ""; document.body.append(dateMonthHeader); diff --git a/src/components/date-picker/date-picker.e2e.ts b/src/components/date-picker/date-picker.e2e.ts index 452724c8502..21e651cbbde 100644 --- a/src/components/date-picker/date-picker.e2e.ts +++ b/src/components/date-picker/date-picker.e2e.ts @@ -267,7 +267,11 @@ describe("calcite-date-picker", () => { await page.setContent(html``); const date = await page.find(`calcite-date-picker >>> calcite-date-picker-month-header`); - expect(await date.getProperty("messages.year")).toEqual("Year"); + expect(await date.getProperty("messages")).toEqual({ + nextMonth: "Next month", + prevMonth: "Previous month", + year: "Year" + }); }); it("supports translations", () => t9n("calcite-date-picker")); From bbe1214fabe2076c03043a62ef1d2bd720d6998f Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 9 Dec 2022 17:48:53 -0600 Subject: [PATCH 40/59] remove is-active attr on loader in block --- src/components/block/block.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/block/block.tsx b/src/components/block/block.tsx index 0ffe3d97e05..d78d2f71e05 100644 --- a/src/components/block/block.tsx +++ b/src/components/block/block.tsx @@ -316,7 +316,7 @@ export class Block headerContent )} {loading ? ( - + ) : hasControl ? (
From ceb98600beb5aedce60c2ab3dfd9c7a49af9d871 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 9 Dec 2022 17:52:55 -0600 Subject: [PATCH 41/59] add support for zh locale --- src/utils/locale.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/utils/locale.ts b/src/utils/locale.ts index 8defef66202..574431dd175 100644 --- a/src/utils/locale.ts +++ b/src/utils/locale.ts @@ -180,7 +180,17 @@ export function getSupportedLocale(locale: string, context: "cldr" | "t9n" = "cl } } - return contextualLocales.includes(locale) ? locale : defaultLocale; + // we can `zh-CN` as base translation for chinese locales which has no corresponding bundle. + if (locale === "zh") { + return "zh-CN"; + } + + if (!contextualLocales.includes(locale)) { + console.warn(`Translations for "${locale}" not found or invalid, falling back to english`); + return defaultLocale; + } + + return locale; } /** From 62f10b592676437fd9f7f3f2222db5a2f73c2232 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 12 Dec 2022 16:28:24 -0600 Subject: [PATCH 42/59] remove intl defaults from stories --- .../action-bar/action-bar.stories.ts | 17 ------------- .../action-pad/action-pad.stories.ts | 17 ------------- src/components/card/card.stories.ts | 25 ------------------- src/components/flow-item/flow-item.stories.ts | 13 ---------- src/components/panel/panel.stories.ts | 10 +------- 5 files changed, 1 insertion(+), 81 deletions(-) diff --git a/src/components/action-bar/action-bar.stories.ts b/src/components/action-bar/action-bar.stories.ts index 48b5de3c9ca..5a86db7b095 100644 --- a/src/components/action-bar/action-bar.stories.ts +++ b/src/components/action-bar/action-bar.stories.ts @@ -9,7 +9,6 @@ import { import readme from "./readme.md"; import { ATTRIBUTES } from "../../../.storybook/resources"; import { html } from "../../../support/formatting"; -import { TEXT } from "./resources"; import { storyFilters } from "../../../.storybook/helpers"; export default { @@ -41,22 +40,6 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ return this; } }, - { - name: "intl-expand", - commit(): Attribute { - this.value = text("intlExpand", TEXT.expand); - delete this.build; - return this; - } - }, - { - name: "intl-collapse", - commit(): Attribute { - this.value = text("intlCollapse", TEXT.collapse); - delete this.build; - return this; - } - }, { name: "position", commit(): Attribute { diff --git a/src/components/action-pad/action-pad.stories.ts b/src/components/action-pad/action-pad.stories.ts index ec98183e869..39e3369ff66 100644 --- a/src/components/action-pad/action-pad.stories.ts +++ b/src/components/action-pad/action-pad.stories.ts @@ -9,7 +9,6 @@ import { import readme from "./readme.md"; import { ATTRIBUTES } from "../../../.storybook/resources"; import { html } from "../../../support/formatting"; -import { TEXT } from "./resources"; import { storyFilters } from "../../../.storybook/helpers"; export default { @@ -48,22 +47,6 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ delete this.build; return this; } - }, - { - name: "intl-expand", - commit(): Attribute { - this.value = text("intlExpand", TEXT.expand); - delete this.build; - return this; - } - }, - { - name: "intl-collapse", - commit(): Attribute { - this.value = text("intlCollapse", TEXT.collapse); - delete this.build; - return this; - } } ], exceptions diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts index 9dc4a9da502..27ad72e4035 100644 --- a/src/components/card/card.stories.ts +++ b/src/components/card/card.stories.ts @@ -10,7 +10,6 @@ import { createComponentHTML as create } from "../../../.storybook/utils"; import { storyFilters } from "../../../.storybook/helpers"; -import { TEXT } from "./resources"; import { ATTRIBUTES } from "../../../.storybook/resources"; export default { @@ -49,30 +48,6 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ return this; } }, - { - name: "intl-loading", - commit(): Attribute { - this.value = text("intl-loading", TEXT.loading); - delete this.build; - return this; - } - }, - { - name: "intl-select", - commit(): Attribute { - this.value = text("intl-select", TEXT.select); - delete this.build; - return this; - } - }, - { - name: "intl-deselect", - commit(): Attribute { - this.value = text("intl-deselect", TEXT.deselect); - delete this.build; - return this; - } - }, { name: "thumbnail-position", commit(): Attribute { diff --git a/src/components/flow-item/flow-item.stories.ts b/src/components/flow-item/flow-item.stories.ts index c56ecb5868b..aa1715dde45 100644 --- a/src/components/flow-item/flow-item.stories.ts +++ b/src/components/flow-item/flow-item.stories.ts @@ -9,7 +9,6 @@ import { import { ATTRIBUTES } from "../../../.storybook/resources"; import readme from "./readme.md"; import { SLOTS } from "./resources"; -import { TEXT as PANEL_TEXT } from "../panel/resources"; import { html } from "../../../support/formatting"; import { storyFilters } from "../../../.storybook/helpers"; @@ -65,18 +64,6 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ delete this.build; return this; } - }, - { - name: "intl-close", - commit(): Attribute { - this.value = text( - "intlClose", - /* reusing `calcite-panel`'s value due to the current implementation */ - PANEL_TEXT.close - ); - delete this.build; - return this; - } } ], exceptions diff --git a/src/components/panel/panel.stories.ts b/src/components/panel/panel.stories.ts index e8e05a5e91e..a18a8160ff5 100644 --- a/src/components/panel/panel.stories.ts +++ b/src/components/panel/panel.stories.ts @@ -8,7 +8,7 @@ import { } from "../../../.storybook/utils"; import { ATTRIBUTES } from "../../../.storybook/resources"; import readme from "./readme.md"; -import { SLOTS, TEXT } from "./resources"; +import { SLOTS } from "./resources"; import { html } from "../../../support/formatting"; import { storyFilters } from "../../../.storybook/helpers"; @@ -64,14 +64,6 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ delete this.build; return this; } - }, - { - name: "intl-close", - commit(): Attribute { - this.value = text("intlClose", TEXT.close); - delete this.build; - return this; - } } ], exceptions From 67e80a33f99329b9b1909e7c5e65732618009415 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 12 Dec 2022 17:57:20 -0600 Subject: [PATCH 43/59] remove intl default value from stories --- src/components/flow/flow.stories.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/flow/flow.stories.ts b/src/components/flow/flow.stories.ts index 60869d287d4..a8eff1fb61e 100644 --- a/src/components/flow/flow.stories.ts +++ b/src/components/flow/flow.stories.ts @@ -42,18 +42,6 @@ const createFlowItemAttributes: (group: string) => Attributes = (group) => { { name: "description", value: text("description", "Description", group) - }, - { - name: "intl-back", - value: text("intlBack", TEXT.back, group) - }, - { - name: "intl-open", - value: text("intlOpen", TEXT.open, group) - }, - { - name: "intl-close", - value: text("intlClose", TEXT.close, group) } ]; }; From 0749eb7cedac885557529837c787988203e643d9 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 12 Dec 2022 18:33:18 -0600 Subject: [PATCH 44/59] fix mistyped locale codes --- .../action-group/action-group.stories.ts | 4 +- .../action-pad/action-pad.stories.ts | 61 +++++++++++-------- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/components/action-group/action-group.stories.ts b/src/components/action-group/action-group.stories.ts index f00352732d1..eadffc6a552 100644 --- a/src/components/action-group/action-group.stories.ts +++ b/src/components/action-group/action-group.stories.ts @@ -61,7 +61,7 @@ export const norwegianLocale_TestOnly = (): string => html`
- +
`; @@ -73,7 +73,7 @@ export const GreekLocale_TestOnly = (): string => html`
`; export const TurkishLocale_TestOnly = (): string => html`
- +
`; diff --git a/src/components/action-pad/action-pad.stories.ts b/src/components/action-pad/action-pad.stories.ts index 39e3369ff66..96b6ab8f53e 100644 --- a/src/components/action-pad/action-pad.stories.ts +++ b/src/components/action-pad/action-pad.stories.ts @@ -126,33 +126,44 @@ withTooltip_NoTest.parameters = { chromatic: { disableSnapshot: true } }; -export const hebrewLocale_TestOnly = (): string => ` - - -`; +export const hebrewLocale_TestOnly = (): string => html`
+ + + + +
`; -export const norwegianLocale_TestOnly = (): string => ` - - -`; +export const norwegianLocale_TestOnly = (): string => html`
+ + + + +
`; -export const spanishLocale_TestOnly = (): string => ` - - -`; +export const spanishLocale_TestOnly = (): string => html`
+ + + + +
`; -export const taiwanLocale_TestOnly = (): string => ` - - -`; +export const taiwanLocale_TestOnly = (): string => html`
+ + + + +
`; -export const russianLocale_TestOnly = (): string => ` - - -`; +export const russianLocale_TestOnly = (): string => html`
+ + + + +
`; -export const romanianMoldovaLocale_TestOnly = - (): string => ` - - -`; +export const romanianMoldovaLocale_TestOnly = (): string => html`
+ + + + +
`; From c8aeea6679c4a16020508433fd790dc2e696c915 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 13 Dec 2022 12:17:41 -0600 Subject: [PATCH 45/59] delay setup messages in action-pad --- src/components/action-pad/action-pad.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx index 399e7b43a20..b21b18882e3 100755 --- a/src/components/action-pad/action-pad.tsx +++ b/src/components/action-pad/action-pad.tsx @@ -169,8 +169,8 @@ export class ActionPad async componentWillLoad(): Promise { setUpLoadableComponent(this); const { el, expanded } = this; - await setUpMessages(this); toggleChildActionText({ parent: el, expanded }); + await setUpMessages(this); } componentDidLoad(): void { From c98c1b19cd9852fa156ed0062e1c0462b772dbdd Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 13 Dec 2022 13:11:31 -0600 Subject: [PATCH 46/59] refactor action-pad stories --- .../action-pad/action-pad.stories.ts | 30 ++++--------------- src/utils/locale.ts | 4 ++- 2 files changed, 9 insertions(+), 25 deletions(-) diff --git a/src/components/action-pad/action-pad.stories.ts b/src/components/action-pad/action-pad.stories.ts index 96b6ab8f53e..a5d760232c9 100644 --- a/src/components/action-pad/action-pad.stories.ts +++ b/src/components/action-pad/action-pad.stories.ts @@ -127,43 +127,25 @@ withTooltip_NoTest.parameters = { }; export const hebrewLocale_TestOnly = (): string => html`
- - - - +
`; export const norwegianLocale_TestOnly = (): string => html`
- - - - +
`; export const spanishLocale_TestOnly = (): string => html`
- - - - +
`; export const taiwanLocale_TestOnly = (): string => html`
- - - - +
`; export const russianLocale_TestOnly = (): string => html`
- - - - +
`; export const romanianMoldovaLocale_TestOnly = (): string => html`
- - - - +
`; diff --git a/src/utils/locale.ts b/src/utils/locale.ts index 574431dd175..1d36710043d 100644 --- a/src/utils/locale.ts +++ b/src/utils/locale.ts @@ -186,7 +186,9 @@ export function getSupportedLocale(locale: string, context: "cldr" | "t9n" = "cl } if (!contextualLocales.includes(locale)) { - console.warn(`Translations for "${locale}" not found or invalid, falling back to english`); + console.warn( + `Translations for the "${locale}" locale are not available and will fall back to the default, English (en).` + ); return defaultLocale; } From de0fcd5a0aca7149a57cfa6f79f1d8241f2cf754 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 13 Dec 2022 14:05:35 -0600 Subject: [PATCH 47/59] refactor --- src/components/action-pad/action-pad.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx index b21b18882e3..3ffc897de8f 100755 --- a/src/components/action-pad/action-pad.tsx +++ b/src/components/action-pad/action-pad.tsx @@ -167,10 +167,10 @@ export class ActionPad } async componentWillLoad(): Promise { + await setUpMessages(this); setUpLoadableComponent(this); const { el, expanded } = this; toggleChildActionText({ parent: el, expanded }); - await setUpMessages(this); } componentDidLoad(): void { From 31278ee800015e2bf29f1b944b9775c98ca5dced Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 13 Dec 2022 14:09:08 -0600 Subject: [PATCH 48/59] add comment for renaming intl props of ExpandToggle --- src/components/action-bar/action-bar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx index 015f8e30f2a..e933b30f398 100755 --- a/src/components/action-bar/action-bar.tsx +++ b/src/components/action-bar/action-bar.tsx @@ -348,6 +348,7 @@ export class ActionBar Date: Tue, 13 Dec 2022 14:28:28 -0600 Subject: [PATCH 49/59] fix tests --- src/components/action-pad/action-pad.tsx | 2 +- src/components/value-list/value-list.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx index 3ffc897de8f..b21b18882e3 100755 --- a/src/components/action-pad/action-pad.tsx +++ b/src/components/action-pad/action-pad.tsx @@ -167,10 +167,10 @@ export class ActionPad } async componentWillLoad(): Promise { - await setUpMessages(this); setUpLoadableComponent(this); const { el, expanded } = this; toggleChildActionText({ parent: el, expanded }); + await setUpMessages(this); } componentDidLoad(): void { diff --git a/src/components/value-list/value-list.tsx b/src/components/value-list/value-list.tsx index 9c03907d336..49379ec78f4 100644 --- a/src/components/value-list/value-list.tsx +++ b/src/components/value-list/value-list.tsx @@ -248,8 +248,8 @@ export class ValueList< } async componentWillLoad(): Promise { - await setUpMessages(this); setUpLoadableComponent(this); + await setUpMessages(this); } componentDidLoad(): void { From 20053de8575e0e225e27730bf333523dbfd2f58c Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 13 Dec 2022 15:24:09 -0600 Subject: [PATCH 50/59] add delay for screenshots --- src/components/action-pad/action-pad.stories.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/action-pad/action-pad.stories.ts b/src/components/action-pad/action-pad.stories.ts index a5d760232c9..6640fb631eb 100644 --- a/src/components/action-pad/action-pad.stories.ts +++ b/src/components/action-pad/action-pad.stories.ts @@ -14,7 +14,10 @@ import { storyFilters } from "../../../.storybook/helpers"; export default { title: "Components/Action Pad", parameters: { - notes: readme + notes: readme, + chromatic: { + delay: 500 + } }, ...storyFilters() }; From 6028c2850662b75fa9bb63158d68bc7929cea8e3 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 13 Dec 2022 15:26:50 -0600 Subject: [PATCH 51/59] remove stepstory --- src/components/color-picker/color-picker.stories.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/color-picker/color-picker.stories.ts b/src/components/color-picker/color-picker.stories.ts index 6dee1b91ee4..abbd3500190 100644 --- a/src/components/color-picker/color-picker.stories.ts +++ b/src/components/color-picker/color-picker.stories.ts @@ -99,13 +99,6 @@ export const thumbsOnEdgeDoNotOverflowContainer_TestOnly = (): string => html` html``; -export const colorFieldAndHueSliderAreResizedAfterScaleChange_TestOnly = stepStory( - (): string => html` `, - createSteps("calcite-color-picker") - .executeScript(`document.querySelector("calcite-color-picker").scale = "s"`) - .snapshot("Color field and hue slider are resized after scale change") -); - export const ArabicLocale_TestOnly = (): string => html` `; export const NorwegianLocale_TestOnly = (): string => html` `; @@ -116,4 +109,4 @@ export const JapaneseLocale_TestOnly = (): string => html` html` `; -export const ThaiLocale_TestOnly = (): string => html` ` \ No newline at end of file +export const ThaiLocale_TestOnly = (): string => html` `; From 30d02ee185f874298a9266b58a218098859f8a19 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 13 Dec 2022 15:42:11 -0600 Subject: [PATCH 52/59] bump delay --- src/components/action-pad/action-pad.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/action-pad/action-pad.stories.ts b/src/components/action-pad/action-pad.stories.ts index 6640fb631eb..1063789caae 100644 --- a/src/components/action-pad/action-pad.stories.ts +++ b/src/components/action-pad/action-pad.stories.ts @@ -16,7 +16,7 @@ export default { parameters: { notes: readme, chromatic: { - delay: 500 + delay: 1000 } }, ...storyFilters() From b41d0bd24cd7d0c5f9285667b7f2ce70ac9fa465 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Tue, 13 Dec 2022 15:59:20 -0600 Subject: [PATCH 53/59] bump delay more --- src/components/action-pad/action-pad.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/action-pad/action-pad.stories.ts b/src/components/action-pad/action-pad.stories.ts index 1063789caae..e9d3cf4f862 100644 --- a/src/components/action-pad/action-pad.stories.ts +++ b/src/components/action-pad/action-pad.stories.ts @@ -16,7 +16,7 @@ export default { parameters: { notes: readme, chromatic: { - delay: 1000 + delay: 1500 } }, ...storyFilters() From f52ca25c753aa1155bdff8a76cc4bf70e60b227b Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 14 Dec 2022 12:04:13 -0600 Subject: [PATCH 54/59] add page.wait in shared list tests --- src/components/pick-list/shared-list-tests.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/pick-list/shared-list-tests.ts b/src/components/pick-list/shared-list-tests.ts index b8d85fd4f0c..09ffbee2265 100644 --- a/src/components/pick-list/shared-list-tests.ts +++ b/src/components/pick-list/shared-list-tests.ts @@ -193,6 +193,7 @@ export function keyboardNavigation(listType: ListType): void { ` }); const list = await page.find(`calcite-${listType}-list`); + await page.waitForChanges(); expect(await list.getProperty("filteredItems")).toHaveLength(2); expect(await list.getProperty("filteredData")).toHaveLength(2); expect(await list.getProperty("filterText")).toBe(undefined); From f24478a4a0dd36c6ecebed387750452d2fef6022 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 14 Dec 2022 12:10:58 -0600 Subject: [PATCH 55/59] doc update --- conventions/Internationalization.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/conventions/Internationalization.md b/conventions/Internationalization.md index 2c8153edb4a..c98941ad02d 100644 --- a/conventions/Internationalization.md +++ b/conventions/Internationalization.md @@ -21,7 +21,7 @@ For these properties, you should use the internal `getElementDir` helper to appl ## Translation (t9n) -Previously, components provided Intl props (`intl`) to allow users to pass string translations. While this is still supported for backwards compatibility, our components also have translations built-in. +Previously, components provided Intl properties (`intl`) to allow users to pass string translations. While this is still supported for backwards compatibility, our components also have translations built-in. The following section covers how to add built-in translation support to components. @@ -38,21 +38,21 @@ This pattern enables components to support built-in translations. In order to su 3. Use the `setUpMessages` util in the component's `componentWillLoad` lifecycle methods. This must be awaited on to have an initial set of strings available before rendering. 4. Use the `connectMessages`/`disconnectMessages` utils in the component's `connectedCallback`/`disconnectedCallback` lifecycle methods. This will set up and tear down supporting methods on the component. 5. Add an appropriate E2E test by using the `t9n` common test helper. -6. Compound components ( e.g. input-date-picker) that are neither localized nor `t9n` need to forward `intl` props into supporting components. - 1. Add the `messageOverrides` prop. - 2. Mark `intl` props as optional, and add a deprecation notice pointing to `messageOverrides` as the new solution. - 3. Parse the `messageOverrides` along with `intl` props into supporting components in render method. +6. Components such as `input-date-picker` are neither localized nor `t9n` need to forward `intl` props into supporting components. + 1. Add the `messageOverrides` property. + 2. Mark `intl` properties as optional, and add a deprecation notice pointing to `messageOverrides` as the new solution. + 3. Parse the `messageOverrides` along with `intl` properties into supporting components in render method. 7. Internal components which support public components requires `t9n` properties only to forward the messages. #### Notes - This pattern depends on `LocalizedComponent` being implemented. - `connectLocalized` (from `LocalizedComponent`) must be called before `connectMessages`. -- Although `intl` props are supported, message overrides have the higher precedence. +- Although `intl` properties are supported, message overrides have the higher precedence. - If a message string has a matching `intl` prop, its translation bundle message keys must match the same prop name without the `intl` prefix (e.g., `intlClose` -> `close`) - You can also look at the interface and util documentation for additional info. -- The internal `messages` prop should be used as the source of truth for translations in rendering. -- List of supported locales can be found [here](https://developers.arcgis.com/calcite-design-system/localization/#locale-support). +- The internal `messages` property should be used as the source of truth for translations in rendering. +- [Localization support page](https://developers.arcgis.com/calcite-design-system/localization/#locale-support). ## Translated strings @@ -63,7 +63,7 @@ In the future it will likely become necessary to provide string translations for - https://medium.com/stencil-tricks/implementing-internationalisation-i18n-with-stencil-5e6559554117 and https://codesandbox.io/s/43pmx55vo9 - https://github.com/ionic-team/ionic-stencil-conference-app/issues/69 -Until we implement a `lang` facility and set up translations for all components, we have been allowing a small number of strings to be passed in as props. Props that represent translated strings should have the syntax: `text-label-x`, where `x` is the name for the string. For example, when providing a string from "Close", use the prop name `text-label-close`. In the component, these props should default to their English equivalent (this is useful for non-localized apps): +Until we implement a `lang` facility and set up translations for all components, we have been allowing a small number of strings to be passed in as properties. Properties that represent translated strings should have the syntax: `text-label-x`, where `x` is the name for the string. For example, when providing a string from "Close", use the property name `text-label-close`. In the component, these properties should default to their English equivalent (this is useful for non-localized apps): ``` @Prop() textLabelClose: string = 'Close'; From 1d678d3dfd4fd377dc7c458e19560dba87252609 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 14 Dec 2022 13:00:17 -0600 Subject: [PATCH 56/59] add more waitForChanges( ) in shared list tests --- src/components/pick-list/shared-list-tests.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/pick-list/shared-list-tests.ts b/src/components/pick-list/shared-list-tests.ts index 09ffbee2265..11f67af5271 100644 --- a/src/components/pick-list/shared-list-tests.ts +++ b/src/components/pick-list/shared-list-tests.ts @@ -177,6 +177,8 @@ export function keyboardNavigation(listType: ListType): void { ` }); + await page.waitForChanges(); + const list = await page.find(`calcite-${listType}-list`); expect(await list.getProperty("filteredItems")).toHaveLength(1); expect(await list.getProperty("filteredData")).toHaveLength(1); @@ -192,8 +194,9 @@ export function keyboardNavigation(listType: ListType): void { ` }); - const list = await page.find(`calcite-${listType}-list`); await page.waitForChanges(); + + const list = await page.find(`calcite-${listType}-list`); expect(await list.getProperty("filteredItems")).toHaveLength(2); expect(await list.getProperty("filteredData")).toHaveLength(2); expect(await list.getProperty("filterText")).toBe(undefined); From 3e809d6b71b27c20bff10bf028ba7b558726e7e1 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 14 Dec 2022 13:20:35 -0600 Subject: [PATCH 57/59] refactor --- conventions/Internationalization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/conventions/Internationalization.md b/conventions/Internationalization.md index c98941ad02d..0bbe8dee4f7 100644 --- a/conventions/Internationalization.md +++ b/conventions/Internationalization.md @@ -52,7 +52,7 @@ This pattern enables components to support built-in translations. In order to su - If a message string has a matching `intl` prop, its translation bundle message keys must match the same prop name without the `intl` prefix (e.g., `intlClose` -> `close`) - You can also look at the interface and util documentation for additional info. - The internal `messages` property should be used as the source of truth for translations in rendering. -- [Localization support page](https://developers.arcgis.com/calcite-design-system/localization/#locale-support). +- List of supported locales can be found on our [Localization support page](https://developers.arcgis.com/calcite-design-system/localization/#locale-support). ## Translated strings From 2890a2712cc43457266c7577e920ec1b15b16ef0 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 14 Dec 2022 13:39:38 -0600 Subject: [PATCH 58/59] cleanup --- src/components/pick-list/shared-list-tests.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/pick-list/shared-list-tests.ts b/src/components/pick-list/shared-list-tests.ts index 11f67af5271..b8d85fd4f0c 100644 --- a/src/components/pick-list/shared-list-tests.ts +++ b/src/components/pick-list/shared-list-tests.ts @@ -177,8 +177,6 @@ export function keyboardNavigation(listType: ListType): void { ` }); - await page.waitForChanges(); - const list = await page.find(`calcite-${listType}-list`); expect(await list.getProperty("filteredItems")).toHaveLength(1); expect(await list.getProperty("filteredData")).toHaveLength(1); @@ -194,8 +192,6 @@ export function keyboardNavigation(listType: ListType): void { ` }); - await page.waitForChanges(); - const list = await page.find(`calcite-${listType}-list`); expect(await list.getProperty("filteredItems")).toHaveLength(2); expect(await list.getProperty("filteredData")).toHaveLength(2); From f36acf2193bd0eedf89de89e48d4193a3806d08a Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 14 Dec 2022 13:55:50 -0600 Subject: [PATCH 59/59] increase delay --- src/components/action-pad/action-pad.stories.ts | 2 +- src/components/action-pad/action-pad.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/action-pad/action-pad.stories.ts b/src/components/action-pad/action-pad.stories.ts index e9d3cf4f862..070c478fe7a 100644 --- a/src/components/action-pad/action-pad.stories.ts +++ b/src/components/action-pad/action-pad.stories.ts @@ -16,7 +16,7 @@ export default { parameters: { notes: readme, chromatic: { - delay: 1500 + delay: 5000 } }, ...storyFilters() diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx index 0b4a73cccb9..f9ba78db640 100755 --- a/src/components/action-pad/action-pad.tsx +++ b/src/components/action-pad/action-pad.tsx @@ -155,9 +155,9 @@ export class ActionPad // -------------------------------------------------------------------------- connectedCallback(): void { + connectConditionalSlotComponent(this); connectLocalized(this); connectMessages(this); - connectConditionalSlotComponent(this); } disconnectedCallback(): void {