diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index fe8eb929f6..f03ac0d62f 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -11,9 +11,6 @@ # In each subsection folders are ordered first by depth, then alphabetically. # This should make it easy to add new rules without breaking existing ones. -# Global owners -* @ionic-team/framework - # Frameworks ## Angular @@ -56,9 +53,6 @@ /core/src/components/refresher/ @liamdebeasi /core/src/components/refresher-content/ @liamdebeasi -# Codeowner should own the source, but everyone should own the tests -/core/src/components/**/test/ @ionic-team/framework - # Utilities /core/src/utils/animation/ @liamdebeasi diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 6a56927376..ea5f9a729c 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -13,3 +13,4 @@ updates: - dependency-name: "@stencil/react-output-target" - dependency-name: "@stencil/sass" - dependency-name: "@stencil/vue-output-target" + - dependency-name: "ionicons" diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml index 978f7a6782..a5cf54ada6 100644 --- a/.github/workflows/actions/build-core/action.yml +++ b/.github/workflows/actions/build-core/action.yml @@ -4,9 +4,6 @@ runs: using: 'composite' steps: - uses: actions/checkout@v3 - with: - # Checkout the latest commit in this branch - ref: ${{ github.event.pull_request.head.sha }} - uses: actions/setup-node@v3 with: node-version: 16.x diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 3ca6263334..bbe12728ea 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -17,9 +17,6 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - with: - # Checkout the latest commit in this branch - ref: ${{ github.event.pull_request.head.sha }} - uses: ./.github/workflows/actions/build-core test-core-clean-build: diff --git a/CHANGELOG.md b/CHANGELOG.md index 23baef7783..ffc2ec90a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,69 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + + +### Bug Fixes + +* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480)) + + +### Performance Improvements + +* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566) + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + + +### Bug Fixes + +* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503) +* **react, vue:** inline modals apply ion-page class ([#27481](https://github.com/ionic-team/ionic-framework/issues/27481)) ([02678f3](https://github.com/ionic-team/ionic-framework/commit/02678f3652be5139cf0c17d0f1260c145acd1a48)), closes [#27470](https://github.com/ionic-team/ionic-framework/issues/27470) +* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338) + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + + +### Bug Fixes + +* **many:** update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity ([#27396](https://github.com/ionic-team/ionic-framework/issues/27396)) ([995a848](https://github.com/ionic-team/ionic-framework/commit/995a8485751bb4058a59c7e958b1200f8f6539fa)), closes [#27184](https://github.com/ionic-team/ionic-framework/issues/27184) +* **picker-column:** correct RTL direction ([#27460](https://github.com/ionic-team/ionic-framework/issues/27460)) ([d3dd72f](https://github.com/ionic-team/ionic-framework/commit/d3dd72fff67b3b437106e187e75f798653d105e2)), closes [#21205](https://github.com/ionic-team/ionic-framework/issues/21205) +* **popover:** blur translucent popover in chromium ([#27484](https://github.com/ionic-team/ionic-framework/issues/27484)) ([a59eefb](https://github.com/ionic-team/ionic-framework/commit/a59eefb6a312d338895c46d80320ebe91cccac23)), closes [#22176](https://github.com/ionic-team/ionic-framework/issues/22176) + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + + +### Bug Fixes + +* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461) +* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170) +* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de)) +* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990) +* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129) +* **picker-column:** dynamically change options ([#27359](https://github.com/ionic-team/ionic-framework/issues/27359)) ([7c7fb2b](https://github.com/ionic-team/ionic-framework/commit/7c7fb2b1a3bf35b123716b2f975231ceb01dcc07)), closes [#21763](https://github.com/ionic-team/ionic-framework/issues/21763) +* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764) +* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201) +* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478) +* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115) +* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c)) + + + + + ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md index c924d46142..6834a8a876 100644 --- a/angular/CHANGELOG.md +++ b/angular/CHANGELOG.md @@ -3,6 +3,41 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + + +### Bug Fixes + +* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480)) + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + +**Note:** Version bump only for package @ionic/angular + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + +**Note:** Version bump only for package @ionic/angular + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + +**Note:** Version bump only for package @ionic/angular + + + + + ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) diff --git a/angular/README.md b/angular/README.md index b7c530437d..f44f9d1b56 100644 --- a/angular/README.md +++ b/angular/README.md @@ -7,10 +7,10 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs * [Ionic Core Components](https://www.npmjs.com/package/@ionic/core) * [Ionic Documentation](https://ionicframework.com/docs/) +* [Ionic Discord](https://ionic.link/discord) * [Ionic Forum](https://forum.ionicframework.com/) * [Ionicons](http://ionicons.com/) * [Stencil](https://stenciljs.com/) -* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com/) * [Capacitor](https://capacitor.ionicframework.com/) diff --git a/angular/package-lock.json b/angular/package-lock.json index 57ad899bba..c78500ca9f 100644 --- a/angular/package-lock.json +++ b/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "7.0.6", + "version": "7.0.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "7.0.6", + "version": "7.0.10", "license": "MIT", "dependencies": { - "@ionic/core": "^7.0.6", + "@ionic/core": "^7.0.10", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -1227,9 +1227,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "dependencies": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", @@ -8104,9 +8104,9 @@ "dev": true }, "@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "requires": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", diff --git a/angular/package.json b/angular/package.json index a782870661..bf428ecea8 100644 --- a/angular/package.json +++ b/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "7.0.6", + "version": "7.0.10", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -47,7 +47,7 @@ } }, "dependencies": { - "@ionic/core": "^7.0.6", + "@ionic/core": "^7.0.10", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" diff --git a/angular/src/directives/navigation/ion-tabs.ts b/angular/src/directives/navigation/ion-tabs.ts index 33a163eefb..4ae93fd6ba 100644 --- a/angular/src/directives/navigation/ion-tabs.ts +++ b/angular/src/directives/navigation/ion-tabs.ts @@ -8,7 +8,7 @@ import { StackEvent } from './stack-utils'; @Component({ selector: 'ion-tabs', - template: ` + template: `
@@ -29,7 +29,6 @@ import { StackEvent } from './stack-utils'; height: 100%; contain: layout size style; - z-index: $z-index-page-container; } .tabs-inner { position: relative; diff --git a/angular/src/providers/angular-delegate.ts b/angular/src/providers/angular-delegate.ts index b3a98f3bff..603a646af8 100644 --- a/angular/src/providers/angular-delegate.ts +++ b/angular/src/providers/angular-delegate.ts @@ -83,7 +83,8 @@ export class AngularFrameworkDelegate implements FrameworkDelegate { container, component, componentProps, - cssClasses + cssClasses, + this.elementReferenceKey ); resolve(el); }); @@ -119,7 +120,8 @@ export const attachView = ( container: any, component: any, params: any, - cssClasses: string[] | undefined + cssClasses: string[] | undefined, + elementReferenceKey: string | undefined ): any => { /** * Wraps the injector with a custom injector that @@ -145,7 +147,23 @@ export const attachView = ( const instance = componentRef.instance; const hostElement = componentRef.location.nativeElement; + if (params) { + /** + * For modals and popovers, a reference to the component is + * added to `params` during the call to attachViewToDom. If + * a reference using this name is already set, this means + * the app is trying to use the name as a component prop, + * which will cause collisions. + */ + if (elementReferenceKey && instance[elementReferenceKey] !== undefined) { + console.error( + `[Ionic Error]: ${elementReferenceKey} is a reserved property when using ${container.tagName.toLowerCase()}. Rename or remove the "${elementReferenceKey}" property from ${ + component.name + }.` + ); + } + Object.assign(instance, params); } if (cssClasses) { diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 444b046bbf..69ea122a38 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,63 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + + +### Performance Improvements + +* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566) + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + + +### Bug Fixes + +* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503) +* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338) + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + + +### Bug Fixes + +* **many:** update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity ([#27396](https://github.com/ionic-team/ionic-framework/issues/27396)) ([995a848](https://github.com/ionic-team/ionic-framework/commit/995a8485751bb4058a59c7e958b1200f8f6539fa)), closes [#27184](https://github.com/ionic-team/ionic-framework/issues/27184) +* **picker-column:** correct RTL direction ([#27460](https://github.com/ionic-team/ionic-framework/issues/27460)) ([d3dd72f](https://github.com/ionic-team/ionic-framework/commit/d3dd72fff67b3b437106e187e75f798653d105e2)), closes [#21205](https://github.com/ionic-team/ionic-framework/issues/21205) +* **popover:** blur translucent popover in chromium ([#27484](https://github.com/ionic-team/ionic-framework/issues/27484)) ([a59eefb](https://github.com/ionic-team/ionic-framework/commit/a59eefb6a312d338895c46d80320ebe91cccac23)), closes [#22176](https://github.com/ionic-team/ionic-framework/issues/22176) + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + + +### Bug Fixes + +* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461) +* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170) +* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de)) +* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990) +* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129) +* **picker-column:** dynamically change options ([#27359](https://github.com/ionic-team/ionic-framework/issues/27359)) ([7c7fb2b](https://github.com/ionic-team/ionic-framework/commit/7c7fb2b1a3bf35b123716b2f975231ceb01dcc07)), closes [#21763](https://github.com/ionic-team/ionic-framework/issues/21763) +* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764) +* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201) +* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478) +* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115) +* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c)) + + + + + ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) diff --git a/core/README.md b/core/README.md index c16910c4d0..23dbfc1c2f 100644 --- a/core/README.md +++ b/core/README.md @@ -101,10 +101,10 @@ const showModal = async () => { ## Related * [Ionic Documentation](https://ionicframework.com/docs/) +* [Ionic Discord](https://ionic.link/discord) * [Ionic Forum](https://forum.ionicframework.com/) * [Ionicons](http://ionicons.com/) * [Stencil](https://stenciljs.com/) -* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com/) * [Capacitor](https://capacitor.ionicframework.com/) diff --git a/core/package-lock.json b/core/package-lock.json index ae59303f60..5c2daaa060 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,30 +1,30 @@ { "name": "@ionic/core", - "version": "7.0.6", + "version": "7.0.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "7.0.6", + "version": "7.0.10", "license": "MIT", "dependencies": { - "@stencil/core": "^3.2.2", + "@stencil/core": "^3.3.0", "ionicons": "^7.1.0", "tslib": "^2.1.0" }, "devDependencies": { - "@axe-core/playwright": "^4.6.1", + "@axe-core/playwright": "^4.7.1", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@jest/core": "^27.5.1", - "@playwright/test": "^1.33.0", + "@playwright/test": "^1.34.1", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", - "@stencil/angular-output-target": "^0.6.0", + "@stencil/angular-output-target": "^0.7.0", "@stencil/react-output-target": "^0.5.0", - "@stencil/sass": "^3.0.2", - "@stencil/vue-output-target": "^0.8.4", + "@stencil/sass": "^3.0.3", + "@stencil/vue-output-target": "^0.8.5", "@types/jest": "^27.5.2", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^5.17.0", @@ -53,12 +53,12 @@ "dev": true }, "node_modules/@axe-core/playwright": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz", - "integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz", + "integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==", "dev": true, "dependencies": { - "axe-core": "^4.6.3" + "axe-core": "^4.7.0" }, "peerDependencies": { "playwright": ">= 1.0.0" @@ -1501,13 +1501,13 @@ } }, "node_modules/@playwright/test": { - "version": "1.33.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz", - "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==", + "version": "1.34.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.1.tgz", + "integrity": "sha512-hKBpxD79vGkmeqLkJwPBjd4DMUahf1W7ra+83lDNL4JPmLhjITMiy0HoR0WM/PGU6nqnl1cisHc3yKQQgKMxOQ==", "dev": true, "dependencies": { "@types/node": "*", - "playwright-core": "1.33.0" + "playwright-core": "1.34.1" }, "bin": { "playwright": "cli.js" @@ -1585,18 +1585,18 @@ } }, "node_modules/@stencil/angular-output-target": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.0.tgz", - "integrity": "sha512-FqHeRSb125joYzT/jHg3uOz5vKNAg7m3ffI/XXoy2ENC2K9X6NgJp8zuYcqW/o9SlQ8CWuoAv5AiF+tayzDTFA==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz", + "integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==", "dev": true, "peerDependencies": { "@stencil/core": "^2.9.0 || ^3.0.0" } }, "node_modules/@stencil/core": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz", - "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz", + "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA==", "bin": { "stencil": "bin/stencil" }, @@ -1615,18 +1615,18 @@ } }, "node_modules/@stencil/sass": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.2.tgz", - "integrity": "sha512-T8hQreosCjZ6yZ7wJgZBrA1ytL4JMluY1dX6S1a/YgXclanvncvk6nGEpxRVVwRAvtkru0F5Qs+oheiL8nifRA==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz", + "integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==", "dev": true, "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0" } }, "node_modules/@stencil/vue-output-target": { - "version": "0.8.4", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.4.tgz", - "integrity": "sha512-3iESCce7D/2lNVYGM+ukwW/NLFAfeAOcaMFXaK0R1Ub0mZ2YwL9N1rxr9Y8UGfdUzkpi66XIo0jNm3V9YlZ+Ig==", + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz", + "integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==", "dev": true, "peerDependencies": { "@stencil/core": "^2.9.0 || ^3.0.0" @@ -2571,9 +2571,9 @@ } }, "node_modules/axe-core": { - "version": "4.6.3", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz", - "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz", + "integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==", "dev": true, "engines": { "node": ">=4" @@ -8150,14 +8150,14 @@ } }, "node_modules/playwright": { - "version": "1.33.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz", - "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==", + "version": "1.34.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.34.1.tgz", + "integrity": "sha512-RonTwQifzkCZHsjZKYUKsOJkQAVe1HArnyLcSRrkyDxN46Ytpwki5XzQFdpuv0XD8WtAjs4gI3oMYJiEj5Qo6g==", "dev": true, "hasInstallScript": true, "peer": true, "dependencies": { - "playwright-core": "1.33.0" + "playwright-core": "1.34.1" }, "bin": { "playwright": "cli.js" @@ -8167,9 +8167,9 @@ } }, "node_modules/playwright-core": { - "version": "1.33.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz", - "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==", + "version": "1.34.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.1.tgz", + "integrity": "sha512-4Y5hGLoSrnB/BXj2NFKBNWP/bI9uVejTVbso1ZBtkKZ+O2KiVIeCJ3R4c7Cf2PbP7htjLolHXY+mImt2IWOlEg==", "dev": true, "bin": { "playwright": "cli.js" @@ -10352,12 +10352,12 @@ }, "dependencies": { "@axe-core/playwright": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.6.1.tgz", - "integrity": "sha512-XMKP2OzGfGIYpU9G9FgI2ulyjEXQDP6qtZerOwdQ7YC1w4SFgofK3ogSk0qVoy0QI+q6XWLUJMfMMkUwdTR2dA==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz", + "integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==", "dev": true, "requires": { - "axe-core": "^4.6.3" + "axe-core": "^4.7.0" } }, "@babel/code-frame": { @@ -11398,14 +11398,14 @@ } }, "@playwright/test": { - "version": "1.33.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz", - "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==", + "version": "1.34.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.1.tgz", + "integrity": "sha512-hKBpxD79vGkmeqLkJwPBjd4DMUahf1W7ra+83lDNL4JPmLhjITMiy0HoR0WM/PGU6nqnl1cisHc3yKQQgKMxOQ==", "dev": true, "requires": { "@types/node": "*", "fsevents": "2.3.2", - "playwright-core": "1.33.0" + "playwright-core": "1.34.1" } }, "@rollup/plugin-node-resolve": { @@ -11460,16 +11460,16 @@ } }, "@stencil/angular-output-target": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.0.tgz", - "integrity": "sha512-FqHeRSb125joYzT/jHg3uOz5vKNAg7m3ffI/XXoy2ENC2K9X6NgJp8zuYcqW/o9SlQ8CWuoAv5AiF+tayzDTFA==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz", + "integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==", "dev": true, "requires": {} }, "@stencil/core": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz", - "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==" + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz", + "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA==" }, "@stencil/react-output-target": { "version": "0.5.0", @@ -11479,16 +11479,16 @@ "requires": {} }, "@stencil/sass": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.2.tgz", - "integrity": "sha512-T8hQreosCjZ6yZ7wJgZBrA1ytL4JMluY1dX6S1a/YgXclanvncvk6nGEpxRVVwRAvtkru0F5Qs+oheiL8nifRA==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz", + "integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==", "dev": true, "requires": {} }, "@stencil/vue-output-target": { - "version": "0.8.4", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.4.tgz", - "integrity": "sha512-3iESCce7D/2lNVYGM+ukwW/NLFAfeAOcaMFXaK0R1Ub0mZ2YwL9N1rxr9Y8UGfdUzkpi66XIo0jNm3V9YlZ+Ig==", + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz", + "integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==", "dev": true, "requires": {} }, @@ -12144,9 +12144,9 @@ } }, "axe-core": { - "version": "4.6.3", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz", - "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==", + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz", + "integrity": "sha512-sCXXUhA+cljomZ3ZAwb8i1p3oOlkABzPy08ZDAoGcYuvtBPlQ1Ytde129ArXyHWDhfeewq7rlx9F+cUx2SSlkg==", "dev": true }, "babel-jest": { @@ -16275,19 +16275,19 @@ } }, "playwright": { - "version": "1.33.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz", - "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==", + "version": "1.34.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.34.1.tgz", + "integrity": "sha512-RonTwQifzkCZHsjZKYUKsOJkQAVe1HArnyLcSRrkyDxN46Ytpwki5XzQFdpuv0XD8WtAjs4gI3oMYJiEj5Qo6g==", "dev": true, "peer": true, "requires": { - "playwright-core": "1.33.0" + "playwright-core": "1.34.1" } }, "playwright-core": { - "version": "1.33.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz", - "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==", + "version": "1.34.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.1.tgz", + "integrity": "sha512-4Y5hGLoSrnB/BXj2NFKBNWP/bI9uVejTVbso1ZBtkKZ+O2KiVIeCJ3R4c7Cf2PbP7htjLolHXY+mImt2IWOlEg==", "dev": true }, "postcss": { diff --git a/core/package.json b/core/package.json index 0141e812ef..3014518410 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "7.0.6", + "version": "7.0.10", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -31,22 +31,22 @@ "loader/" ], "dependencies": { - "@stencil/core": "^3.2.2", + "@stencil/core": "^3.3.0", "ionicons": "^7.1.0", "tslib": "^2.1.0" }, "devDependencies": { - "@axe-core/playwright": "^4.6.1", + "@axe-core/playwright": "^4.7.1", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@jest/core": "^27.5.1", - "@playwright/test": "^1.33.0", + "@playwright/test": "^1.34.1", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", - "@stencil/angular-output-target": "^0.6.0", + "@stencil/angular-output-target": "^0.7.0", "@stencil/react-output-target": "^0.5.0", - "@stencil/sass": "^3.0.2", - "@stencil/vue-output-target": "^0.8.4", + "@stencil/sass": "^3.0.3", + "@stencil/vue-output-target": "^0.8.5", "@types/jest": "^27.5.2", "@types/node": "^14.6.0", "@typescript-eslint/eslint-plugin": "^5.17.0", diff --git a/core/src/components/accordion-group/accordion-group.md.scss b/core/src/components/accordion-group/accordion-group.md.scss index 94ca1250f5..158de18421 100644 --- a/core/src/components/accordion-group/accordion-group.md.scss +++ b/core/src/components/accordion-group/accordion-group.md.scss @@ -21,7 +21,7 @@ :host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next) { @include border-radius($accordion-md-border-radius, $accordion-md-border-radius, null, null); } -:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type, + :host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type { @include margin(0, 0, 0, 0); } diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Chrome-linux.png index 66346410cb..d3d0ddfa04 100644 Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Chrome-linux.png index cfcfd9d90a..8e063f6237 100644 Binary files a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ios-ltr-Mobile-Chrome-linux.png index b0d66fd7dc..a18822d27e 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ios-ltr-Mobile-Chrome-linux.png index 4a9ce49cd6..54e0b3824a 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ios-ltr-Mobile-Chrome-linux.png index 3170d67f41..f2f747e59b 100644 Binary files a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ios-ltr-Mobile-Firefox-linux.png index 0c1016bba6..bc25f7fbb9 100644 Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-md-ltr-Mobile-Firefox-linux.png index a2709d3d33..2fd24384c7 100644 Binary files a/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/nested/accordion.e2e.ts-snapshots/accordion-parent-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts index 8514c0fd5e..2eb24a423a 100644 --- a/core/src/components/alert/test/a11y/alert.e2e.ts +++ b/core/src/components/alert/test/a11y/alert.e2e.ts @@ -40,7 +40,8 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => { await didPresent.next(); - const results = await new AxeBuilder({ page }).analyze(); + // TODO FW-4375 + const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze(); expect(results.violations).toEqual([]); }); diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png index 66974b0f6f..94344869ee 100644 Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png index bd4742a9f3..3147a4ec86 100644 Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png index 46b2d29ad8..a5893462b2 100644 Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png index 67347f700b..c06f041442 100644 Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png index ebec1f535d..429264f767 100644 Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png index a21cad79b1..a6a94e4e67 100644 Binary files a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png index 557f18b88f..3123800118 100644 Binary files a/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/breadcrumbs/test/collapsed/breadcrumbs.e2e.ts-snapshots/breadcrumb-collapsed-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png index 00ab65d8cc..a6f55c42bf 100644 Binary files a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss index cb45383d59..37d97eb05f 100644 --- a/core/src/components/checkbox/checkbox.ios.scss +++ b/core/src/components/checkbox/checkbox.ios.scss @@ -21,6 +21,9 @@ // iOS Checkbox: Disabled // ----------------------------------------- +// The checkbox and label should use the +// same opacity and match the other form +// controls :host(.checkbox-disabled) { opacity: $checkbox-ios-disabled-opacity; diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss index 6f322ed66e..adc85f71d7 100644 --- a/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/core/src/components/checkbox/checkbox.ios.vars.scss @@ -54,7 +54,7 @@ $checkbox-ios-checkmark-width: math.div($checkbox-ios-icon-size, 6) + $checkbox-ios-checkmark-height: $checkbox-ios-icon-size * 0.5 !default; /// @prop - Opacity of the disabled checkbox -$checkbox-ios-disabled-opacity: .3 !default; +$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; /// @prop - Margin top of the left checkbox item $checkbox-ios-item-start-margin-top: 8px !default; diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss index 3288a17bf0..5b7b59470d 100644 --- a/core/src/components/checkbox/checkbox.md.scss +++ b/core/src/components/checkbox/checkbox.md.scss @@ -40,11 +40,19 @@ // Material Design Checkbox: Disabled // -------------------------------------------------------- +// The checkbox itself should use the disabled +// opacity set by its spec, while the label +// should match the other form controls -:host(.checkbox-disabled) { +:host(.legacy-checkbox.checkbox-disabled), +:host(.checkbox-disabled) .label-text-wrapper { opacity: $checkbox-md-disabled-opacity; } +:host(.checkbox-disabled) .native-wrapper { + opacity: $checkbox-md-icon-disabled-opacity; +} + // Material Design Checkbox Within An Item // TODO(FW-3100): remove this diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss index 6e79d3f6fb..8c750fd566 100644 --- a/core/src/components/checkbox/checkbox.md.vars.scss +++ b/core/src/components/checkbox/checkbox.md.vars.scss @@ -4,8 +4,8 @@ // Material Design Checkbox // -------------------------------------------------- -/// @prop - Opacity of the disabled checkbox -$checkbox-md-disabled-opacity: .3 !default; +/// @prop - Opacity of the disabled checkbox label +$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !default; /// @prop - Background color of the checkbox icon when off $checkbox-md-icon-background-color-off: $item-md-background !default; @@ -72,3 +72,12 @@ $checkbox-md-item-end-margin-bottom: $checkbox-md-item-end-margin-top !defau /// @prop - Margin start of the end checkbox item $checkbox-md-item-end-margin-start: 0 !default; + +/// @prop - Opacity of the disabled checkbox +/// This value is used because the checkbox color is set to +/// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be +/// `rgb(0, 0, 0, 0.38)` when disabled but the disabled +/// opacity is applied on top of the transparent color so +/// this opacity gets us the equivalent of applying `0.38` +/// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)` +$checkbox-md-icon-disabled-opacity: 0.63 !default; diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts index e67f48ccda..83d9c2858e 100644 --- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts +++ b/core/src/components/checkbox/test/basic/checkbox.e2e.ts @@ -3,42 +3,6 @@ import { configs, test } from '@utils/test/playwright'; configs().forEach(({ title, screenshot, config }) => { test.describe(title('checkbox: basic visual tests'), () => { - test('should render unchecked checkbox correctly', async ({ page }) => { - await page.setContent( - ` - Unchecked - `, - config - ); - - const checkbox = page.locator('ion-checkbox'); - await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-unchecked`)); - }); - - test('should render checked checkbox correctly', async ({ page }) => { - await page.setContent( - ` - Checked - `, - config - ); - - const checkbox = page.locator('ion-checkbox'); - await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-checked`)); - }); - - test('should render disabled checkbox correctly', async ({ page }) => { - await page.setContent( - ` - Disabled - `, - config - ); - - const checkbox = page.locator('ion-checkbox'); - await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-disabled`)); - }); - test('should render custom checkmark-width correctly', async ({ page }) => { await page.setContent( ` diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 73b0cc4a8e..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index c679862437..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index bd203a2b5d..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 1d612229c1..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 6a11c8fe0a..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index b11b304d18..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 8d962db40e..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index ab01127c68..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 31a1c2e14a..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index a1d703b3a1..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 2e21e32cc7..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 0741ac3c1c..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checked-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index a24cf5ffbf..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 800ef922d3..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 0afc1d0177..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index cc2563a3c4..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index eaa03cb9c3..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 01cf99935d..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index c62991e85d..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 44f00b5fa6..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 43c154b13e..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 3b81d903da..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index d3aa1c6506..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 2ed1e730a9..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-disabled-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index e3457321e3..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index af3535cb55..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 3cc5cd966a..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 033af28eb3..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index ab164e05f6..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index fd56b629bd..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index d1600c728b..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 8718fb1269..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 4b3e35f880..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index acd66dc20d..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 7041f25ecc..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 9ced1f05ff..0000000000 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png index f407c37ce6..960f8bef75 100644 Binary files a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png index 79aa5443ae..c1391b4837 100644 Binary files a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png index fc87973882..27424a8b27 100644 Binary files a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png index dcb3d0d09a..b566f54e30 100644 Binary files a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png index e557ef5545..ce8cc22239 100644 Binary files a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png index 9f9d2f0716..94bd4d3e33 100644 Binary files a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-long-label-ios-rtl-Mobile-Safari-linux.png index 3561c27d77..513bd5b31d 100644 Binary files a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-long-label-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-long-label-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-long-label-md-rtl-Mobile-Safari-linux.png index 46f3322ae9..99b552763d 100644 Binary files a/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-long-label-md-rtl-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/label/checkbox.e2e.ts-snapshots/checkbox-long-label-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts b/core/src/components/checkbox/test/states/checkbox.e2e.ts new file mode 100644 index 0000000000..efd20d5937 --- /dev/null +++ b/core/src/components/checkbox/test/states/checkbox.e2e.ts @@ -0,0 +1,54 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('checkbox: states'), () => { + test('should render disabled checkbox correctly', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const checkbox = page.locator('ion-checkbox'); + expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-disabled`)); + }); + + test('should render disabled checked checkbox correctly', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const checkbox = page.locator('ion-checkbox'); + expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked-disabled`)); + }); + + test('should render checked checkbox correctly', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const checkbox = page.locator('ion-checkbox'); + expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked`)); + }); + + test('should render unchecked checkbox correctly', async ({ page }) => { + await page.setContent( + ` + Label + `, + config + ); + + const checkbox = page.locator('ion-checkbox'); + expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-unchecked`)); + }); + }); +}); diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7b9ad2267e Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7de86af622 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..769c256127 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9898542c6d Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0e56510bd4 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..80d71eccfc Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2fb23d31b1 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a5bd3a3983 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..766ebcc006 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8d2ce81791 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..388a43165d Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..90fabce7c5 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-checked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..29c7f63b9d Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..06eb80ee6a Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..73db033888 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..44c90a3b4c Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..75c1279ae0 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6f45a7796c Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..63ed0223f9 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..70c34de496 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f965e29192 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0aab71a995 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..fe852f366e Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..08c8e750d2 Binary files /dev/null and b/core/src/components/checkbox/test/states/checkbox.e2e.ts-snapshots/checkbox-unchecked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/states/index.html b/core/src/components/checkbox/test/states/index.html new file mode 100644 index 0000000000..347aa4c305 --- /dev/null +++ b/core/src/components/checkbox/test/states/index.html @@ -0,0 +1,78 @@ + + + + + Checkbox - States + + + + + + + + + + + + + + Checkbox - States + + + + +
+
+

Unchecked

+ Enable Notifications +
+ +
+

Checked

+ Enable Notifications +
+ +
+

Disabled, Unchecked

+ Enable Notifications +
+ +
+

Disabled, Checked

+ Enable Notifications +
+
+ + + + diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts index 6da78ca6db..9d9f2cf24b 100644 --- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts +++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts @@ -16,36 +16,36 @@ configs().forEach(({ title, screenshot, config }) => { }); }); - // TODO FW-4110 - test.skip('should not have visual regressions for date wheel', async ({ page }) => { + test('should not have visual regressions for date wheel', async ({ page }) => { await page.setContent( ` `, config ); + await page.waitForSelector('.datetime-ready'); await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-diff`)); }); - // TODO FW-4110 - test.skip('should not have visual regressions for date-time wheel', async ({ page }) => { + test('should not have visual regressions for date-time wheel', async ({ page }) => { await page.setContent( ` `, config ); + await page.waitForSelector('.datetime-ready'); await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-time-diff`)); }); - // TODO FW-4110 - test.skip('should not have visual regressions for time-date wheel', async ({ page }) => { + test('should not have visual regressions for time-date wheel', async ({ page }) => { await page.setContent( ` `, config ); + await page.waitForSelector('.datetime-ready'); await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-time-date-diff`)); }); diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Safari-linux.png index 0c3cf73ae7..2197470efc 100644 Binary files a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-basic-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Chrome-linux.png index 910350d962..a5a180e190 100644 Binary files a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Chrome-linux.png index 16dc6c9eeb..ddd85b5628 100644 Binary files a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Safari-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Safari-linux.png index 3fa6e4375a..3d05b705dd 100644 Binary files a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Chrome-linux.png index bd9be82546..a10145c4aa 100644 Binary files a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Chrome-linux.png b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Chrome-linux.png index 619bbd29a7..43e4c908cf 100644 Binary files a/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/fab/test/basic/fab.e2e.ts-snapshots/fab-open-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Chrome-linux.png index 0964aa6bd1..322ffa47c8 100644 Binary files a/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/fab/test/states/fab.e2e.ts-snapshots/fab-states-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/fab/test/translucent/fab.e2e.ts-snapshots/fab-translucent-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/fab/test/translucent/fab.e2e.ts-snapshots/fab-translucent-ios-ltr-Mobile-Chrome-linux.png index 47c11fc890..b46d013511 100644 Binary files a/core/src/components/fab/test/translucent/fab.e2e.ts-snapshots/fab-translucent-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/fab/test/translucent/fab.e2e.ts-snapshots/fab-translucent-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx index e2770884d8..e857f9afda 100644 --- a/core/src/components/footer/footer.tsx +++ b/core/src/components/footer/footer.tsx @@ -51,8 +51,17 @@ export class Footer implements ComponentInterface { this.checkCollapsibleFooter(); } - connectedCallback() { - this.keyboardCtrl = createKeyboardController((keyboardOpen) => { + async connectedCallback() { + this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => { + /** + * If the keyboard is hiding, then we need to wait + * for the webview to resize. Otherwise, the footer + * will flicker before the webview resizes. + */ + if (keyboardOpen === false && waitForResize !== undefined) { + await waitForResize; + } + this.keyboardVisible = keyboardOpen; // trigger re-render by updating state }); } 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 index 38df343ca1..ede70e7d90 100644 Binary files a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-ltr-Mobile-Chrome-linux.png 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-rtl-Mobile-Chrome-linux.png b/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Chrome-linux.png index 2548c0e7da..cc454aee66 100644 Binary files a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-flip-md-rtl-Mobile-Chrome-linux.png 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-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 index 38df343ca1..ede70e7d90 100644 Binary files a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-ltr-Mobile-Chrome-linux.png 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-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 index 38df343ca1..ede70e7d90 100644 Binary files a/core/src/components/icon/test/dir/icon.e2e.ts-snapshots/icon-no-flip-md-rtl-Mobile-Chrome-linux.png 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/input/input.ios.scss b/core/src/components/input/input.ios.scss index 76291d92cc..e52fb443c6 100644 --- a/core/src/components/input/input.ios.scss +++ b/core/src/components/input/input.ios.scss @@ -44,3 +44,14 @@ :host(.input-label-placement-stacked) { min-height: 56px; } + + +// Input - Disabled +// ---------------------------------------------------------------- +// The input, label, helper text, char counter and placeholder +// should use the same opacity and match the other form controls + +:host(.legacy-input) .native-input[disabled], +:host(.input-disabled) { + opacity: #{$input-ios-disabled-opacity}; +} diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss index eca1b4197b..46b35176f7 100644 --- a/core/src/components/input/input.ios.vars.scss +++ b/core/src/components/input/input.ios.vars.scss @@ -72,3 +72,6 @@ $input-ios-highlight-color-valid: ion-color(success, base) !default; /// @prop - Color of the input highlight when invalid $input-ios-highlight-color-invalid: ion-color(danger, base) !default; + +/// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input +$input-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index 29e51842a9..46241740e0 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -36,6 +36,9 @@ // Input - Disabled // ---------------------------------------------------------------- +// The input, label, helper text, char counter and placeholder +// should use the same opacity and match the other form controls + :host(.legacy-input) .native-input[disabled], :host(.input-disabled) { opacity: #{$input-md-disabled-opacity}; @@ -43,6 +46,7 @@ // Input Bottom // ---------------------------------------------------------------- + /** * If the input has a validity state, the * border and label should reflect that as a color. diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss index 06aacfe6af..e52e24bc0d 100644 --- a/core/src/components/input/input.md.vars.scss +++ b/core/src/components/input/input.md.vars.scss @@ -70,7 +70,5 @@ $input-md-inset-margin-start: $item-md-padding-start !default; /// @prop - The amount of whitespace to display on either side of the floating label $input-md-floating-label-padding: 4px !default; -/// @prop - The disabled opacity of the input text, the label, helper text, char counter and placeholder of a disabled input. -/// This value comes from the Material Design spec: -/// - https://github.com/material-components/material-web/pull/549 -$input-md-disabled-opacity: 0.37 !default; +/// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input +$input-md-disabled-opacity: $form-control-md-disabled-opacity !default; diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 2dbcf1e408..ab0cf76b37 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -161,13 +161,6 @@ } } - -:host(.legacy-input) .native-input[disabled], -:host(.input-disabled) { - opacity: 0.4; -} - - // Input Cover: Unfocused // -------------------------------------------------- // The input cover is the div that actually receives the @@ -193,7 +186,6 @@ opacity: 1; } - // Clear Input Icon // -------------------------------------------------- diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png index 8271968604..7b49bc8636 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png index a4db99f94e..40759ce6df 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-long-label-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png index 0450a8fc71..8b3f3ebc42 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Safari-linux.png index 9763d8dca9..aa31296db2 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Safari-linux.png index 139efa081f..9b9ee68111 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Safari-linux.png index 1bee14ddc3..bba87baa1c 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-outline-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Safari-linux.png index 1eabb69814..aeed770e4b 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-long-label-solid-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Safari-linux.png index 9763d8dca9..aa31296db2 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Safari-linux.png index 139efa081f..9b9ee68111 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-long-label-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png index ee0758e49d..df285daf58 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png index 57068e3163..e8c47288c9 100644 Binary files a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-long-label-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png index 5a6c508653..5ec704a523 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png index 9719ef7e9e..47e6d1c280 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png index d67ee96d41..0788034530 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png index a57972dc4b..46fbe59668 100644 Binary files a/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png index 8cac1c651f..15d421905f 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png index f0f38a7a75..a9f0299738 100644 Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png index cfee9665cd..3a104de5da 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png index d74e9bbfa2..d635a3b288 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png index a36f82d6f5..dab28f118f 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png index 23a34b9a99..2cb48fba02 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/disabled/index.html b/core/src/components/item/test/disabled/index.html index 91e14fb24c..3c653f134c 100644 --- a/core/src/components/item/test/disabled/index.html +++ b/core/src/components/item/test/disabled/index.html @@ -55,6 +55,10 @@ + + + + Disabled Toggle @@ -63,6 +67,12 @@ Disabled Checkbox + + + Disabled Radio + + + Disabled Range diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png index 7664d666b1..e763e7982e 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png index 8a61faa707..12df8381eb 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png index c26d5201a0..73e2c433c0 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png index b8d604ae39..6dd27b5be0 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png index a21321ad29..a3832144c4 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png index d9ca64c71e..65e25dbb5e 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png index 9995736019..add6b828d2 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png index eeb6a575cb..2c53c983d6 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png index 59ceebba2d..29bad13a44 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png index 240610e30c..f0e81f7ced 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png index 2e2f90ba5f..0a6715da71 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png index 0663b6fad8..d29d8367e8 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png index 8bf2093cdd..bd77316c1a 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png index 0cc200b6a0..9fa873e320 100644 Binary files a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Safari-linux.png index 15d8331401..b0c7a1e81f 100644 Binary files a/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/images/item.e2e.ts-snapshots/item-images-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png index eb0ddf66f3..e09bb8165f 100644 Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png index a86b75af94..ebca29ab21 100644 Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png index d74a8fa25e..67dc173537 100644 Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png index c8dd332d5f..67ae11c34d 100644 Binary files a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png index 6695c22473..11199791ab 100644 Binary files a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png index 1665b93af8..3755294ac5 100644 Binary files a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png index 7c43091f4d..894b1112b2 100644 Binary files a/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/alignment/item.e2e.ts-snapshots/item-alignment-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/index.html b/core/src/components/item/test/legacy/disabled/index.html index a728328928..7378c9c84b 100644 --- a/core/src/components/item/test/legacy/disabled/index.html +++ b/core/src/components/item/test/legacy/disabled/index.html @@ -57,6 +57,11 @@ + + Disabled Textarea + + + Disabled Toggle @@ -67,6 +72,13 @@ + + + Disabled Radio + + + + Disabled Range diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png index bfbbd7762d..a39ded2697 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png index 784f4c4160..51501d2b3f 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png index 359ba33681..9b643bcde6 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png index 4b47b30be4..634e0a0942 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png index 3a4b76c5f8..43949a22a2 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png index 64cb2c49d9..e93f0f81b4 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png index 8070a4cfac..360f3ce4f3 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png index 4e0e6542ff..b85c5ec44b 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png index 77402b6db6..dc6bac1231 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png index 4a898b64be..0be3dc78c4 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png index 36c4e3ad97..c8dd449af4 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png index 6d125a2a76..48b50b32da 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png index ed88466a93..7fdd8fcab9 100644 Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png index e32b9b16a6..6df30a7119 100644 Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png index b9b07ee21f..dd67daaf0c 100644 Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png index 9dafe340b3..0aa889d1e4 100644 Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png index 343c0cbc85..f21cfc94e1 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png index eddfb960e4..2e16695805 100644 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png index 396cd968da..8f77600cf8 100644 Binary files a/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/text/item.e2e.ts-snapshots/item-text-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/basic/list.e2e.ts b/core/src/components/list/test/basic/list.e2e.ts index dc23fb9e3c..d7bb1b3986 100644 --- a/core/src/components/list/test/basic/list.e2e.ts +++ b/core/src/components/list/test/basic/list.e2e.ts @@ -4,7 +4,20 @@ import { configs, test } from '@utils/test/playwright'; configs().forEach(({ title, screenshot, config }) => { test.describe(title('list: basic'), () => { test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/list/test/basic`, config); + await page.setContent( + ` + + + Pokémon Yellow + Super Metroid + Mega Man X + The Legend of Zelda + Halo + + + `, + config + ); const list = page.locator('ion-list'); diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Chrome-linux.png index 6c0d8104d8..d4598f5b86 100644 Binary files a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Firefox-linux.png index 3508642090..129996fb08 100644 Binary files a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Safari-linux.png index 254be86050..b45706ef0a 100644 Binary files a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Chrome-linux.png index ae7e97add6..e718a4b189 100644 Binary files a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Firefox-linux.png index 3f82eecc61..5e1b8ed624 100644 Binary files a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Safari-linux.png index 12ba94a0af..d286190df7 100644 Binary files a/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/list/test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Chrome-linux.png index d23bad86c9..53df9c5c01 100644 Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card-scroll-target/modal.e2e.ts b/core/src/components/modal/test/card-scroll-target/modal.e2e.ts index 848fc26e38..0856e73a8d 100644 --- a/core/src/components/modal/test/card-scroll-target/modal.e2e.ts +++ b/core/src/components/modal/test/card-scroll-target/modal.e2e.ts @@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await ionModalDidPresent.next(); const content = page.locator('ion-modal .ion-content-scroll-host'); - await dragElementBy(content, page, 0, 500); + await dragElementBy(content, page, 0, 300); await ionModalDidDismiss.next(); }); diff --git a/core/src/components/modal/test/fixtures.ts b/core/src/components/modal/test/fixtures.ts index 297ed32fcb..c5632c6f1a 100644 --- a/core/src/components/modal/test/fixtures.ts +++ b/core/src/components/modal/test/fixtures.ts @@ -22,7 +22,7 @@ export class CardModalPage { return this.page.locator('ion-modal'); } - async swipeToCloseModal(selector: string, waitForDismiss = true, swipeY = 500) { + async swipeToCloseModal(selector: string, waitForDismiss = true, swipeY = 300) { const { page } = this; const elementRef = page.locator(selector); await dragElementBy(elementRef, page, 0, swipeY); diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts index 51a0eea2c3..2485842bd3 100644 --- a/core/src/components/modal/test/sheet/modal.e2e.ts +++ b/core/src/components/modal/test/sheet/modal.e2e.ts @@ -129,7 +129,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); const header = page.locator('.modal-sheet ion-header'); - await dragElementBy(header, page, 0, 500); + await dragElementBy(header, page, 0, 150); await ionBreakpointDidChange.next(); diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index 75f0b07890..3d21d18b9d 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -146,6 +146,7 @@ export class PickerColumnCmp implements ComponentInterface { let translateY = 0; let translateZ = 0; const { col, rotateFactor } = this; + const prevSelected = col.selectedIndex; const selectedIndex = (col.selectedIndex = this.indexForY(-y)); const durationStr = duration === 0 ? '' : duration + 'ms'; const scaleStr = `scale(${this.scaleFactor})`; @@ -204,7 +205,7 @@ export class PickerColumnCmp implements ComponentInterface { button.classList.remove(PICKER_OPT_SELECTED); } } - this.col.prevSelected = selectedIndex; + this.col.prevSelected = prevSelected; if (saveY) { this.y = y; diff --git a/core/src/components/picker-column/test/standalone/picker-column.e2e.ts b/core/src/components/picker-column/test/standalone/picker-column.e2e.ts index e25bdcbaa7..d2b108ac25 100644 --- a/core/src/components/picker-column/test/standalone/picker-column.e2e.ts +++ b/core/src/components/picker-column/test/standalone/picker-column.e2e.ts @@ -3,9 +3,11 @@ import { configs, test } from '@utils/test/playwright'; configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { test.describe(title('picker-column'), () => { - test('should present picker without ion-app', async ({ page }) => { - await page.goto('/src/components/picker-column/test/standalone', config); + test.beforeEach(async ({ page }) => { + await page.goto(`/src/components/picker-column/test/standalone`, config); + }); + test('should present picker without ion-app', async ({ page }) => { const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent'); const picker = page.locator('ion-picker'); @@ -16,5 +18,29 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await expect(picker).toBeVisible(); }); + + test('should have the correct selectedIndex and prevSelected', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/21764', + }); + + const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent'); + const ionPickerColChangeEvent = await page.spyOnEvent('ionPickerColChange'); + + const column = page.locator('ion-picker-column'); + const secondOption = column.locator('.picker-opt').nth(1); + + await page.click('#single-column-button'); + + await ionPickerDidPresent.next(); + + await secondOption.click(); + + await ionPickerColChangeEvent.next(); + + expect(ionPickerColChangeEvent.events[0].detail.prevSelected).toBe(0); + expect(ionPickerColChangeEvent.events[0].detail.selectedIndex).toBe(1); + }); }); }); diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss index ea082b73b0..2d83319a12 100644 --- a/core/src/components/picker/picker.scss +++ b/core/src/components/picker/picker.scss @@ -120,7 +120,6 @@ margin-bottom: var(--ion-safe-area-bottom, 0); contain: strict; - direction: ltr; overflow: hidden; } diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Chrome-linux.png index 315fb2cd63..c578518629 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Firefox-linux.png index 24391c0686..c3a8f28cc2 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Safari-linux.png index 907836c68c..b2ab2c21ba 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Chrome-linux.png index 5aa4d8a327..bee04e3057 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Firefox-linux.png index 3c014f4475..68f9b67c9e 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Safari-linux.png index 0a2fb389ac..0a0f4d239d 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Safari-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-basic-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Chrome-linux.png index d1dec582b8..d06bc84410 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Firefox-linux.png index 9a1c718c3a..802e5c45d8 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Safari-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Safari-linux.png index c375eb198e..857e6d1d1a 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Chrome-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Chrome-linux.png index a7dfe06b57..b26238a5a6 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Firefox-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Firefox-linux.png index 1420ec4916..2404554503 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Safari-linux.png index 13e37f3602..48fdee55c7 100644 Binary files a/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Safari-linux.png and b/core/src/components/picker/test/basic/picker.e2e.ts-snapshots/picker-value-selected-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts index 4f2c74b9d5..aa4e056814 100644 --- a/core/src/components/popover/animations/ios.enter.ts +++ b/core/src/components/popover/animations/ios.enter.ts @@ -86,7 +86,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => const baseAnimation = createAnimation(); const backdropAnimation = createAnimation(); - const wrapperAnimation = createAnimation(); + const contentAnimation = createAnimation(); backdropAnimation .addElement(root.querySelector('ion-backdrop')!) @@ -96,7 +96,15 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => }) .afterClearStyles(['pointer-events']); - wrapperAnimation.addElement(root.querySelector('.popover-wrapper')!).fromTo('opacity', 0.01, 1); + // In Chromium, if the wrapper animates, the backdrop filter doesn't work. + // The Chromium team stated that this behavior is expected and not a bug. The element animating opacity creates a backdrop root for the backdrop-filter. + // To get around this, instead of animating the wrapper, animate both the arrow and content. + // https://bugs.chromium.org/p/chromium/issues/detail?id=1148826 + contentAnimation + .addElement(root.querySelector('.popover-arrow')!) + .addElement(root.querySelector('.popover-content')!) + .fromTo('opacity', 0.01, 1); + // TODO(FW-4376) Ensure that arrow also blurs when translucent return baseAnimation .easing('ease') @@ -142,5 +150,5 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => } } }) - .addAnimation([backdropAnimation, wrapperAnimation]); + .addAnimation([backdropAnimation, contentAnimation]); }; diff --git a/core/src/components/popover/animations/ios.leave.ts b/core/src/components/popover/animations/ios.leave.ts index 77594c752f..fa85937876 100644 --- a/core/src/components/popover/animations/ios.leave.ts +++ b/core/src/components/popover/animations/ios.leave.ts @@ -13,11 +13,14 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => { const baseAnimation = createAnimation(); const backdropAnimation = createAnimation(); - const wrapperAnimation = createAnimation(); + const contentAnimation = createAnimation(); backdropAnimation.addElement(root.querySelector('ion-backdrop')!).fromTo('opacity', 'var(--backdrop-opacity)', 0); - wrapperAnimation.addElement(root.querySelector('.popover-wrapper')!).fromTo('opacity', 0.99, 0); + contentAnimation + .addElement(root.querySelector('.popover-arrow')!) + .addElement(root.querySelector('.popover-content')!) + .fromTo('opacity', 0.99, 0); return baseAnimation .easing('ease') @@ -37,5 +40,5 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => { } }) .duration(300) - .addAnimation([backdropAnimation, wrapperAnimation]); + .addAnimation([backdropAnimation, contentAnimation]); }; diff --git a/core/src/components/popover/popover.ios.scss b/core/src/components/popover/popover.ios.scss index 3b2de457aa..26ee84ed2c 100644 --- a/core/src/components/popover/popover.ios.scss +++ b/core/src/components/popover/popover.ios.scss @@ -89,6 +89,11 @@ transform: rotate(-90deg); } +.popover-arrow, +.popover-content { + opacity: 0; +} + // Translucent Popover // ----------------------------------------- diff --git a/core/src/components/popover/popover.md.scss b/core/src/components/popover/popover.md.scss index e588debfc0..7b4e5c2d19 100644 --- a/core/src/components/popover/popover.md.scss +++ b/core/src/components/popover/popover.md.scss @@ -19,3 +19,7 @@ .popover-viewport { transition-delay: 100ms; } + +.popover-wrapper { + opacity: 0; +} diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss index 9468bc1020..1568503adf 100644 --- a/core/src/components/popover/popover.scss +++ b/core/src/components/popover/popover.scss @@ -68,7 +68,6 @@ } .popover-wrapper { - opacity: 0; z-index: $z-index-overlay-wrapper; } diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png index f27128c240..befbd7a1d3 100644 Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-popover-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Firefox-linux.png index fa3dd5383c..2ad9df6bac 100644 Binary files a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Firefox-linux.png b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Firefox-linux.png index 910d0bdc33..18918e6c2f 100644 Binary files a/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/popover/test/reference/popover.e2e.ts-snapshots/popover-reference-trigger-trigger-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss index 334c369478..958cad6ffe 100644 --- a/core/src/components/radio/radio.ios.scss +++ b/core/src/components/radio/radio.ios.scss @@ -42,6 +42,9 @@ // iOS Radio: Disabled // ----------------------------------------- +// The radio and label should use the +// same opacity and match the other form +// controls :host(.radio-disabled) { opacity: $radio-ios-disabled-opacity; diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss index 6dd09bd7fc..e440eb4df1 100644 --- a/core/src/components/radio/radio.ios.vars.scss +++ b/core/src/components/radio/radio.ios.vars.scss @@ -23,7 +23,7 @@ $radio-ios-icon-border-width: 2px !default; $radio-ios-icon-border-style: solid !default; /// @prop - Opacity of the disabled radio -$radio-ios-disabled-opacity: .3 !default; +$radio-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; /// @prop - Margin top of the item-start in a radio $radio-ios-item-start-margin-top: 8px !default; diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss index 5bddee6b57..55db7d97c9 100644 --- a/core/src/components/radio/radio.md.scss +++ b/core/src/components/radio/radio.md.scss @@ -70,12 +70,19 @@ // Material Design Radio: Disabled // ----------------------------------------- +// The radio itself should use the disabled +// opacity set by its spec, while the label +// should match the other form controls -// .item-md.item-radio-disabled ion-label { -:host(.radio-disabled) { +:host(.legacy-radio.radio-disabled), +:host(.radio-disabled) .label-text-wrapper { opacity: $radio-md-disabled-opacity; } +:host(.radio-disabled) .native-wrapper { + opacity: $radio-md-icon-disabled-opacity; +} + // Material Design Radio: Keyboard Focus // ----------------------------------------- diff --git a/core/src/components/radio/radio.md.vars.scss b/core/src/components/radio/radio.md.vars.scss index b0aa4f4d02..09250f8cb5 100644 --- a/core/src/components/radio/radio.md.vars.scss +++ b/core/src/components/radio/radio.md.vars.scss @@ -34,8 +34,8 @@ $radio-md-transition-duration: 280ms !default; /// @prop - Transition easing of the radio $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; -/// @prop - Opacity of the disabled radio -$radio-md-disabled-opacity: .3 !default; +/// @prop - Opacity of the disabled radio label +$radio-md-disabled-opacity: $form-control-md-disabled-opacity !default; /// @prop - Margin top of the item-start in a radio $radio-md-item-start-margin-top: 11px !default; @@ -60,3 +60,12 @@ $radio-md-item-end-margin-bottom: $radio-md-item-end-margin-top !default; /// @prop - Margin start of the item-end in a radio $radio-md-item-end-margin-start: 0 !default; + +/// @prop - Opacity of the disabled radio +/// This value is used because the radio color is set to +/// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be +/// `rgb(0, 0, 0, 0.38)` when disabled but the disabled +/// opacity is applied on top of the transparent color so +/// this opacity gets us the equivalent of applying `0.38` +/// on top of an opaque radio `rgb(0, 0, 0, 1.0)` +$radio-md-icon-disabled-opacity: 0.63 !default; diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index 5f6384448e..14ae1f4d68 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -135,7 +135,8 @@ export class Radio implements ComponentInterface { ev.stopPropagation(); ev.preventDefault(); - this.el.focus(); + const element = this.legacyFormController.hasLegacyControl() ? this.el : this.nativeInput; + element.focus(); } /** @internal */ @@ -231,7 +232,18 @@ export class Radio implements ComponentInterface { } private renderRadio() { - const { checked, disabled, inputId, color, el, justify, labelPlacement, inheritedAttributes, hasLabel } = this; + const { + checked, + disabled, + inputId, + color, + el, + justify, + labelPlacement, + inheritedAttributes, + hasLabel, + buttonTabindex, + } = this; const mode = getIonMode(this); const inItem = hostContext('ion-item', el); @@ -260,6 +272,7 @@ export class Radio implements ComponentInterface { checked={checked} disabled={disabled} id={inputId} + tabindex={buttonTabindex} ref={(nativeEl) => (this.nativeInput = nativeEl as HTMLInputElement)} {...inheritedAttributes} /> diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts b/core/src/components/radio/test/a11y/radio.e2e.ts index bc6fe4c945..6010aa0baf 100644 --- a/core/src/components/radio/test/a11y/radio.e2e.ts +++ b/core/src/components/radio/test/a11y/radio.e2e.ts @@ -15,9 +15,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); }); - // TODO: FW-4155 - Enable tests once tab behavior is fixed for modern syntax. - test.describe.skip(title('radio: keyboard navigation'), () => { - test.beforeEach(async ({ page }) => { + test.describe(title('radio: keyboard navigation'), () => { + test.beforeEach(async ({ page, skip }) => { + // TODO (FW-2979) + skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.'); + await page.setContent( ` diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png index b506f09e7a..23d308d4e5 100644 Binary files a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png index 74c70c6b83..04a81dffcc 100644 Binary files a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png index 0fc95b20c4..32e579cc82 100644 Binary files a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png index 440f706718..4acf428ea6 100644 Binary files a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png index 0668a57a89..4ea950a91e 100644 Binary files a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png index 192f686edf..6b8c154b84 100644 Binary files a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/states/radio.e2e.ts b/core/src/components/radio/test/states/radio.e2e.ts index 5bd0112a2d..5c53c84049 100644 --- a/core/src/components/radio/test/states/radio.e2e.ts +++ b/core/src/components/radio/test/states/radio.e2e.ts @@ -3,6 +3,20 @@ import { configs, test } from '@utils/test/playwright'; configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('radio: states'), () => { + test('should render disabled radio correctly', async ({ page }) => { + await page.setContent( + ` + + Label + + `, + config + ); + + const radio = page.locator('ion-radio'); + expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-disabled`)); + }); + test('should render disabled checked radio correctly', async ({ page }) => { await page.setContent( ` diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Chrome-linux.png index 3bd35d13ce..c3d429bc77 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Firefox-linux.png index a0add6fcf4..a1716e4c6b 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Safari-linux.png index 78392c6c87..4de57fb8d3 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Chrome-linux.png index e95adfdd0b..635c6589ab 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Firefox-linux.png index bea96f5753..5e2e6ea13b 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Safari-linux.png index b85881e267..2f7cca8050 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Chrome-linux.png index a825f26b94..944ca8cd49 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Firefox-linux.png index a089b550a2..0f1021eb1e 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Safari-linux.png index 07a95f76db..9e39e4eded 100644 Binary files a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index 72133df519..d1b57b1776 100644 --- a/core/src/components/range/range.ios.scss +++ b/core/src/components/range/range.ios.scss @@ -94,6 +94,12 @@ @include transform(translate3d(0, 0, 0), scale(1)); } +// iOS Range: Disabled +// -------------------------------------------------- +// When the range is disabled, the entire range, +// range label, any slotted labels, and any slotted +// icons need to receive the same opacity. + :host(.range-disabled) { - opacity: .5; + opacity: $range-ios-disabled-opacity; } diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index 91067981d0..1fba3f3c93 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -80,3 +80,6 @@ $range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default; /// @prop - Padding start of the range pin $range-ios-pin-padding-start: $range-ios-pin-padding-end !default; + +/// @prop - Opacity of the disabled range +$range-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss index fcefe691b8..6fb2a4a9f8 100644 --- a/core/src/components/range/range.md.scss +++ b/core/src/components/range/range.md.scss @@ -195,6 +195,13 @@ transform: scale(1); } +// Material Design Range: Disabled +// -------------------------------------------------- +// When the range is disabled, the range label, +// any slotted labels, and any slotted icons +// need to receive the same opacity. The range +// changes color instead of becoming transparent. + :host(.range-disabled) .range-bar-active, :host(.range-disabled) .range-bar, :host(.range-disabled) .range-tick { @@ -208,3 +215,9 @@ background-color: $range-md-bar-background-color; } + +:host(.range-disabled) .label-text-wrapper, +:host(.range-disabled) ::slotted([slot=start]), +:host(.range-disabled) ::slotted([slot=end]) { + opacity: $range-md-disabled-opacity; +} diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index 8294ec3d64..ef26283c37 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/core/src/components/range/range.md.vars.scss @@ -55,4 +55,7 @@ $range-md-knob-indicator-opacity-hover: 0.13 !default; $range-md-knob-indicator-opacity-focus: 0.13 !default; /// @prop - Opacity of the indicator shown when the range knob is active -$range-md-knob-indicator-opacity-active: 0.25 !default; \ No newline at end of file +$range-md-knob-indicator-opacity-active: 0.25 !default; + +/// @prop - Opacity of the disabled range +$range-md-disabled-opacity: $form-control-md-disabled-opacity !default; diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss index b28ff4bad2..500b0a0566 100644 --- a/core/src/components/range/range.scss +++ b/core/src/components/range/range.scss @@ -200,15 +200,7 @@ // Range Label // ---------------------------------------------------------------- -/** - * When the range is disabled, only the text - * receives an opacity. The range changes color instead. - */ -:host(.range-disabled) .label-text-wrapper { - opacity: 0.3; -} - -::slotted([slot="label"]), .label-text { +::slotted([slot="label"]) { /** * Label text should not extend * beyond the bounds of the range. diff --git a/core/src/components/range/test/states/index.html b/core/src/components/range/test/states/index.html index ded21b7a56..36f5891d95 100644 --- a/core/src/components/range/test/states/index.html +++ b/core/src/components/range/test/states/index.html @@ -16,9 +16,10 @@ .grid { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); - grid-row-gap: 20px; + grid-row-gap: 10px; grid-column-gap: 20px; } + h2 { font-size: 12px; font-weight: normal; @@ -26,7 +27,9 @@ color: #6f7378; margin-top: 10px; + margin-bottom: 0; } + @media screen and (max-width: 800px) { .grid { grid-template-columns: 1fr; @@ -55,6 +58,24 @@ +
+

