feat(button): add built-in translations (#5447)

* feat(button): add built-in translations * change watcher order * remove intl default test assertion * cleanup * handle edge case * fix build errors * docs(conventions): update style guide (#5530) * fix(slider): fix slider (single-value) error when clicking range (#5533) #5321 * 1.0.0-next.603 * ci(screener): reenable screener on pushes to master to update baseline (#5528) * ci(screener): renable screener on pushes to master to update baseline * cleanup Co-authored-by: Ben Elan <benelan@users.noreply.github.com> * fix: components should only react to primary button pointer events. (#5519) * fix: components should only react to primary pointer events. * cleanup. add pointerdown * fix test * make sure primary? * review fixes * 1.0.0-next.604 * feat(date-picker, input-date-picker): add numberingSystem property (#5488) * feat(date-picker): add numberingSystem property * docs(date-picker): cleanup lang/numberingSystem selection code * feat(input-date-picker): add numberingSystem property [WIP] * add stories * cleanup * fix spec test * cleanup * test(date-picker-day): fix failing disabled commonTest * merge master * cleanup * review cleanups * skip (de)localization when formatter is not initialized * cleanup and add a spec test * don't init formatter until necessary * final cleanup * replace stepped stories and change locale to lang * test(input-date-picker): add dark theme class to darkThemeRTL story Co-authored-by: Ben Elan <benelan@users.noreply.github.com> * 1.0.0-next.605 * docs: consistent api styling + define card thumbnailPosition (#5518) * docs(card): defined thumbnailPosition and consistent api styling across component * fix typo * remove extraneous dash * add backticks to comps * add b + c component consistency * edits * doc feedback * fix(value-list-item): Change drag handle color. (#5543) * 1.0.0-next.606 * fix: add custom logic for floating-ui positioning across shadow DOM in non-Chromium browsers (#5542) * fix: add custom code for floating-ui positioning across shadow DOM in non-Chrome browsers * tidy up * fix conditional to avoid setting up fix for non-browser environments * provide a way to opt-out of fix in favor of performance * fix: fix jarring positioning when a closed component is first opened (#5484) * fix: fix jarring positioning when a closed component is first opened * uncomment actual fix and switch story to be stepped * tweak story to capture initial positioning * fix typo * add missing setAttr argument * add delay before screenshot test setup * revisit approach to preserve debounced internal repositioning calls and correct positioning * drop unnecessary story * tidy up * fix hydrate build * restore leading option * update test * tweak positioning * drop scale transformto have correct dimensions initially * reposition immediately on componentDidLoad * update tests * revert index.html updates * use transitions to reset positioning * fix test. Co-authored-by: Matt Driscoll <mdriscoll@esri.com> * 1.0.0-next.607 * fix(calcite-loader, calcite-input-message): drop active in favor of hidden (#5537) * fix(calcite-loader, calcite-input-message): drop active in favor of hidden * changes applied to input-message * modify render assertion in the tests * remove redundant hidden prop along with documentation (global attribute) * add the link to mdn hidden attribute * 1.0.0-next.608 * feat(flow-item): Add calciteFlowItemScroll event (#5547) * feat(flow-item): Add scroll event. (#5546) * add a test * 1.0.0-next.609 * ci: adds w3c url for a11y issue filing (#5556) ci: update need info url for a11y * fix(date-picker): display correct date format order in header for zh-CN locale. (#5534) fix(date-picker): display correct date format order in header for zh-CN locale * 1.0.0-next.610 * fix(stepper-item): make sure numberingSystem is rendered on load (#5640) * fix(stepper-item): set numberingSystem in render block * cleanup * cleanup the cleanup Co-authored-by: Ben Elan <benelan@users.noreply.github.com> * 1.0.0-next.611 * feedback changes * remove browser build conditional * fix(slider): dragging range fires input event (#5641) #5449 * fix(tooltip): Prevent opening when closeOnClick is true and referenceElement is clicked quickly (#5643) * fix(tooltip): Stop hover event when closeOnClick is true and click occurs. (#5538) * add test * review cleanup * fix(types): fix type issue caused by unintentionally moving @floating-ui/dom as a dev dependency (#5649) * avoid fetching in hydrate builds * resolve conflicts * clean up * more cleanup Co-authored-by: Ben Elan <belan@esri.com> Co-authored-by: JC Franco <jfranco@esri.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <benelan@users.noreply.github.com> Co-authored-by: Matt Driscoll <mdriscoll@esri.com> Co-authored-by: Kitty Hurley <khurley@esri.com> Co-authored-by: Eliza Khachatryan <eli97736@esri.com> Co-authored-by: Alison Stump <alisonailea@users.noreply.github.com>
Esri · Oct 26, 2022 · 7bc4c50 · 7bc4c50
1 parent 10f8af9
commit 7bc4c50
Show file tree

Hide file tree

Showing 6 changed files with 714 additions and 39 deletions.
diff --git a/src/components/button/button.e2e.ts b/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"));
 });
diff --git a/src/components/button/button.tsx b/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 =

diff --git 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
@@ -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 };