refactor: move message-input icon variant from base styles to Aura (#10187)

web-padawan · web-flow · commit 9ca78f78b2a3 · 2025-09-17T09:39:19.000+03:00
diff --git a/packages/aura/src/components/message-input.css b/packages/aura/src/components/message-input.css
@@ -1,3 +1,30 @@
 vaadin-message-input vaadin-text-area::part(input-field) {
   --vaadin-input-field-background: transparent;
 }
+
+vaadin-message-input[theme~='icon-button'] vaadin-message-input-button {
+  width: var(--vaadin-icon-size, 1lh);
+  height: var(--vaadin-icon-size, 1lh);
+  color: transparent;
+  position: relative;
+  contain: strict;
+}
+
+vaadin-message-input[theme~='icon-button'] vaadin-message-input-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  mask-image: var(--_vaadin-icon-paper-airplane);
+  background: var(--vaadin-button-text-color);
+}
+
+vaadin-message-input[theme~='icon-button'][dir='rtl'] vaadin-message-input-button::before {
+  scale: -1;
+}
+
+@media (forced-colors: active) {
+  vaadin-message-input[theme~='icon-button'] vaadin-message-input-button {
+    forced-color-adjust: none;
+    --vaadin-button-text-color: CanvasText;
+  }
+}
diff --git a/packages/message-input/src/styles/vaadin-message-input-button-styles.js b/packages/message-input/src/styles/vaadin-message-input-button-styles.js
@@ -16,31 +16,4 @@ export const messageInputButtonStyles = css`
     --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;
-    }
-  }
 `;
diff --git a/packages/message-input/src/vaadin-message-input-mixin.js b/packages/message-input/src/vaadin-message-input-mixin.js
@@ -56,7 +56,7 @@ export const MessageInputMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__buttonPropsChanged(_button, disabled, _theme, __effectiveI18n)',
+        '__buttonPropsChanged(_button, disabled, __effectiveI18n)',
         '__textAreaPropsChanged(_textArea, disabled, __effectiveI18n, value)',
       ];
     }
@@ -134,19 +134,10 @@ export const MessageInputMixin = (superClass) =>
     }
 
     /** @private */
-    __buttonPropsChanged(button, disabled, theme, effectiveI18n) {
+    __buttonPropsChanged(button, disabled, 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');
-          }
-        }
       }
     }
 
diff --git a/packages/message-input/test/dom/message-input.test.js b/packages/message-input/test/dom/message-input.test.js
@@ -20,10 +20,4 @@ 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();
-  });
 });
diff --git a/packages/message-input/test/visual/base/message-input.test.js b/packages/message-input/test/visual/base/message-input.test.js
@@ -47,11 +47,6 @@ describe('message-input', () => {
           await sendKeys({ press: 'Tab' });
           await visualDiff(div, `${dir}-button-focused`);
         });
-
-        it('icon-button variant', async () => {
-          element.setAttribute('theme', 'icon-button');
-          await visualDiff(div, `${dir}-icon-button`);
-        });
       });
     });
   });
diff --git a/packages/message-input/test/visual/base/screenshots/message-input/baseline/ltr-icon-button.png b/packages/message-input/test/visual/base/screenshots/message-input/baseline/ltr-icon-button.png
diff --git a/packages/message-input/test/visual/base/screenshots/message-input/baseline/rtl-icon-button.png b/packages/message-input/test/visual/base/screenshots/message-input/baseline/rtl-icon-button.png
