diff --git a/.github/workflows/actions/publish-npm/action.yml b/.github/workflows/actions/publish-npm/action.yml
index 8213c8a98c..2872768d41 100644
--- a/.github/workflows/actions/publish-npm/action.yml
+++ b/.github/workflows/actions/publish-npm/action.yml
@@ -21,11 +21,11 @@ runs:
with:
node-version: 16.x
- name: Install Dependencies
- run: lerna bootstrap --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
+ run: lerna bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
shell: bash
working-directory: ${{ inputs.working-directory }}
- name: Update Version
- run: npm version ${{ inputs.version }}
+ run: lerna version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version
shell: bash
working-directory: ${{ inputs.working-directory }}
- name: Run Build
@@ -39,6 +39,6 @@ runs:
env:
NPM_TOKEN: ${{ inputs.token }}
- name: Publish to NPM
- run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --git-tag-version false
+ run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }}
shell: bash
working-directory: ${{ inputs.working-directory }}
diff --git a/.github/workflows/release-ionic.yml b/.github/workflows/release-ionic.yml
index 420ac86645..054a3e20ba 100644
--- a/.github/workflows/release-ionic.yml
+++ b/.github/workflows/release-ionic.yml
@@ -140,6 +140,12 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
+ - name: Restore @ionic/core built cache
+ uses: ./.github/workflows/actions/download-archive
+ with:
+ name: ionic-core
+ path: ./core
+ filename: CoreBuild.zip
- name: Restore @ionic/angular built cache
uses: ./.github/workflows/actions/download-archive
with:
@@ -160,6 +166,12 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
+ - name: Restore @ionic/core built cache
+ uses: ./.github/workflows/actions/download-archive
+ with:
+ name: ionic-core
+ path: ./core
+ filename: CoreBuild.zip
- name: Restore @ionic/react built cache
uses: ./.github/workflows/actions/download-archive
with:
@@ -179,6 +191,12 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
+ - name: Restore @ionic/core built cache
+ uses: ./.github/workflows/actions/download-archive
+ with:
+ name: ionic-core
+ path: ./core
+ filename: CoreBuild.zip
- name: Restore @ionic/vue built cache
uses: ./.github/workflows/actions/download-archive
with:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 771347167b..4e2db855dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,20 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.3.9](https://github.com/ionic-team/ionic-framework/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+
+### Bug Fixes
+
+* **button:** fill can be set to undefined ([#26339](https://github.com/ionic-team/ionic-framework/issues/26339)) ([2fe23d9](https://github.com/ionic-team/ionic-framework/commit/2fe23d9d46c3593843c781c57340332e5a86fd64)), closes [#25886](https://github.com/ionic-team/ionic-framework/issues/25886)
+* **input:** clear icon can be styled ([#26354](https://github.com/ionic-team/ionic-framework/issues/26354)) ([ccaff8d](https://github.com/ionic-team/ionic-framework/commit/ccaff8d0dc66f8adc9cde838c084629391e4200d)), closes [#19178](https://github.com/ionic-team/ionic-framework/issues/19178) [#17168](https://github.com/ionic-team/ionic-framework/issues/17168)
+* **reorder:** items animate once in firefox ([#26326](https://github.com/ionic-team/ionic-framework/issues/26326)) ([7ae8117](https://github.com/ionic-team/ionic-framework/commit/7ae81172844659d7f4581956ce17e5324f73beef)), closes [#21182](https://github.com/ionic-team/ionic-framework/issues/21182)
+* **segment:** segment in toolbar uses correct contrast ([#26353](https://github.com/ionic-team/ionic-framework/issues/26353)) ([5a243cc](https://github.com/ionic-team/ionic-framework/commit/5a243ccebc8e27bef6eb1ed2f797a0c1166199bf)), closes [#26350](https://github.com/ionic-team/ionic-framework/issues/26350)
+
+
+
+
+
## [6.3.8](https://github.com/ionic-team/ionic-framework/compare/v6.3.7...v6.3.8) (2022-11-22)
diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md
index 38a5ec33ca..1efdd7ac19 100644
--- a/angular/CHANGELOG.md
+++ b/angular/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.3.9](https://github.com/ionic-team/ionic/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
## [6.3.8](https://github.com/ionic-team/ionic/compare/v6.3.7...v6.3.8) (2022-11-22)
**Note:** Version bump only for package @ionic/angular
diff --git a/angular/package-lock.json b/angular/package-lock.json
index b64043f4b2..36c163fc09 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,15 +1,15 @@
{
"name": "@ionic/angular",
- "version": "6.3.8",
+ "version": "6.3.9",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/angular",
- "version": "6.3.8",
+ "version": "6.3.9",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^6.3.8",
+ "@ionic/core": "^6.3.9",
"ionicons": "^6.0.4",
"jsonc-parser": "^3.0.0",
"tslib": "^2.0.0"
@@ -1024,9 +1024,9 @@
"dev": true
},
"node_modules/@ionic/core": {
- "version": "6.3.8",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
- "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+ "version": "6.3.9",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
+ "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
"dependencies": {
"@stencil/core": "^2.18.0",
"ionicons": "^6.0.4",
@@ -7940,9 +7940,9 @@
"dev": true
},
"@ionic/core": {
- "version": "6.3.8",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.8.tgz",
- "integrity": "sha512-mpawxkbjx/lBaWMYexvEHzKP9+03gKKe/CXHGnBh7z9WHpDuR+H9jdojjiHkakoN79TcdM3G+BYMZ0tVGeeJhw==",
+ "version": "6.3.9",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.9.tgz",
+ "integrity": "sha512-0JlCGIgLASoxZ6XXEkhCMQzdedvzqI7lsD6zBYPkUyMFOMTff7fZdQg1r9v9IQVHW+UCuyM4xc0MT4YOD4/S3A==",
"requires": {
"@stencil/core": "^2.18.0",
"ionicons": "^6.0.4",
diff --git a/angular/package.json b/angular/package.json
index 3377e52226..87b3fad147 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/angular",
- "version": "6.3.8",
+ "version": "6.3.9",
"description": "Angular specific wrappers for @ionic/core",
"keywords": [
"ionic",
@@ -42,7 +42,7 @@
"validate": "npm i && npm run lint && npm run test && npm run build"
},
"dependencies": {
- "@ionic/core": "^6.3.8",
+ "@ionic/core": "^6.3.9",
"ionicons": "^6.0.4",
"jsonc-parser": "^3.0.0",
"tslib": "^2.0.0"
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index fbaa0ae28a..cc0ee0272e 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,20 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.3.9](https://github.com/ionic-team/ionic/compare/v6.3.8...v6.3.9) (2022-11-30)
+
+
+### Bug Fixes
+
+* **button:** fill can be set to undefined ([#26339](https://github.com/ionic-team/ionic/issues/26339)) ([2fe23d9](https://github.com/ionic-team/ionic/commit/2fe23d9d46c3593843c781c57340332e5a86fd64)), closes [#25886](https://github.com/ionic-team/ionic/issues/25886)
+* **input:** clear icon can be styled ([#26354](https://github.com/ionic-team/ionic/issues/26354)) ([ccaff8d](https://github.com/ionic-team/ionic/commit/ccaff8d0dc66f8adc9cde838c084629391e4200d)), closes [#19178](https://github.com/ionic-team/ionic/issues/19178) [#17168](https://github.com/ionic-team/ionic/issues/17168)
+* **reorder:** items animate once in firefox ([#26326](https://github.com/ionic-team/ionic/issues/26326)) ([7ae8117](https://github.com/ionic-team/ionic/commit/7ae81172844659d7f4581956ce17e5324f73beef)), closes [#21182](https://github.com/ionic-team/ionic/issues/21182)
+* **segment:** segment in toolbar uses correct contrast ([#26353](https://github.com/ionic-team/ionic/issues/26353)) ([5a243cc](https://github.com/ionic-team/ionic/commit/5a243ccebc8e27bef6eb1ed2f797a0c1166199bf)), closes [#26350](https://github.com/ionic-team/ionic/issues/26350)
+
+
+
+
+
## [6.3.8](https://github.com/ionic-team/ionic/compare/v6.3.7...v6.3.8) (2022-11-22)
diff --git a/core/package-lock.json b/core/package-lock.json
index d2110bb097..894fb70d70 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@ionic/core",
- "version": "6.3.8",
+ "version": "6.3.9",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@ionic/core",
- "version": "6.3.8",
+ "version": "6.3.9",
"license": "MIT",
"dependencies": {
"@stencil/core": "^2.18.0",
diff --git a/core/package.json b/core/package.json
index ab1d67ee84..815d9a6bf4 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@ionic/core",
- "version": "6.3.8",
+ "version": "6.3.9",
"description": "Base components for Ionic",
"keywords": [
"ionic",
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 060d9002ee..6947efaa74 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -272,7 +272,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
target,
};
let fill = this.fill;
- if (fill === undefined) {
+ /**
+ * We check both undefined and null to
+ * work around https://github.com/ionic-team/stencil/issues/3586.
+ */
+ if (fill == null) {
fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
}
return (
diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts
index 50a7270497..69461a8a93 100644
--- a/core/src/components/button/test/basic/button.e2e.ts
+++ b/core/src/components/button/test/basic/button.e2e.ts
@@ -9,6 +9,25 @@ test.describe('button: basic', () => {
expect(await page.screenshot()).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
});
+ test('should correctly set fill to undefined', async ({ page, skip }) => {
+ test.info().annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/25886',
+ });
+ skip.rtl();
+ skip.mode('ios', 'This behavior does not differ across modes');
+ await page.setContent(`
+
+ `);
+
+ const button = page.locator('ion-button');
+ await expect(button).toHaveClass(/button-outline/);
+
+ await button.evaluate((el: HTMLIonButtonElement) => (el.fill = undefined));
+ await page.waitForChanges();
+
+ await expect(button).toHaveClass(/button-solid/);
+ });
});
test.describe('button: ripple effect', () => {
diff --git a/core/src/components/icon/test/basic/e2e.ts b/core/src/components/icon/test/basic/e2e.ts
deleted file mode 100644
index 978a3a9fad..0000000000
--- a/core/src/components/icon/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('icon: basic', async () => {
- const page = await newE2EPage({
- url: '/src/components/icon/test/basic?ionic:_testing=true',
- });
-
- const compare = await page.compareScreenshot();
- expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/icon/test/basic/icon.e2e.ts b/core/src/components/icon/test/basic/icon.e2e.ts
new file mode 100644
index 0000000000..a589f3ec1a
--- /dev/null
+++ b/core/src/components/icon/test/basic/icon.e2e.ts
@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('icon: basic', () => {
+ test('should render icon when passed', async ({ page, skip }) => {
+ skip.rtl();
+ skip.mode('ios');
+
+ await page.setContent(`
+
+ `);
+
+ const icon = page.locator('ion-icon');
+ expect(await icon.screenshot()).toMatchSnapshot(`icon-${page.getSnapshotSettings()}.png`);
+ });
+});
diff --git a/core/src/components/icon/test/basic/icon.e2e.ts-snapshots/icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/icon/test/basic/icon.e2e.ts-snapshots/icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6031b7f8d3
Binary files /dev/null and b/core/src/components/icon/test/basic/icon.e2e.ts-snapshots/icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/icon/test/basic/icon.e2e.ts-snapshots/icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/icon/test/basic/icon.e2e.ts-snapshots/icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6585ddeb70
Binary files /dev/null and b/core/src/components/icon/test/basic/icon.e2e.ts-snapshots/icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/icon/test/basic/icon.e2e.ts-snapshots/icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/icon/test/basic/icon.e2e.ts-snapshots/icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bc1b907e2c
Binary files /dev/null and b/core/src/components/icon/test/basic/icon.e2e.ts-snapshots/icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/icon/test/dir/e2e.ts b/core/src/components/icon/test/dir/e2e.ts
deleted file mode 100644
index cf644d61e2..0000000000
--- a/core/src/components/icon/test/dir/e2e.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('icon: dir', async () => {
- const page = await newE2EPage({
- url: '/src/components/icon/test/dir?ionic:_testing=true',
- });
-
- const compare = await page.compareScreenshot();
- expect(compare).toMatchScreenshot();
-});
-
-test('icon: dir, rtl', async () => {
- const page = await newE2EPage({
- url: '/src/components/icon/test/dir?ionic:_testing=true&rtl=true',
- });
-
- const compare = await page.compareScreenshot();
- expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts b/core/src/components/icon/test/dir/icon.e2e.ts
new file mode 100644
index 0000000000..13a5917e52
--- /dev/null
+++ b/core/src/components/icon/test/dir/icon.e2e.ts
@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('icon: rtl', () => {
+ test('should flip icon when rtl is active', async ({ page, skip }) => {
+ skip.mode('ios');
+
+ await page.setContent(`
+
+ `);
+
+ const icon = page.locator('ion-icon');
+ expect(await icon.screenshot()).toMatchSnapshot(`icon-flip-${page.getSnapshotSettings()}.png`);
+ });
+ test('should not flip icon when rtl is active', async ({ page, skip }) => {
+ skip.mode('ios');
+
+ await page.setContent(`
+
+ `);
+
+ const icon = page.locator('ion-icon');
+ expect(await icon.screenshot()).toMatchSnapshot(`icon-no-flip-${page.getSnapshotSettings()}.png`);
+ });
+});
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Chrome-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4d97dd678d
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Firefox-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..75f9b8c5b2
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Safari-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dd3e6a291d
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Chrome-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..95b3daba7b
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Firefox-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..323f07c60d
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Safari-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2f8c65cee4
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Chrome-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4d97dd678d
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Firefox-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..75f9b8c5b2
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Safari-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dd3e6a291d
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Chrome-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4f83964b01
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Firefox-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..75f9b8c5b2
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Safari-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dd3e6a291d
Binary files /dev/null and b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/icon/test/items/e2e.ts b/core/src/components/icon/test/items/e2e.ts
deleted file mode 100644
index b6babf3411..0000000000
--- a/core/src/components/icon/test/items/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('icon: items', async () => {
- const page = await newE2EPage({
- url: '/src/components/icon/test/items?ionic:_testing=true',
- });
-
- const compare = await page.compareScreenshot();
- expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/icon/test/items/index.html b/core/src/components/icon/test/items/index.html
deleted file mode 100644
index 139abbec65..0000000000
--- a/core/src/components/icon/test/items/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
-
-
-
-
- Icon - Items
-
-
-
-
-
-
-
-
-
-
-
-
-
- Icon - Items
-
-
-
-
-
-
-
- dynamicColor name="home"
-
-
-
-
- name="home" is-active="true"
-
-
-
-
- dynamicProp is-active="false"
-
-
-
-
- dynamicAttr is-active="false"
-
-
-
-
- name="home" is-active="true"
-
-
-
-
- name="home"
-
-
-
-
- name="logo-twitter"
-
-
-
-
- ios="logo-apple" md="logo-android"
-
-
-
-
- ios="logo-apple" md="logo-android" is-active="false"
-
-
-
-
- name="null"
-
-
-
-
- name="home" hidden="true"
-
-
-
-
-
-
-
-
diff --git a/core/src/components/icon/test/standalone/done-all.svg b/core/src/components/icon/test/standalone/done-all.svg
deleted file mode 100644
index 8592cf3539..0000000000
--- a/core/src/components/icon/test/standalone/done-all.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/core/src/components/icon/test/standalone/e2e.ts b/core/src/components/icon/test/standalone/e2e.ts
deleted file mode 100644
index 264fe4f66c..0000000000
--- a/core/src/components/icon/test/standalone/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('icon: standalone', async () => {
- const page = await newE2EPage({
- url: '/src/components/icon/test/standalone?ionic:_testing=true',
- });
-
- const compare = await page.compareScreenshot();
- expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/icon/test/standalone/index.html b/core/src/components/icon/test/standalone/index.html
deleted file mode 100644
index 35cf81f8ad..0000000000
--- a/core/src/components/icon/test/standalone/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
-
- Icon - Standalone
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index 013f1e385b..299e9a294e 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -17,11 +17,7 @@
--padding-start: 0px;
}
-.input-clear-icon {
- @include svg-background-image($input-ios-input-clear-icon-svg);
-
- width: $input-ios-input-clear-icon-width;
- height: $input-ios-input-clear-icon-width;
-
- background-size: $input-ios-input-clear-icon-size;
+.input-clear-icon ion-icon {
+ width: 18px;
+ height: 18px;
}
diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss
index c17f793a3f..eca1b4197b 100644
--- a/core/src/components/input/input.ios.vars.scss
+++ b/core/src/components/input/input.ios.vars.scss
@@ -49,15 +49,6 @@ $input-ios-inset-margin-start: 0 !default;
/// @prop - Width of the icon used to clear the input
$input-ios-input-clear-icon-width: 30px !default;
-/// @prop - Color of the icon used to clear the input
-$input-ios-input-clear-icon-color: $text-color-step-400 !default;
-
-/// @prop - Icon used to clear the input
-$input-ios-input-clear-icon-svg: "" !default;
-
-/// @prop - Size of the icon used to clear the input
-$input-ios-input-clear-icon-size: 18px !default;
-
/// @prop - Padding end of the input with clear input
$input-ios-input-clear-padding-end: ($input-ios-input-clear-icon-width + $item-ios-padding-end) !default;
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index 51bc9ce6cb..80feeac8e0 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -21,11 +21,7 @@
--padding-start: 0;
}
-.input-clear-icon {
- @include svg-background-image($input-md-input-clear-icon-svg);
-
- width: $input-md-input-clear-icon-width;
- height: $input-md-input-clear-icon-width;
-
- background-size: $input-md-input-clear-icon-size;
+.input-clear-icon ion-icon {
+ width: 22px;
+ height: 22px;
}
diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss
index b04a35040f..2d983db19a 100644
--- a/core/src/components/input/input.md.vars.scss
+++ b/core/src/components/input/input.md.vars.scss
@@ -22,15 +22,6 @@ $input-md-padding-start: ($item-md-padding-start * 0.5) !defau
/// @prop - Width of the icon used to clear the input
$input-md-input-clear-icon-width: 30px !default;
-/// @prop - Color of the icon used to clear the input
-$input-md-input-clear-icon-color: $text-color-step-400 !default;
-
-/// @prop - Icon used to clear the input
-$input-md-input-clear-icon-svg: "" !default;
-
-/// @prop - Size of the icon used to clear the input
-$input-md-input-clear-icon-size: 22px !default;
-
/// @prop - Placeholder Text color of the input
$input-md-placeholder-color: $placeholder-text-color !default;
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index bc9363b921..f516133a6d 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -143,6 +143,14 @@
@include padding(0);
@include background-position(center);
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+
+ width: 30px;
+ height: 30px;
+
border: 0;
outline: none;
@@ -154,6 +162,10 @@
appearance: none;
}
+.input-clear-icon ion-icon {
+ color: $text-color-step-400;
+}
+
/**
* Normally, we would not want to use :focus
* here because that would mean tapping the button
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index d2e9cfcefc..82a6ab50d3 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -1,5 +1,6 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { closeCircle, closeSharp } from 'ionicons/icons';
import { getIonMode } from '../../global/ionic-global';
import type {
@@ -499,7 +500,9 @@ export class Input implements ComponentInterface {
ev.preventDefault();
}}
onClick={this.clearTextInput}
- />
+ >
+
+
)}
);
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png
index 6901495976..91e82f7874 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png
index 39a8fc85f6..d267ab8f06 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png
index f5afb6bf22..163f7d83ca 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png
index 244d498c08..31fd3c5994 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png
index 09948e2dd7..d87042e3ad 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png
index 0e532d32a2..4d7d0a16dc 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png
index 66e86b7de5..fc984514b8 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png
index fff75b5e96..b502de51c8 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png
index e9c67cc50f..767cfb932d 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png
index 917b3e6552..1a11a36592 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png
index ef962665ca..08a5671929 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png
index b7fdde0a7c..0b4da34049 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
index 09888e5c90..8855ee6854 100644
--- a/core/src/components/reorder-group/reorder-group.tsx
+++ b/core/src/components/reorder-group/reorder-group.tsx
@@ -4,6 +4,7 @@ import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '
import { getIonMode } from '../../global/ionic-global';
import type { Gesture, GestureDetail, ItemReorderEventDetail } from '../../interface';
import { findClosestIonContent, getScrollElement } from '../../utils/content';
+import { raf } from '../../utils/helpers';
import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
const enum ReorderGroupState {
@@ -97,7 +98,7 @@ export class ReorderGroup implements ComponentInterface {
*/
@Method()
complete(listOrReorder?: boolean | any[]): Promise {
- return Promise.resolve(this.completeSync(listOrReorder));
+ return Promise.resolve(this.completeReorder(listOrReorder));
}
private canStart(ev: GestureDetail): boolean {
@@ -200,19 +201,19 @@ export class ReorderGroup implements ComponentInterface {
const fromIndex = indexForItem(selectedItemEl);
if (toIndex === fromIndex) {
- this.completeSync();
+ this.completeReorder();
} else {
this.ionItemReorder.emit({
from: fromIndex,
to: toIndex,
- complete: this.completeSync.bind(this),
+ complete: this.completeReorder.bind(this),
});
}
hapticSelectionEnd();
}
- private completeSync(listOrReorder?: boolean | any[]): any {
+ private completeReorder(listOrReorder?: boolean | any[]): any {
const selectedItemEl = this.selectedItemEl;
if (selectedItemEl && this.state === ReorderGroupState.Complete) {
const children = this.el.children as any;
@@ -220,20 +221,29 @@ export class ReorderGroup implements ComponentInterface {
const toIndex = this.lastToIndex;
const fromIndex = indexForItem(selectedItemEl);
- if (toIndex !== fromIndex && (listOrReorder === undefined || listOrReorder === true)) {
- const ref = fromIndex < toIndex ? children[toIndex + 1] : children[toIndex];
+ /**
+ * insertBefore and setting the transform
+ * needs to happen in the same frame otherwise
+ * there will be a duplicate transition. This primarily
+ * impacts Firefox where insertBefore and transform operations
+ * are happening in two separate frames.
+ */
+ raf(() => {
+ if (toIndex !== fromIndex && (listOrReorder === undefined || listOrReorder === true)) {
+ const ref = fromIndex < toIndex ? children[toIndex + 1] : children[toIndex];
- this.el.insertBefore(selectedItemEl, ref);
- }
+ this.el.insertBefore(selectedItemEl, ref);
+ }
+
+ for (let i = 0; i < len; i++) {
+ children[i].style['transform'] = '';
+ }
+ });
if (Array.isArray(listOrReorder)) {
listOrReorder = reorderArray(listOrReorder, fromIndex, toIndex);
}
- for (let i = 0; i < len; i++) {
- children[i].style['transform'] = '';
- }
-
selectedItemEl.style.transition = '';
selectedItemEl.classList.remove(ITEM_REORDER_SELECTED);
this.selectedItemEl = undefined;
diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index 57f4da6f29..fc90e5e398 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -201,9 +201,15 @@
// Segment Button: Toolbar w/ Color
// --------------------------------------------------
-// Do not use the global or local CSS variable if the toolbar has a color
+// Toolbar with Color, Checked
+/**
+ * Use the contrast color as background since
+ * since the text color is the base color. Otherwise
+ * we will have contrast issues when using light/medium/dark
+ * palettes across light and dark mode.
+ */
:host(.in-toolbar-color) .segment-button-indicator-background {
- background: #fff;
+ background: #{current-color(contrast)};
}
// Toolbar with Color, Default Segment
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts b/core/src/components/segment/test/toolbar/segment.e2e.ts
index 17a5c15c18..3e22a12072 100644
--- a/core/src/components/segment/test/toolbar/segment.e2e.ts
+++ b/core/src/components/segment/test/toolbar/segment.e2e.ts
@@ -31,6 +31,27 @@ test.describe('segment: toolbar', () => {
Third
+
+
+ First
+ Second
+ Third
+
+
+
+
+ First
+ Second
+ Third
+
+
+
+
+ First
+ Second
+ Third
+
+
`);
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png
index 473f323a96..73ac32c4e4 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png
index 80c6b08818..d7c81a3fcd 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png
index 86b28db3b4..29c58250b9 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png
index 44a847f356..a963830422 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png
index 1bd74fc3a4..703a18b1cc 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png
index beaccb7c2d..c20b4bcedb 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png
index 0499b006ad..40ee2f2c56 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png
index 2e9c1264ef..a2718f8300 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png
index 5fb319a510..f8ea9742f7 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png
index ed13fdcfdf..e48f5bd623 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png
index c40a293c02..dc4cab330f 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png
index 664edcedb8..3637f1359d 100644
Binary files a/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png and b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/split-pane/test/basic/e2e.ts b/core/src/components/split-pane/test/basic/e2e.ts
deleted file mode 100644
index 61f2e20dd5..0000000000
--- a/core/src/components/split-pane/test/basic/e2e.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('split-pane: basic', async () => {
- const page = await newE2EPage({
- url: '/src/components/split-pane/test/basic?ionic:_testing=true',
- });
-
- const screenshotCompares = [];
- const MIN_WIDTH = '#side-min-width';
- const MAX_WIDTH = '#side-max-width';
- const WIDTH = '#side-width';
-
- screenshotCompares.push(await page.compareScreenshot());
-
- await page.click(MIN_WIDTH);
-
- screenshotCompares.push(await page.compareScreenshot());
-
- await page.click(MIN_WIDTH);
- await page.click(MAX_WIDTH);
-
- screenshotCompares.push(await page.compareScreenshot());
-
- await page.click(MAX_WIDTH);
- await page.click(WIDTH);
-
- screenshotCompares.push(await page.compareScreenshot());
-
- for (const screenshotCompare of screenshotCompares) {
- expect(screenshotCompare).toMatchScreenshot();
- }
-});
diff --git a/core/src/components/split-pane/test/basic/index.html b/core/src/components/split-pane/test/basic/index.html
index 60c571f3a3..c346b4739d 100644
--- a/core/src/components/split-pane/test/basic/index.html
+++ b/core/src/components/split-pane/test/basic/index.html
@@ -12,40 +12,24 @@
+
-
- Left Menu
+ Menu
-
-
- Open end Menu
- Close Menu
- Close Menu
- Close Menu
- Close Menu
- Close Menu
- Close Menu
- Close Menu
- Close Menu
- Close Menu
- Close Menu
- Close Menu
-
-
-
-
-
- Footer
-
-
+ Menu Content
@@ -53,88 +37,15 @@
-
- Navigation
+ Content
-
- Page 1
- Disable/enable menu
-
-
-
-
-
-
- Toggle Side Min Width
-
-
-
-
- Toggle Side Max Width
-
-
-
-
- Toggle Side Fixed Width
-
-
-
+ Main Content
-
-
-
-
-