Value

+ + + + Temperature + +
+ +
+

Ticks

+ + + + Temperature + +
+

Disabled

@@ -63,6 +84,24 @@ Temperature
+ +
+

Disabled, Value

+ + + + Temperature + +
+ +
+

Disabled, Ticks

+ + + + Temperature + +
diff --git a/core/src/components/range/test/states/range.e2e.ts b/core/src/components/range/test/states/range.e2e.ts index 82a0bbdbed..77235ad662 100644 --- a/core/src/components/range/test/states/range.e2e.ts +++ b/core/src/components/range/test/states/range.e2e.ts @@ -19,6 +19,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-enabled`)); }); + test('should render disabled state', async ({ page }) => { await page.setContent( ` @@ -35,5 +36,39 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-disabled`)); }); + + test('should render disabled state with a value', async ({ page }) => { + await page.setContent( + ` + + + + Temperature + + `, + config + ); + + const range = page.locator('ion-range'); + + expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-disabled-value`)); + }); + + test('should render disabled state with ticks', async ({ page }) => { + await page.setContent( + ` + + + + Temperature + + `, + config + ); + + const range = page.locator('ion-range'); + + expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-disabled-ticks`)); + }); }); }); diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Chrome-linux.png index e72926ea76..196a17cef2 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Firefox-linux.png index fb889e1fd1..d206e6ef9b 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Safari-linux.png index 08d78a4133..a44c9c61b7 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Chrome-linux.png index 59ad47a104..af9aac8ffa 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Firefox-linux.png index 2e34719d34..79bf012f77 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Safari-linux.png index c5eb63e2b3..748a588cc4 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f5c973a589 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..006f7302ac Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..477b14cc88 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..156404d8cc Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..009e3a5501 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a6be190de5 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-ticks-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..25fada81ca Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ea96651e65 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c5707e790b Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a7281b14b8 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9bf1f14333 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9974289a44 Binary files /dev/null and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-disabled-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Chrome-linux.png index 8e7cbda834..c291883de6 100644 Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Chrome-linux.png index 8501659172..b1579bb496 100644 Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Chrome-linux.png index e90d6533aa..ce465429b2 100644 Binary files a/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index f07d7b91ef..50bf1943d3 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -5,7 +5,6 @@ import { pointerCoord } from '@utils/helpers'; import { isRTL } from '@utils/rtl'; import { createColorClasses, hostContext } from '@utils/theme'; -import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; import type { Color, StyleEventDetail } from '../../interface'; @@ -194,14 +193,10 @@ export class Segment implements ComponentInterface { onEnd(detail: GestureDetail) { this.setActivated(false); - const checkedValidButton = this.setNextIndex(detail, true); + this.setNextIndex(detail, true); detail.event.stopImmediatePropagation(); - if (checkedValidButton) { - this.addRipple(detail); - } - const value = this.value; if (value !== undefined) { if (this.valueBeforeGesture !== value) { @@ -230,32 +225,6 @@ export class Segment implements ComponentInterface { return this.getButtons().find((button) => button.value === this.value); } - /** - * The gesture blocks the segment button ripple. This - * function adds the ripple based on the checked segment - * and where the cursor ended. - */ - private addRipple(detail: GestureDetail) { - const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true); - if (!useRippleEffect) { - return; - } - - const buttons = this.getButtons(); - const checked = buttons.find((button) => button.value === this.value)!; - - const root = checked.shadowRoot || checked; - const ripple = root.querySelector('ion-ripple-effect'); - - if (!ripple) { - return; - } - - const { x, y } = pointerCoord(detail.event); - - ripple.addRipple(x, y).then((remove) => remove()); - } - /* * Activate both the segment and the buttons * due to a bug with ::slotted in Safari diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png index 2aaf5b0a22..661e86c58d 100644 Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png index 9e9550325d..d563c03b44 100644 Binary files a/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss index 4c89a36290..d899179616 100644 --- a/core/src/components/select/select.ios.scss +++ b/core/src/components/select/select.ios.scss @@ -43,3 +43,13 @@ :host(.select-label-placement-floating) .native-wrapper { width: calc(100% - $select-ios-icon-size - $select-icon-margin-start); } + +// Select: Disabled +// ---------------------------------------------------------------- +// The select and label should use the +// same opacity and match the other form +// controls + +:host(.select-disabled) { + opacity: $select-ios-disabled-opacity; +} diff --git a/core/src/components/select/select.ios.vars.scss b/core/src/components/select/select.ios.vars.scss index a9c62dcbc5..1039516110 100644 --- a/core/src/components/select/select.ios.vars.scss +++ b/core/src/components/select/select.ios.vars.scss @@ -27,3 +27,6 @@ $select-ios-placeholder-color: $select-ios-icon-color !default; /// @prop - Text Color of the selected item $select-ios-text-color: $text-color !default; + +/// @prop - Opacity of the disabled select +$select-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss index 874108db36..ffbd004520 100644 --- a/core/src/components/select/select.md.scss +++ b/core/src/components/select/select.md.scss @@ -150,3 +150,13 @@ :host(.select-label-placement-floating) .native-wrapper { width: calc(100% - $select-md-icon-size - $select-icon-margin-start); } + +// Select: Disabled +// ---------------------------------------------------------------- +// The select and label should use the +// same opacity and match the other form +// controls + +:host(.select-disabled) { + opacity: $select-md-disabled-opacity; +} diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index 7d38d11f47..c3b5fe0885 100644 --- a/core/src/components/select/select.md.vars.scss +++ b/core/src/components/select/select.md.vars.scss @@ -30,3 +30,6 @@ $select-md-text-color: $text-color !default; /// @prop - The amount of whitespace to display on either side of the floating label $select-md-floating-label-padding: 4px !default; + +/// @prop - Opacity of the disabled select +$select-md-disabled-opacity: $form-control-md-disabled-opacity !default; diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index e223e1ca67..abfc74d9e2 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -86,7 +86,6 @@ } :host(.select-disabled) { - opacity: .4; pointer-events: none; } diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html index 3163513a6a..421dd4505f 100644 --- a/core/src/components/select/test/basic/index.html +++ b/core/src/components/select/test/basic/index.html @@ -22,52 +22,65 @@ - + - Single Value Select + Single Value - - Female - Male + + Apples + Oranges + Pears - - Brown - Blonde - Black - Red + + Apples + Oranges + Pears - - Red - Purple - Yellow - Orange - Green + + Apples + Oranges + Pears - Object Values with trackBy + Multiple Value Select - + + Pepperoni + Bacon + Extra Cheese + Mushrooms + Onions + + + + + + Bird + Cat + Dog + Honey Badger + - Select - Custom Interface Options + Custom Interface Options @@ -77,27 +90,23 @@ value="bacon" interface="alert" multiple="true" - placeholder="Select One" + placeholder="Select" > + Pepperoni Bacon - Black Olives Extra Cheese - Green Peppers Mushrooms Onions - Pepperoni - Pineapple - Sausage - Spinach - - Brown - Blonde - Black - Red + + Pepperoni + Bacon + Extra Cheese + Mushrooms + Onions @@ -108,273 +117,17 @@ interface="action-sheet" placeholder="Select One" > - Red - Purple - Yellow - Orange - Green - - - - - - - Popover Interface Select - - - - - Female - Male - - - - - - Steak - Pizza - Tacos - - - - - Date - - January - February - March - April - May - June - July - August - September - October - November - December - - - 1989 - 1990 - 1991 - 1992 - 1993 - 1994 - 1995 - 1996 - 1997 - 1998 - 1999 - - - - - - 0 - 1 - 2 - 3 - 4 - 5 - - - - - - - Action Sheet Interface Select - - - - - For 15 Minutes - For 1 Hour - For 24 Hours - Until I turn it back on - - - - - - 1 Star - 2 Stars - 3 Stars - 4 Stars - 5 Stars - - - - - - - Multiple Value Select - - - - + Pepperoni Bacon - Black Olives Extra Cheese - Green Peppers Mushrooms Onions - Pepperoni - Pineapple - Sausage - Spinach - - - - - - Bird - Cat - Dog - Honey Badger - - - - - - 0 - 1 - 2 - 3 - 4 - 5 - - - - - - Extra cheese - Mushroom - Onion - Pepperoni - Sausage - - - - - - Selected Text - - - - - - Default - Other - N/A - - - - - - Default - Other - N/A - - - - - - Default - Other - N/A - - - - - - Default - Other - N/A - -
- Toggle Disabled -
- - diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts index 97c3ca75ae..f288df62b0 100644 --- a/core/src/components/select/test/basic/select.e2e.ts +++ b/core/src/components/select/test/basic/select.e2e.ts @@ -71,9 +71,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.goto('/src/components/select/test/basic', config); - const select = page.locator('#gender'); + const select = page.locator('#alert-select'); - await select.evaluate((el: HTMLSelectElement) => { + await select.evaluate((el: HTMLIonSelectElement) => { /* * Playwright's click() method attempts to scroll to the handle * to perform the action. That is problematic when the overlay diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png index 29ee54121d..e7f7c1dff7 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png index 6537db0485..eb39812606 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png index 29ee54121d..e7f7c1dff7 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png index 6537db0485..eb39812606 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png index 29ee54121d..e7f7c1dff7 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png index 6537db0485..eb39812606 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Safari-linux.png index a5d0f80fd1..9fe7c7d2cd 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Safari-linux.png index 4b8a8ba60a..fdc8321e79 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-long-text-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Safari-linux.png index a5d0f80fd1..9fe7c7d2cd 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Safari-linux.png index 4b8a8ba60a..fdc8321e79 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-stacked-long-text-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/legacy/basic/select.e2e.ts b/core/src/components/select/test/legacy/basic/select.e2e.ts index 7c4e8323d7..9577d32dda 100644 --- a/core/src/components/select/test/legacy/basic/select.e2e.ts +++ b/core/src/components/select/test/legacy/basic/select.e2e.ts @@ -64,7 +64,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => description: 'https://github.com/ionic-team/ionic-framework/issues/25126', }); - await page.goto('/src/components/select/test/basic', config); + await page.goto('/src/components/select/test/legacy/basic', config); const select = page.locator('#gender'); diff --git a/core/src/components/select/test/legacy/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/legacy/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Safari-linux.png index 7fd15e0118..3c1feca183 100644 Binary files a/core/src/components/select/test/legacy/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/legacy/custom/custom.e2e.ts-snapshots/select-custom-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/legacy/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/legacy/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Safari-linux.png index f3877087bc..2a3745d00f 100644 Binary files a/core/src/components/select/test/legacy/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/legacy/custom/custom.e2e.ts-snapshots/select-custom-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Chrome-linux.png index 706d17c7a0..9efcd5d93a 100644 Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Chrome-linux.png index 2f63dd9b18..17e2f9f551 100644 Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Chrome-linux.png index 5ad813f880..72d2f5e8e1 100644 Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Chrome-linux.png index 585747a02e..c26b1ff864 100644 Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Safari-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Safari-linux.png index 6b4acbc00e..74066f0cf4 100644 Binary files a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx index 8976b44c29..0589b773ad 100644 --- a/core/src/components/tab-bar/tab-bar.tsx +++ b/core/src/components/tab-bar/tab-bar.tsx @@ -61,8 +61,17 @@ export class TabBar implements ComponentInterface { this.selectedTabChanged(); } - connectedCallback() { - this.keyboardCtrl = createKeyboardController((keyboardOpen) => { + async connectedCallback() { + this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => { + /** + * If the keyboard is hiding, then we need to wait + * for the webview to resize. Otherwise, the tab bar + * will flicker before the webview resizes. + */ + if (keyboardOpen === false && waitForResize !== undefined) { + await waitForResize; + } + this.keyboardVisible = keyboardOpen; // trigger re-render by updating state }); } diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png index 5470e5fd0f..893ae0cfc7 100644 Binary files a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Safari-linux.png index a79860330c..5556873995 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Safari-linux.png index e50c9f4070..07b615c685 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-label-truncated-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-multi-line-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-multi-line-value-ios-rtl-Mobile-Firefox-linux.png index 5117887925..1c956895f1 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-multi-line-value-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-multi-line-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-multi-line-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-multi-line-value-md-rtl-Mobile-Firefox-linux.png index 649558b8d7..feef8747a9 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-multi-line-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-end-multi-line-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-label-truncated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-label-truncated-ios-rtl-Mobile-Safari-linux.png index 2e005d0f82..f15035d16e 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-label-truncated-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-label-truncated-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-label-truncated-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-label-truncated-md-rtl-Mobile-Safari-linux.png index 3586e04108..5200b3130e 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-label-truncated-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-label-truncated-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-multi-line-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-multi-line-value-ios-rtl-Mobile-Firefox-linux.png index 0db87bb3d0..193f508709 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-multi-line-value-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-multi-line-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-multi-line-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-multi-line-value-md-rtl-Mobile-Firefox-linux.png index ab80b74875..aa57bfedeb 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-multi-line-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-fixed-multi-line-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-label-truncated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-label-truncated-ios-rtl-Mobile-Safari-linux.png index 570154037a..d12acf595a 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-label-truncated-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-label-truncated-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-label-truncated-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-label-truncated-md-rtl-Mobile-Safari-linux.png index 020e15df50..6d471fdffd 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-label-truncated-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-label-truncated-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-multi-line-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-multi-line-value-ios-rtl-Mobile-Firefox-linux.png index 1dda7f8198..0c5dcc85df 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-multi-line-value-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-multi-line-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-multi-line-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-multi-line-value-md-rtl-Mobile-Firefox-linux.png index cf6fd404a8..8eb0be84ef 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-multi-line-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-multi-line-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-ios-rtl-Mobile-Safari-linux.png index 9d90526577..3e93febe92 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-md-rtl-Mobile-Safari-linux.png index dbe3e522cc..627418d6d0 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-label-truncated-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-multi-line-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-multi-line-value-ios-rtl-Mobile-Firefox-linux.png index 1dda7f8198..0c5dcc85df 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-multi-line-value-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-multi-line-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-multi-line-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-multi-line-value-md-rtl-Mobile-Firefox-linux.png index cf6fd404a8..8eb0be84ef 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-multi-line-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-stacked-multi-line-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Safari-linux.png index 62b3462d3b..01adc31762 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Safari-linux.png index 31c483e828..fb5bf13aed 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-label-truncated-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-multi-line-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-multi-line-value-ios-rtl-Mobile-Firefox-linux.png index aede9e2e83..5880a37573 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-multi-line-value-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-multi-line-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-multi-line-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-multi-line-value-md-rtl-Mobile-Firefox-linux.png index 036a4aea04..a92f8e5815 100644 Binary files a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-multi-line-value-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-start-multi-line-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss index 8079843684..bac09990e2 100644 --- a/core/src/components/textarea/textarea.ios.scss +++ b/core/src/components/textarea/textarea.ios.scss @@ -31,6 +31,16 @@ --padding-start: 0px; } +// Textarea - Disabled +// ---------------------------------------------------------------- +// The textarea, label, helper text, char counter and placeholder +// should use the same opacity and match the other form controls + +:host(.legacy-textarea) .native-textarea[disabled], +:host(.textarea-disabled) { + opacity: #{$textarea-ios-disabled-opacity}; +} + // Textarea Wrapper // ---------------------------------------------------------------- diff --git a/core/src/components/textarea/textarea.ios.vars.scss b/core/src/components/textarea/textarea.ios.vars.scss index 07b2ec5fc1..34243d0946 100644 --- a/core/src/components/textarea/textarea.ios.vars.scss +++ b/core/src/components/textarea/textarea.ios.vars.scss @@ -24,3 +24,6 @@ $textarea-ios-padding-start: 0 !default; /// @prop - Placeholder text color of the textarea $textarea-ios-placeholder-color: $placeholder-text-color !default; + +/// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea +$textarea-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss index 57b9b091fc..295502f7aa 100644 --- a/core/src/components/textarea/textarea.md.scss +++ b/core/src/components/textarea/textarea.md.scss @@ -80,6 +80,16 @@ color: var(--highlight-color); } +// Textarea - Disabled +// ---------------------------------------------------------------- +// The textarea, label, helper text, char counter and placeholder +// should use the same opacity and match the other form controls + +:host(.legacy-textarea) .native-textarea[disabled], +:host(.textarea-disabled) { + opacity: #{$textarea-md-disabled-opacity}; +} + // Textarea Highlight // ---------------------------------------------------------------- diff --git a/core/src/components/textarea/textarea.md.vars.scss b/core/src/components/textarea/textarea.md.vars.scss index 1dbb2c2938..eb84e1979f 100644 --- a/core/src/components/textarea/textarea.md.vars.scss +++ b/core/src/components/textarea/textarea.md.vars.scss @@ -24,3 +24,6 @@ $textarea-md-placeholder-color: $placeholder-text-color !default; /// @prop - The amount of whitespace to display on either side of the floating label $textarea-md-floating-label-padding: 4px !default; + +/// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea +$textarea-md-disabled-opacity: $form-control-md-disabled-opacity !default; diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index a02bebe432..df0cf470b3 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -176,11 +176,6 @@ word-break: break-word; } -:host(.legacy-textarea) .native-textarea[disabled], -:host(.textarea-disabled) { - opacity: 0.4; -} - // Input Cover: Unfocused // -------------------------------------------------- // The input cover is the div that actually receives the diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Chrome-linux.png index 62fa2e26e6..532c7cec1f 100644 Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Chrome-linux.png index cde485172f..00deedc8cd 100644 Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Chrome-linux.png index 37877bf235..a6ec79c200 100644 Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png index b04beede67..73a5d84dad 100644 Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png index aa97ef0b6d..445d903ed9 100644 Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png index 86a93c3276..330b0edb28 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png index 34d9f50572..ccfd009ba8 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png index 04985a515b..9d6ced7384 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png index 54d53208d6..1f8679fcc6 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-space-between-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png index d16a0e4255..f55f05a68e 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png index 67719a5e63..4b7518f608 100644 Binary files a/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/label/toggle.e2e.ts-snapshots/toggle-label-fixed-justify-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png index bd94cda0cc..069aec853d 100644 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png index e7a5edccc5..8349ca55f2 100644 Binary files a/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/legacy/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png index 5b25f3a346..914154f39c 100644 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png index 915b73f4c5..6cf27e141f 100644 Binary files a/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/legacy/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png index 8895ebb61a..5f3f30c35f 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png index e2e3cbf1ac..700dd70a71 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png index 84920b4b50..2e46da516f 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png index 3513cd83d1..8517e7f339 100644 Binary files a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss index c6cc9299ee..bc92890cc2 100644 --- a/core/src/components/toggle/toggle.ios.scss +++ b/core/src/components/toggle/toggle.ios.scss @@ -173,6 +173,9 @@ // iOS Toggle: Disabled // ---------------------------------------------------------- +// The toggle and label should use the +// same opacity and match the other form +// controls :host(.toggle-disabled) { opacity: $toggle-ios-disabled-opacity; diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss index 9bbc0b881c..3444913991 100644 --- a/core/src/components/toggle/toggle.md.scss +++ b/core/src/components/toggle/toggle.md.scss @@ -77,6 +77,9 @@ // Material Design Toggle: Disabled // ---------------------------------------------------------- +// The toggle and label should use the +// same opacity and match the other form +// controls :host(.toggle-disabled) { opacity: $toggle-md-disabled-opacity; diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss index 69584febd4..e1c5e1fd4c 100644 --- a/core/src/components/toggle/toggle.md.vars.scss +++ b/core/src/components/toggle/toggle.md.vars.scss @@ -62,7 +62,7 @@ $toggle-md-transition-duration: 160ms !default; $toggle-md-transition: transform $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1), background-color $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1) !default; /// @prop - Opacity of the disabled toggle -$toggle-md-disabled-opacity: .3 !default; +$toggle-md-disabled-opacity: $form-control-md-disabled-opacity !default; /// @prop - Padding top of standalone toggle $toggle-md-padding-top: 12px !default; diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Safari-linux.png index 67b7168b42..bd78578cd5 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Safari-linux.png index 1dc993388f..b6dc4f8ead 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss index faf1c91430..e3bb9d5919 100644 --- a/core/src/themes/ionic.theme.default.ios.scss +++ b/core/src/themes/ionic.theme.default.ios.scss @@ -33,5 +33,9 @@ $item-ios-color: var(--ion-item-color, $text-color) ! // iOS Card // -------------------------------------------------- -$card-ios-background: var(--ion-card-background, $item-ios-background) !default; -$card-ios-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-400)) !default; +$card-ios-background: var(--ion-card-background, $item-ios-background) !default; +$card-ios-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-400)) !default; + +// iOS Form Controls +// -------------------------------------------------- +$form-control-ios-disabled-opacity: 0.3; diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss index 7924108a4b..b58c1073c1 100644 --- a/core/src/themes/ionic.theme.default.md.scss +++ b/core/src/themes/ionic.theme.default.md.scss @@ -36,3 +36,9 @@ $item-md-color: var(--ion-item-color, $text-color) ! // -------------------------------------------------- $card-md-background: var(--ion-card-background, $item-md-background) !default; $card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450)) !default; + +// Material Design Form Controls +// -------------------------------------------------- +/// This value comes from the Material Design spec: +/// https://m3.material.io/components/text-fields/specs +$form-control-md-disabled-opacity: 0.38; diff --git a/core/src/utils/animation/animation-interface.ts b/core/src/utils/animation/animation-interface.ts index 7a65f52157..b28b9fdd3d 100644 --- a/core/src/utils/animation/animation-interface.ts +++ b/core/src/utils/animation/animation-interface.ts @@ -220,6 +220,24 @@ export interface Animation { * Returns `false` otherwise. */ isRunning(): boolean; + + /** + * Sets the parent animation. + * @internal + */ + parent(animation: Animation): Animation; + + /** + * Updates any existing animations. + * @internal + */ + update(deep: boolean, toggleAnimationName: boolean, step?: number): Animation; + + /** + * Forcibly finishes the animation. + * @internal + */ + animationFinish(): void; } export type AnimationLifecycle = (currentStep: 0 | 1, animation: Animation) => void; diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts index 53681440f9..8d7b358bed 100644 --- a/core/src/utils/animation/animation.ts +++ b/core/src/utils/animation/animation.ts @@ -1,5 +1,5 @@ +import { win } from '../browser'; import { raf } from '../helpers'; -import { win } from '../window'; import type { Animation, @@ -30,20 +30,6 @@ interface AnimationOnFinishCallback { o?: AnimationCallbackOptions; } -interface AnimationInternal extends Animation { - /** - * Sets the parent animation. - */ - parent(animation: Animation): Animation; - - /** - * Updates any existing animations. - */ - update(deep: boolean, toggleAnimationName: boolean, step?: number): Animation; - - animationFinish(): void; -} - export const createAnimation = (animationId?: string): Animation => { let _delay: number | undefined; let _duration: number | undefined; @@ -55,7 +41,7 @@ export const createAnimation = (animationId?: string): Animation => { let beforeAddClasses: string[] = []; let beforeRemoveClasses: string[] = []; let initialized = false; - let parentAnimation: AnimationInternal | undefined; + let parentAnimation: Animation | undefined; let beforeStylesValue: { [property: string]: any } = {}; let afterAddClasses: string[] = []; let afterRemoveClasses: string[] = []; @@ -71,14 +57,14 @@ export const createAnimation = (animationId?: string): Animation => { let finished = false; let shouldCalculateNumAnimations = true; let keyframeName: string | undefined; - let ani: AnimationInternal; + let ani: Animation; let paused = false; const id: string | undefined = animationId; const onFinishCallbacks: AnimationOnFinishCallback[] = []; const onFinishOneTimeCallbacks: AnimationOnFinishCallback[] = []; const elements: HTMLElement[] = []; - const childAnimations: AnimationInternal[] = []; + const childAnimations: Animation[] = []; const stylesheets: HTMLElement[] = []; const _beforeAddReadFunctions: any[] = []; const _beforeAddWriteFunctions: any[] = []; @@ -436,7 +422,7 @@ export const createAnimation = (animationId?: string): Animation => { return ani; }; - const parent = (animation: AnimationInternal) => { + const parent = (animation: Animation) => { parentAnimation = animation; return ani; @@ -458,7 +444,7 @@ export const createAnimation = (animationId?: string): Animation => { return ani; }; - const addAnimation = (animationToAdd: AnimationInternal | AnimationInternal[]) => { + const addAnimation = (animationToAdd: Animation | Animation[]) => { if ((animationToAdd as any) != null) { if (Array.isArray(animationToAdd)) { for (const animation of animationToAdd) { diff --git a/core/src/utils/window/index.ts b/core/src/utils/browser/index.ts similarity index 80% rename from core/src/utils/window/index.ts rename to core/src/utils/browser/index.ts index c34190e0e0..5b3e914a45 100644 --- a/core/src/utils/window/index.ts +++ b/core/src/utils/browser/index.ts @@ -1,5 +1,5 @@ /** - * When accessing the window, it is important + * When accessing the document or window, it is important * to account for SSR applications where the * window is not available. Code that accesses * window when it is not available will crash. @@ -21,3 +21,5 @@ * not run in an SSR environment. */ export const win: Window | undefined = typeof window !== 'undefined' ? window : undefined; + +export const doc: Document | undefined = typeof document !== 'undefined' ? document : undefined; diff --git a/core/src/utils/focus-visible.ts b/core/src/utils/focus-visible.ts index 7e48c4bbb2..97db5096e5 100644 --- a/core/src/utils/focus-visible.ts +++ b/core/src/utils/focus-visible.ts @@ -59,7 +59,7 @@ export const startFocusVisible = (rootEl?: HTMLElement) => { ref.addEventListener('keydown', onKeydown); ref.addEventListener('focusin', onFocusin); ref.addEventListener('focusout', onFocusout); - ref.addEventListener('touchstart', pointerDown); + ref.addEventListener('touchstart', pointerDown, { passive: true }); ref.addEventListener('mousedown', pointerDown); const destroy = () => { diff --git a/core/src/utils/keyboard/keyboard-controller.ts b/core/src/utils/keyboard/keyboard-controller.ts index 845bb6f1d0..a0e2a7c230 100644 --- a/core/src/utils/keyboard/keyboard-controller.ts +++ b/core/src/utils/keyboard/keyboard-controller.ts @@ -1,4 +1,45 @@ -import { win } from '../window'; +import { doc, win } from '@utils/browser'; + +import { KeyboardResize, Keyboard } from '../native/keyboard'; + +/** + * The element that resizes when the keyboard opens + * is going to depend on the resize mode + * which is why we check that here. + */ +const getResizeContainer = (resizeMode?: KeyboardResize): HTMLElement | null => { + /** + * If doc is undefined then we are + * in an SSR environment, so the keyboard + * adjustment does not apply. + * If the webview does not resize then there + * is no container to resize. + */ + if (doc === undefined || resizeMode === KeyboardResize.None || resizeMode === undefined) { + return null; + } + + /** + * The three remaining resize modes: Native, Ionic, and Body + * all cause `ion-app` to resize, so we can listen for changes + * on that. In the event `ion-app` is not available then + * we can fall back to `body`. + */ + const ionApp = doc.querySelector('ion-app'); + + return ionApp ?? doc.body; +}; + +/** + * Get the height of ion-app or body. + * This is used for determining if the webview + * has resized before the keyboard closed. + * */ +const getResizeContainerHeight = (resizeMode?: KeyboardResize) => { + const containerElement = getResizeContainer(resizeMode); + + return containerElement === null ? 0 : containerElement.clientHeight; +}; /** * Creates a controller that tracks and reacts to opening or closing the keyboard. @@ -6,28 +47,129 @@ import { win } from '../window'; * @internal * @param keyboardChangeCallback A function to call when the keyboard opens or closes. */ -export const createKeyboardController = ( - keyboardChangeCallback?: (keyboardOpen: boolean) => void -): KeyboardController => { +export const createKeyboardController = async ( + keyboardChangeCallback?: (keyboardOpen: boolean, resizePromise?: Promise) => void +): Promise => { let keyboardWillShowHandler: (() => void) | undefined; let keyboardWillHideHandler: (() => void) | undefined; let keyboardVisible: boolean; + /** + * This lets us determine if the webview content + * has resized as a result of the keyboard. + */ + let initialResizeContainerHeight: number; + + const init = async () => { + const resizeOptions = await Keyboard.getResizeMode(); + const resizeMode = resizeOptions === undefined ? undefined : resizeOptions.mode; - const init = () => { keyboardWillShowHandler = () => { + /** + * We need to compute initialResizeContainerHeight right before + * the keyboard opens to guarantee the resize container is visible. + * The resize container may not be visible if we compute this + * as soon as the keyboard controller is created. + * We should only need to do this once to avoid additional clientHeight + * computations. + */ + if (initialResizeContainerHeight === undefined) { + initialResizeContainerHeight = getResizeContainerHeight(resizeMode); + } + keyboardVisible = true; - if (keyboardChangeCallback) keyboardChangeCallback(true); + fireChangeCallback(keyboardVisible, resizeMode); }; keyboardWillHideHandler = () => { keyboardVisible = false; - if (keyboardChangeCallback) keyboardChangeCallback(false); + fireChangeCallback(keyboardVisible, resizeMode); }; win?.addEventListener('keyboardWillShow', keyboardWillShowHandler); win?.addEventListener('keyboardWillHide', keyboardWillHideHandler); }; + const fireChangeCallback = (state: boolean, resizeMode: KeyboardResize | undefined) => { + if (keyboardChangeCallback) { + keyboardChangeCallback(state, createResizePromiseIfNeeded(resizeMode)); + } + }; + + /** + * Code responding to keyboard lifecycles may need + * to show/hide content once the webview has + * resized as a result of the keyboard showing/hiding. + * createResizePromiseIfNeeded provides a way for code to wait for the + * resize event that was triggered as a result of the keyboard. + */ + const createResizePromiseIfNeeded = (resizeMode: KeyboardResize | undefined): Promise | undefined => { + if ( + /** + * If we are in an SSR environment then there is + * no window to resize. Additionally, if there + * is no resize mode or the resize mode is "None" + * then initialResizeContainerHeight will be 0 + */ + initialResizeContainerHeight === 0 || + /** + * If the keyboard is closed before the webview resizes initially + * then the webview will never resize. + */ + initialResizeContainerHeight === getResizeContainerHeight(resizeMode) + ) { + return; + } + + /** + * Get the resize container so we can + * attach the ResizeObserver below to + * the correct element. + */ + const containerElement = getResizeContainer(resizeMode); + if (containerElement === null) { + return; + } + + /** + * Some part of the web content should resize, + * and we need to listen for a resize. + */ + return new Promise((resolve) => { + const callback = () => { + /** + * As per the spec, the ResizeObserver + * will fire when observation starts if + * the observed element is rendered and does not + * have a size of 0 x 0. However, the watched element + * may or may not have resized by the time this first + * callback is fired. As a result, we need to check + * the dimensions of the element. + * + * https://www.w3.org/TR/resize-observer/#intro + */ + if (containerElement.clientHeight === initialResizeContainerHeight) { + /** + * The resize happened, so stop listening + * for resize on this element. + */ + ro.disconnect(); + + resolve(); + } + }; + + /** + * In Capacitor there can be delay between when the window + * resizes and when the container element resizes, so we cannot + * rely on a 'resize' event listener on the window. + * Instead, we need to determine when the container + * element resizes using a ResizeObserver. + */ + const ro = new ResizeObserver(callback); + ro.observe(containerElement); + }); + }; + const destroy = () => { win?.removeEventListener('keyboardWillShow', keyboardWillShowHandler!); win?.removeEventListener('keyboardWillHide', keyboardWillHideHandler!); @@ -37,7 +179,7 @@ export const createKeyboardController = ( const isKeyboardVisible = () => keyboardVisible; - init(); + await init(); return { init, destroy, isKeyboardVisible }; }; diff --git a/core/src/utils/keyboard/keyboard.ts b/core/src/utils/keyboard/keyboard.ts index 730e221294..2b43d3cacb 100644 --- a/core/src/utils/keyboard/keyboard.ts +++ b/core/src/utils/keyboard/keyboard.ts @@ -1,3 +1,5 @@ +import { Keyboard } from '../native/keyboard'; + export const KEYBOARD_DID_OPEN = 'ionKeyboardDidShow'; export const KEYBOARD_DID_CLOSE = 'ionKeyboardDidHide'; const KEYBOARD_THRESHOLD = 150; @@ -19,23 +21,35 @@ export const resetKeyboardAssist = () => { }; export const startKeyboardAssist = (win: Window) => { - startNativeListeners(win); + const nativeEngine = Keyboard.getEngine(); - if (!(win as any).visualViewport) { - return; - } - - currentVisualViewport = copyVisualViewport((win as any).visualViewport); - - (win as any).visualViewport.onresize = () => { - trackViewportChanges(win); - - if (keyboardDidOpen() || keyboardDidResize(win)) { - setKeyboardOpen(win); - } else if (keyboardDidClose(win)) { - setKeyboardClose(win); + /** + * If the native keyboard plugin is available + * then we are running in a native environment. As a result + * we should only listen on the native events instead of + * using the Visual Viewport as the Ionic webview manipulates + * how it resizes such that the Visual Viewport API is not + * reliable here. + */ + if (nativeEngine !== undefined) { + startNativeListeners(win); + } else { + if (!(win as any).visualViewport) { + return; } - }; + + currentVisualViewport = copyVisualViewport((win as any).visualViewport); + + (win as any).visualViewport.onresize = () => { + trackViewportChanges(win); + + if (keyboardDidOpen() || keyboardDidResize(win)) { + setKeyboardOpen(win); + } else if (keyboardDidClose(win)) { + setKeyboardClose(win); + } + }; + } }; /** diff --git a/core/src/utils/keyboard/test/keyboard-controller.spec.ts b/core/src/utils/keyboard/test/keyboard-controller.spec.ts index e623ac9d10..02cb75d673 100644 --- a/core/src/utils/keyboard/test/keyboard-controller.spec.ts +++ b/core/src/utils/keyboard/test/keyboard-controller.spec.ts @@ -1,8 +1,8 @@ import { createKeyboardController } from '../keyboard-controller'; describe('Keyboard Controller', () => { - it('should update isKeyboardVisible', () => { - const keyboardCtrl = createKeyboardController(); + it('should update isKeyboardVisible', async () => { + const keyboardCtrl = await createKeyboardController(); window.dispatchEvent(new Event('keyboardWillShow')); expect(keyboardCtrl.isKeyboardVisible()).toBe(true); @@ -11,14 +11,14 @@ describe('Keyboard Controller', () => { expect(keyboardCtrl.isKeyboardVisible()).toBe(false); }); - it('should run the callback', () => { + it('should run the callback', async () => { const callbackMock = jest.fn(); - createKeyboardController(callbackMock); + await createKeyboardController(callbackMock); window.dispatchEvent(new Event('keyboardWillShow')); - expect(callbackMock).toHaveBeenCalledWith(true); + expect(callbackMock).toHaveBeenCalledWith(true, undefined); window.dispatchEvent(new Event('keyboardWillHide')); - expect(callbackMock).toHaveBeenCalledWith(false); + expect(callbackMock).toHaveBeenCalledWith(false, undefined); }); }); diff --git a/core/src/utils/native/keyboard.ts b/core/src/utils/native/keyboard.ts index 2c1bc7e4c4..6a4e88efbe 100644 --- a/core/src/utils/native/keyboard.ts +++ b/core/src/utils/native/keyboard.ts @@ -1,4 +1,6 @@ -import { win } from '../window'; +import { win } from '../browser'; + +import type { NativePluginError } from './native-interface'; // Interfaces source: https://capacitorjs.com/docs/apis/keyboard#interfaces export interface KeyboardResizeOptions { @@ -18,10 +20,16 @@ export const Keyboard = { }, getResizeMode(): Promise { const engine = this.getEngine(); - if (!engine || !engine.getResizeMode) { + if (!engine?.getResizeMode) { return Promise.resolve(undefined); } - - return engine.getResizeMode(); + return engine.getResizeMode().catch((e: NativePluginError) => { + if (e.code === 'UNIMPLEMENTED') { + // If the native implementation is not available + // we treat it the same as if the plugin is not available. + return undefined; + } + throw e; + }); }, }; diff --git a/core/src/utils/native/native-interface.ts b/core/src/utils/native/native-interface.ts new file mode 100644 index 0000000000..a486f455aa --- /dev/null +++ b/core/src/utils/native/native-interface.ts @@ -0,0 +1,13 @@ +/** + * Used to represent a generic error from a native plugin call. + */ +export interface NativePluginError { + /** + * The error code. + */ + code?: string; + /** + * The error message. + */ + message?: string; +} diff --git a/core/src/utils/native/status-bar.ts b/core/src/utils/native/status-bar.ts index a12dfc5d99..f57a15c5be 100644 --- a/core/src/utils/native/status-bar.ts +++ b/core/src/utils/native/status-bar.ts @@ -1,4 +1,4 @@ -import { win } from '../window'; +import { win } from '../browser'; interface StyleOptions { style: Style; diff --git a/core/src/utils/test/playwright/drag-element.ts b/core/src/utils/test/playwright/drag-element.ts index cf8e52e298..96e6880f23 100644 --- a/core/src/utils/test/playwright/drag-element.ts +++ b/core/src/utils/test/playwright/drag-element.ts @@ -21,17 +21,13 @@ export const dragElementBy = async ( const startX = startXCoord === undefined ? boundingBox.x + boundingBox.width / 2 : startXCoord; const startY = startYCoord === undefined ? boundingBox.y + boundingBox.height / 2 : startYCoord; - const midX = startX + dragByX / 2; - const midY = startY + dragByY / 2; - const endX = startX + dragByX; const endY = startY + dragByY; await page.mouse.move(startX, startY); await page.mouse.down(); - await page.mouse.move(midX, midY); - await page.mouse.move(endX, endY); + await page.mouse.move(endX, endY, { steps: 10 }); await page.mouse.up(); }; diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 23c85f1561..8c25738b55 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + +**Note:** Version bump only for package @ionic/docs + + + + + ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) **Note:** Version bump only for package @ionic/docs diff --git a/docs/package-lock.json b/docs/package-lock.json index cf15ca0555..c6578bdd57 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/docs", - "version": "7.0.6", + "version": "7.0.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/docs", - "version": "7.0.6", + "version": "7.0.10", "license": "MIT" } } diff --git a/docs/package.json b/docs/package.json index 5553e31696..450a61c5dd 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "7.0.6", + "version": "7.0.10", "description": "Pre-packaged API documentation for the Ionic docs.", "main": "core.json", "types": "core.d.ts", diff --git a/lerna.json b/lerna.json index 3061e8a3ba..ebef7df9ef 100644 --- a/lerna.json +++ b/lerna.json @@ -5,5 +5,5 @@ "angular", "packages/*" ], - "version": "7.0.6" + "version": "7.0.10" } diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index 87d2682ec9..2dc8b7c0e7 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + +**Note:** Version bump only for package @ionic/angular-server + + + + + ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) **Note:** Version bump only for package @ionic/angular-server diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json index 6b1e860667..ac82e1ddbe 100644 --- a/packages/angular-server/package-lock.json +++ b/packages/angular-server/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular-server", - "version": "7.0.6", + "version": "7.0.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "7.0.6", + "version": "7.0.10", "license": "MIT", "dependencies": { - "@ionic/core": "^7.0.6" + "@ionic/core": "^7.0.10" }, "devDependencies": { "@angular-eslint/eslint-plugin": "^14.0.0", @@ -1060,9 +1060,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "dependencies": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", @@ -7342,9 +7342,9 @@ "dev": true }, "@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "requires": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index 9cf36bbd6c..b8b04b4bf9 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "7.0.6", + "version": "7.0.10", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -61,6 +61,6 @@ }, "prettier": "@ionic/prettier-config", "dependencies": { - "@ionic/core": "^7.0.6" + "@ionic/core": "^7.0.10" } } diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index 533223baf4..c28ee8db8f 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + +**Note:** Version bump only for package @ionic/react-router + + + + + ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) **Note:** Version bump only for package @ionic/react-router diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json index dbe6ed8a24..bf7f1c850e 100644 --- a/packages/react-router/package-lock.json +++ b/packages/react-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react-router", - "version": "7.0.6", + "version": "7.0.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react-router", - "version": "7.0.6", + "version": "7.0.10", "license": "MIT", "dependencies": { - "@ionic/react": "^7.0.6", + "@ionic/react": "^7.0.10", "tslib": "*" }, "devDependencies": { @@ -205,9 +205,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "dependencies": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", @@ -381,11 +381,11 @@ } }, "node_modules/@ionic/react": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.6.tgz", - "integrity": "sha512-PQIDRVPcjbzxPypbdxIG55nAbrGreCyg8tlNRZw9LuC/IWhDXvMBR+umyF8cwwiiftRxCLukVtfd9M22bJ4slQ==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.10.tgz", + "integrity": "sha512-DggKOQ0JRsOSVY+YZicVhgz5gouL7APQ73kue3PsFK/OrtfeN/5om+XRkqO9bYHam/W/xVp3kpXSYcnsUICntA==", "dependencies": { - "@ionic/core": "7.0.6", + "@ionic/core": "7.0.10", "ionicons": "^7.0.0", "tslib": "*" }, @@ -466,9 +466,9 @@ } }, "node_modules/@stencil/core": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz", - "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz", + "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA==", "bin": { "stencil": "bin/stencil" }, @@ -2161,9 +2161,9 @@ } }, "node_modules/ionicons": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz", - "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz", + "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==", "dependencies": { "@stencil/core": "^2.18.0" } @@ -3643,9 +3643,9 @@ "dev": true }, "@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "requires": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", @@ -3749,11 +3749,11 @@ "requires": {} }, "@ionic/react": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.6.tgz", - "integrity": "sha512-PQIDRVPcjbzxPypbdxIG55nAbrGreCyg8tlNRZw9LuC/IWhDXvMBR+umyF8cwwiiftRxCLukVtfd9M22bJ4slQ==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.0.10.tgz", + "integrity": "sha512-DggKOQ0JRsOSVY+YZicVhgz5gouL7APQ73kue3PsFK/OrtfeN/5om+XRkqO9bYHam/W/xVp3kpXSYcnsUICntA==", "requires": { - "@ionic/core": "7.0.6", + "@ionic/core": "7.0.10", "ionicons": "^7.0.0", "tslib": "*" } @@ -3807,9 +3807,9 @@ } }, "@stencil/core": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz", - "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==" + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz", + "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA==" }, "@types/estree": { "version": "0.0.39", @@ -5002,9 +5002,9 @@ } }, "ionicons": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz", - "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz", + "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==", "requires": { "@stencil/core": "^2.18.0" }, diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 197e358637..e54c84436b 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "7.0.6", + "version": "7.0.10", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -37,7 +37,7 @@ "dist/" ], "dependencies": { - "@ionic/react": "^7.0.6", + "@ionic/react": "^7.0.10", "tslib": "*" }, "peerDependencies": { diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index d5b7660b88..046a007a76 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,41 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + +**Note:** Version bump only for package @ionic/react + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + + +### Bug Fixes + +* **react, vue:** inline modals apply ion-page class ([#27481](https://github.com/ionic-team/ionic-framework/issues/27481)) ([02678f3](https://github.com/ionic-team/ionic-framework/commit/02678f3652be5139cf0c17d0f1260c145acd1a48)), closes [#27470](https://github.com/ionic-team/ionic-framework/issues/27470) + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + +**Note:** Version bump only for package @ionic/react + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + +**Note:** Version bump only for package @ionic/react + + + + + ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index 66bab2742c..e10cd3700b 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react", - "version": "7.0.6", + "version": "7.0.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react", - "version": "7.0.6", + "version": "7.0.10", "license": "MIT", "dependencies": { - "@ionic/core": "^7.0.6", + "@ionic/core": "^7.0.10", "ionicons": "^7.0.0", "tslib": "*" }, @@ -697,9 +697,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "dependencies": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", @@ -11778,9 +11778,9 @@ "dev": true }, "@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "requires": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", diff --git a/packages/react/package.json b/packages/react/package.json index 4104e2cfd7..9e8703dbc0 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "7.0.6", + "version": "7.0.10", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -41,7 +41,7 @@ "css/" ], "dependencies": { - "@ionic/core": "^7.0.6", + "@ionic/core": "^7.0.10", "ionicons": "^7.0.0", "tslib": "*" }, diff --git a/packages/react/src/components/IonModal.tsx b/packages/react/src/components/IonModal.tsx index 7a7bb07115..e133a469b1 100644 --- a/packages/react/src/components/IonModal.tsx +++ b/packages/react/src/components/IonModal.tsx @@ -5,5 +5,6 @@ import { createInlineOverlayComponent } from './createInlineOverlayComponent'; export const IonModal = /*@__PURE__*/ createInlineOverlayComponent( 'ion-modal', - defineCustomElement + defineCustomElement, + true ); diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx index 70ea275222..38679e8515 100644 --- a/packages/react/src/components/createInlineOverlayComponent.tsx +++ b/packages/react/src/components/createInlineOverlayComponent.tsx @@ -29,7 +29,8 @@ interface IonicReactInternalProps extends React.HTMLAttributes( tagName: string, - defineCustomElement?: () => void + defineCustomElement?: () => void, + hasDelegateHost?: boolean ) => { if (defineCustomElement) { defineCustomElement(); @@ -116,6 +117,18 @@ export const createInlineOverlayComponent = ( style, }; + /** + * Some overlays need `.ion-page` so content + * takes up the full size of the parent overlay. + */ + const getWrapperClasses = () => { + if (hasDelegateHost) { + return `${DELEGATE_HOST} ion-page`; + } + + return DELEGATE_HOST; + }; + return createElement( 'template', {}, @@ -132,14 +145,8 @@ export const createInlineOverlayComponent = ( ? createElement( 'div', { - id: 'ion-react-wrapper', ref: this.wrapperRef, - className: 'ion-delegate-host', - style: { - display: 'flex', - flexDirection: 'column', - height: '100%', - }, + className: getWrapperClasses(), }, children ) @@ -194,3 +201,5 @@ export const createInlineOverlayComponent = ( }; return createForwardRef(ReactComponent, displayName); }; + +const DELEGATE_HOST = 'ion-delegate-host'; diff --git a/packages/react/test/base/src/App.tsx b/packages/react/test/base/src/App.tsx index 2003e4295b..9278550f15 100644 --- a/packages/react/test/base/src/App.tsx +++ b/packages/react/test/base/src/App.tsx @@ -32,6 +32,7 @@ import IonModalConditionalSibling from './pages/overlay-components/IonModalCondi import IonModalConditional from './pages/overlay-components/IonModalConditional'; import IonModalDatetimeButton from './pages/overlay-components/IonModalDatetimeButton'; import IonPopoverNested from './pages/overlay-components/IonPopoverNested'; +import IonModalMultipleChildren from './pages/overlay-components/IonModalMultipleChildren'; setupIonicReact(); @@ -52,6 +53,10 @@ const App: React.FC = () => ( path="/overlay-components/modal-datetime-button" component={IonModalDatetimeButton} /> + diff --git a/packages/react/test/base/src/pages/overlay-components/IonModalMultipleChildren.tsx b/packages/react/test/base/src/pages/overlay-components/IonModalMultipleChildren.tsx new file mode 100644 index 0000000000..9919ab8d44 --- /dev/null +++ b/packages/react/test/base/src/pages/overlay-components/IonModalMultipleChildren.tsx @@ -0,0 +1,18 @@ +import { IonButton, IonContent, IonModal } from '@ionic/react'; + +/** + * Test inline modal rendering when content lacks a single root node + */ +const IonModalMultipleChildren = () => { + return ( + + Show Modal + +
Content A
+
Content B
+ + + ); +}; + +export default IonModalMultipleChildren; diff --git a/packages/react/test/base/tests/e2e/specs/overlay-components/IonModal.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-components/IonModal.cy.ts index cfc9d1ad3d..b3dc847074 100644 --- a/packages/react/test/base/tests/e2e/specs/overlay-components/IonModal.cy.ts +++ b/packages/react/test/base/tests/e2e/specs/overlay-components/IonModal.cy.ts @@ -76,3 +76,16 @@ describe('IonModal: conditional rendering', () => { }); }); + +describe('IonModal: multiple children', () => { + it('should render a root .ion-page when passed multiple children', () => { + cy.visit('/overlay-components/modal-multiple-children'); + + cy.get('ion-button#show-modal').click(); + + cy.get('ion-modal').should('be.visible'); + + cy.get('ion-modal .ion-page').should('have.length', 1); + cy.get('ion-modal .ion-page .child-content').should('have.length', 2); + }); +}); diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index ad0544322e..0971544528 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + +**Note:** Version bump only for package @ionic/vue-router + + + + + ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) **Note:** Version bump only for package @ionic/vue-router diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json index 8a4947e897..144f9eee30 100644 --- a/packages/vue-router/package-lock.json +++ b/packages/vue-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue-router", - "version": "7.0.6", + "version": "7.0.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "7.0.6", + "version": "7.0.10", "license": "MIT", "dependencies": { - "@ionic/vue": "^7.0.6" + "@ionic/vue": "^7.0.10" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", @@ -660,9 +660,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "dependencies": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", @@ -851,11 +851,11 @@ } }, "node_modules/@ionic/vue": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.6.tgz", - "integrity": "sha512-c0BG2dFCu0wv41snauz8tDg9q3PVU2Cs63X9BN9fTItpx+XNEnpG0m5plrUz+9y9tp4oogCuecQyVnuCzu+pUQ==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.10.tgz", + "integrity": "sha512-3e3bHGBhhS85byghSbp3U1JP24lHrNilzN4WkBgc9aBeQvwczDNTO69qpiF69fJKDAvU1OrJaAbyomrskE9F9g==", "dependencies": { - "@ionic/core": "7.0.6", + "@ionic/core": "7.0.10", "ionicons": "^7.0.0" } }, @@ -1303,9 +1303,9 @@ } }, "node_modules/@stencil/core": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz", - "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz", + "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA==", "bin": { "stencil": "bin/stencil" }, @@ -4066,9 +4066,9 @@ } }, "node_modules/ionicons": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz", - "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz", + "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==", "dependencies": { "@stencil/core": "^2.18.0" } @@ -6787,9 +6787,9 @@ } }, "node_modules/tslib": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz", + "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -7677,9 +7677,9 @@ "dev": true }, "@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "requires": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", @@ -7792,11 +7792,11 @@ "requires": {} }, "@ionic/vue": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.6.tgz", - "integrity": "sha512-c0BG2dFCu0wv41snauz8tDg9q3PVU2Cs63X9BN9fTItpx+XNEnpG0m5plrUz+9y9tp4oogCuecQyVnuCzu+pUQ==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.0.10.tgz", + "integrity": "sha512-3e3bHGBhhS85byghSbp3U1JP24lHrNilzN4WkBgc9aBeQvwczDNTO69qpiF69fJKDAvU1OrJaAbyomrskE9F9g==", "requires": { - "@ionic/core": "7.0.6", + "@ionic/core": "7.0.10", "ionicons": "^7.0.0" } }, @@ -8155,9 +8155,9 @@ } }, "@stencil/core": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz", - "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==" + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.0.tgz", + "integrity": "sha512-+3hqJ8RmUvxz8FgvMP9lxYJdjb4EnZrkdo6ln5fUqGju62ORS5/Ch9m6OAIjlEn6CbDb5Uf1OdeMjO87DJwIAA==" }, "@tootallnate/once": { "version": "2.0.0", @@ -10201,9 +10201,9 @@ } }, "ionicons": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz", - "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.2.tgz", + "integrity": "sha512-zZ4njAqSP39H8RRvZhJvkHsv7cBjYE/VfInH218Osf2UVxJITSOutTTd25MW+tAXKN5fheYzclUXUsF55JHUDg==", "requires": { "@stencil/core": "^2.18.0" }, @@ -12183,9 +12183,9 @@ } }, "tslib": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.2.tgz", + "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==" }, "tsutils": { "version": "3.21.0", diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index df73f918a1..2de52d1aeb 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "7.0.6", + "version": "7.0.10", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", @@ -45,7 +45,7 @@ }, "homepage": "https://github.com/ionic-team/ionic#readme", "dependencies": { - "@ionic/vue": "^7.0.6" + "@ionic/vue": "^7.0.10" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 532b86b66d..86ac3e75f1 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,41 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + +**Note:** Version bump only for package @ionic/vue + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + + +### Bug Fixes + +* **react, vue:** inline modals apply ion-page class ([#27481](https://github.com/ionic-team/ionic-framework/issues/27481)) ([02678f3](https://github.com/ionic-team/ionic-framework/commit/02678f3652be5139cf0c17d0f1260c145acd1a48)), closes [#27470](https://github.com/ionic-team/ionic-framework/issues/27470) + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + +**Note:** Version bump only for package @ionic/vue + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + +**Note:** Version bump only for package @ionic/vue + + + + + ## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) **Note:** Version bump only for package @ionic/vue diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index ba73307c75..2b31d3441e 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue", - "version": "7.0.6", + "version": "7.0.10", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "7.0.6", + "version": "7.0.10", "license": "MIT", "dependencies": { - "@ionic/core": "^7.0.6", + "@ionic/core": "^7.0.10", "ionicons": "^7.0.0" }, "devDependencies": { @@ -207,9 +207,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "dependencies": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", @@ -3746,9 +3746,9 @@ "dev": true }, "@ionic/core": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.6.tgz", - "integrity": "sha512-ssZs8QzyNPmGCUdK5i5OupA7BDmOjJEOhqfpNGbxwXX3YQ08naVDjNxYn/VSW9O1zSyfecJqJz0Akw/LdKIN/Q==", + "version": "7.0.10", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.10.tgz", + "integrity": "sha512-twpnJdS/1XEXISuUGqQ1x4hp24J+8Pl++7syDWLpOG7fFQk/RIYXDPA9/NPY8Fi1jUngnA6ivdSmkFSpFES07Q==", "requires": { "@stencil/core": "^3.2.2", "ionicons": "^7.1.0", diff --git a/packages/vue/package.json b/packages/vue/package.json index 13579df686..b3d9078d34 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "7.0.6", + "version": "7.0.10", "description": "Vue specific wrapper for @ionic/core", "scripts": { "eslint": "eslint src", @@ -66,7 +66,7 @@ "vue-router": "^4.0.16" }, "dependencies": { - "@ionic/core": "^7.0.6", + "@ionic/core": "^7.0.10", "ionicons": "^7.0.0" }, "vetur": { diff --git a/packages/vue/scripts/copy-overlays.js b/packages/vue/scripts/copy-overlays.js index 42bb2225bb..aece571cac 100644 --- a/packages/vue/scripts/copy-overlays.js +++ b/packages/vue/scripts/copy-overlays.js @@ -25,7 +25,8 @@ function generateOverlays() { }, { tag: 'ion-modal', - name: 'IonModal' + name: 'IonModal', + hasDelegateHost: true }, { tag: 'ion-popover', @@ -44,8 +45,10 @@ function generateOverlays() { componentImports.push(`import { defineCustomElement as ${defineCustomElementFn} } from '@ionic/core/components/${component.tag}.js'`); + const delegateHostString = component.hasDelegateHost ? ', true' : ''; + componentDefinitions.push(` -export const ${component.name} = /*@__PURE__*/ defineOverlayContainer('${component.tag}', ${defineCustomElementFn}, [${props.join(', ')}]); +export const ${component.name} = /*@__PURE__*/ defineOverlayContainer('${component.tag}', ${defineCustomElementFn}, [${props.join(', ')}]${delegateHostString}); `); }); diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts index 16deb3a563..62df98436b 100644 --- a/packages/vue/src/components/Overlays.ts +++ b/packages/vue/src/components/Overlays.ts @@ -27,7 +27,7 @@ export const IonPicker = /*@__PURE__*/ defineOverlayContainer('io export const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger']); -export const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger']); +export const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true); export const IonPopover = /*@__PURE__*/ defineOverlayContainer('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']); diff --git a/packages/vue/src/vue-component-lib/overlays.ts b/packages/vue/src/vue-component-lib/overlays.ts index d47cceefa1..451dfafbfa 100644 --- a/packages/vue/src/vue-component-lib/overlays.ts +++ b/packages/vue/src/vue-component-lib/overlays.ts @@ -9,7 +9,7 @@ export interface OverlayProps { const EMPTY_PROP = Symbol(); const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP }; -export const defineOverlayContainer = (name: string, defineCustomElement: () => void, componentProps: string[] = [], controller?: any) => { +export const defineOverlayContainer = (name: string, defineCustomElement: () => void, componentProps: string[] = [], hasDelegateHost?: boolean, controller?: any) => { const createControllerComponent = () => { return defineComponent((props, { slots, emit }) => { @@ -162,10 +162,22 @@ export const defineOverlayContainer = (name: string, defin } } + /** + * Some overlays need a wrapper element so content + * takes up the full size of the parent overlay. + */ + const renderChildren = () => { + if (hasDelegateHost) { + return h('div', { className: 'ion-delegate-host ion-page' }, slots); + } + + return slots; + } + return h( name, { ...restOfProps, ref: elementRef }, - (isOpen.value || restOfProps.keepContentsMounted) ? slots : undefined + (isOpen.value || restOfProps.keepContentsMounted) ? renderChildren() : undefined ) } }); diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index e9d8c22dd2..826e78e992 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -1,3 +1,5 @@ +// @ts-nocheck +// It's easier and safer for Volar to disable typechecking and let the return type inference do its job. import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue'; export interface InputProps { @@ -72,7 +74,7 @@ export const defineContainer = ( defineCustomElement(); } - const Container = defineComponent>((props: any, { attrs, slots, emit }) => { + const Container = defineComponent>((props, { attrs, slots, emit }) => { let modelPropValue = props[modelProp]; const containerRef = ref(); const classes = new Set(getComponentClasses(attrs.class)); @@ -184,19 +186,21 @@ export const defineContainer = ( }; }); - Container.name = name; + if (typeof Container !== 'function') { + Container.name = name; - Container.props = { - [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP, - }; + Container.props = { + [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP, + }; - componentProps.forEach((componentProp) => { - Container.props[componentProp] = DEFAULT_EMPTY_PROP; - }); + componentProps.forEach((componentProp) => { + Container.props[componentProp] = DEFAULT_EMPTY_PROP; + }); - if (modelProp) { - Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP; - Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent]; + if (modelProp) { + Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP; + Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent]; + } } return Container; diff --git a/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts index 236ec08afa..a62a9ceefb 100644 --- a/packages/vue/test/base/src/router/index.ts +++ b/packages/vue/test/base/src/router/index.ts @@ -29,6 +29,10 @@ const routes: Array = [ path: '/overlays', component: () => import('@/views/Overlays.vue') }, + { + path: '/modal-multiple-children', + component: () => import('@/views/ModalMultipleChildren.vue') + }, { path: '/keep-contents-mounted', component: () => import('@/views/OverlaysKeepContentsMounted.vue') diff --git a/packages/vue/test/base/src/views/ModalMultipleChildren.vue b/packages/vue/test/base/src/views/ModalMultipleChildren.vue new file mode 100644 index 0000000000..ec5784e53f --- /dev/null +++ b/packages/vue/test/base/src/views/ModalMultipleChildren.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/vue/test/base/tests/e2e/specs/modal-multiple-children.cy.js b/packages/vue/test/base/tests/e2e/specs/modal-multiple-children.cy.js new file mode 100644 index 0000000000..c4fec5ebc1 --- /dev/null +++ b/packages/vue/test/base/tests/e2e/specs/modal-multiple-children.cy.js @@ -0,0 +1,12 @@ +describe('modal - multiple children', () => { + it('should render a root .ion-page when passed multiple children', () => { + cy.visit('/modal-multiple-children'); + + cy.get('ion-button#show-modal').click(); + + cy.get('ion-modal').should('be.visible'); + + cy.get('ion-modal .ion-page').should('have.length', 1); + cy.get('ion-modal .ion-page .child-content').should('have.length', 2); + }); +})