diff --git a/core/api.txt b/core/api.txt index c4f01837be..77c2a42746 100644 --- a/core/api.txt +++ b/core/api.txt @@ -398,50 +398,73 @@ ion-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-button,prop,type,"button" | "reset" | "submit",'button',false,false ion-button,event,ionBlur,void,true ion-button,event,ionFocus,void,true +ion-button,css-prop,--background,ionic ion-button,css-prop,--background,ios ion-button,css-prop,--background,md +ion-button,css-prop,--background-activated,ionic ion-button,css-prop,--background-activated,ios ion-button,css-prop,--background-activated,md +ion-button,css-prop,--background-activated-opacity,ionic ion-button,css-prop,--background-activated-opacity,ios ion-button,css-prop,--background-activated-opacity,md +ion-button,css-prop,--background-focused,ionic ion-button,css-prop,--background-focused,ios ion-button,css-prop,--background-focused,md +ion-button,css-prop,--background-focused-opacity,ionic ion-button,css-prop,--background-focused-opacity,ios ion-button,css-prop,--background-focused-opacity,md +ion-button,css-prop,--background-hover,ionic ion-button,css-prop,--background-hover,ios ion-button,css-prop,--background-hover,md +ion-button,css-prop,--background-hover-opacity,ionic ion-button,css-prop,--background-hover-opacity,ios ion-button,css-prop,--background-hover-opacity,md +ion-button,css-prop,--border-color,ionic ion-button,css-prop,--border-color,ios ion-button,css-prop,--border-color,md +ion-button,css-prop,--border-radius,ionic ion-button,css-prop,--border-radius,ios ion-button,css-prop,--border-radius,md +ion-button,css-prop,--border-style,ionic ion-button,css-prop,--border-style,ios ion-button,css-prop,--border-style,md +ion-button,css-prop,--border-width,ionic ion-button,css-prop,--border-width,ios ion-button,css-prop,--border-width,md +ion-button,css-prop,--box-shadow,ionic ion-button,css-prop,--box-shadow,ios ion-button,css-prop,--box-shadow,md +ion-button,css-prop,--color,ionic ion-button,css-prop,--color,ios ion-button,css-prop,--color,md +ion-button,css-prop,--color-activated,ionic ion-button,css-prop,--color-activated,ios ion-button,css-prop,--color-activated,md +ion-button,css-prop,--color-focused,ionic ion-button,css-prop,--color-focused,ios ion-button,css-prop,--color-focused,md +ion-button,css-prop,--color-hover,ionic ion-button,css-prop,--color-hover,ios ion-button,css-prop,--color-hover,md +ion-button,css-prop,--opacity,ionic ion-button,css-prop,--opacity,ios ion-button,css-prop,--opacity,md +ion-button,css-prop,--padding-bottom,ionic ion-button,css-prop,--padding-bottom,ios ion-button,css-prop,--padding-bottom,md +ion-button,css-prop,--padding-end,ionic ion-button,css-prop,--padding-end,ios ion-button,css-prop,--padding-end,md +ion-button,css-prop,--padding-start,ionic ion-button,css-prop,--padding-start,ios ion-button,css-prop,--padding-start,md +ion-button,css-prop,--padding-top,ionic ion-button,css-prop,--padding-top,ios ion-button,css-prop,--padding-top,md +ion-button,css-prop,--ripple-color,ionic ion-button,css-prop,--ripple-color,ios ion-button,css-prop,--ripple-color,md +ion-button,css-prop,--transition,ionic ion-button,css-prop,--transition,ios ion-button,css-prop,--transition,md ion-button,part,native diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.common.scss similarity index 97% rename from core/src/components/button/button.scss rename to core/src/components/button/button.common.scss index 41412b81e1..f28f8f4982 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.common.scss @@ -51,8 +51,6 @@ color: var(--color); - font-family: $font-family-base; - text-align: center; text-decoration: none; @@ -217,18 +215,9 @@ // -------------------------------------------------- ::slotted(ion-icon) { - font-size: 1.35em; pointer-events: none; } -::slotted(ion-icon[slot="start"]) { - @include margin(0, 0.3em, 0, -0.3em); -} - -::slotted(ion-icon[slot="end"]) { - @include margin(0, -0.2em, 0, 0.3em); -} - // Button Ripple effect // -------------------------------------------------- diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index 2246a9d151..a12357bea3 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -1,48 +1,23 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; +@use "./button.common"; // Ionic Button // ------------------------------------------------------------------------------- :host { - --overflow: hidden; - --border-width: initial; - --border-color: initial; - --border-style: initial; - --color-activated: var(--color); - --color-focused: var(--color); - --color-hover: var(--color); - --box-shadow: none; --padding-bottom: var(--padding-top); - --padding-end: #{globals.$ionic-space-400}; + --padding-end: #{globals.$ionic-space-500}; --padding-start: var(--padding-end); - --padding-top: #{globals.$ionic-space-300}; + --padding-top: #{globals.$ionic-space-0}; --focus-ring-color: #{globals.$ionic-state-focus-1}; --focus-ring-width: #{globals.$ionic-border-size-050}; - display: inline-block; - position: relative; - width: auto; - min-height: globals.$ionic-scale-1000; - color: var(--color); - font-family: globals.$ionic-font-family; - font-size: globals.$ionic-font-size-350; - text-align: center; - text-decoration: none; - - white-space: normal; - - user-select: none; - vertical-align: top; // the better option for most scenarios - vertical-align: -webkit-baseline-middle; // the best for those that support it - - font-kerning: none; - // Target area &::after { @include globals.position(50%, 0, null, 0); @@ -59,37 +34,60 @@ z-index: 1; } - - ::slotted(ion-icon[slot="start"]) { - @include globals.margin-horizontal(null, globals.$ionic-space-200); - } - - ::slotted(ion-icon[slot="end"]) { - @include globals.margin-horizontal(globals.$ionic-space-200, null); - } } -// Button Colors +// Button Fills +// ------------------------------------------------------------------------------- + +// Solid Button // -------------------------------------------------- -// Solid Button with Color -:host(.button-solid.ion-color) .button-native { - background: globals.current-color(base); - color: globals.current-color(contrast); +:host(.button-solid) { + --background-activated: #{globals.ion-color(primary, shade)}; + --background-hover: #{globals.ion-color(primary, contrast)}; + --background-focused: #{globals.ion-color(primary, contrast)}; + --background-focused-opacity: 0.24; + --background-hover-opacity: 0.08; + --ripple-opacity: var(--background-activated-opacity, 1); + --ripple-color: var(--background-activated); } -// Outline Button with Color -:host(.button-outline.ion-color) .button-native { - border-color: globals.current-color(base); +// Outline Button +// -------------------------------------------------- - background: transparent; - color: globals.current-color(base); +:host(.button-outline) { + --border-width: #{globals.$ionic-border-size-025}; + --border-style: #{globals.$ionic-border-style-solid}; + --background-activated: #{globals.$ionic-color-neutral-200}; + --background-focused: transparent; + --background-hover: #{globals.ion-color(primary, base)}; + --background-hover-opacity: 0.04; + --ripple-opacity: var(--background-activated-opacity, 1); + --ripple-color: var(--background-activated); } -// Clear Button with Color -:host(.button-clear.ion-color) .button-native { - background: transparent; - color: globals.current-color(base); +// Clear Button +// -------------------------------------------------- + +:host(.button-clear) { + --background-activated: #{globals.$ionic-color-neutral-200}; + --background-focused: transparent; + --background-hover: #{globals.ion-color(primary, base)}; + --background-hover-opacity: 0.04; + --ripple-opacity: var(--background-activated-opacity, 1); + --ripple-color: var(--background-activated); +} + +// Ripple Effect +// ------------------------------------------------------------------------------- + +:host(.button-solid.ion-color) ion-ripple-effect { + color: globals.current-color(shade); +} + +:host(.button-outline.ion-color) ion-ripple-effect, +:host(.button-clear.ion-color) ion-ripple-effect { + color: globals.$ionic-color-neutral-200; } // Button Sizes @@ -177,6 +175,9 @@ // Button Shapes // ------------------------------------------------------------------------------- +// Soft Button +// -------------------------------------------------- + :host(.button-soft) { --border-radius: #{globals.$ionic-border-radius-200}; } @@ -186,15 +187,21 @@ --border-radius: #{globals.$ionic-border-radius-100}; } +// Round Button +// -------------------------------------------------- + :host(.button-round) { --border-radius: #{globals.$ionic-border-radius-full}; } +// Rectangular Button +// -------------------------------------------------- + :host(.button-rectangular) { --border-radius: #{globals.$ionic-border-radius-0}; } -// Button Focused +// Button: Focus // ------------------------------------------------------------------------------- // Only show the focus ring when the button is focused @@ -203,57 +210,6 @@ outline-offset: globals.$ionic-border-size-050; } -// Fill Solid Button -// ------------------------------------------------------------------------------- - -:host(.button-solid) { - --background-activated: #{globals.$ionic-color-primary-base}; -} - -:host(.button-solid.ion-activated) .button-native::after { - background: #{globals.$ionic-color-primary-900}; -} - -// Fill Outline Button -// -------------------------------------------------- - -:host(.button-outline) { - --border-width: #{globals.$ionic-border-size-025}; - --border-style: #{globals.$ionic-border-style-solid}; - --background-activated: #{globals.$ionic-color-neutral-200}; - --background-activated-opacity: 1; - --background-focused: transparent; - --background-hover: transparent; - --background-focused-opacity: 0.1; - --color-activated: #{globals.$ionic-color-primary-base}; -} - -:host(.button-outline.ion-focused) { - --border-color: transparent; -} - -// Fill Clear Button -// -------------------------------------------------- - -:host(.button-clear) { - --background-activated: #{globals.$ionic-color-neutral-200}; - --background-activated-opacity: 1; - --background-focused: transparent; - --background-hover: transparent; -} - -// Button Hover -// -------------------------------------------------- - -:host(.button-solid) { - --background-hover: #{globals.$ionic-color-primary-800}; -} - -:host(.button-outline), -:host(.button-clear) { - --background-hover: #{globals.$ionic-color-neutral-100}; -} - /** * Only allow overriding of opacity here * as developers should not be overriding @@ -261,177 +217,26 @@ */ :host(.button-solid.ion-color.ion-focused) .button-native::after { - background: #{current-color(contrast)}; + background: globals.current-color(contrast); } -:host(.button-clear.ion-color.ion-focused) .button-native::after, -:host(.button-outline.ion-color.ion-focused) .button-native::after { - background: #{current-color(base)}; +// Button: Activated +// -------------------------------------------------- + +:host(.button-solid.ion-color.ion-activated) .button-native::after { + background: globals.current-color(shade); } -@media (any-hover: hover) { - :host(.button-solid.ion-color:hover) .button-native::after { - background: #{current-color(contrast)}; - } - - :host(.button-clear.ion-color:hover) .button-native::after, - :host(.button-outline.ion-color:hover) .button-native::after { - background: #{current-color(base)}; - } +:host(.ion-activated) .button-native:has(ion-ripple-effect)::after, +:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after { + background: transparent; } // Button: Disabled // -------------------------------------------------- :host(.button-disabled) { - --background: #{globals.$ionic-state-disabled}; - --border-color: var(--color); - - cursor: default; - opacity: 0.5; - pointer-events: none; -} - -// Solid Button -// -------------------------------------------------- - -// Default Solid Color -:host(.button-solid) { - --background: #{globals.$ionic-color-primary-base}; - --color: #{globals.$ionic-color-base-white}; -} - -// Outline Button -// -------------------------------------------------- - -// Default Outline Color -:host(.button-outline) { - --border-color: #{globals.ion-color(primary, base)}; - --background: #{globals.$ionic-color-base-white}; - --color: #{globals.ion-color(primary, base)}; -} - -// Clear Button -// -------------------------------------------------- - -// Default Clear Color -:host(.button-clear) { - --border-width: #{globals.$ionic-border-size-0}; - --background: transparent; - --color: #{globals.$ionic-color-primary-base}; -} - -// Block Button -// -------------------------------------------------- - -:host(.button-block) { - display: block; -} - -:host(.button-block) .button-native { - @include globals.margin-horizontal(0); - - width: 100%; - - clear: both; - - contain: content; -} - -:host(.button-block) .button-native::after { - clear: both; -} - -// Full Button -// -------------------------------------------------- - -:host(.button-full) { - display: block; -} - -:host(.button-full) .button-native { - @include globals.margin-horizontal(0); - - width: 100%; - - contain: content; -} - -:host(.button-full:not(.button-round)) .button-native { - @include globals.border-radius(0); - - border-right-width: 0; - border-left-width: 0; -} - -.button-native { - @include globals.border-radius(var(--border-radius)); - @include globals.font-smoothing(); - @include globals.margin(0); - @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); - @include globals.text-inherit(); - - display: flex; - - position: relative; - - align-items: center; - - width: 100%; - height: 100%; - - min-height: inherit; - - transition: var(--transition); - - border-width: var(--border-width); - border-style: var(--border-style); - border-color: var(--border-color); - - outline: none; - - background: var(--background); - - line-height: 1; - - box-shadow: var(--box-shadow); - - contain: layout style; - cursor: pointer; - - opacity: var(--opacity); - overflow: var(--overflow); - - z-index: 0; - box-sizing: border-box; - appearance: none; -} - -.button-native::-moz-focus-inner { - border: 0; -} - -.button-inner { - display: flex; - position: relative; - - flex-flow: row nowrap; - flex-shrink: 0; - align-items: center; - justify-content: center; - - width: 100%; - height: 100%; - - z-index: 1; -} - -// Button Slots -// -------------------------------------------------- - -::slotted([slot="start"]), -::slotted([slot="end"]) { - flex-shrink: 0; + opacity: 0.6; } // Button Icons @@ -439,47 +244,28 @@ ::slotted(ion-icon) { font-size: globals.$ionic-font-size-500; - pointer-events: none; } -// Button: States -// -------------------------------------------------- - -.button-native::after { - @include globals.button-state(); +:host(.button-small) ::slotted(ion-icon[slot="start"]) { + @include globals.margin-horizontal(null, globals.$ionic-space-200); } -// Button Focused -:host(.ion-focused) { - color: var(--color-focused); +::slotted(ion-icon[slot="start"]) { + @include globals.margin-horizontal(null, globals.$ionic-space-250); } -:host(.ion-focused) .button-native::after { - background: var(--background-focused); - - opacity: var(--background-focused-opacity); +:host(.button-large) ::slotted(ion-icon[slot="start"]) { + @include globals.margin-horizontal(null, globals.$ionic-space-300); } -// Button Hover -@media (any-hover: hover) { - :host(:hover) { - color: var(--color-hover); - } - - :host(:hover) .button-native::after { - background: var(--background-hover); - - opacity: var(--background-hover-opacity); - } +:host(.button-small) ::slotted(ion-icon[slot="end"]) { + @include globals.margin-horizontal(globals.$ionic-space-200, null); } -// Button Activated -:host(.ion-activated) { - color: var(--color-activated); +::slotted(ion-icon[slot="end"]) { + @include globals.margin-horizontal(globals.$ionic-space-250, null); } -:host(.ion-activated) .button-native::after { - background: var(--background-activated); - - opacity: var(--background-activated-opacity); +:host(.button-large) ::slotted(ion-icon[slot="end"]) { + @include globals.margin-horizontal(globals.$ionic-space-300, null); } diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index fa3287681b..760ce302be 100644 --- a/core/src/components/button/button.ios.scss +++ b/core/src/components/button/button.ios.scss @@ -1,4 +1,4 @@ -@import "./button"; +@import "./button.native"; @import "./button.ios.vars"; @import "../toolbar/toolbar.ios.vars"; diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index bc27ed0ece..2a5826d88d 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -1,4 +1,4 @@ -@import "./button"; +@import "./button.native"; @import "./button.md.vars"; // Material Design Button diff --git a/core/src/components/button/button.native.scss b/core/src/components/button/button.native.scss new file mode 100644 index 0000000000..c024b37104 --- /dev/null +++ b/core/src/components/button/button.native.scss @@ -0,0 +1,24 @@ +@use "../../themes/native/native.globals.md" as globals; +@use "./button.common"; + +// Button - iOS and Material Design +// -------------------------------------------------- + +:host { + font-family: globals.$font-family-base; +} + +// Button Icons +// -------------------------------------------------- + +::slotted(ion-icon) { + font-size: 1.35em; +} + +::slotted(ion-icon[slot="start"]) { + @include globals.margin(0, 0.3em, 0, -0.3em); +} + +::slotted(ion-icon[slot="end"]) { + @include globals.margin(0, -0.2em, 0, 0.3em); +} diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 86190df97b..b676026318 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -6,7 +6,7 @@ import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers'; import { printIonWarning } from '@utils/logging'; import { createColorClasses, hostContext, openURL } from '@utils/theme'; -import { getIonTheme } from '../../global/ionic-global'; +import { getIonTheme, getIonMode } from '../../global/ionic-global'; import type { AnimationBuilder, Color } from '../../interface'; import type { RouterDirection } from '../router/utils/interface'; @@ -353,6 +353,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf this; const theme = getIonTheme(this); + const mode = getIonMode(this); const size = this.getSize(); const shape = this.getShape(); const TagType = href === undefined ? 'button' : ('a' as any); @@ -421,7 +422,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf - {theme === 'md' && } + {mode === 'md' && } ); diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts index 51635161b0..500bee8a3a 100644 --- a/core/src/components/button/test/basic/button.e2e.ts +++ b/core/src/components/button/test/basic/button.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs().forEach(({ config, screenshot, title }) => { +configs({ modes: ['ios', 'md', 'ionic-md', 'ionic-ios'] }).forEach(({ config, screenshot, title }) => { test.describe(title('button: basic'), () => { test('should not have visual regressions', async ({ page }) => { await page.goto(`/src/components/button/test/basic`, config); @@ -39,9 +39,9 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ config, title }) => { }); /** - * Ripple effect is only available in MD mode. + * Ripple effect is only available in MD and Ionic mode. */ -configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => { +configs({ modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { test.describe(title('button: ripple effect'), () => { test('should not have visual regressions', async ({ page }) => { await page.goto(`/src/components/button/test/basic?ionic:_testing=false`, config); diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..5833978ac1 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..45e04bb929 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6e80b77a06 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e3b3dc4a7f Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3f9a3ef9d2 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5c8e2c711b Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..5ec3c936b3 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..395434dbd4 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..558262e3c2 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9be41f497e Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6c8c89b277 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5581917906 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..5e04dd1b44 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6ad6222af9 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2b59f13790 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3ccb81c9a1 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..db656e3221 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2b59f13790 Binary files /dev/null and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts b/core/src/components/button/test/clear/button.e2e.ts index a08d95ddc2..664d9775bb 100644 --- a/core/src/components/button/test/clear/button.e2e.ts +++ b/core/src/components/button/test/clear/button.e2e.ts @@ -4,14 +4,16 @@ import { configs, test } from '@utils/test/playwright'; /** * Fill="clear" does not render differently based on the direction. */ -configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config, screenshot }) => { - test.describe(title('button: fill: clear'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/button/test/clear`, config); +configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md', 'ionic-ios'] }).forEach( + ({ title, config, screenshot }) => { + test.describe(title('button: fill: clear'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/button/test/clear`, config); - await page.setIonViewport(); + await page.setIonViewport(); - await expect(page).toHaveScreenshot(screenshot(`button-fill-clear`)); + await expect(page).toHaveScreenshot(screenshot(`button-fill-clear`)); + }); }); - }); -}); + } +); diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2f75d31042 Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b3552cb14b Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fcea8207f6 Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index c489f4c236..72ddaeff27 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index 320b06a66a..1ba1764305 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index 5785946a77..d3dc07e94c 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts b/core/src/components/button/test/outline/button.e2e.ts index 78fe52efaa..c27cf602a6 100644 --- a/core/src/components/button/test/outline/button.e2e.ts +++ b/core/src/components/button/test/outline/button.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => { +configs({ modes: ['ios', 'md', 'ionic-md', 'ionic-ios'] }).forEach(({ title, screenshot, config }) => { test.describe(title('button: outline'), () => { test('should not have visual regressions', async ({ page }) => { await page.goto(`/src/components/button/test/outline`, config); diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e018b90ce7 Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..af44a65cfa Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..873fb1f6d8 Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7959699c6c Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7c561291b6 Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..42fd4f02b7 Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index d846dc7e59..015307df1d 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index c4124a7416..b55434e694 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 8d3436997b..7c1d865046 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png index 6b83bd8cfb..a28baac336 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png index 2b2ee05de2..b653fb7fc7 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png index 7a1138ffc7..6f5ee6bedb 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index 69f31d5f6c..1d351b2a44 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index 09baa370d5..69e4b4a5d7 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index 443c923859..862b175745 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4063387fde..e61cd6c32e 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 571f82b38d..f6ad7cfa22 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 51bb99e2cb..3c6bd903eb 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index c2016b01f4..211d23fdb8 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index d50d06cc95..0202dc6f32 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 9f61a8f76d..f8522e424c 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index ab73e9f79e..44b3250118 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index ec83649dec..75874d1c88 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index c015c4f572..437389aaa0 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 85ee77bf8a..3ec757fcd1 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 81193aae04..c808665a7d 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png index dacdbae792..4d3822065b 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 592bad1fa3..0ad997b205 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 0febdc8c09..53c422e361 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index b463be8e6a..e40cdfd6da 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2f836fffb4..6fba58826e 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index a015867c22..cf9b4d3723 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index 0d72739c00..542a5d3fa4 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 32ef6794f3..4bf06eee12 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 482130ecfd..168a495b12 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 702748e0dd..c9ab0553ab 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 413b5f805d..4f5e360838 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 86ba04a8ee..c9f627a3de 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 33a310c141..ab1a6efc28 100644 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-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-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 index e06aa96faf..f0ee0e2996 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png 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 index 3883961209..60d092a4cb 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png 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 index 35314d7b09..55bb2ce21a 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png 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-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 index d04c6fb561..8f033f9b21 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png 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 index 97187381d9..c4c14cb78d 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png 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 index 60463ec4aa..a4be04429f 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png 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-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 index ce38b07b2d..8ac00c8665 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png 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 index db2382acca..f2437c26ef 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png 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 index cff442fbde..83c664ed77 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png 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-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 index beb85dc498..07e17d88b9 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png 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 index 439eaaa833..1810feac75 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png 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 index aebfd83a2d..b1655341fa 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png 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-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 index 941e5dafb5..b95ace303b 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png 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 index eee7abb413..4fb90f509a 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png 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 index ed309f7290..d09fa888d9 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png 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-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 index 50ad3cbd7c..cd9ecf2ffb 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png 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 index 4abf64061f..f5262ff1fb 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png 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 index 4756dcb06f..e9894416dc 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png 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/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index 958bce384b..fc7d1a45d3 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index b4964ef2e8..c72b25a410 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index d45f8dfcce..dc0defa898 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8bb15a7fa6..bb73053940 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png index 283ade5fa9..d76926ecef 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png index 52bb14cb0c..a37ebb0fc1 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png index ec4433ab7e..e01b5dc752 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png index 767963180a..f31750f881 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png index ef8143a509..0b375e125a 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png index fe8508dbea..eec4cb66e6 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Firefox-linux.png index 46a23961fc..e919525e60 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Safari-linux.png index 85b376fb12..198774ced3 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png index 3e82cbcd5e..71381c7867 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Firefox-linux.png index e3bb86e2e4..5ecf5d31b9 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Safari-linux.png index 26e46cc985..d167682483 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.common.scss similarity index 100% rename from core/src/components/ripple-effect/ripple-effect.scss rename to core/src/components/ripple-effect/ripple-effect.common.scss diff --git a/core/src/components/ripple-effect/ripple-effect.ionic.scss b/core/src/components/ripple-effect/ripple-effect.ionic.scss new file mode 100644 index 0000000000..ae45d83bc4 --- /dev/null +++ b/core/src/components/ripple-effect/ripple-effect.ionic.scss @@ -0,0 +1,48 @@ +@use "./ripple-effect.common" as common; + +// Ionic Ripple Effect +// -------------------------------------------------- + +.ripple-effect { + animation-name: rippleAnimation, fadeInAnimation; +} + +.fade-out { + animation-name: fadeOutAnimation; +} + +@keyframes rippleAnimation { + from { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + + transform: scale(1); + } + + to { + transform: translate(var(--translate-end)) scale(var(--final-scale, 1)); + } +} + +@keyframes fadeInAnimation { + from { + animation-timing-function: linear; + + opacity: 0; + } + + to { + opacity: var(--ripple-opacity, 0.16); + } +} + +@keyframes fadeOutAnimation { + from { + animation-timing-function: linear; + + opacity: var(--ripple-opacity, 0.16); + } + + to { + opacity: 0; + } +} diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx index 20633eb9a1..11d48b55db 100644 --- a/core/src/components/ripple-effect/ripple-effect.tsx +++ b/core/src/components/ripple-effect/ripple-effect.tsx @@ -9,7 +9,11 @@ import { getIonTheme } from '../../global/ionic-global'; */ @Component({ tag: 'ion-ripple-effect', - styleUrl: 'ripple-effect.scss', + styleUrls: { + ios: 'ripple-effect.common.scss', + md: 'ripple-effect.common.scss', + ionic: 'ripple-effect.ionic.scss', + }, shadow: true, }) export class RippleEffect implements ComponentInterface { diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1c03087049..d5fd7ffa4d 100644 Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png index ed039ba0f6..98ee8a7e5c 100644 Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png index 58d70676b2..84684741aa 100644 Binary files a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