feat(action,action-bar, action-group,action-pad): add built in translation support

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"));
 });

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<Messages>;
+
+  @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<void> {
+    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 ? (
       <ExpandToggle
         el={el}
         expanded={expanded}
-        intlCollapse={collapseLabel}
-        intlExpand={expandLabel}
+        intlCollapse={messages.collapse}
+        intlExpand={messages.expand}
         position={position}
         ref={this.setExpandToggleRef}
         scale={scale}

src/components/action-bar/resources.ts

@@ -6,8 +6,3 @@ export const SLOTS = {
   bottomActions: "bottom-actions",
   expandTooltip: "expand-tooltip"
 };
-
-export const TEXT = {
-  expand: "Expand",
-  collapse: "Collapse"
-};

src/components/action-group/action-group.e2e.ts

@@ -1,4 +1,4 @@
-import { accessible, hidden, renders, slots } from "../../tests/commonTests";
+import { accessible, hidden, renders, slots, t9n } from "../../tests/commonTests";
 import { newE2EPage } from "@stencil/core/testing";
 import { SLOTS } from "./resources";
 
@@ -28,4 +28,6 @@ describe("calcite-action-group", () => {
 
     expect(await menu.getProperty("scale")).toBe("l");
   });
+
+  it("support translation", () => t9n("calcite-action-group"));
 });

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<Messages>;
+
+  @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<void> {
+    await setUpMessages(this);
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Component Methods
@@ -99,15 +147,15 @@ 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);
 
     return hasMenuItems ? (
       <calcite-action-menu
         expanded={expanded}
         flipPlacements={["left", "right"]}
-        label={intlMore || TEXT.more}
+        label={messages.more}
         onCalciteActionMenuOpenChange={this.setMenuOpen}
         open={menuOpen}
         placement={layout === "horizontal" ? "bottom-leading" : "leading-start"}
@@ -117,7 +165,7 @@ export class ActionGroup implements ConditionalSlotComponent {
           icon={ICONS.menu}
           scale={scale}
           slot={ACTION_MENU_SLOTS.trigger}
-          text={intlMore || TEXT.more}
+          text={messages.more}
           textEnabled={expanded}
         />
         <slot name={SLOTS.menuActions} />

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"
 };

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"));
 });