fix: do not set display: contents on button label part in base styles (#10264)

web-padawan · web-flow · commit 7d359cc31b2a · 2025-09-30T13:54:43.000+03:00
diff --git a/packages/button/src/styles/vaadin-button-base-styles.js b/packages/button/src/styles/vaadin-button-base-styles.js
@@ -43,11 +43,14 @@ export const buttonStyles = css`
 
   .vaadin-button-container,
   [part='prefix'],
-  [part='suffix'],
-  [part='label'] {
+  [part='suffix'] {
     display: contents;
   }
 
+  [part='label'] {
+    display: inline-flex;
+  }
+
   :host(:is([focus-ring], :focus-visible)) {
     outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
     outline-offset: 1px;
diff --git a/packages/button/test/visual/base/button.test.js b/packages/button/test/visual/base/button.test.js
@@ -54,22 +54,25 @@ describe('button', () => {
   });
 
   describe('icon', () => {
-    const PREFIX_ICON = '<vaadin-icon icon="vaadin:reply" slot="prefix"></vaadin-icon>';
-    const SUFFIX_ICON = '<vaadin-icon icon="vaadin:reply" slot="suffix"></vaadin-icon>';
+    const getIcon = (slot) => `
+      <vaadin-icon
+        icon="vaadin:reply"
+         ${slot ? `slot="${slot}"` : ''}
+      ></vaadin-icon>
+    `;
 
     it('before text', async () => {
-      element.insertAdjacentHTML('afterbegin', PREFIX_ICON);
+      element.insertAdjacentHTML('afterbegin', getIcon('prefix'));
       await visualDiff(div, 'icon-before-text');
     });
 
     it('after text', async () => {
-      element.insertAdjacentHTML('beforeend', SUFFIX_ICON);
+      element.insertAdjacentHTML('beforeend', getIcon('suffix'));
       await visualDiff(div, 'icon-after-text');
     });
 
     it('without text', async () => {
-      element.textContent = '';
-      element.insertAdjacentHTML('afterbegin', PREFIX_ICON);
+      element.innerHTML = getIcon('');
       await visualDiff(div, 'icon-without-text');
     });
   });
