feat: support partial i18n in message input (#8837)

Author: sissbruecker

packages/message-input/src/vaadin-message-input-mixin.d.ts

@@ -5,15 +5,19 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
 
 export interface MessageInputI18n {
-  send: string;
-  message: string;
+  send?: string;
+  message?: string;
 }
 
 export declare function MessageInputMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> & Constructor<MessageInputMixinClass> & T;
+): Constructor<ControllerMixinClass> &
+  Constructor<I18nMixinClass<MessageInputI18n>> &
+  Constructor<MessageInputMixinClass> &
+  T;
 
 export declare class MessageInputMixinClass {
   /**
@@ -22,12 +26,11 @@ export declare class MessageInputMixinClass {
   value: string | null | undefined;
 
   /**
-   * The object used to localize this component.
-   * For changing the default localization, change the entire
-   * `i18n` object.
+   * 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:
-   *
    * ```
    * {
    *   // Used as the button label

packages/message-input/src/vaadin-message-input-mixin.js

@@ -4,15 +4,21 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 
+const DEFAULT_I18N = {
+  send: 'Send',
+  message: 'Message',
+};
+
 /**
  * @polymerMixin
  * @mixes ControllerMixin
  */
 export const MessageInputMixin = (superClass) =>
-  class MessageInputMixinClass extends ControllerMixin(superClass) {
+  class MessageInputMixinClass extends I18nMixin(DEFAULT_I18N, ControllerMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -24,35 +30,6 @@ export const MessageInputMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * The object used to localize this component.
-         * For changing the default localization, change the entire
-         * `i18n` object.
-         *
-         * The object has the following JSON structure and default values:
-         *
-         * ```
-         * {
-         *   // Used as the button label
-         *   send: 'Send',
-         *
-         *   // Used as the input field's placeholder and aria-label
-         *   message: 'Message'
-         * }
-         * ```
-         *
-         * @type {!MessageInputI18n}
-         * @default {English}
-         */
-        i18n: {
-          type: Object,
-          sync: true,
-          value: () => ({
-            send: 'Send',
-            message: 'Message',
-          }),
-        },
-
         /**
          * Set to true to disable this element.
          * @type {boolean}
@@ -80,11 +57,36 @@ export const MessageInputMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__buttonPropsChanged(_button, disabled, i18n)',
-        '__textAreaPropsChanged(_textArea, disabled, i18n, value)',
+        '__buttonPropsChanged(_button, disabled, __effectiveI18n)',
+        '__textAreaPropsChanged(_textArea, disabled, __effectiveI18n, value)',
       ];
     }
 
+    /**
+     * 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:
+     * ```
+     * {
+     *   // Used as the button label
+     *   send: 'Send',
+     *
+     *   // Used as the input field's placeholder and aria-label
+     *   message: 'Message'
+     * }
+     * ```
+     * @return {!MessageInputI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -134,20 +136,20 @@ export const MessageInputMixin = (superClass) =>
     }
 
     /** @private */
-    __buttonPropsChanged(button, disabled, i18n) {
+    __buttonPropsChanged(button, disabled, effectiveI18n) {
       if (button) {
         button.disabled = disabled;
-        button.textContent = i18n.send;
+        button.textContent = effectiveI18n.send;
       }
     }
 
     /** @private */
-    __textAreaPropsChanged(textArea, disabled, i18n, value) {
+    __textAreaPropsChanged(textArea, disabled, effectiveI18n, value) {
       if (textArea) {
         textArea.disabled = disabled;
         textArea.value = value;
 
-        const message = i18n.message;
+        const message = effectiveI18n.message;
         textArea.placeholder = message;
         textArea.accessibleName = message;
       }

packages/message-input/test/message-input.test.js

@@ -94,25 +94,25 @@ describe('message-input', () => {
 
   describe('i18n', () => {
     it('should translate button text', () => {
-      messageInput.i18n = { ...messageInput.i18n, send: 'Lähetä' };
+      messageInput.i18n = { send: 'Lähetä' };
       expect(button.innerText).to.be.equal('Lähetä');
     });
 
     it('should translate placeholder', () => {
-      messageInput.i18n = { ...messageInput.i18n, message: 'Viesti' };
+      messageInput.i18n = { message: 'Viesti' };
       expect(textArea.placeholder).to.be.equal('Viesti');
     });
 
     it('should translate aria-label', async () => {
-      messageInput.i18n = { ...messageInput.i18n, message: 'Viesti' };
+      messageInput.i18n = { message: 'Viesti' };
       await nextFrame();
       expect(textArea.inputElement.getAttribute('aria-label')).to.be.equal('Viesti');
     });
 
-    it('should remove aria-label attribute when translation not defined', async () => {
-      messageInput.i18n = {};
-      await nextFrame();
-      expect(textArea.inputElement.hasAttribute('aria-label')).to.equal(false);
+    it('should support partial i18n', () => {
+      messageInput.i18n = { send: 'Lähetä' };
+      expect(button.innerText).to.be.equal('Lähetä');
+      expect(textArea.placeholder).to.be.equal('Message');
     });
   });
 

packages/message-input/test/typings/message-input.types.ts

@@ -1,14 +1,20 @@
 import '../../vaadin-message-input.js';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import type { MessageInputSubmitEvent } from '../../vaadin-message-input.js';
+import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
+import type { MessageInputI18n, MessageInputSubmitEvent } from '../../vaadin-message-input.js';
 
 const assertType = <TExpected>(actual: TExpected) => actual;
 
 const input = document.createElement('vaadin-message-input');
 
 assertType<ControllerMixinClass>(input);
+assertType<I18nMixinClass<MessageInputI18n>>(input);
 
 input.addEventListener('submit', (event) => {
   assertType<MessageInputSubmitEvent>(event);
   assertType<string>(event.detail.value);
 });
+
+// I18n
+assertType<MessageInputI18n>({});
+assertType<MessageInputI18n>({ message: 'message' });