From 8f8007ec5c2fa251f30eb0971f774965228330c9 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 22 Nov 2022 17:02:29 +0000 Subject: [PATCH 1/3] test(button): add failing test --- .../button/test/basic/button.e2e.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts index 50a7270497e..c00571e0bb3 100644 --- a/core/src/components/button/test/basic/button.e2e.ts +++ b/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.only('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(` + + `); + + 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', () => { From 14b74890a6c19bbab5a9cea258529d1ec4d1a482 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 22 Nov 2022 17:02:37 +0000 Subject: [PATCH 2/3] fix(button): fill can be set to undefined --- core/src/components/button/button.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 060d9002ee7..6947efaa74c 100644 --- a/core/src/components/button/button.tsx +++ b/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 ( From 89631ccc3f26c9dec0d81b9730965bad2006135e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 22 Nov 2022 17:24:19 +0000 Subject: [PATCH 3/3] chore(): remove only --- core/src/components/button/test/basic/button.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts index c00571e0bb3..69461a8a93e 100644 --- a/core/src/components/button/test/basic/button.e2e.ts +++ b/core/src/components/button/test/basic/button.e2e.ts @@ -9,7 +9,7 @@ test.describe('button: basic', () => { expect(await page.screenshot()).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`); }); - test.only('should correctly set fill to undefined', async ({ page, skip }) => { + 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',