fix(button): fill can be set to undefined (#26339)

resolves #25886

core/src/components/button/button.tsx

@@ -272,7 +272,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
             target,
           };
     let fill = this.fill;
-    if (fill === undefined) {
+    /**
+     * We check both undefined and null to
+     * work around https://github.com/ionic-team/stencil/issues/3586.
+     */
+    if (fill == null) {
       fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
     }
     return (

core/src/components/button/test/basic/button.e2e.ts

@@ -9,6 +9,25 @@ test.describe('button: basic', () => {
 
     expect(await page.screenshot()).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
   });
+  test('should correctly set fill to undefined', async ({ page, skip }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25886',
+    });
+    skip.rtl();
+    skip.mode('ios', 'This behavior does not differ across modes');
+    await page.setContent(`
+      <ion-button fill="outline"></ion-button>
+    `);
+
+    const button = page.locator('ion-button');
+    await expect(button).toHaveClass(/button-outline/);
+
+    await button.evaluate((el: HTMLIonButtonElement) => (el.fill = undefined));
+    await page.waitForChanges();
+
+    await expect(button).toHaveClass(/button-solid/);
+  });
 });
 
 test.describe('button: ripple effect', () => {