diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml index 52596467d3..d9cf4bf6f5 100644 --- a/.github/workflows/actions/test-core-screenshot/action.yml +++ b/.github/workflows/actions/test-core-screenshot/action.yml @@ -7,6 +7,8 @@ inputs: description: 'Playwright total number of test shards (ex: 4)' update: description: 'Whether or not to update the reference snapshots' + component: + description: 'The component to update the reference snapshots' runs: using: 'composite' @@ -23,9 +25,29 @@ runs: run: npm install && npx playwright install && npx playwright install-deps shell: bash working-directory: ./core + - id: clean-component-name + name: Clean Component Name + # Remove `ion-` prefix from the `component` variable if it exists. + run: | + echo "component=$(echo ${{ inputs.component }} | sed 's/ion-//g')" >> $GITHUB_OUTPUT + shell: bash + - id: set-test-file + name: Set Test File + # Screenshots can be updated for all components or specified component(s). + # If the `component` variable is set, then the test has the option to + # - run all the file paths that are in a component folder. + # -- For example: if the `component` value is "item", then the test will run all the file paths that are in the "src/components/item" folder. + # -- For example: if the `component` value is "item chip", then the test will run all the file paths that are in the "src/components/item" and "src/components/chip" folders. + run: | + if [ -n "${{ steps.clean-component-name.outputs.component }}" ]; then + echo "testFile=\$(echo '${{ steps.clean-component-name.outputs.component }}' | awk '{for(i=1;i<=NF;i++) \$i=\"src/components/\"\$i}1')" >> $GITHUB_OUTPUT + else + echo "testFile=$(echo '')" >> $GITHUB_OUTPUT + fi + shell: bash - name: Test if: inputs.update != 'true' - run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} + run: npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} shell: bash working-directory: ./core - name: Test and Update @@ -47,7 +69,7 @@ runs: # which is why we not using the upload-archive # composite step here. run: | - npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots + npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots git add src/\*.png --force mkdir updated-screenshots cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots diff --git a/.github/workflows/stencil-nightly.yml b/.github/workflows/stencil-nightly.yml index c5db4e1bb3..01ab63bb5e 100644 --- a/.github/workflows/stencil-nightly.yml +++ b/.github/workflows/stencil-nightly.yml @@ -150,7 +150,7 @@ jobs: strategy: fail-fast: false matrix: - apps: [ng12, ng13, ng14, ng15] + apps: [ng16, ng17] needs: [build-angular, build-angular-server] runs-on: ubuntu-latest steps: diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml index 7ff2c49901..b78a13c42a 100644 --- a/.github/workflows/update-screenshots.yml +++ b/.github/workflows/update-screenshots.yml @@ -2,6 +2,11 @@ name: 'Update Reference Screenshots' on: workflow_dispatch: + inputs: + component: + description: 'What component(s) should be updated? (leave blank to update all or use a space-separated list for multiple components)' + required: false + default: '' jobs: build-core: @@ -34,6 +39,7 @@ jobs: shard: ${{ matrix.shard }} totalShards: ${{ matrix.totalShards }} update: true + component: ${{ inputs.component }} update-reference-screenshots: runs-on: ubuntu-latest diff --git a/CHANGELOG.md b/CHANGELOG.md index bab77c44f5..6a26de87c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,45 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07) + + +### Bug Fixes + +* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541) +* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352) +* **react:** route with redirect will mount page ([#28961](https://github.com/ionic-team/ionic-framework/issues/28961)) ([5777ce2](https://github.com/ionic-team/ionic-framework/commit/5777ce258119d2715b1326cdc103bd4ad7612bd1)), closes [#28838](https://github.com/ionic-team/ionic-framework/issues/28838) +* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963) + + + + + +# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31) + + +### Features + +* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703) + + + + + +## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31) + + +### Bug Fixes + +* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344) +* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965) +* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525) +* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769) + + + + + ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index de77edeea8..c202684d81 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,44 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07) + + +### Bug Fixes + +* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541) +* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352) +* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963) + + + + + +# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31) + + +### Features + +* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703) + + + + + +## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31) + + +### Bug Fixes + +* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344) +* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965) +* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525) +* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769) + + + + + ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24) diff --git a/core/package-lock.json b/core/package-lock.json index fac0a25cdd..58ea6e39df 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,32 +1,32 @@ { "name": "@ionic/core", - "version": "7.6.6", + "version": "7.7.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "7.6.6", + "version": "7.7.1", "license": "MIT", "dependencies": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" }, "devDependencies": { - "@axe-core/playwright": "^4.8.3", + "@axe-core/playwright": "^4.8.4", "@capacitor/core": "^5.6.0", - "@capacitor/haptics": "^5.0.6", - "@capacitor/keyboard": "^5.0.7", - "@capacitor/status-bar": "^5.0.6", + "@capacitor/haptics": "^5.0.7", + "@capacitor/keyboard": "^5.0.8", + "@capacitor/status-bar": "^5.0.7", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@playwright/test": "^1.39.0", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", - "@stencil/angular-output-target": "^0.8.3", + "@stencil/angular-output-target": "^0.8.4", "@stencil/react-output-target": "^0.5.3", - "@stencil/sass": "^3.0.8", + "@stencil/sass": "^3.0.9", "@stencil/vue-output-target": "^0.8.7", "@types/jest": "^29.5.6", "@types/node": "^14.6.0", @@ -56,9 +56,9 @@ "dev": true }, "node_modules/@axe-core/playwright": { - "version": "4.8.3", - "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.3.tgz", - "integrity": "sha512-YtbkAWeOp5oQeI8vS6KYqJDa5yTl5O1wJP8KOZAAVjhxeiK/Y1ssxnZuGRobARyVh3eS6O3jdxTv/iCK1RfgaA==", + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz", + "integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==", "dev": true, "dependencies": { "axe-core": "~4.8.3" @@ -643,27 +643,27 @@ } }, "node_modules/@capacitor/haptics": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz", - "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==", + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz", + "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==", "dev": true, "peerDependencies": { "@capacitor/core": "^5.0.0" } }, "node_modules/@capacitor/keyboard": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz", - "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==", + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz", + "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==", "dev": true, "peerDependencies": { "@capacitor/core": "^5.0.0" } }, "node_modules/@capacitor/status-bar": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz", - "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==", + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz", + "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==", "dev": true, "peerDependencies": { "@capacitor/core": "^5.0.0" @@ -1816,18 +1816,18 @@ } }, "node_modules/@stencil/angular-output-target": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz", - "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz", + "integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==", "dev": true, "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" } }, "node_modules/@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==", "bin": { "stencil": "bin/stencil" }, @@ -1846,9 +1846,9 @@ } }, "node_modules/@stencil/sass": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz", - "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==", + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz", + "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==", "dev": true, "engines": { "node": ">=12.0.0", @@ -10899,9 +10899,9 @@ }, "dependencies": { "@axe-core/playwright": { - "version": "4.8.3", - "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.3.tgz", - "integrity": "sha512-YtbkAWeOp5oQeI8vS6KYqJDa5yTl5O1wJP8KOZAAVjhxeiK/Y1ssxnZuGRobARyVh3eS6O3jdxTv/iCK1RfgaA==", + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz", + "integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==", "dev": true, "requires": { "axe-core": "~4.8.3" @@ -11333,23 +11333,23 @@ } }, "@capacitor/haptics": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz", - "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==", + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz", + "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==", "dev": true, "requires": {} }, "@capacitor/keyboard": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz", - "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==", + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz", + "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==", "dev": true, "requires": {} }, "@capacitor/status-bar": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz", - "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==", + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz", + "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==", "dev": true, "requires": {} }, @@ -12177,16 +12177,16 @@ } }, "@stencil/angular-output-target": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz", - "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz", + "integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==", "dev": true, "requires": {} }, "@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==" + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==" }, "@stencil/react-output-target": { "version": "0.5.3", @@ -12196,9 +12196,9 @@ "requires": {} }, "@stencil/sass": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz", - "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==", + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz", + "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==", "dev": true, "requires": {} }, diff --git a/core/package.json b/core/package.json index 3a4680c85c..f6a9fdf962 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "7.6.6", + "version": "7.7.1", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -31,24 +31,24 @@ "loader/" ], "dependencies": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" }, "devDependencies": { - "@axe-core/playwright": "^4.8.3", + "@axe-core/playwright": "^4.8.4", "@capacitor/core": "^5.6.0", - "@capacitor/haptics": "^5.0.6", - "@capacitor/keyboard": "^5.0.7", - "@capacitor/status-bar": "^5.0.6", + "@capacitor/haptics": "^5.0.7", + "@capacitor/keyboard": "^5.0.8", + "@capacitor/status-bar": "^5.0.7", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@playwright/test": "^1.39.0", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", - "@stencil/angular-output-target": "^0.8.3", + "@stencil/angular-output-target": "^0.8.4", "@stencil/react-output-target": "^0.5.3", - "@stencil/sass": "^3.0.8", + "@stencil/sass": "^3.0.9", "@stencil/vue-output-target": "^0.8.7", "@types/jest": "^29.5.6", "@types/node": "^14.6.0", diff --git a/core/src/components/accordion/test/a11y/index.html b/core/src/components/accordion/test/a11y/index.html index 0c660ef8dd..e8bd7a67e0 100644 --- a/core/src/components/accordion/test/a11y/index.html +++ b/core/src/components/accordion/test/a11y/index.html @@ -23,28 +23,22 @@ - Name - + - Email - + - Phone - + - Extension - + - Country - + - City/Province - + @@ -56,24 +50,19 @@ - Address 1 - + - Address 2 - + - City - + - State - + - Zip Code - + @@ -85,24 +74,19 @@ - Address 1 - + - Address 2 - + - City - + - State - + - Zip Code - + diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts index 90e4e99a26..f9cc06cd32 100644 --- a/core/src/components/action-sheet/action-sheet-interface.ts +++ b/core/src/components/action-sheet/action-sheet-interface.ts @@ -1,4 +1,4 @@ -import type { AnimationBuilder, Mode } from '../../interface'; +import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface'; export interface ActionSheetOptions { header?: string; @@ -19,7 +19,7 @@ export interface ActionSheetOptions { export interface ActionSheetButton { text?: string; - role?: 'cancel' | 'destructive' | 'selected' | string; + role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>; icon?: string; cssClass?: string | string[]; id?: string; diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss index bf591b9493..672b072872 100644 --- a/core/src/components/action-sheet/action-sheet.ios.scss +++ b/core/src/components/action-sheet/action-sheet.ios.scss @@ -27,7 +27,24 @@ // --------------------------------------------------- .action-sheet-wrapper { - @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto); + @include margin(var(--ion-safe-area-top, 0), auto, null, auto); + /** + * Bottom safe area is applied as padding so that it impacts the bounding box. + * When the action sheet is shown/hidden, this element is transformed by translating + * 100% of its height. This translation needs to include the bottom safe area + * otherwise part of the action sheet will still be visible at the end of + * the show transition. + * + * If this code is changed, reviewers should verify that the action + * sheet still translates out of the viewport completely when the bottom + * safe area is a positive value. + */ + @include padding(null, null, var(--ion-safe-area-bottom, 0), null); + + // Using content-box to increase the height of the action sheet + // wrapper by the bottom padding (safe area) to animate the + // action sheet completely off the screen when safe area is set. + box-sizing: content-box; } // iOS Action Sheet Container diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index 3f9d6cda8d..326d74484d 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -1,4 +1,4 @@ -import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface'; +import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface'; import type { IonicSafeString } from '../../utils/sanitization'; export interface AlertOptions { @@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any }; export interface AlertButton { text: string; - role?: 'cancel' | 'destructive' | string; + role?: LiteralUnion<'cancel' | 'destructive', string>; cssClass?: string | string[]; id?: string; htmlAttributes?: { [key: string]: any }; diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx index b0fc4731b3..44a67d2a15 100644 --- a/core/src/components/app/app.tsx +++ b/core/src/components/app/app.tsx @@ -1,6 +1,8 @@ import type { ComponentInterface } from '@stencil/core'; import { Build, Component, Element, Host, Method, h } from '@stencil/core'; import type { FocusVisibleUtility } from '@utils/focus-visible'; +import { shoudUseCloseWatcher } from '@utils/hardware-back-button'; +import { printIonWarning } from '@utils/logging'; import { isPlatform } from '@utils/platform'; import { config } from '../../global/config'; @@ -34,9 +36,20 @@ export class App implements ComponentInterface { import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform)); } const hardwareBackButtonModule = await import('../../utils/hardware-back-button'); - if (config.getBoolean('hardwareBackButton', isHybrid)) { + const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher(); + if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) { hardwareBackButtonModule.startHardwareBackButton(); } else { + /** + * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true + * then the close watcher will not be used. + */ + if (shoudUseCloseWatcher()) { + printIonWarning( + 'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.' + ); + } + hardwareBackButtonModule.blockHardwareBackButton(); } if (typeof (window as any) !== 'undefined') { diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts index 2480c2fb2f..51635161b0 100644 --- a/core/src/components/button/test/basic/button.e2e.ts +++ b/core/src/components/button/test/basic/button.e2e.ts @@ -57,7 +57,7 @@ configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => { await page.mouse.down(); } - await page.waitForSelector('#default.ion-activated'); + await page.locator('#default.ion-activated').waitFor(); await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`)); }); diff --git a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts index cde4a5f150..9a4b90f884 100644 --- a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts +++ b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts @@ -32,7 +32,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); }); test('should switch to a date-only view when the date button is clicked', async ({ page }) => { const datetime = page.locator('ion-datetime'); @@ -62,7 +62,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toContainText('Jan 1, 2022'); await expect(page.locator('#time-button')).toContainText('6:30 AM'); @@ -75,7 +75,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toContainText('January 2022'); await expect(page.locator('#time-button')).toBeHidden(); @@ -88,7 +88,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toContainText('2022'); await expect(page.locator('#time-button')).toBeHidden(); @@ -101,7 +101,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toContainText('January'); await expect(page.locator('#time-button')).toBeHidden(); @@ -114,7 +114,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#time-button')).toContainText('6:30 AM'); await expect(page.locator('#date-button')).toBeHidden(); @@ -127,7 +127,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); const dateTarget = page.locator('#date-button'); @@ -152,7 +152,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toContainText('January 2022'); await expect(page.locator('#time-button')).toBeHidden(); @@ -170,7 +170,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toContainText('2022'); await expect(page.locator('#time-button')).toBeHidden(); @@ -186,7 +186,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); /** * The entire text reads 1 ene 2022, but some browsers will add @@ -204,7 +204,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#time-button')).toContainText('16:30'); }); @@ -216,7 +216,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const timeTarget = page.locator('#time-button'); await expect(timeTarget).toContainText('6:30'); @@ -240,7 +240,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM'); await expect(page.locator('#time-button')).not.toBeVisible(); @@ -255,7 +255,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM'); await expect(page.locator('#time-button')).not.toBeVisible(); diff --git a/core/src/components/datetime-button/test/buttons/index.html b/core/src/components/datetime-button/test/buttons/index.html index 2b6f1f7bcc..ca484632b9 100644 --- a/core/src/components/datetime-button/test/buttons/index.html +++ b/core/src/components/datetime-button/test/buttons/index.html @@ -18,7 +18,7 @@ - + diff --git a/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts b/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts index 23ef52821f..f8f45fd49c 100644 --- a/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts +++ b/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts @@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toBeDisabled(); await expect(page.locator('#time-button')).toBeDisabled(); @@ -24,7 +24,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetimeButton = page.locator('ion-datetime-button'); await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`)); diff --git a/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts b/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts index 901ddc74be..598124b1b0 100644 --- a/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts +++ b/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts @@ -20,7 +20,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toContainText('3 days'); }); @@ -32,7 +32,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toHaveText('0 days'); }); @@ -49,7 +49,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022'); }); @@ -69,7 +69,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toHaveText('Selected: 3'); }); @@ -86,7 +86,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); const ionValueChange = await page.spyOnEvent('ionValueChange'); @@ -111,7 +111,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022'); await expect(page.locator('#time-button')).toHaveText('4:30 PM'); diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts b/core/src/components/datetime/test/a11y/datetime.e2e.ts index 79deb85e23..374798f2fa 100644 --- a/core/src/components/datetime/test/a11y/datetime.e2e.ts +++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts @@ -24,7 +24,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { const container = page.locator('#container'); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(container).toHaveScreenshot(screenshot(`datetime-scale`)); }); @@ -87,7 +87,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const clearButton = page.locator('#clear-button button'); const selectedDay = page.locator('.calendar-day-active'); @@ -114,7 +114,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); const calendarBody = page.locator('.calendar-body'); await expect(calendarMonthYear).toHaveText('February 2022'); diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index 1482ad3da1..8581fe385b 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -110,7 +110,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); const ionChange = await page.spyOnEvent('ionChange'); @@ -255,7 +255,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const calendarBody = page.locator('ion-datetime .calendar-body'); const calendarHeader = page.locator('ion-datetime .calendar-month-year'); @@ -275,7 +275,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const calendarBody = page.locator('ion-datetime .calendar-body'); const calendarHeader = page.locator('ion-datetime .calendar-month-year'); @@ -297,7 +297,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const calendarBody = page.locator('ion-datetime .calendar-body'); const calendarHeader = page.locator('ion-datetime .calendar-month-year'); @@ -331,7 +331,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const monthYearButton = page.locator('ion-datetime .calendar-month-year'); const monthYearInterface = page.locator('ion-datetime .datetime-year'); @@ -349,7 +349,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await datetime.evaluate((el: HTMLIonDatetimeElement) => el.style.removeProperty('display')); await expect(datetime).toBeVisible(); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); // month/year interface should be reset await expect(monthYearInterface).toBeHidden(); @@ -399,7 +399,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const selectedDay = page.locator('ion-datetime .calendar-day-active'); @@ -428,7 +428,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const ionChange = await page.spyOnEvent('ionChange'); const calendarButtons = page.locator('.calendar-day:not([disabled])'); @@ -447,7 +447,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const ionChange = await page.spyOnEvent('ionChange'); const datetime = page.locator('ion-datetime'); @@ -487,7 +487,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { const datetime = page.locator('ion-datetime'); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot( screenshot(`datetime-today-calendar-button`) @@ -517,7 +517,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co const datetime = page.locator('ion-datetime'); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(datetime).toHaveScreenshot(screenshot(`date-highlight-start-of-month`)); @@ -543,7 +543,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html index 153c85688a..2023b4a119 100644 --- a/core/src/components/datetime/test/basic/index.html +++ b/core/src/components/datetime/test/basic/index.html @@ -214,8 +214,7 @@ - Dark Mode - + Dark Mode iOS Mode @@ -225,23 +224,19 @@ - Show Default Title - + Show Default Title - Show Default Buttons - + Show Default Buttons - Locale - + - Color - + Primary Secondary Tertiary diff --git a/core/src/components/datetime/test/datetime.e2e.ts b/core/src/components/datetime/test/datetime.e2e.ts index ec415946b6..2e26aad48e 100644 --- a/core/src/components/datetime/test/datetime.e2e.ts +++ b/core/src/components/datetime/test/datetime.e2e.ts @@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); }); test('should switch the calendar header when moving to a month with a different number of days', async ({ diff --git a/core/src/components/datetime/test/disable-dates/datetime.e2e.ts b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts index 6ae7c54ea9..3fc4b88218 100644 --- a/core/src/components/datetime/test/disable-dates/datetime.e2e.ts +++ b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts @@ -113,7 +113,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => test.describe('check example usages', () => { test.beforeEach(async ({ page }) => { await page.goto('/src/components/datetime/test/disable-dates', config); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').first().waitFor(); }); test('should disable a specific date', async ({ page }) => { diff --git a/core/src/components/datetime/test/disabled/datetime.e2e.ts b/core/src/components/datetime/test/disabled/datetime.e2e.ts index d794a2d2ef..91b48b736c 100644 --- a/core/src/components/datetime/test/disabled/datetime.e2e.ts +++ b/core/src/components/datetime/test/disabled/datetime.e2e.ts @@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`); @@ -42,7 +42,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); await expect(calendarMonthYear.locator('button')).toBeDisabled(); }); @@ -71,7 +71,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const clearButton = page.locator('#clear-button button'); @@ -86,7 +86,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); const calendarBody = page.locator('.calendar-body'); await expect(calendarMonthYear).toHaveText('February 2022'); diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts b/core/src/components/datetime/test/display/datetime.e2e.ts index 0fcb9db898..501bdfeeab 100644 --- a/core/src/components/datetime/test/display/datetime.e2e.ts +++ b/core/src/components/datetime/test/display/datetime.e2e.ts @@ -15,7 +15,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date-time`)); }); @@ -26,7 +26,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time-date`)); }); @@ -37,7 +37,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time`)); }); @@ -48,7 +48,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date`)); }); @@ -69,7 +69,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date-time`)); }); @@ -80,7 +80,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time-date`)); }); @@ -91,7 +91,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time`)); }); @@ -102,7 +102,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date`)); }); @@ -119,7 +119,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => test('month selection should work after changing presentation', async ({ page }) => { await page.goto('/src/components/datetime/test/display', config); const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange'); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const select = page.locator('select#presentation'); diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts b/core/src/components/datetime/test/locale/datetime.e2e.ts index 6df37a77ba..2ffda6c97a 100644 --- a/core/src/components/datetime/test/locale/datetime.e2e.ts +++ b/core/src/components/datetime/test/locale/datetime.e2e.ts @@ -95,7 +95,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetimeButtons = page.locator('ion-datetime .calendar-day:not([disabled])'); @@ -111,7 +111,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetimeYear = page.locator('ion-datetime .year-column ion-picker-column-option').nth(0); await expect(datetimeYear).toHaveText('٢٠٢٢'); @@ -146,7 +146,7 @@ class DatetimeLocaleFixture { this.datetime = this.page.locator('ion-datetime'); - await this.page.waitForSelector('.datetime-ready'); + await this.page.locator('.datetime-ready').waitFor(); } async expectLocalizedDatePicker(screenshot: ScreenshotFn) { diff --git a/core/src/components/datetime/test/minmax/datetime.e2e.ts b/core/src/components/datetime/test/minmax/datetime.e2e.ts index b59c886e45..e7dd39abac 100644 --- a/core/src/components/datetime/test/minmax/datetime.e2e.ts +++ b/core/src/components/datetime/test/minmax/datetime.e2e.ts @@ -36,7 +36,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const prevButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(1)'); const nextButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(2)'); @@ -61,7 +61,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => await page.goto('/src/components/datetime/test/minmax', config); const calendarMonths = page.locator('ion-datetime#inside .calendar-month'); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').first().waitFor(); await expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/); await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/); @@ -70,7 +70,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => test('datetime: minmax navigation disabled', async ({ page }) => { await page.goto('/src/components/datetime/test/minmax', config); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').first().waitFor(); const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button'); @@ -80,7 +80,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => test('datetime: min including day should not disable month', async ({ page }) => { await page.goto('/src/components/datetime/test/minmax', config); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').first().waitFor(); const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month'); @@ -102,7 +102,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent'); @@ -120,7 +120,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => test.describe('setting value outside bounds should show in-bounds month', () => { const testDisplayedMonth = async (page: E2EPage, content: string, expectedString = /June 2021/) => { await page.setContent(content, config); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); await expect(calendarMonthYear).toHaveText(expectedString); @@ -170,7 +170,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange'); const eventButton = page.locator('button#bind'); @@ -252,7 +252,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); const ionChange = await page.spyOnEvent('ionChange'); @@ -275,7 +275,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); const ionChange = await page.spyOnEvent('ionChange'); @@ -303,7 +303,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option'); const ionChange = await page.spyOnEvent('ionChange'); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await monthColumnItems.nth(0).click(); // switch to January await ionChange.next(); @@ -338,7 +338,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); // Select Jan 10, 2022 const maxDate = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="1"][data-year="2022"]'); diff --git a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts index f894b0a0fe..4d2dc8e7dd 100644 --- a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts +++ b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts @@ -8,7 +8,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => test.describe(title('datetime: month-year picker'), () => { test.beforeEach(async ({ page }) => { await page.goto('/src/components/datetime/test/month-year-picker', config); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').first().waitFor(); }); test('should hide the footer when picker is open', async ({ page }) => { diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts b/core/src/components/datetime/test/multiple/datetime.e2e.ts index c3a195b89b..0e2c0efb38 100644 --- a/core/src/components/datetime/test/multiple/datetime.e2e.ts +++ b/core/src/components/datetime/test/multiple/datetime.e2e.ts @@ -62,7 +62,7 @@ class DatetimeMultipleFixture { ); this.datetime = this.page.locator('ion-datetime'); - await this.page.waitForSelector('.datetime-ready'); + await this.page.locator('.datetime-ready').waitFor(); return this.datetime; } @@ -304,7 +304,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { `, config ); - await page.waitForSelector(`.datetime-ready`); + await page.locator(`.datetime-ready`).waitFor(); const datetime = page.locator('ion-datetime'); const header = datetime.locator('.datetime-selected-date'); diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts b/core/src/components/datetime/test/position/datetime.e2e.ts index f2f705c307..c817e3c6d0 100644 --- a/core/src/components/datetime/test/position/datetime.e2e.ts +++ b/core/src/components/datetime/test/position/datetime.e2e.ts @@ -11,7 +11,7 @@ configs().forEach(({ title, screenshot, config }) => { await openDateTimeBtn.click(); await ionPopoverDidPresent.next(); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page).toHaveScreenshot(screenshot(`datetime-position-base`)); 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 5da7365797..fb1b2e31eb 100644 --- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts +++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts @@ -23,7 +23,7 @@ configs().forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-diff`)); }); @@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-time-diff`)); }); @@ -45,7 +45,7 @@ configs().forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-time-date-diff`)); }); @@ -56,7 +56,7 @@ configs().forEach(({ title, screenshot, config }) => { `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); @@ -80,7 +80,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option'); expect(await dayValues.count()).toEqual(27); @@ -93,7 +93,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option'); expect(await dayValues.count()).toEqual(1); @@ -116,7 +116,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const disabledMonths = page.locator('.month-column ion-picker-column-option.option-disabled'); const disabledYears = page.locator('.year-column ion-picker-column-option.option-disabled'); @@ -141,7 +141,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const monthValues = page.locator('.month-column ion-picker-column-option'); const yearValues = page.locator('.year-column ion-picker-column-option'); @@ -175,7 +175,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const ionChange = await page.spyOnEvent('ionChange'); const monthValues = page.locator('.month-column ion-picker-column-option'); @@ -209,7 +209,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const ionChange = await page.spyOnEvent('ionChange'); const dayValues = page.locator('.day-column ion-picker-column-option'); @@ -230,7 +230,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const ionChange = await page.spyOnEvent('ionChange'); const yearValues = page.locator('.year-column ion-picker-column-option'); @@ -253,7 +253,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z')); @@ -285,7 +285,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const monthValues = page.locator('.month-column ion-picker-column-option'); const dayValues = page.locator('.day-column ion-picker-column-option'); @@ -305,7 +305,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const columns = page.locator('ion-picker-column'); @@ -326,7 +326,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const columns = page.locator('ion-picker-column'); @@ -345,7 +345,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option'); expect(await dayValues.count()).toEqual(57); @@ -358,7 +358,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option'); expect(await dayValues.count()).toEqual(41); @@ -381,7 +381,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled'); @@ -402,7 +402,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dateValues = page.locator('.date-column ion-picker-column-option'); @@ -423,7 +423,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dateValues = page.locator('.date-column ion-picker-column-option'); await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']); @@ -442,7 +442,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dateColumn = page.locator('.date-column'); const dateColumnScrollEl = dateColumn.locator('.picker-opts'); @@ -473,7 +473,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('.date-column ion-picker-column-option'); @@ -493,7 +493,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('.date-column ion-picker-column-option'); @@ -510,7 +510,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const ionChange = await page.spyOnEvent('ionChange'); const dayValues = page.locator('.date-column ion-picker-column-option'); @@ -530,7 +530,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option'); expect(await dayValues.count()).toEqual(57); @@ -543,7 +543,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option'); expect(await dayValues.count()).toEqual(41); @@ -566,7 +566,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled'); @@ -587,7 +587,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dateValues = page.locator('.date-column ion-picker-column-option'); @@ -608,7 +608,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dateValues = page.locator('.date-column ion-picker-column-option'); @@ -628,7 +628,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dateColumn = page.locator('.date-column'); const dateColumnScrollEl = dateColumn.locator('.picker-opts'); @@ -659,7 +659,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('.date-column ion-picker-column-option'); @@ -679,7 +679,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const dayValues = page.locator('.date-column ion-picker-column-option'); diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts b/core/src/components/datetime/test/presentation/datetime.e2e.ts index 9462cc2af4..4af756d516 100644 --- a/core/src/components/datetime/test/presentation/datetime.e2e.ts +++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts @@ -117,7 +117,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); const monthYearButton = page.locator('ion-datetime .calendar-month-year'); @@ -189,7 +189,7 @@ class DatetimePresentationFixture { `, config ); - await this.page.waitForSelector('.datetime-ready'); + await this.page.locator('.datetime-ready').waitFor(); this.datetime = this.page.locator('ion-datetime'); } @@ -214,7 +214,7 @@ class TimePickerFixture { `, config ); - await this.page.waitForSelector('.datetime-ready'); + await this.page.locator('.datetime-ready').waitFor(); this.timePicker = this.page.locator('ion-datetime'); } diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts b/core/src/components/datetime/test/readonly/datetime.e2e.ts index ea47e7ded8..288eded09f 100644 --- a/core/src/components/datetime/test/readonly/datetime.e2e.ts +++ b/core/src/components/datetime/test/readonly/datetime.e2e.ts @@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`); @@ -43,7 +43,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree ); const ionChange = await page.spyOnEvent('ionChange'); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); await expect(calendarMonthYear).toHaveText('February 2022'); @@ -66,7 +66,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const calendarMonthYear = page.locator('ion-datetime .calendar-month-year'); const monthYearButton = page.locator('.calendar-month-year-toggle'); await expect(calendarMonthYear).toHaveText('February 2022'); @@ -157,7 +157,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const clearButton = page.locator('#clear-button button'); diff --git a/core/src/components/datetime/test/set-value/datetime.e2e.ts b/core/src/components/datetime/test/set-value/datetime.e2e.ts index 798b87144a..37daadf2b8 100644 --- a/core/src/components/datetime/test/set-value/datetime.e2e.ts +++ b/core/src/components/datetime/test/set-value/datetime.e2e.ts @@ -5,7 +5,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => test.describe(title('datetime: set-value'), () => { test('should update the active date when value is initially set', async ({ page }) => { await page.goto('/src/components/datetime/test/set-value', config); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z')); @@ -18,7 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => test('should update the active time when value is initially set', async ({ page }) => { await page.goto('/src/components/datetime/test/set-value', config); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z')); @@ -37,7 +37,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); const activeDayButton = page.locator('.calendar-day-active'); @@ -53,7 +53,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => test('should scroll to new month when value is initially set and then updated', async ({ page }) => { await page.goto('/src/components/datetime/test/set-value', config); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const datetime = page.locator('ion-datetime'); await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z')); diff --git a/core/src/components/datetime/test/time-label/datetime.e2e.ts b/core/src/components/datetime/test/time-label/datetime.e2e.ts index cf3fb9f780..88acbbe857 100644 --- a/core/src/components/datetime/test/time-label/datetime.e2e.ts +++ b/core/src/components/datetime/test/time-label/datetime.e2e.ts @@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const timeLabel = page.locator('ion-datetime .time-header'); await expect(timeLabel).toHaveText('Time'); @@ -22,7 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const timeLabel = page.locator('ion-datetime .time-header'); await expect(timeLabel).toHaveText(''); diff --git a/core/src/components/datetime/test/values/datetime.e2e.ts b/core/src/components/datetime/test/values/datetime.e2e.ts index 23a9e4a382..9001d61b91 100644 --- a/core/src/components/datetime/test/values/datetime.e2e.ts +++ b/core/src/components/datetime/test/values/datetime.e2e.ts @@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => `, config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const items = page.locator('.calendar-day:not([disabled])'); @@ -91,7 +91,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const minuteColumn = page.locator('ion-picker-column').nth(1); const minuteItems = minuteColumn.locator('ion-picker-column-option'); @@ -139,7 +139,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const monthItems = page.locator('.month-column ion-picker-column-option'); await expect(monthItems).toHaveText(['January']); @@ -171,7 +171,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => config ); - await page.waitForSelector('.datetime-ready'); + await page.locator('.datetime-ready').waitFor(); const todayButton = page.locator('.calendar-day[data-day="10"][data-month="10"][data-year="2022"]'); diff --git a/core/src/components/header/test/condense/header.e2e.ts b/core/src/components/header/test/condense/header.e2e.ts index c2ac59efd0..791c1b720a 100644 --- a/core/src/components/header/test/condense/header.e2e.ts +++ b/core/src/components/header/test/condense/header.e2e.ts @@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c await content.evaluate(async (el: HTMLIonContentElement) => { await el.scrollToBottom(); }); - await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive'); + await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor(); await expect(smallTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-collapsed-diff`)); @@ -30,7 +30,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c await content.evaluate(async (el: HTMLIonContentElement) => { await el.scrollToTop(); }); - await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive'); + await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor(); await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true'); }); diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 94329434c3..aa52b7b953 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -51,15 +51,6 @@ * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax. * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax. */ - - /** - * We change the minimum width as the - * font size changes. Using a fixed minimum - * width means that fewer and fewer characters - * can be displayed in the same space as the - * text grows. - */ - --inner-min-width: 4rem; --border-radius: 0px; --border-width: 0px; --border-style: solid; @@ -230,11 +221,6 @@ display: flex; position: relative; - // Flex wrap is required here in order to wrap - // the start slot + .item-inner content that - // doesn't fit on the same line - flex-wrap: wrap; - align-items: inherit; justify-content: inherit; @@ -258,11 +244,6 @@ box-sizing: border-box; } -// TODO(FW-5289): remove -:host(.item-legacy) .item-native { - flex-wrap: unset; -} - .item-native::-moz-focus-inner { border: 0; } @@ -307,34 +288,13 @@ button, a { // This is required to work with an inset highlight position: relative; - // This flex property is required in order to make - // the elements wrap when there is a slotted start - // element and a label - flex: 1 0 0; + flex: 1; flex-direction: inherit; - // Flex wrap is required here in order to wrap - // .input-wrapper content + the end slot that - // doesn't fit on the same line - flex-wrap: wrap; - align-items: inherit; align-self: stretch; - /** - * The min-width defines when the - * content in the default slot should - * stop wrapping/truncating within its own - * container. At this point the entire - * container will wrap to the next line. - */ - min-width: var(--inner-min-width); - - // Max width must be set to 100%, otherwise the - // elements will overflow this container instead - // of wrapping - max-width: 100%; min-height: inherit; border-width: var(--inner-border-width); @@ -346,15 +306,6 @@ button, a { box-sizing: border-box; } -// TODO(FW-5289): remove -:host(.item-legacy) .item-inner { - flex: 1; - - flex-wrap: unset; - - max-width: unset; -} - // Item Bottom // -------------------------------------------------- @@ -448,38 +399,19 @@ button, a { // This flex property is required in order to keep // the label from shrinking when there are wide // elements next to it - flex: 1 0 auto; + flex: 1; flex-direction: inherit; - // Flex wrap is required here in order to wrap - // content in the default slot (such as a label - // and a button) that doesn't fit on the same line - flex-wrap: wrap; - align-items: inherit; align-self: stretch; - // Max width must be set to 100%, otherwise the - // elements will overflow this container instead - // of wrapping - max-width: 100%; - text-overflow: ellipsis; overflow: inherit; box-sizing: border-box; } -// TODO(FW-5289): remove -:host(.item-legacy) .input-wrapper { - flex: 1; - - flex-wrap: unset; - - max-width: unset; -} - :host(.item-label-stacked), :host(.item-label-floating) { align-items: start; diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index ad056c5cdf..c6c18d4e98 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -150,6 +150,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac @State() counterString: string | null | undefined; + @Watch('button') + buttonChanged() { + // Update the focusable option when the button option is changed + this.focusable = this.isFocusable(); + } + @Watch('counterFormatter') counterFormatterChanged() { this.updateCounterOutput(this.getFirstInput()); diff --git a/core/src/components/item/test/a11y/index.html b/core/src/components/item/test/a11y/index.html index 9aad84631c..18fb4d703d 100644 --- a/core/src/components/item/test/a11y/index.html +++ b/core/src/components/item/test/a11y/index.html @@ -16,23 +16,19 @@

