refactor!: use custom button component in message-input (#10173)

Author: web-padawan

packages/message-input/src/styles/vaadin-message-input-base-styles.js

@@ -42,41 +42,4 @@ export const messageInputStyles = css`
     --vaadin-focus-ring-width: 0;
     --vaadin-input-field-background: transparent !important;
   }
-
-  ::slotted([slot='button']) {
-    flex: none;
-    align-self: end;
-    margin: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
-    --vaadin-button-border-width: 0;
-    --vaadin-button-background: transparent;
-    --vaadin-button-text-color: var(--vaadin-color);
-    --vaadin-button-padding: 0;
-  }
-
-  :host([theme~='icon-button']) ::slotted([slot='button']) {
-    width: var(--vaadin-icon-size, 1lh);
-    height: var(--vaadin-icon-size, 1lh);
-    color: transparent;
-    position: relative;
-    contain: strict;
-  }
-
-  :host([theme~='icon-button']) ::slotted([slot='button'])::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    mask-image: var(--_vaadin-icon-paper-airplane);
-    background: var(--vaadin-button-text-color);
-  }
-
-  :host([dir='rtl'][theme~='icon-button']) ::slotted([slot='button'])::before {
-    scale: -1;
-  }
-
-  @media (forced-colors: active) {
-    :host([theme~='icon-button']) ::slotted([slot='button']) {
-      forced-color-adjust: none;
-      --vaadin-button-text-color: CanvasText;
-    }
-  }
 `;

packages/message-input/src/styles/vaadin-message-input-button-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const messageInputButtonStyles: CSSResult;

packages/message-input/src/styles/vaadin-message-input-button-styles.js

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const messageInputButtonStyles = css`
+  :host {
+    flex: none;
+    align-self: end;
+    margin: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
+    --vaadin-button-border-width: 0;
+    --vaadin-button-background: transparent;
+    --vaadin-button-text-color: var(--vaadin-color);
+    --vaadin-button-padding: 0;
+  }
+
+  :host([theme~='icon-button']) {
+    width: var(--vaadin-icon-size, 1lh);
+    height: var(--vaadin-icon-size, 1lh);
+    color: transparent;
+    position: relative;
+    contain: strict;
+  }
+
+  :host([theme~='icon-button'])::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    mask-image: var(--_vaadin-icon-paper-airplane);
+    background: var(--vaadin-button-text-color);
+  }
+
+  :host([dir='rtl'][theme~='icon-button'])::before {
+    scale: -1;
+  }
+
+  @media (forced-colors: active) {
+    :host([theme~='icon-button']) {
+      forced-color-adjust: none;
+      --vaadin-button-text-color: CanvasText;
+    }
+  }
+`;

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-message-input>`. Not intended to be used separately.
+ */
+declare class MessageInputButton extends ButtonMixin(DirMixin(ThemableMixin(HTMLElement))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-message-input-button': MessageInputButton;
+  }
+}
+
+export { MessageInputButton };

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-base-styles.js';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { messageInputButtonStyles } from './styles/vaadin-message-input-button-styles.js';
+
+/**
+ * An element used internally by `<vaadin-message-input>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ButtonMixin
+ * @mixes DirMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+class MessageInputButton extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-message-input-button';
+  }
+
+  static get styles() {
+    return [buttonStyles, messageInputButtonStyles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div class="vaadin-button-container">
+        <span part="label">
+          <slot></slot>
+        </span>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(MessageInputButton);
+
+export { MessageInputButton };

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

@@ -56,7 +56,7 @@ export const MessageInputMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__buttonPropsChanged(_button, disabled, __effectiveI18n)',
+        '__buttonPropsChanged(_button, disabled, _theme, __effectiveI18n)',
         '__textAreaPropsChanged(_textArea, disabled, __effectiveI18n, value)',
       ];
     }
