feat(button): add built-in translations

src/components/button/button.e2e.ts

@@ -1,5 +1,5 @@
 import { E2EElement, newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden } from "../../tests/commonTests";
+import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden, t9n } from "../../tests/commonTests";
 import { CSS } from "./resources";
 import { GlobalTestProps } from "../../tests/utils";
 import { html } from "../../../support/formatting";
@@ -43,10 +43,6 @@ describe("calcite-button", () => {
         propertyName: "iconStart",
         defaultValue: undefined
       },
-      {
-        propertyName: "intlLoading",
-        defaultValue: "Loading"
-      },
       {
         propertyName: "loading",
         defaultValue: false
@@ -601,4 +597,6 @@ describe("calcite-button", () => {
     it("submits", async () => assertOnFormButtonType("submit"));
     it("resets", async () => assertOnFormButtonType("reset"));
   });
+
+  it("supports translation", () => t9n("calcite-button"));
 });

src/components/button/button.tsx

@@ -1,13 +1,22 @@
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, VNode, Watch } from "@stencil/core";
-import { CSS, TEXT } from "./resources";
+import { CSS } from "./resources";
 import { closestElementCrossShadowBoundary } from "../../utils/dom";
 import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
 import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 import { submitForm, resetForm, FormOwner } from "../../utils/form";
+import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import {
+  connectMessages,
+  disconnectMessages,
+  setUpMessages,
+  T9nComponent,
+  updateMessages
+} from "../../utils/t9n";
+import { Messages } from "./assets/button/t9n";
 
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
@@ -16,9 +25,12 @@ import { submitForm, resetForm, FormOwner } from "../../utils/form";
 @Component({
   tag: "calcite-button",
   styleUrl: "button.scss",
-  shadow: true
+  shadow: true,
+  assetsDirs: ["assets"]
 })
-export class Button implements LabelableComponent, InteractiveComponent, FormOwner {
+export class Button
+  implements LabelableComponent, InteractiveComponent, FormOwner, LocalizedComponent, T9nComponent
+{
   //--------------------------------------------------------------------------
   //
   //  Element
@@ -33,74 +45,103 @@ export class Button implements LabelableComponent, InteractiveComponent, FormOwn
   //
   //--------------------------------------------------------------------------
 
-  /** optionally specify alignment of button elements. */
+  /** Specifies the alignment of the component's elements. */
   @Prop({ reflect: true }) alignment?: ButtonAlignment = "center";
 
-  /** specify the appearance style of the button, defaults to solid. */
+  /** Specifies the appearance style of the component. */
   @Prop({ reflect: true }) appearance: ButtonAppearance = "solid";
 
-  /** Applies to the aria-label attribute on the button or hyperlink */
+  /** Accessible name for the component. */
   @Prop() label?: string;
 
-  /** specify the color of the button, defaults to blue */
+  /** Specifies the color of the component. */
   @Prop({ reflect: true }) color: ButtonColor = "blue";
 
-  /** is the button disabled  */
+  /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */
   @Prop({ reflect: true }) disabled = false;
 
-  /** optionally pass a href - used to determine if the component should render as a button or an anchor */
+  /**
+   * Specifies the URL of the linked resource, which can be set as an absolute or relative path.
+   */
   @Prop({ reflect: true }) href?: string;
 
   /** Specifies an icon to display at the end of the component. */
   @Prop({ reflect: true }) iconEnd?: string;
 
-  /** When true, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl?: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
   @Prop({ reflect: true }) iconStart?: string;
 
   /**
-   * string to override English loading text
+   * 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;
 
-  /** optionally add a calcite-loader component to the button, disabling interaction.  */
+  /**
+   * When `true`, a busy indicator is displayed and interaction is disabled.
+   */
   @Prop({ reflect: true }) loading = false;
 
-  /** The name attribute to apply to the button */
+  /** Specifies the name of the component on form submission. */
   @Prop({ reflect: true }) name?: string;
 
-  /** The rel attribute to apply to the hyperlink */
+  /**
+   * Defines the relationship between the `href` value and the current document.
+   *
+   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+   */
   @Prop({ reflect: true }) rel?: string;
 
   /**
-   * The form ID to associate with the component
+   * The form ID to associate with the component.
    *
-   * @deprecated – this property is no longer needed if placed inside a form.
+   * @deprecated – The property is no longer needed if the component is placed inside a form.
    */
   @Prop() form?: string;
 
-  /** optionally add a round style to the button  */
+  /** When `true`, adds a round style to the component. */
   @Prop({ reflect: true }) round = false;
 
-  /** specify the scale of the button, defaults to m */
+  /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
-  /** is the button a child of a calcite-split-button */
+  /** Specifies if the component is a child of a `calcite-split-button`. */
   @Prop({ reflect: true }) splitChild?: "primary" | "secondary" | false = false;
 
-  /** The target attribute to apply to the hyperlink */
+  /**
+   * Specifies where to open the linked document defined in the `href` property.
+   *
+   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
+   */
   @Prop({ reflect: true }) target?: string;
 
-  /** The type attribute to apply to the button */
+  /**
+   * Specifies the default behavior of the button.
+   *
+   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
+   */
   @Prop({ mutable: true, reflect: true }) type = "button";
 
-  /** specify the width of the button, defaults to auto */
+  /** Specifies the width of the component. */
   @Prop({ reflect: true }) width: Width = "auto";
 
+  /**
+   * 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("loading")
   loadingChanged(newValue: boolean, oldValue: boolean): void {
     if (!!newValue && !oldValue) {
@@ -113,13 +154,22 @@ export class Button implements LabelableComponent, InteractiveComponent, FormOwn
     }
   }
 
+  @Watch("intlLoading")
+  @Watch("defaultMessages")
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    /** referred in t9n util */
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
 
-  connectedCallback(): void {
+  async connectedCallback(): Promise<void> {
+    connectLocalized(this);
+    connectMessages(this);
     this.hasLoader = this.loading;
     this.setupTextContentObserver();
     connectLabel(this);
@@ -132,12 +182,15 @@ export class Button implements LabelableComponent, InteractiveComponent, FormOwn
   disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
     disconnectLabel(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
     this.formEl = null;
   }
 
-  componentWillLoad(): void {
+  async componentWillLoad(): Promise<void> {
     if (Build.isBrowser) {
       this.updateHasContent();
+      await setUpMessages(this);
     }
   }
 
@@ -154,7 +207,7 @@ export class Button implements LabelableComponent, InteractiveComponent, FormOwn
           active
           class={this.loading ? CSS.loadingIn : CSS.loadingOut}
           inline
-          label={this.intlLoading}
+          label={this.messages.loading}
           scale={this.scale === "l" ? "m" : "s"}
         />
       </div>
@@ -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 =

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

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