feat: support partial i18n in avatar (#8648)

vaadin · Feb 10, 2025 · ebc506d · ebc506d
1 parent c2d204f
commit ebc506d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 42 deletions.
diff --git a/packages/avatar-group/src/vaadin-avatar-group-mixin.d.ts b/packages/avatar-group/src/vaadin-avatar-group-mixin.d.ts
@@ -76,9 +76,9 @@ export declare class AvatarGroupMixinClass {
   maxItemsVisible: number | null | undefined;
 
   /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * _i18n_ object or just the property you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
    * ```

diff --git a/packages/avatar/src/vaadin-avatar-mixin.d.ts b/packages/avatar/src/vaadin-avatar-mixin.d.ts
@@ -5,17 +5,18 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { I18nMixinClass, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
 
-export interface AvatarI18n {
+export type AvatarI18n = PartialI18n<{
   anonymous: string;
-}
+}>;
 
 /**
  * A mixin providing common avatar functionality.
  */
 export declare function AvatarMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<AvatarMixinClass> & Constructor<FocusMixinClass> & T;
+): Constructor<AvatarMixinClass> & Constructor<I18nMixinClass<AvatarI18n>> & Constructor<FocusMixinClass> & T;
 
 export declare class AvatarMixinClass {
   /**
@@ -42,12 +43,11 @@ export declare class AvatarMixinClass {
   colorIndex: number | null | undefined;
 
   /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * _i18n_ object or just the property you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
-   *
    * ```
    * {
    *   // Translation of the anonymous user avatar tooltip.

diff --git a/packages/avatar/src/vaadin-avatar-mixin.js b/packages/avatar/src/vaadin-avatar-mixin.js
@@ -4,6 +4,11 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
+
+const DEFAULT_I18N = {
+  anonymous: 'anonymous',
+};
 
 /**
  * A mixin providing common avatar functionality.
@@ -12,7 +17,7 @@ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
  * @mixes FocusMixin
  */
 export const AvatarMixin = (superClass) =>
-  class AvatarMixinClass extends FocusMixin(superClass) {
+  class AvatarMixinClass extends I18nMixin(DEFAULT_I18N, FocusMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -51,32 +56,6 @@ export const AvatarMixin = (superClass) =>
           observer: '__colorIndexChanged',
         },
 
-        /**
-         * The object used to localize this component.
-         * To change the default localization, replace the entire
-         * _i18n_ object or just the property you want to modify.
-         *
-         * The object has the following JSON structure and default values:
-         *
-         * ```
-         * {
-         *   // Translation of the anonymous user avatar tooltip.
-         *   anonymous: 'anonymous'
-         * }
-         * ```
-         *
-         * @type {!AvatarI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          value: () => {
-            return {
-              anonymous: 'anonymous',
-            };
-          },
-        },
-
         /**
          * When true, the avatar has tooltip shown on hover and focus.
          * The tooltip text is based on the `name` and `abbr` properties.
@@ -106,11 +85,33 @@ export const AvatarMixin = (superClass) =>
     static get observers() {
       return [
         '__imgOrAbbrOrNameChanged(img, abbr, name)',
-        '__i18nChanged(i18n)',
+        '__i18nChanged(__effectiveI18n)',
         '__tooltipChanged(__tooltipNode, name, abbr)',
       ];
     }
 
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides all properties, or
+     * just the individual properties you want to change.
+     *
+     * The object has the following JSON structure and default values:
+     * ```
+     * {
+     *   // Translation of the anonymous user avatar tooltip.
+     *   anonymous: 'anonymous'
+     * }
+     * ```
+     * @return {!AvatarI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -212,13 +213,13 @@ export const AvatarMixin = (superClass) =>
     }
 
     /** @private */
-    __i18nChanged(i18n) {
-      if (i18n && i18n.anonymous) {
+    __i18nChanged(effectiveI18n) {
+      if (effectiveI18n && effectiveI18n.anonymous) {
         if (this.__oldAnonymous && this.__tooltipNode && this.__tooltipNode.text === this.__oldAnonymous) {
           this.__setTooltip();
         }
 
-        this.__oldAnonymous = i18n.anonymous;
+        this.__oldAnonymous = effectiveI18n.anonymous;
       }
     }
 
@@ -233,7 +234,7 @@ export const AvatarMixin = (superClass) =>
     __setTooltip(tooltip) {
       const tooltipNode = this.__tooltipNode;
       if (tooltipNode) {
-        tooltipNode.text = tooltip || this.i18n.anonymous;
+        tooltipNode.text = tooltip || this.__effectiveI18n.anonymous;
       }
     }