@@ -90,7 +90,7 @@ export const MessageInputMixin = (superClass) =>
     ready() {
       super.ready();
 
-      this._buttonController = new SlotController(this, 'button', 'vaadin-button', {
+      this._buttonController = new SlotController(this, 'button', 'vaadin-message-input-button', {
         initializer: (btn) => {
           btn.addEventListener('click', () => {
             this.__submit();
@@ -134,10 +134,19 @@ export const MessageInputMixin = (superClass) =>
     }
 
     /** @private */
-    __buttonPropsChanged(button, disabled, effectiveI18n) {
+    __buttonPropsChanged(button, disabled, theme, effectiveI18n) {
       if (button) {
         button.disabled = disabled;
         button.textContent = effectiveI18n.send;
+
+        // Only set theme attribute on the default button
+        if (button === this._buttonController.defaultNode) {
+          if (theme) {
+            button.setAttribute('theme', theme);
+          } else {
+            button.removeAttribute('theme');
+          }
+        }
       }
     }
 

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

@@ -42,6 +42,14 @@ export type MessageInputEventMap = HTMLElementEventMap & MessageInputCustomEvent
  * `disabled`     | Set when the element is disabled
  * `has-tooltip`  | Set when the element has a slotted tooltip
  *
+ * ### Internal components
+ *
+ * In addition to `<vaadin-message-input>` itself, the following internal
+ * components are themable:
+ *
+ * - `<vaadin-message-input-button>` - has the same API as `<vaadin-button>`
+ * - `<vaadin-text-area>`
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class MessageInput extends MessageInputMixin(ThemableMixin(ElementMixin(HTMLElement))) {

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

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/text-area/src/vaadin-text-area.js';
+import './vaadin-message-input-button.js';
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -35,6 +35,14 @@ import { MessageInputMixin } from './vaadin-message-input-mixin.js';
  * `disabled`     | Set when the element is disabled
  * `has-tooltip`  | Set when the element has a slotted tooltip
  *
+ * ### Internal components
+ *
+ * In addition to `<vaadin-message-input>` itself, the following internal
+ * components are themable:
+ *
+ * - `<vaadin-message-input-button>` - has the same API as `<vaadin-button>`
+ * - `<vaadin-text-area>`
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement

packages/message-input/test/dom/__snapshots__/message-input.test.snap.js

@@ -3,13 +3,13 @@ export const snapshots = {};
 
 snapshots["vaadin-message-input default"] = 
 `<vaadin-message-input>
-  <vaadin-button
+  <vaadin-message-input-button
     role="button"
     slot="button"
     tabindex="0"
   >
     Send
-  </vaadin-button>
+  </vaadin-message-input-button>
   <vaadin-text-area
     placeholder="Message"
     slot="textarea"
@@ -42,15 +42,15 @@ snapshots["vaadin-message-input default"] =
 
 snapshots["vaadin-message-input disabled"] = 
 `<vaadin-message-input disabled="">
-  <vaadin-button
+  <vaadin-message-input-button
     aria-disabled="true"
     disabled=""
     role="button"
     slot="button"
     tabindex="-1"
   >
     Send
-  </vaadin-button>
+  </vaadin-message-input-button>
   <vaadin-text-area
     aria-disabled="true"
     disabled=""
@@ -85,3 +85,43 @@ snapshots["vaadin-message-input disabled"] =
 `;
 /* end snapshot vaadin-message-input disabled */
 
+snapshots["vaadin-message-input theme"] = 
+`<vaadin-message-input theme="icon-only">
+  <vaadin-message-input-button
+    role="button"
+    slot="button"
+    tabindex="0"
+    theme="icon-only"
+  >
+    Send
+  </vaadin-message-input-button>
+  <vaadin-text-area
+    placeholder="Message"
+    slot="textarea"
+  >
+    <label
+      for="textarea-vaadin-text-area-3"
+      id="label-vaadin-text-area-0"
+      slot="label"
+    >
+    </label>
+    <div
+      hidden=""
+      id="error-message-vaadin-text-area-2"
+      slot="error-message"
+    >
+    </div>
+    <textarea
+      aria-label="Message"
+      enterkeyhint="send"
+      id="textarea-vaadin-text-area-3"
+      placeholder="Message"
+      rows="1"
+      slot="textarea"
+    >
+    </textarea>
+  </vaadin-text-area>
+</vaadin-message-input>
+`;
+/* end snapshot vaadin-message-input theme */
+

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

@@ -20,4 +20,10 @@ describe('vaadin-message-input', () => {
     input.disabled = true;
     await expect(input).dom.to.equalSnapshot();
   });
+
+  it('theme', async () => {
+    input.setAttribute('theme', 'icon-only');
+    await nextUpdate(input);
+    await expect(input).dom.to.equalSnapshot();
+  });
 });