Item

- Item with Input - + - Item disabled with Input - + - Item with Input disabled - + - Item with Select - + No Game Console NES Nintendo64 @@ -44,8 +40,7 @@ - Item disabled with Select - + No Game Console NES Nintendo64 @@ -57,8 +52,7 @@ - Item with Select disabled - + No Game Console NES Nintendo64 @@ -70,33 +64,27 @@ - Item with Toggle - + Item with Toggle - Item disabled with Toggle - + Item disabled with Toggle - Item with Toggle disabled - + Item with Toggle disabled - Item with Radio - + Item with Radio - Item disabled with Radio - + Item disabled with Radio - Item with Radio disabled - + Item with Radio disabled diff --git a/core/src/components/item/test/basic/index.html b/core/src/components/item/test/basic/index.html index 7cf4190884..f9d6c77bb7 100644 --- a/core/src/components/item/test/basic/index.html +++ b/core/src/components/item/test/basic/index.html @@ -98,8 +98,9 @@ - PIN: - No Helper/Error - + - Helper and Error - + Helper Text Error Text - Helper Only - + Helper Text - Error Only - + Error Text - Both w/ Custom CSS - + Helper Text Error Text @@ -66,16 +61,14 @@ - Helper and Error (Fill Solid) - + Helper Text Error Text - Helper and Error (Fill Outline) - + Helper Text Error Text @@ -84,8 +77,7 @@ - Toggle Error - + Toggle Error diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png index 6d1b1acb87..b7f3579a70 100644 Binary files a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png index a290ec8933..1945384053 100644 Binary files a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/inputs/index.html b/core/src/components/item/test/inputs/index.html index 5ebe75aea7..ac621ee8b5 100644 --- a/core/src/components/item/test/inputs/index.html +++ b/core/src/components/item/test/inputs/index.html @@ -39,18 +39,6 @@ Set "undefined" values - - Labels: Default - - - Labels: Floating - - - Labels: Stacked - - - Labels: Fixed - @@ -60,28 +48,23 @@
- Input - + - Textarea - + - Toggle - + Toggle - Checkbox - + Checkbox - Select - + 1 2 3 @@ -93,8 +76,7 @@ - Range - + @@ -147,28 +129,6 @@ toggle.checked = checkbox.checked = false; } - function setLabelDefault() { - setLabelPosition(undefined); - } - - function setLabelFixed() { - setLabelPosition('fixed'); - } - - function setLabelFloating() { - setLabelPosition('floating'); - } - - function setLabelStacked() { - setLabelPosition('stacked'); - } - - function setLabelPosition(position) { - Array.from(document.querySelectorAll('form ion-list ion-label')).forEach( - (label) => (label.position = position) - ); - } - function getFormControls() { return formControlIds.reduce((acc, id) => { acc[id] = document.querySelector(`#${id}`); diff --git a/core/src/components/item/test/item.spec.tsx b/core/src/components/item/test/item.spec.tsx new file mode 100644 index 0000000000..750930ef82 --- /dev/null +++ b/core/src/components/item/test/item.spec.tsx @@ -0,0 +1,22 @@ +import { h } from '@stencil/core'; +import { newSpecPage } from '@stencil/core/testing'; + +import { Item } from '../item'; + +describe('item', () => { + it('should change focusable option after switching button option status', async () => { + const page = await newSpecPage({ + components: [Item], + template: () => , + }); + + const item = page.body.querySelector('ion-item')!; + // Change button attribute to true + item.setAttribute('button', 'true'); + + await page.waitForChanges(); + + // Check if it has the expected class that gives the highlight style to .item-highlight element + expect(item).toHaveClass('ion-focusable'); + }); +}); diff --git a/core/src/components/label/test/basic/index.html b/core/src/components/label/test/basic/index.html index 96fba62ee2..ed1a9cca2f 100644 --- a/core/src/components/label/test/basic/index.html +++ b/core/src/components/label/test/basic/index.html @@ -41,58 +41,45 @@ Default - Tertiary - Custom - Wrap label this label just goes on and on and on - Fixed - Floating - Floating: Success - Stacked - Stacked: Danger - (Item: Tertiary) Floating - (Item: Primary) Stacked - (Item: Tertiary) Floating: Success - (Item: Primary) Stacked: Danger - diff --git a/core/src/components/label/test/basic/label.e2e.ts b/core/src/components/label/test/basic/label.e2e.ts index ca94e838c2..1deda11054 100644 --- a/core/src/components/label/test/basic/label.e2e.ts +++ b/core/src/components/label/test/basic/label.e2e.ts @@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => { ` My Label - + `, config @@ -49,7 +49,7 @@ configs().forEach(({ title, screenshot, config }) => { ` My Label - + `, config diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Chrome-linux.png index edb9248e27..6a9650d046 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Firefox-linux.png index 5acaeaa207..045042d578 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Safari-linux.png index cadad3801b..6b7c624c4f 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Chrome-linux.png index cb646a9425..a0685d23f3 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Firefox-linux.png index 6b487599b3..93fbaba368 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Safari-linux.png index 0d2a55d37b..9ec079e602 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Chrome-linux.png index 43f5ec6a9d..3ef7959c87 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Firefox-linux.png index d9f5cd86f5..d7c0b7364c 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Safari-linux.png index 13a83f03ab..a98ea9c069 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Chrome-linux.png index cc31a39683..cbdd36e066 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Firefox-linux.png index dd1a12c946..efffe566ad 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Safari-linux.png index 04e0503386..bdc5dcbc8e 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Chrome-linux.png index c85e47860a..749245a24a 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Firefox-linux.png index f5bec426b1..1c407de0a6 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Safari-linux.png index db396488df..27f590db1c 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Chrome-linux.png index cd189d2e9e..3fc6a3b935 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Firefox-linux.png index dbe831dca4..220043b818 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Safari-linux.png index d279b6a4a2..9deda169e2 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Chrome-linux.png index 367a766a13..fd1496a11f 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Firefox-linux.png index ec3a667863..8d847d79d8 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Safari-linux.png index 81c44f7edc..f473cdbe52 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Chrome-linux.png index 9213ffad0b..885612a082 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Firefox-linux.png index 659828a08b..24c74da1c2 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Safari-linux.png index 2ecff7a635..51aaf2c28e 100644 Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 083b2e3dbf..ca851b3eeb 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core'; import { getTimeGivenProgression } from '@utils/animation/cubic-bezier'; import { GESTURE_CONTROLLER } from '@utils/gesture'; +import { shoudUseCloseWatcher } from '@utils/hardware-back-button'; import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers'; import { menuController } from '@utils/menu-controller'; @@ -336,7 +337,6 @@ export class Menu implements ComponentInterface, MenuI { } } - @Listen('keydown') onKeydown(ev: KeyboardEvent) { if (ev.key === 'Escape') { this.close(); @@ -796,8 +796,14 @@ export class Menu implements ComponentInterface, MenuI { const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this; const mode = getIonMode(this); + /** + * If the Close Watcher is enabled then + * the ionBackButton listener in the menu controller + * will handle closing the menu when Escape is pressed. + */ return ( ( this, data, @@ -733,8 +730,6 @@ export class Modal implements ComponentInterface, OverlayInterface { if (this.gesture) { this.gesture.destroy(); } - - enteringAnimation.forEach((ani) => ani.destroy()); } this.currentBreakpoint = undefined; this.animation = undefined; diff --git a/core/src/components/modal/test/animations/modal.e2e.ts b/core/src/components/modal/test/animations/modal.e2e.ts new file mode 100644 index 0000000000..8d541003ff --- /dev/null +++ b/core/src/components/modal/test/animations/modal.e2e.ts @@ -0,0 +1,45 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => { + test.describe(title('modal: animations'), () => { + test.beforeEach(async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + }); + test('card modal should clean up animations on dismiss', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28352', + }); + + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + const modal = page.locator('ion-modal'); + + const initialAnimations = await modal.evaluate((el: HTMLIonModalElement) => { + return el.shadowRoot!.getAnimations(); + }); + + // While the modal is open, it should have animations + expect(initialAnimations.length).toBeGreaterThan(0); + + await modal.evaluate((el: HTMLIonModalElement) => { + el.dismiss(); + }); + + await ionModalDidDismiss.next(); + + const currentAnimations = await modal.evaluate((el: HTMLIonModalElement) => { + return el.shadowRoot!.getAnimations(); + }); + + // Once the modal has finished closing, there should be no animations + expect(currentAnimations.length).toBe(0); + }); + }); +}); diff --git a/core/src/components/modal/test/sheet/index.html b/core/src/components/modal/test/sheet/index.html index 8fed5eac09..2a7eeb022e 100644 --- a/core/src/components/modal/test/sheet/index.html +++ b/core/src/components/modal/test/sheet/index.html @@ -85,10 +85,7 @@ - - Input outside modal - - + Present Sheet Modal await ionModalDidPresent.next(); - const input = page.locator('#root-input input').first(); + const input = page.locator('#root-input').first(); await input.click(); await expect(input).toBeFocused(); }); diff --git a/core/src/components/modal/test/spec/index.html b/core/src/components/modal/test/spec/index.html index d97fdd1de4..3060c5e012 100644 --- a/core/src/components/modal/test/spec/index.html +++ b/core/src/components/modal/test/spec/index.html @@ -60,8 +60,7 @@ - Use Custom Animation - + Use Custom Animation diff --git a/core/src/components/modal/test/standalone/modal.e2e.ts b/core/src/components/modal/test/standalone/modal.e2e.ts index eaaa7a824f..d422f4451e 100644 --- a/core/src/components/modal/test/standalone/modal.e2e.ts +++ b/core/src/components/modal/test/standalone/modal.e2e.ts @@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await ionModalDidDismiss.next(); - await page.waitForSelector('ion-modal', { state: 'detached' }); + await page.locator('ion-modal').waitFor({ state: 'detached' }); }); }); }); diff --git a/core/src/components/note/test/a11y/note.e2e.ts b/core/src/components/note/test/a11y/note.e2e.ts index bf7839a763..f3bbb76faa 100644 --- a/core/src/components/note/test/a11y/note.e2e.ts +++ b/core/src/components/note/test/a11y/note.e2e.ts @@ -72,33 +72,33 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - Really really long note + 123 Label Label - Really really long note + 123 - Note + 123 Really really long label Really really long label - Note + 123 - Really really long note + 123 Really really long label Really really long label - Really really long note + 123 `, diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png index a585813609..34ac408091 100644 Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png index 4273df06f3..154ee519c7 100644 Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png index 7e665c4e97..5ffb775f75 100644 Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png index d2f8031710..9c2ea22a52 100644 Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png index 3625d21a1e..69f53a28ad 100644 Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png index 768ac8a47a..9581c8d550 100644 Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html index 9ef6ba840c..058aa69e08 100644 --- a/core/src/components/popover/test/basic/index.html +++ b/core/src/components/popover/test/basic/index.html @@ -212,7 +212,7 @@ connectedCallback() { this.innerHTML = ` - + `; diff --git a/core/src/components/progress-bar/test/buffer/index.html b/core/src/components/progress-bar/test/buffer/index.html index bc62bcac57..28d6de0825 100644 --- a/core/src/components/progress-bar/test/buffer/index.html +++ b/core/src/components/progress-bar/test/buffer/index.html @@ -52,7 +52,7 @@ - + 0 100 diff --git a/core/src/components/progress-bar/test/determinate/index.html b/core/src/components/progress-bar/test/determinate/index.html index c7dade5873..0433f7090a 100644 --- a/core/src/components/progress-bar/test/determinate/index.html +++ b/core/src/components/progress-bar/test/determinate/index.html @@ -69,7 +69,7 @@ - + 0 100 diff --git a/core/src/components/radio-group/test/radio-group-events.e2e.ts b/core/src/components/radio-group/test/radio-group-events.e2e.ts index 12fb324369..09deb2e7db 100644 --- a/core/src/components/radio-group/test/radio-group-events.e2e.ts +++ b/core/src/components/radio-group/test/radio-group-events.e2e.ts @@ -7,9 +7,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.setContent( ` - - - + + + `, config @@ -29,9 +29,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.setContent( ` - - - + + + `, config @@ -51,9 +51,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.setContent( ` - - - + + + `, config @@ -72,9 +72,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.setContent( ` - - - + + + `, config @@ -94,9 +94,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.setContent( ` - - - + + + `, config diff --git a/core/src/components/range/test/label/range.e2e.ts b/core/src/components/range/test/label/range.e2e.ts index 409f4a3258..c8925d35a8 100644 --- a/core/src/components/range/test/label/range.e2e.ts +++ b/core/src/components/range/test/label/range.e2e.ts @@ -7,7 +7,7 @@ configs().forEach(({ title, screenshot, config }) => { test('should render a range with no visible label', async ({ page }) => { await page.setContent( ` - + `, config ); @@ -80,7 +80,7 @@ configs().forEach(({ title, screenshot, config }) => { test('should render a range with no visible label', async ({ page }) => { await page.setContent( ` - + diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Chrome-linux.png index a8bd6b11c2..d8a13f78bd 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Firefox-linux.png index 20b52f6e9a..5d35bc3850 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Safari-linux.png index bddfe5df4d..684e742363 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Chrome-linux.png index 06db2a4e7f..af420833d1 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Firefox-linux.png index dc8c9481d0..f6f965e45f 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Safari-linux.png index dea69f8e08..7bdc04cbb5 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Chrome-linux.png index a5cb69a9bd..08b3147a59 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Firefox-linux.png index 57d20c5029..441056c219 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Safari-linux.png index c19eb0ce6a..7a9bb8cdcc 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Chrome-linux.png index 16c3d3cd67..396aeafc86 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Firefox-linux.png index e2362a244b..29bcaab392 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Safari-linux.png index a79e103954..2dc0e0b290 100644 Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/range-events.e2e.ts b/core/src/components/range/test/range-events.e2e.ts index 3eeba5437b..bc019628e1 100644 --- a/core/src/components/range/test/range-events.e2e.ts +++ b/core/src/components/range/test/range-events.e2e.ts @@ -20,7 +20,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.setContent( `
- +
`, config @@ -52,7 +52,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); test('should emit start/end events, keyboard', async ({ page }) => { - await page.setContent(``, config); + await page.setContent(``, config); const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); diff --git a/core/src/components/refresher/test/test.utils.ts b/core/src/components/refresher/test/test.utils.ts index 7454a88995..9bc15a7f0d 100644 --- a/core/src/components/refresher/test/test.utils.ts +++ b/core/src/components/refresher/test/test.utils.ts @@ -14,7 +14,7 @@ import { dragElementByYAxis } from '@utils/test/playwright'; const pullToRefresh = async (page: E2EPage, selector = 'body') => { const target = page.locator(selector); - await page.waitForSelector('ion-refresher.hydrated', { state: 'attached' }); + await page.locator('ion-refresher.hydrated').waitFor({ state: 'attached' }); const ev = await page.spyOnEvent('ionRefreshComplete'); diff --git a/core/src/components/reorder-group/test/basic/index.html b/core/src/components/reorder-group/test/basic/index.html index bf44ef490a..55e034c82a 100644 --- a/core/src/components/reorder-group/test/basic/index.html +++ b/core/src/components/reorder-group/test/basic/index.html @@ -99,15 +99,13 @@ - Item 11 (the whole item can be dragged) - + Item 11 (the whole item can be dragged) - Item 12 (the whole item can be dragged) - + Item 12 (the whole item can be dragged) diff --git a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts index 5d128bdca1..763db925d8 100644 --- a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts +++ b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts @@ -29,7 +29,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { } // Waits for the ripple effect to be added - await page.waitForSelector('.ion-activated'); + await page.locator('.ion-activated').waitFor(); await expect(el).toHaveClass(/ion-activated/); }); @@ -56,7 +56,7 @@ const verifyRippleEffect = async (page: E2EPage, config: E2EPageOptions, selecto await page.mouse.down(); } - await page.waitForSelector('.ion-activated'); + await page.locator('.ion-activated').waitFor(); await expect(el).toHaveClass(/ion-activated/); }; diff --git a/core/src/components/router/test/guards/index.html b/core/src/components/router/test/guards/index.html index 0ea2d5ea90..9e9d0a2933 100644 --- a/core/src/components/router/test/guards/index.html +++ b/core/src/components/router/test/guards/index.html @@ -113,18 +113,15 @@ - Allow Navigation - + Allow Navigation - Block Navigation - + Block Navigation - Redirect - + Redirect @@ -136,18 +133,15 @@ - Allow Navigation - + Allow Navigation - Block Navigation - + Block Navigation - Redirect - + Redirect diff --git a/core/src/components/select-popover/select-popover.scss b/core/src/components/select-popover/select-popover.scss index 3fba7de13c..c22aa27321 100644 --- a/core/src/components/select-popover/select-popover.scss +++ b/core/src/components/select-popover/select-popover.scss @@ -8,3 +8,14 @@ ion-list-header, ion-label { @include margin(0); } + + +/** + * The main content inside of a popover has overflow: hidden + * so that a descendant ion-content can be scrolled. + * However, select-popover does not use ion-content so we need + * to explicitly make this container scrollable. + */ +:host { + overflow-y: auto; +} diff --git a/core/src/components/select/test/disabled/select.e2e.ts b/core/src/components/select/test/disabled/select.e2e.ts index 831d471d70..9bc9389a3a 100644 --- a/core/src/components/select/test/disabled/select.e2e.ts +++ b/core/src/components/select/test/disabled/select.e2e.ts @@ -14,7 +14,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.setContent( ` - + A B diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index 3b72e54c0b..7cd33ba580 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/core/src/components/split-pane/split-pane.tsx @@ -119,17 +119,16 @@ export class SplitPane implements ComponentInterface { return; } - if ((window as any).matchMedia) { - // Listen on media query - const callback = (q: MediaQueryList) => { - this.visible = q.matches; - }; + // Listen on media query + const callback = (q: MediaQueryList) => { + this.visible = q.matches; + }; - const mediaList = window.matchMedia(mediaQuery); - mediaList.addListener(callback as any); - this.rmL = () => mediaList.removeListener(callback as any); - this.visible = mediaList.matches; - } + const mediaList = window.matchMedia(mediaQuery); + // TODO FW-5869 + mediaList.addListener(callback as any); + this.rmL = () => mediaList.removeListener(callback as any); + this.visible = mediaList.matches; } /** diff --git a/core/src/components/textarea/test/textarea-events.e2e.ts b/core/src/components/textarea/test/textarea-events.e2e.ts index d463061023..6b30f7a386 100644 --- a/core/src/components/textarea/test/textarea-events.e2e.ts +++ b/core/src/components/textarea/test/textarea-events.e2e.ts @@ -8,7 +8,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => test.describe(title('textarea: events: ionChange'), () => { test.describe('when the textarea is blurred', () => { test('should emit if the value has changed', async ({ page }) => { - await page.setContent(``, config); + await page.setContent(``, config); const nativeTextarea = page.locator('ion-textarea textarea'); const ionChangeSpy = await page.spyOnEvent('ionChange'); @@ -24,7 +24,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); test('should emit if the textarea is cleared with an initial value', async ({ page }) => { - await page.setContent(``, config); + await page.setContent( + ``, + config + ); const textarea = page.locator('ion-textarea'); const nativeTextarea = textarea.locator('textarea'); @@ -41,7 +44,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); test('should not emit if the value is set programmatically', async ({ page }) => { - await page.setContent(``, config); + await page.setContent(``, config); const textarea = page.locator('ion-textarea'); const ionChangeSpy = await page.spyOnEvent('ionChange'); @@ -67,7 +70,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); test.describe(title('textarea: events: ionInput'), () => { test('should emit when the user types', async ({ page }) => { - await page.setContent(``, config); + await page.setContent(``, config); const ionInputSpy = await page.spyOnEvent('ionInput'); diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index 8039740438..24a2ee1196 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -1,4 +1,4 @@ -import type { AnimationBuilder, Color, Mode } from '../../interface'; +import type { AnimationBuilder, Color, LiteralUnion, Mode } from '../../interface'; import type { IonicSafeString } from '../../utils/sanitization'; export interface ToastOptions { @@ -31,8 +31,7 @@ export interface ToastButton { text?: string; icon?: string; side?: 'start' | 'end'; - role?: 'cancel' | string; - + role?: LiteralUnion<'cancel', string>; htmlAttributes?: { [key: string]: any }; handler?: () => boolean | void | Promise; } diff --git a/core/src/components/toggle/test/enable-on-off-labels/index.html b/core/src/components/toggle/test/enable-on-off-labels/index.html index 4e18d63498..28483e3203 100644 --- a/core/src/components/toggle/test/enable-on-off-labels/index.html +++ b/core/src/components/toggle/test/enable-on-off-labels/index.html @@ -177,8 +177,7 @@ - Dark Mode - + Dark Mode diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index 325c24b4c7..6432a506a7 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -131,7 +131,7 @@ export type PredefinedColors = | 'medium' | 'dark'; -type LiteralUnion = T | (U & Record); +export type LiteralUnion = T | (U & Record); export type Color = LiteralUnion; export type Mode = 'ios' | 'md'; diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html index 51dfa1cc41..0e7bad192d 100644 --- a/core/src/themes/test/css-variables/index.html +++ b/core/src/themes/test/css-variables/index.html @@ -250,19 +250,16 @@ - + - Standard - Error Text - + - - Standard +
+ + - - Helper Text - + @@ -354,18 +351,15 @@ Fruits - Apple - + Apple - Grape, checked, disabled - + Grape, checked, disabled - Cherry - + Cherry @@ -376,37 +370,34 @@ Veggies - Celery - + Celery - Lettuce, checked, disabled - + Lettuce, checked, disabled - Onion - + Onion - + - + - + - + @@ -414,65 +405,51 @@
- Default - + Default - Primary - + Primary - Secondary - + Secondary - Warning - + Warning - Danger - + Danger - Light - + Light - Dark - + Dark - Unchecked by Default - + Unchecked by Default - Disabled - + Disabled - - Blueberry + Blueberry - - Lettuce + Lettuce - - Apple + Apple - - Radish + Radish - - Blackberry + Blackberry
@@ -485,8 +462,7 @@ Colors
- Select a Theme: - + Default Oceanic Vibrant @@ -914,8 +890,7 @@ Overlays
- Select a Theme: - + Default Oceanic Vibrant @@ -951,8 +926,7 @@ - Select - + 1 2 3 diff --git a/core/src/utils/browser/index.ts b/core/src/utils/browser/index.ts index fb400d142c..694abc7f51 100644 --- a/core/src/utils/browser/index.ts +++ b/core/src/utils/browser/index.ts @@ -72,7 +72,32 @@ type IonicEvents = { ): void; }; -type IonicWindow = Window & IonicEvents; +export interface CloseWatcher extends EventTarget { + new (options?: CloseWatcherOptions): any; + requestClose(): void; + close(): void; + destroy(): void; + + oncancel: (event: Event) => void | null; + onclose: (event: Event) => void | null; +} + +interface CloseWatcherOptions { + signal: AbortSignal; +} + +/** + * Experimental browser features that + * are selectively used inside of Ionic + * Since they are experimental they typically + * do not have types yet, so we can add custom ones + * here until types are available. + */ +type ExperimentalWindowFeatures = { + CloseWatcher?: CloseWatcher; +}; + +type IonicWindow = Window & IonicEvents & ExperimentalWindowFeatures; type IonicDocument = Document & IonicEvents; export const win: IonicWindow | undefined = typeof window !== 'undefined' ? window : undefined; diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts index eb1a84a4aa..ed2c4f42ae 100644 --- a/core/src/utils/config.ts +++ b/core/src/utils/config.ts @@ -204,6 +204,14 @@ export interface IonicConfig { */ platform?: PlatformConfig; + /** + * @experimental + * If `true`, the [CloseWatcher API](https://github.com/WICG/close-watcher) will be used to handle + * all Escape key and hardware back button presses to dismiss menus and overlays and to navigate. + * Note that the `hardwareBackButton` config option must also be `true`. + */ + experimentalCloseWatcher?: boolean; + // PRIVATE configs keyboardHeight?: number; inputShims?: boolean; diff --git a/core/src/utils/hardware-back-button.ts b/core/src/utils/hardware-back-button.ts index 91a0bc540f..1005497faa 100644 --- a/core/src/utils/hardware-back-button.ts +++ b/core/src/utils/hardware-back-button.ts @@ -1,3 +1,8 @@ +import { win } from '@utils/browser'; +import type { CloseWatcher } from '@utils/browser'; + +import { config } from '../global/config'; + // TODO(FW-2832): type type Handler = (processNextHandler: () => void) => Promise | void | null; @@ -13,6 +18,21 @@ interface HandlerRegister { id: number; } +/** + * CloseWatcher is a newer API that lets + * use detect the hardware back button event + * in a web browser: https://caniuse.com/?search=closewatcher + * However, not every browser supports it yet. + * + * This needs to be a function so that we can + * check the config once it has been set. + * Otherwise, this code would be evaluated the + * moment this file is evaluated which could be + * before the config is set. + */ +export const shoudUseCloseWatcher = () => + config.get('experimentalCloseWatcher', false) && win !== undefined && 'CloseWatcher' in win; + /** * When hardwareBackButton: false in config, * we need to make sure we also block the default @@ -29,9 +49,9 @@ export const blockHardwareBackButton = () => { export const startHardwareBackButton = () => { const doc = document; - let busy = false; - doc.addEventListener('backbutton', () => { + + const backButtonCallback = () => { if (busy) { return; } @@ -81,7 +101,38 @@ export const startHardwareBackButton = () => { }; processHandlers(); - }); + }; + + /** + * If the CloseWatcher is defined then + * we don't want to also listen for the native + * backbutton event otherwise we may get duplicate + * events firing. + */ + if (shoudUseCloseWatcher()) { + let watcher: CloseWatcher | undefined; + + const configureWatcher = () => { + watcher?.destroy(); + watcher = new win!.CloseWatcher!(); + + /** + * Once a close request happens + * the watcher gets destroyed. + * As a result, we need to re-configure + * the watcher so we can respond to other + * close requests. + */ + watcher!.onclose = () => { + backButtonCallback(); + configureWatcher(); + }; + }; + + configureWatcher(); + } else { + doc.addEventListener('backbutton', backButtonCallback); + } }; export const OVERLAY_BACK_BUTTON_PRIORITY = 100; diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts index 1d92c55a58..3dff5a5e65 100644 --- a/core/src/utils/helpers.ts +++ b/core/src/utils/helpers.ts @@ -22,7 +22,7 @@ export const transitionEndAsync = (el: HTMLElement | null, expectedDuration = 0) */ const transitionEnd = (el: HTMLElement | null, expectedDuration = 0, callback: (ev?: TransitionEvent) => void) => { let unRegTrans: (() => void) | undefined; - let animationTimeout: any; + let animationTimeout: number | undefined; const opts: AddEventListenerOptions = { passive: true }; const ANIMATION_FALLBACK_TIMEOUT = 500; @@ -45,7 +45,7 @@ const transitionEnd = (el: HTMLElement | null, expectedDuration = 0, callback: ( animationTimeout = setTimeout(onTransitionEnd, expectedDuration + ANIMATION_FALLBACK_TIMEOUT); unRegTrans = () => { - if (animationTimeout) { + if (animationTimeout !== undefined) { clearTimeout(animationTimeout); animationTimeout = undefined; } diff --git a/core/src/utils/input-shims/hacks/test/index.html b/core/src/utils/input-shims/hacks/test/index.html index 1864094236..f4b138965a 100644 --- a/core/src/utils/input-shims/hacks/test/index.html +++ b/core/src/utils/input-shims/hacks/test/index.html @@ -48,37 +48,31 @@ - Input Above Keyboard - + - Textarea Above Keyboard - +
- Input Below Keyboard - + - Textarea Below Keyboard - +
- Input Outside Viewport - + - Textarea Outside Viewport - + diff --git a/core/src/utils/keyboard/test/index.html b/core/src/utils/keyboard/test/index.html index 76656c9cd4..cd61868ed8 100644 --- a/core/src/utils/keyboard/test/index.html +++ b/core/src/utils/keyboard/test/index.html @@ -43,8 +43,8 @@ - - + + diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index 3d909f8f53..3dca510fd6 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -1,5 +1,6 @@ import { doc } from '@utils/browser'; import type { BackButtonEvent } from '@utils/hardware-back-button'; +import { shoudUseCloseWatcher } from '@utils/hardware-back-button'; import { config } from '../global/config'; import { getIonMode } from '../global/ionic-global'; @@ -359,20 +360,39 @@ const connectListeners = (doc: Document) => { const lastOverlay = getPresentedOverlay(doc); if (lastOverlay?.backdropDismiss) { (ev as BackButtonEvent).detail.register(OVERLAY_BACK_BUTTON_PRIORITY, () => { - return lastOverlay.dismiss(undefined, BACKDROP); + /** + * Do not return this promise otherwise + * the hardware back button utility will + * be blocked until the overlay dismisses. + * This is important for a modal with canDismiss. + * If the application presents a confirmation alert + * in the "canDismiss" callback, then it will be impossible + * to use the hardware back button to dismiss the alert + * dialog because the hardware back button utility + * is blocked on waiting for the modal to dismiss. + */ + lastOverlay.dismiss(undefined, BACKDROP); }); } }); - // handle ESC to close overlay - doc.addEventListener('keydown', (ev) => { - if (ev.key === 'Escape') { - const lastOverlay = getPresentedOverlay(doc); - if (lastOverlay?.backdropDismiss) { - lastOverlay.dismiss(undefined, BACKDROP); + /** + * Handle ESC to close overlay. + * CloseWatcher also handles pressing the Esc + * key, so if a browser supports CloseWatcher then + * this behavior will be handled via the ionBackButton + * event. + */ + if (!shoudUseCloseWatcher()) { + doc.addEventListener('keydown', (ev) => { + if (ev.key === 'Escape') { + const lastOverlay = getPresentedOverlay(doc); + if (lastOverlay?.backdropDismiss) { + lastOverlay.dismiss(undefined, BACKDROP); + } } - } - }); + }); + } } }; @@ -589,6 +609,12 @@ export const dismiss = async ( overlay.didDismiss.emit({ data, role }); overlay.didDismissShorthand?.emit({ data, role }); + // Get a reference to all animations currently assigned to this overlay + // Then tear them down to return the overlay to its initial visual state + const animations = activeAnimations.get(overlay) || []; + + animations.forEach((ani) => ani.destroy()); + activeAnimations.delete(overlay); /** diff --git a/core/src/utils/test/hardware-back-button.spec.ts b/core/src/utils/test/hardware-back-button.spec.ts index a4e5bbb7c4..87f27d407c 100644 --- a/core/src/utils/test/hardware-back-button.spec.ts +++ b/core/src/utils/test/hardware-back-button.spec.ts @@ -1,5 +1,7 @@ import type { BackButtonEvent } from '../../../src/interface'; import { startHardwareBackButton } from '../hardware-back-button'; +import { config } from '../../global/config'; +import { win } from '@utils/browser'; describe('Hardware Back Button', () => { beforeEach(() => startHardwareBackButton()); @@ -54,6 +56,56 @@ describe('Hardware Back Button', () => { }); }); +describe('Experimental Close Watcher', () => { + test('should not use the Close Watcher API when available', () => { + const mockAPI = mockCloseWatcher(); + + config.reset({ experimentalCloseWatcher: false }); + + startHardwareBackButton(); + + expect(mockAPI.mock.calls).toHaveLength(0); + }); + test('should use the Close Watcher API when available', () => { + const mockAPI = mockCloseWatcher(); + + config.reset({ experimentalCloseWatcher: true }); + + startHardwareBackButton(); + + expect(mockAPI.mock.calls).toHaveLength(1); + }); + test('Close Watcher should dispatch ionBackButton events', () => { + const mockAPI = mockCloseWatcher(); + + config.reset({ experimentalCloseWatcher: true }); + + startHardwareBackButton(); + + const cbSpy = jest.fn(); + document.addEventListener('ionBackButton', cbSpy); + + // Call onclose on Ionic's instance of CloseWatcher + mockAPI.getMockImplementation()!().onclose(); + + expect(cbSpy).toHaveBeenCalled(); + }); +}); + +const mockCloseWatcher = () => { + const mockCloseWatcher = jest.fn(); + mockCloseWatcher.mockReturnValue({ + requestClose: () => null, + close: () => null, + destroy: () => null, + oncancel: () => null, + onclose: () => null, + }); + (win as any).CloseWatcher = mockCloseWatcher; + + return mockCloseWatcher; +}; + const dispatchBackButtonEvent = () => { const ev = new Event('backbutton'); document.dispatchEvent(ev); diff --git a/core/src/utils/test/overlays/index.html b/core/src/utils/test/overlays/index.html index 00885bd555..51fa62440e 100644 --- a/core/src/utils/test/overlays/index.html +++ b/core/src/utils/test/overlays/index.html @@ -34,8 +34,7 @@ - Text Input - + Create a Modal @@ -66,8 +65,7 @@ Modal Content - Text Input - + Create a Modal diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 78c0ed27d9..8748487597 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07) + +**Note:** Version bump only for package @ionic/docs + + + + + +# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31) + +**Note:** Version bump only for package @ionic/docs + + + + + +## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31) + +**Note:** Version bump only for package @ionic/docs + + + + + ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24) **Note:** Version bump only for package @ionic/docs diff --git a/docs/package-lock.json b/docs/package-lock.json index f34e364d37..6d1ca11d88 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/docs", - "version": "7.6.6", + "version": "7.7.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/docs", - "version": "7.6.6", + "version": "7.7.1", "license": "MIT" } } diff --git a/docs/package.json b/docs/package.json index 09a3e97859..d3afa71247 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "7.6.6", + "version": "7.7.1", "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 e48dc5be31..b3704e3f4b 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "docs", "packages/*" ], - "version": "7.6.6" + "version": "7.7.1" } diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index d9a9ce1129..a9ba4d3db8 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31) + +**Note:** Version bump only for package @ionic/angular-server + + + + + +## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31) + +**Note:** Version bump only for package @ionic/angular-server + + + + + ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24) **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 db3802f538..38a93108bf 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.6.6", + "version": "7.7.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "7.6.6", + "version": "7.7.1", "license": "MIT", "dependencies": { - "@ionic/core": "^7.6.6" + "@ionic/core": "^7.7.1" }, "devDependencies": { "@angular-eslint/eslint-plugin": "^14.0.0", @@ -1060,11 +1060,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "dependencies": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -1462,9 +1462,9 @@ "license": "MIT" }, "node_modules/@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==", "bin": { "stencil": "bin/stencil" }, @@ -7330,11 +7330,11 @@ "dev": true }, "@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "requires": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -7581,9 +7581,9 @@ } }, "@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==" + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==" }, "@types/estree": { "version": "0.0.39", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index 0fc0f5cb4c..bdfd9b28d5 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "7.6.6", + "version": "7.7.1", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -62,6 +62,6 @@ }, "prettier": "@ionic/prettier-config", "dependencies": { - "@ionic/core": "^7.6.6" + "@ionic/core": "^7.7.1" } } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index d4b946fead..392e4cc28e 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07) + +**Note:** Version bump only for package @ionic/angular + + + + + +# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31) + +**Note:** Version bump only for package @ionic/angular + + + + + +## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31) + +**Note:** Version bump only for package @ionic/angular + + + + + ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24) **Note:** Version bump only for package @ionic/angular diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index 8e1c04ec1e..b189b318b2 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "7.6.6", + "version": "7.7.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "7.6.6", + "version": "7.7.1", "license": "MIT", "dependencies": { - "@ionic/core": "^7.6.6", + "@ionic/core": "^7.7.1", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -1407,11 +1407,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "dependencies": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -1845,9 +1845,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==", "bin": { "stencil": "bin/stencil" }, @@ -9697,11 +9697,11 @@ "dev": true }, "@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "requires": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -9994,9 +9994,9 @@ } }, "@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==" + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==" }, "@tootallnate/once": { "version": "2.0.0", diff --git a/packages/angular/package.json b/packages/angular/package.json index 8b3fdfc678..b6430aa540 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "7.6.6", + "version": "7.7.1", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -26,7 +26,6 @@ "scripts": { "build": "npm run clean && npm run build.ng && npm run build.core && npm run clean-generated", "build.core": "node scripts/build-core.js", - "build.link": "npm run build && node scripts/link-copy.js", "build.ng": "ng-packagr -p ng-package.json -c tsconfig.json", "build.watch": "npm run build.ng -- --watch", "clean": "node scripts/clean.js", @@ -48,7 +47,7 @@ } }, "dependencies": { - "@ionic/core": "^7.6.6", + "@ionic/core": "^7.7.1", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" diff --git a/packages/angular/scripts/README.md b/packages/angular/scripts/README.md deleted file mode 100644 index 95acfc6eb6..0000000000 --- a/packages/angular/scripts/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# Local @ionic/angular test/testapp development - -1. `npm install` at the root of `angular` -2. `npm run build.dev` to build local `@ionic/angular` and `@ionic/core` -3. `cd test/testapp` to the test app -4. `npm install` in the test app directory -5. `npm run serve` copies packages and serve the app (see package.json for more options) -6. [http://localhost:4200/](http://localhost:4200/) - - -# npm link local development - -`npm link` doesn't work as expected due to the `devDependency` on `@angular/core`. This is the work around... - - npm run build.link ../ionic-conference-app - -When the command above is ran from the `angular` directory, it will build `@ionic/angular` and copy the `dist` directory to the correct location of another local project. In the example above, the end result is that it copies the `dist` directory to `../ionic-conference-app/node_modules/@ionic/angular/dist`. The path given should be relative to the root of this mono repo. - -## package.json note - -The `package.json` file in this directory references __Ionic 3__ and is in here to get GitHub to properly show the Used By counts on the repo. __Do not remove it!__ diff --git a/packages/angular/scripts/link-copy.js b/packages/angular/scripts/link-copy.js deleted file mode 100644 index 5465e00a1a..0000000000 --- a/packages/angular/scripts/link-copy.js +++ /dev/null @@ -1,40 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); - - -let prjDir = process.argv[2]; -if (!prjDir) { - throw new Error('local path required as last argument to "npm run build.link" command'); -} -prjDir = path.join(__dirname, '../../../', prjDir); - -copyPackage(prjDir, 'angular'); -copyPackage(prjDir, 'core'); - - -function copyPackage(prjDir, pkgName) { - const prjDest = path.join(prjDir, 'node_modules', '@ionic', pkgName); - - const pkgSrcDir = path.join(__dirname, '..', '..', pkgName); - const pkgSrcDist = path.join(pkgSrcDir, 'dist'); - const pkgJsonPath = path.join(pkgSrcDir, 'package.json'); - const pkgJson = require(pkgJsonPath); - - // make sure this local project exists - fs.emptyDirSync(prjDest); - - pkgJson.files.push('package.json'); - - pkgJson.files.forEach(f => { - const src = path.join(pkgSrcDir, f); - const dest = path.join(prjDest, f); - - console.log('copying:', src, 'to', dest); - fs.copySync(src, dest); - }); - - const prjReadme = path.join(prjDest, 'README.md'); - console.log('readme:', prjReadme); - - fs.writeFileSync(prjReadme, '@ionic/' + pkgName + ' copied from ' + pkgSrcDir + ', ' + new Date()); -} diff --git a/packages/angular/test/README.md b/packages/angular/test/README.md index e5efdb1a0d..b2e56ef2ee 100644 --- a/packages/angular/test/README.md +++ b/packages/angular/test/README.md @@ -113,4 +113,6 @@ Note: You may encounter some other peer dependency issues not covered by the Ang 7. Open `./github/workflows/build.yml` and find the `test-angular-e2e` job. 8. Find the `apps` field under `matrix`. 9. Add "ng14" to the `apps` field. -10. Commit these changes and push. +10. Open `./github/workflows/stencil-nightly.yml` and find the `test-angular-e2e` job. +11. Repeat steps 8 and 9. +12. Commit these changes and push. diff --git a/packages/angular/test/base/src/app/lazy/form/form.component.html b/packages/angular/test/base/src/app/lazy/form/form.component.html index ab15fae6df..6b4a04fd2f 100644 --- a/packages/angular/test/base/src/app/lazy/form/form.component.html +++ b/packages/angular/test/base/src/app/lazy/form/form.component.html @@ -55,14 +55,12 @@ - Min - + 
errors: {{ profileForm.controls['inputMin'].errors | json }}
 - Max - + 
errors: {{ profileForm.controls['inputMax'].errors | json }}
 diff --git a/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html b/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html index 4f2bd52a24..1420dd5b80 100644 --- a/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html +++ b/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html @@ -25,8 +25,8 @@ - Floating Label - + + Floating Label Option 0 Option 1 diff --git a/packages/angular/test/base/src/app/lazy/textarea/textarea.component.html b/packages/angular/test/base/src/app/lazy/textarea/textarea.component.html index 732e018dcb..0316b3d54b 100644 --- a/packages/angular/test/base/src/app/lazy/textarea/textarea.component.html +++ b/packages/angular/test/base/src/app/lazy/textarea/textarea.component.html @@ -2,8 +2,7 @@ - Textarea - + diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html index 2921e06b91..c121dab37a 100644 --- a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html +++ b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html @@ -6,6 +6,6 @@

- + Checkbox
diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html b/packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html index 9a496fbcd3..97edf36a1e 100644 --- a/packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html +++ b/packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html @@ -4,6 +4,6 @@ This test checks the form integrations with ion-range to make sure values are correctly assigned to the form group.

- +
diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html b/packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html index 08888059f9..53e60bcf1e 100644 --- a/packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html +++ b/packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html @@ -5,6 +5,6 @@

- + Toggle diff --git a/packages/angular/test/build.sh b/packages/angular/test/build.sh index d91b9cb177..f597a55f9e 100755 --- a/packages/angular/test/build.sh +++ b/packages/angular/test/build.sh @@ -22,6 +22,12 @@ FULL_BASE_DIR="${BASE_DIR}/." # The full path to the built application. BUILD_APP_DIR="${BUILD_DIR}/${APP_DIR}/" +# Make sure the full app directory exists. +if [ ! -d $FULL_APP_DIR ]; then + echo "Could not find test app: ${FULL_APP_DIR}" + exit 1 +fi + # Make the build directory if it does not already exist. mkdir -p $BUILD_DIR diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index ca0274ab93..aeaeab17f7 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07) + +**Note:** Version bump only for package @ionic/react-router + + + + + +# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31) + +**Note:** Version bump only for package @ionic/react-router + + + + + +## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31) + +**Note:** Version bump only for package @ionic/react-router + + + + + ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24) **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 42dcdc99de..44c846a066 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.6.6", + "version": "7.7.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react-router", - "version": "7.6.6", + "version": "7.7.1", "license": "MIT", "dependencies": { - "@ionic/react": "^7.6.6", + "@ionic/react": "^7.7.1", "tslib": "*" }, "devDependencies": { @@ -238,11 +238,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "dependencies": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -414,11 +414,11 @@ } }, "node_modules/@ionic/react": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.6.tgz", - "integrity": "sha512-3J18wUMMGBS2jkTwBRWYpkXvhFYpBcLqKF9nq/9aJL55GtFbu3uAnvM8Km3LkQUYqk4ddpGQr5bvzTvhYcxMMQ==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.7.1.tgz", + "integrity": "sha512-rfTUAUSqVMzg+R1CEMclSOLwXByJ06qtRXhpyVvJetQFUUVHA8inHdULTJqKN10c0XeZr+WyapGX04IktB9WfQ==", "dependencies": { - "@ionic/core": "7.6.6", + "@ionic/core": "7.7.1", "ionicons": "^7.0.0", "tslib": "*" }, @@ -667,9 +667,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz", - "integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA==", + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz", + "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==", "bin": { "stencil": "bin/stencil" }, @@ -4050,11 +4050,11 @@ "dev": true }, "@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "requires": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -4156,11 +4156,11 @@ "requires": {} }, "@ionic/react": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.6.tgz", - "integrity": "sha512-3J18wUMMGBS2jkTwBRWYpkXvhFYpBcLqKF9nq/9aJL55GtFbu3uAnvM8Km3LkQUYqk4ddpGQr5bvzTvhYcxMMQ==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.7.1.tgz", + "integrity": "sha512-rfTUAUSqVMzg+R1CEMclSOLwXByJ06qtRXhpyVvJetQFUUVHA8inHdULTJqKN10c0XeZr+WyapGX04IktB9WfQ==", "requires": { - "@ionic/core": "7.6.6", + "@ionic/core": "7.7.1", "ionicons": "^7.0.0", "tslib": "*" } @@ -4297,9 +4297,9 @@ "optional": true }, "@stencil/core": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz", - "integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA==" + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz", + "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==" }, "@types/estree": { "version": "1.0.4", diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 7c55257817..aa9af59abf 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "7.6.6", + "version": "7.7.1", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -36,7 +36,7 @@ "dist/" ], "dependencies": { - "@ionic/react": "^7.6.6", + "@ionic/react": "^7.7.1", "tslib": "*" }, "peerDependencies": { diff --git a/packages/react-router/rollup.config.mjs b/packages/react-router/rollup.config.mjs index d9ccf1f4af..6647b5197a 100644 --- a/packages/react-router/rollup.config.mjs +++ b/packages/react-router/rollup.config.mjs @@ -1,4 +1,5 @@ import typescript from '@rollup/plugin-typescript'; +const external = ['react', 'react-dom', 'react-router', 'react-router-dom', 'history', 'tslib']; export default { input: 'src/index.ts', @@ -9,8 +10,8 @@ export default { sourcemap: true, } ], - external: (id) => !/^(\.|\/)/.test(id), plugins: [ typescript(), ], + external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons') || id.startsWith('@ionic/react'), }; diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 2f7dbe9c7b..09c2172767 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07) + + +### Bug Fixes + +* **react:** route with redirect will mount page ([#28961](https://github.com/ionic-team/ionic-framework/issues/28961)) ([5777ce2](https://github.com/ionic-team/ionic-framework/commit/5777ce258119d2715b1326cdc103bd4ad7612bd1)), closes [#28838](https://github.com/ionic-team/ionic-framework/issues/28838) + + + + + +# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31) + +**Note:** Version bump only for package @ionic/react + + + + + +## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31) + +**Note:** Version bump only for package @ionic/react + + + + + ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24) **Note:** Version bump only for package @ionic/react diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index c1660aba65..d86c2bb7e9 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react", - "version": "7.6.6", + "version": "7.7.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react", - "version": "7.6.6", + "version": "7.7.1", "license": "MIT", "dependencies": { - "@ionic/core": "^7.6.6", + "@ionic/core": "^7.7.1", "ionicons": "^7.0.0", "tslib": "*" }, @@ -811,11 +811,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "dependencies": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -1674,9 +1674,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==", "bin": { "stencil": "bin/stencil" }, @@ -12857,11 +12857,11 @@ "dev": true }, "@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "requires": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -13453,9 +13453,9 @@ } }, "@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==" + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==" }, "@szmarczak/http-timer": { "version": "4.0.6", diff --git a/packages/react/package.json b/packages/react/package.json index 87276138cb..1f966eccb2 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "7.6.6", + "version": "7.7.1", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -39,7 +39,7 @@ "css/" ], "dependencies": { - "@ionic/core": "^7.6.6", + "@ionic/core": "^7.7.1", "ionicons": "^7.0.0", "tslib": "*" }, diff --git a/packages/react/rollup.config.mjs b/packages/react/rollup.config.mjs index 71f731bdf2..4a5ae0f419 100644 --- a/packages/react/rollup.config.mjs +++ b/packages/react/rollup.config.mjs @@ -1,4 +1,5 @@ import typescript from '@rollup/plugin-typescript'; +const external = ['react', 'react-dom', 'react-router', 'react-router-dom', 'history', 'tslib']; export default { input: 'src/index.ts', @@ -11,8 +12,8 @@ export default { sourcemap: true, } ], - external: (id) => !/^(\.|\/)/.test(id), plugins: [ typescript(), ], + external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons'), }; diff --git a/packages/react/src/routing/PageManager.tsx b/packages/react/src/routing/PageManager.tsx index 1ba3f94b98..19a184a636 100644 --- a/packages/react/src/routing/PageManager.tsx +++ b/packages/react/src/routing/PageManager.tsx @@ -54,7 +54,13 @@ export class PageManager extends React.PureComponent { this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler); this.ionPageElementRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler); this.ionPageElementRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler); - this.ionPageElementRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler); + /** + * We deliberately do not remove the `ionViewDidLeave` listener. + * The registered callback is used to unmount and remove the page. + * Removing the event listener prevents the callback from being called. + * The browser will automatically remove the event listener when the + * page element is removed from the DOM and garbage collected. + */ } } diff --git a/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts index 765b9f45f7..aa5e8cc231 100644 --- a/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts +++ b/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts @@ -1,9 +1,4 @@ -/** - * TODO: Skipping for now to avoid the CE build issue - * where child components do not get registered. - * Re-enable after this is resolved in Stencil 2.9. - */ -describe.skip('IonPicker', () => { +describe('IonPicker', () => { beforeEach(() => { cy.visit('/overlay-components/picker'); }); diff --git a/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts index bd5753bcfa..b51b13523a 100644 --- a/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts +++ b/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts @@ -1,10 +1,4 @@ -/** - * TODO: Skipping for now to avoid the CE build issue - * where child components do not get registered. - * Re-enable after this is resolved in Stencil 2.9. - */ - -describe.skip('useIonPicker', () => { +describe('useIonPicker', () => { beforeEach(() => { cy.visit('/overlay-hooks/picker'); }); diff --git a/packages/react/test/build.sh b/packages/react/test/build.sh index a646dc74ba..51467aee36 100755 --- a/packages/react/test/build.sh +++ b/packages/react/test/build.sh @@ -22,6 +22,12 @@ FULL_BASE_DIR="${BASE_DIR}/." # The full path to the built application. BUILD_APP_DIR="${BUILD_DIR}/${APP_DIR}/" +# Make sure the full app directory exists. +if [ ! -d $FULL_APP_DIR ]; then + echo "Could not find test app: ${FULL_APP_DIR}" + exit 1 +fi + # Make the build directory if it does not already exist. mkdir -p $BUILD_DIR diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 07e43400fb..4d2fa84627 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31) + +**Note:** Version bump only for package @ionic/vue-router + + + + + +## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31) + +**Note:** Version bump only for package @ionic/vue-router + + + + + ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24) **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 1f4e7fbaf2..edfda09308 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.6.6", + "version": "7.7.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "7.6.6", + "version": "7.7.1", "license": "MIT", "dependencies": { - "@ionic/vue": "^7.6.6" + "@ionic/vue": "^7.7.1" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", @@ -661,11 +661,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "dependencies": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -852,11 +852,11 @@ } }, "node_modules/@ionic/vue": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.6.tgz", - "integrity": "sha512-Ct992mndUmyTKq2vBFX/3gFcyNW/QKScYydAvG0Jtl9fPHrMZ7fYj+Hk1OEuLQDbsBMH3gUXjUV0OV5pYABsEA==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.1.tgz", + "integrity": "sha512-hEfmCwuLJTH0QSiSp4jhZApOvZ3RtHBzTvN2LAD+xJ0kPPj2aAtEgR7fqp/7/7ZRbGhSZO5XTzwskQsZTS5HdQ==", "dependencies": { - "@ionic/core": "7.6.6", + "@ionic/core": "7.7.1", "ionicons": "^7.0.0" } }, @@ -1508,9 +1508,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz", - "integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA==", + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz", + "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==", "bin": { "stencil": "bin/stencil" }, @@ -7878,11 +7878,11 @@ "dev": true }, "@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "requires": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -7993,11 +7993,11 @@ "requires": {} }, "@ionic/vue": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.6.tgz", - "integrity": "sha512-Ct992mndUmyTKq2vBFX/3gFcyNW/QKScYydAvG0Jtl9fPHrMZ7fYj+Hk1OEuLQDbsBMH3gUXjUV0OV5pYABsEA==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.1.tgz", + "integrity": "sha512-hEfmCwuLJTH0QSiSp4jhZApOvZ3RtHBzTvN2LAD+xJ0kPPj2aAtEgR7fqp/7/7ZRbGhSZO5XTzwskQsZTS5HdQ==", "requires": { - "@ionic/core": "7.6.6", + "@ionic/core": "7.7.1", "ionicons": "^7.0.0" } }, @@ -8461,9 +8461,9 @@ } }, "@stencil/core": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz", - "integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA==" + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.1.tgz", + "integrity": "sha512-l7UUCEV+4Yr1i6BL2DGSQPAzM3x/V4Fx9n9Z0/gdAgX11I25xY0MnH5jbQ69ug6ms/8KUV6SouS1R7MjjM/JnQ==" }, "@tootallnate/once": { "version": "2.0.0", diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index 1b6409fa65..e129677412 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "7.6.6", + "version": "7.7.1", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", @@ -44,7 +44,7 @@ }, "homepage": "https://github.com/ionic-team/ionic#readme", "dependencies": { - "@ionic/vue": "^7.6.6" + "@ionic/vue": "^7.7.1" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 85949b91f1..3255d5e420 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,30 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07) + +**Note:** Version bump only for package @ionic/vue + + + + + +# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31) + +**Note:** Version bump only for package @ionic/vue + + + + + +## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31) + +**Note:** Version bump only for package @ionic/vue + + + + + ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24) diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index ddb6e6476b..e05c5fe41e 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue", - "version": "7.6.6", + "version": "7.7.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "7.6.6", + "version": "7.7.1", "license": "MIT", "dependencies": { - "@ionic/core": "^7.6.6", + "@ionic/core": "^7.7.1", "ionicons": "^7.0.0" }, "devDependencies": { @@ -208,11 +208,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "dependencies": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -628,9 +628,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==", "bin": { "stencil": "bin/stencil" }, @@ -3959,11 +3959,11 @@ "dev": true }, "@ionic/core": { - "version": "7.6.6", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz", - "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.1.tgz", + "integrity": "sha512-Su4VFwztN8vKyHsIgHMmzQ1ZrIajNzMR7hg2fcv15Y2yrzLpK06PcUf9QutBM9KyP0wQIngwfnO68vrAnqR+xQ==", "requires": { - "@stencil/core": "^4.10.0", + "@stencil/core": "^4.12.0", "ionicons": "^7.2.2", "tslib": "^2.1.0" }, @@ -4203,9 +4203,9 @@ "optional": true }, "@stencil/core": { - "version": "4.10.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz", - "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==" + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz", + "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==" }, "@types/estree": { "version": "1.0.4", diff --git a/packages/vue/package.json b/packages/vue/package.json index 37da88be76..a6c0f497a0 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "7.6.6", + "version": "7.7.1", "description": "Vue specific wrapper for @ionic/core", "scripts": { "eslint": "eslint src", @@ -66,7 +66,7 @@ "vue-router": "^4.0.16" }, "dependencies": { - "@ionic/core": "^7.6.6", + "@ionic/core": "^7.7.1", "ionicons": "^7.0.0" }, "vetur": { diff --git a/packages/vue/test/base/src/components/ModalContent.vue b/packages/vue/test/base/src/components/ModalContent.vue index 48586c826b..6b425e7cd7 100644 --- a/packages/vue/test/base/src/components/ModalContent.vue +++ b/packages/vue/test/base/src/components/ModalContent.vue @@ -10,7 +10,7 @@ {{ title }} - + diff --git a/packages/vue/test/base/src/views/Inputs.vue b/packages/vue/test/base/src/views/Inputs.vue index 70ec41094e..2cf45a98d0 100644 --- a/packages/vue/test/base/src/views/Inputs.vue +++ b/packages/vue/test/base/src/views/Inputs.vue @@ -30,28 +30,23 @@ - Checkbox - + Checkbox - Toggle - + Toggle - Input - + - Range - + - Textarea - + @@ -61,22 +56,18 @@ - Red - + Red - Green - + Green - Blue - + Blue - Select - + Apples Bananas diff --git a/packages/vue/test/base/src/views/Overlays.vue b/packages/vue/test/base/src/views/Overlays.vue index ccf794d362..799a44672b 100644 --- a/packages/vue/test/base/src/views/Overlays.vue +++ b/packages/vue/test/base/src/views/Overlays.vue @@ -18,28 +18,22 @@ - Alert - + Alert - Action Sheet - + Action Sheet - Loading - + Loading - Modal - + Modal - Popover - + Popover - Toast - + Toast @@ -51,12 +45,10 @@ - Controller - + Controller - Component - + Component diff --git a/packages/vue/test/base/src/views/Select.vue b/packages/vue/test/base/src/views/Select.vue index 0f48fcc612..bb4d9b31f3 100644 --- a/packages/vue/test/base/src/views/Select.vue +++ b/packages/vue/test/base/src/views/Select.vue @@ -7,8 +7,8 @@ - Select Popover