diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index 111a7487cc..47da7e11cb 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -142,6 +142,7 @@ // Button Shape Rectangular // ------------------------------------------------------------------------------- + :host(.button-rectangular) { --border-radius: #{$button-ionic-rectangular-border}; } @@ -168,6 +169,11 @@ --background-activated: #{ion-color(primary, shade)}; } +:host(.button-solid.ion-color.ion-activated) .button-native::after { + background: #{current-color(shade)}; +} + + // Fill Outline Button // -------------------------------------------------- diff --git a/core/src/components/button/test/states/button.e2e.ts b/core/src/components/button/test/states/button.e2e.ts new file mode 100644 index 0000000000..5dcff3c089 --- /dev/null +++ b/core/src/components/button/test/states/button.e2e.ts @@ -0,0 +1,84 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('button: activated'), () => { + test('should render solid button', async ({ page }) => { + await page.setContent( + ` + Button + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`button-activated-solid`)); + }); + + test('should render solid button with color', async ({ page }) => { + await page.setContent( + ` + Button + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`button-activated-solid-color`)); + }); + + test('should render outline button', async ({ page }) => { + await page.setContent( + ` + Button + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`button-activated-outline`)); + }); + + test('should render outline button with color', async ({ page }) => { + await page.setContent( + ` + Button + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`button-activated-outline-color`)); + }); + + test('should render clear button', async ({ page }) => { + await page.setContent( + ` + Button + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`button-activated-clear`)); + }); + + test('should render clear button with color', async ({ page }) => { + await page.setContent( + ` + Button + `, + config + ); + + const button = page.locator('ion-button'); + + await expect(button).toHaveScreenshot(screenshot(`button-activated-clear-color`)); + }); + }); +}); diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..5c41c58796 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c37184596c Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3dc1e77922 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8f6b1edbf7 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..62f417610d Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c830bf050f Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9089e92644 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2071f7bc37 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2c55d50876 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9913e5fc8c Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bd0e814daa Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e22db21083 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..10f5c431a1 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e1e26cdef0 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b51ff6ce6b Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b87a621d70 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d4aadb31ad Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1585000e96 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..fa63238e11 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d7b59c8c40 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..275c9260a2 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7b37ebff4a Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a956bbf435 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0885820231 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1df2998a37 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a04f25c1fd Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..398433ba1e Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a84d0e8b91 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b06a107c57 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5c3935fec0 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d987eaf4bf Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..37763d5998 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..462c845fe8 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4049f7417b Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2dae7928e8 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ee09ce88ba Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3536a6f7d8 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a2109c0a69 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..94c9fbc75b Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bedab5dd5b Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1a600b1643 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bcd9f3955b Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..43ca456442 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..dd5d081f75 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9ef4a0d61b Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3edf880cbb Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..946f871e03 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9a93db4c0a Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2aed2fc12b Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1af5542162 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fb3a5784a4 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..440ffdd1d1 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bf55216bc4 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ebc7a32a67 Binary files /dev/null and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Safari-linux.png differ