diff --git a/.github/workflows/actions/build-angular-server/action.yml b/.github/workflows/actions/build-angular-server/action.yml index d0cb57decf..ea87c10fe5 100644 --- a/.github/workflows/actions/build-angular-server/action.yml +++ b/.github/workflows/actions/build-angular-server/action.yml @@ -5,7 +5,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - name: Install Angular Server Dependencies run: npm ci diff --git a/.github/workflows/actions/build-angular/action.yml b/.github/workflows/actions/build-angular/action.yml index 3e07cda394..18c56efeff 100644 --- a/.github/workflows/actions/build-angular/action.yml +++ b/.github/workflows/actions/build-angular/action.yml @@ -5,7 +5,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core diff --git a/.github/workflows/actions/build-core-stencil-prerelease/action.yml b/.github/workflows/actions/build-core-stencil-prerelease/action.yml index 2e81e1e120..425ce239e1 100644 --- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml +++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml @@ -11,7 +11,7 @@ runs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - name: Install Dependencies run: npm ci diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml index a5cf54ada6..17e92a01db 100644 --- a/.github/workflows/actions/build-core/action.yml +++ b/.github/workflows/actions/build-core/action.yml @@ -6,7 +6,7 @@ runs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - name: Install Dependencies run: npm install working-directory: ./core diff --git a/.github/workflows/actions/build-react-router/action.yml b/.github/workflows/actions/build-react-router/action.yml index 692044da30..312e660554 100644 --- a/.github/workflows/actions/build-react-router/action.yml +++ b/.github/workflows/actions/build-react-router/action.yml @@ -5,7 +5,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core diff --git a/.github/workflows/actions/build-react/action.yml b/.github/workflows/actions/build-react/action.yml index 386d023a3f..c1c09325c4 100644 --- a/.github/workflows/actions/build-react/action.yml +++ b/.github/workflows/actions/build-react/action.yml @@ -5,7 +5,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core diff --git a/.github/workflows/actions/build-vue-router/action.yml b/.github/workflows/actions/build-vue-router/action.yml index 3d6027c1fe..eafdcc7f16 100644 --- a/.github/workflows/actions/build-vue-router/action.yml +++ b/.github/workflows/actions/build-vue-router/action.yml @@ -5,7 +5,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core diff --git a/.github/workflows/actions/build-vue/action.yml b/.github/workflows/actions/build-vue/action.yml index 4c2370d5c1..d02003d053 100644 --- a/.github/workflows/actions/build-vue/action.yml +++ b/.github/workflows/actions/build-vue/action.yml @@ -5,7 +5,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core diff --git a/.github/workflows/actions/publish-npm/action.yml b/.github/workflows/actions/publish-npm/action.yml index fb0680d204..4b6d66e4b2 100644 --- a/.github/workflows/actions/publish-npm/action.yml +++ b/.github/workflows/actions/publish-npm/action.yml @@ -21,7 +21,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x # Provenance requires npm 9.5.0+ - name: Install latest npm run: npm install -g npm@latest diff --git a/.github/workflows/actions/test-core-clean-build/action.yml b/.github/workflows/actions/test-core-clean-build/action.yml index ae41a8924f..1cef45dcd9 100644 --- a/.github/workflows/actions/test-core-clean-build/action.yml +++ b/.github/workflows/actions/test-core-clean-build/action.yml @@ -5,7 +5,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: diff --git a/.github/workflows/actions/test-core-lint/action.yml b/.github/workflows/actions/test-core-lint/action.yml index d0954963fc..df5b2c3b5f 100644 --- a/.github/workflows/actions/test-core-lint/action.yml +++ b/.github/workflows/actions/test-core-lint/action.yml @@ -5,7 +5,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - name: Install Dependencies run: npm ci working-directory: ./core diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml index afb213fcb1..52596467d3 100644 --- a/.github/workflows/actions/test-core-screenshot/action.yml +++ b/.github/workflows/actions/test-core-screenshot/action.yml @@ -13,7 +13,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core diff --git a/.github/workflows/actions/test-core-spec/action.yml b/.github/workflows/actions/test-core-spec/action.yml index 868baa009b..785a84bfa7 100644 --- a/.github/workflows/actions/test-core-spec/action.yml +++ b/.github/workflows/actions/test-core-spec/action.yml @@ -8,7 +8,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - name: Install Dependencies run: npm ci working-directory: ./core diff --git a/.github/workflows/actions/test-react-e2e/action.yml b/.github/workflows/actions/test-react-e2e/action.yml index b112c2d3a9..17e43ff04a 100644 --- a/.github/workflows/actions/test-react-e2e/action.yml +++ b/.github/workflows/actions/test-react-e2e/action.yml @@ -8,7 +8,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core diff --git a/.github/workflows/actions/test-react-router-e2e/action.yml b/.github/workflows/actions/test-react-router-e2e/action.yml index 34b6ad9075..ce40ad2e12 100644 --- a/.github/workflows/actions/test-react-router-e2e/action.yml +++ b/.github/workflows/actions/test-react-router-e2e/action.yml @@ -8,7 +8,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core diff --git a/.github/workflows/actions/test-vue-e2e/action.yml b/.github/workflows/actions/test-vue-e2e/action.yml index 8d4d71ce1c..f0f0f2154f 100644 --- a/.github/workflows/actions/test-vue-e2e/action.yml +++ b/.github/workflows/actions/test-vue-e2e/action.yml @@ -8,7 +8,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: ./.github/workflows/actions/download-archive with: name: ionic-core diff --git a/.github/workflows/actions/update-reference-screenshots/action.yml b/.github/workflows/actions/update-reference-screenshots/action.yml index 008fca9b61..47f3737325 100644 --- a/.github/workflows/actions/update-reference-screenshots/action.yml +++ b/.github/workflows/actions/update-reference-screenshots/action.yml @@ -9,7 +9,7 @@ runs: steps: - uses: actions/setup-node@v3 with: - node-version: 16.x + node-version: 18.x - uses: actions/download-artifact@v3 with: path: ./artifacts @@ -35,7 +35,16 @@ runs: git config user.name ionitron git config user.email hi@ionicframework.com git add src/\*.png --force - git commit -m "chore(): add updated snapshots" - git push + + if git diff --exit-code; then + echo -e "\033[1;31m⚠️ Error: No new screenshots generated ⚠️\033[0m" + echo -e "\033[1;31mThis means that there were zero visual diffs when running screenshot tests.\033[0m" + echo -e "\033[1;31mMake sure you have pushed any code changes that would result in visual diffs.\033[0m" + exit 1 + else + git commit -m "chore(): add updated snapshots" + git push + fi + shell: bash working-directory: ./core diff --git a/.stackblitz/codeflow.json b/.stackblitz/codeflow.json index 69474708bf..6354218ee3 100644 --- a/.stackblitz/codeflow.json +++ b/.stackblitz/codeflow.json @@ -4,7 +4,7 @@ "enabled": false }, "pullRequests": { - "enabled": true + "enabled": false } } } diff --git a/CHANGELOG.md b/CHANGELOG.md index be381bc566..7ed433b81c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,21 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06) + + +### Bug Fixes + +* **modal:** swipe to dismiss resets status bar style ([#28110](https://github.com/ionic-team/ionic-framework/issues/28110)) ([176585f](https://github.com/ionic-team/ionic-framework/commit/176585f446b04a6a0cedab2e09417637dbfc78ee)), closes [#28105](https://github.com/ionic-team/ionic-framework/issues/28105) +* **overlays:** prevent overlays from getting stuck open ([#28069](https://github.com/ionic-team/ionic-framework/issues/28069)) ([584e9d3](https://github.com/ionic-team/ionic-framework/commit/584e9d3be220343451c2d4b9bf90658ecd530de1)), closes [#27200](https://github.com/ionic-team/ionic-framework/issues/27200) +* **popover:** dynamic width popover is positioned correctly ([#28072](https://github.com/ionic-team/ionic-framework/issues/28072)) ([2a80eb6](https://github.com/ionic-team/ionic-framework/commit/2a80eb6bd0b16a9dab9bea600bb7f935d25c0e1b)), closes [#27190](https://github.com/ionic-team/ionic-framework/issues/27190) [#24780](https://github.com/ionic-team/ionic-framework/issues/24780) +* **react:** overlay content is shown with hook ([#28109](https://github.com/ionic-team/ionic-framework/issues/28109)) ([7b551fd](https://github.com/ionic-team/ionic-framework/commit/7b551fd54b9e16a2538e5b82a13d72b3007fa045)), closes [#28102](https://github.com/ionic-team/ionic-framework/issues/28102) +* **textarea:** cols property is respected ([#28081](https://github.com/ionic-team/ionic-framework/issues/28081)) ([6d4eabc](https://github.com/ionic-team/ionic-framework/commit/6d4eabcc1046c28c1abf69a8bda3e06f80cf3f8f)), closes [#22142](https://github.com/ionic-team/ionic-framework/issues/22142) + + + + + ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30) diff --git a/core/.eslintrc.js b/core/.eslintrc.js index 44443d098f..7b2a4188ed 100644 --- a/core/.eslintrc.js +++ b/core/.eslintrc.js @@ -46,7 +46,8 @@ module.exports = { { "files": ["*.e2e.ts"], "rules": { - "custom-rules/await-playwright-promise-assertion": "error" + "custom-rules/await-playwright-promise-assertion": "error", + "custom-rules/no-playwright-to-match-snapshot-assertion": "error" } } ] diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index cf354d6387..672e1c6630 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,20 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06) + + +### Bug Fixes + +* **modal:** swipe to dismiss resets status bar style ([#28110](https://github.com/ionic-team/ionic-framework/issues/28110)) ([176585f](https://github.com/ionic-team/ionic-framework/commit/176585f446b04a6a0cedab2e09417637dbfc78ee)), closes [#28105](https://github.com/ionic-team/ionic-framework/issues/28105) +* **overlays:** prevent overlays from getting stuck open ([#28069](https://github.com/ionic-team/ionic-framework/issues/28069)) ([584e9d3](https://github.com/ionic-team/ionic-framework/commit/584e9d3be220343451c2d4b9bf90658ecd530de1)), closes [#27200](https://github.com/ionic-team/ionic-framework/issues/27200) +* **popover:** dynamic width popover is positioned correctly ([#28072](https://github.com/ionic-team/ionic-framework/issues/28072)) ([2a80eb6](https://github.com/ionic-team/ionic-framework/commit/2a80eb6bd0b16a9dab9bea600bb7f935d25c0e1b)), closes [#27190](https://github.com/ionic-team/ionic-framework/issues/27190) [#24780](https://github.com/ionic-team/ionic-framework/issues/24780) +* **textarea:** cols property is respected ([#28081](https://github.com/ionic-team/ionic-framework/issues/28081)) ([6d4eabc](https://github.com/ionic-team/ionic-framework/commit/6d4eabcc1046c28c1abf69a8bda3e06f80cf3f8f)), closes [#22142](https://github.com/ionic-team/ionic-framework/issues/22142) + + + + + ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30) diff --git a/core/api.txt b/core/api.txt index cae05be7db..d8ddc4ae8f 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1370,7 +1370,7 @@ ion-textarea,prop,autocapitalize,string,'none',false,false ion-textarea,prop,autofocus,boolean,false,false,false ion-textarea,prop,clearOnEdit,boolean,false,false,false ion-textarea,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true -ion-textarea,prop,cols,number | undefined,undefined,false,false +ion-textarea,prop,cols,number | undefined,undefined,false,true ion-textarea,prop,counter,boolean,false,false,false ion-textarea,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false ion-textarea,prop,debounce,number | undefined,undefined,false,false diff --git a/core/custom-rules/index.js b/core/custom-rules/index.js index 56bddacafa..a66ad5bba0 100644 --- a/core/custom-rules/index.js +++ b/core/custom-rules/index.js @@ -1,6 +1,7 @@ module.exports = { rules: { 'no-component-on-ready-method': require('./no-component-on-ready-method.js'), - 'await-playwright-promise-assertion': require('./await-playwright-promise-assertion.js') + 'await-playwright-promise-assertion': require('./await-playwright-promise-assertion.js'), + 'no-playwright-to-match-snapshot-assertion': require('./no-playwright-to-match-snapshot-assertion.js') } } diff --git a/core/custom-rules/no-playwright-to-match-snapshot-assertion.js b/core/custom-rules/no-playwright-to-match-snapshot-assertion.js new file mode 100644 index 0000000000..e05134359b --- /dev/null +++ b/core/custom-rules/no-playwright-to-match-snapshot-assertion.js @@ -0,0 +1,29 @@ +module.exports = { + meta: { + messages: { + noPlaywrightToMatchSnapshotAssertion: '"toHaveScreenshot" assertions should be used in favor of "toMatchSnapshot". "toHaveScreenshot" brings file size reductions and anti-flake behaviors such as disabling animations by default.', + }, + }, + create(context) { + return { + ExpressionStatement(node) { + if (node.expression.callee === undefined) { + return; + } + + const { property } = node.expression.callee; + + /** + * Check to see if toMatchSnapshot is being used + */ + if ( + property !== undefined && + property.type === 'Identifier' && + property.name === 'toMatchSnapshot' + ) { + context.report({ node: node, messageId: 'noPlaywrightToMatchSnapshotAssertion' }); + } + } + } + } +}; diff --git a/core/package-lock.json b/core/package-lock.json index 56a643f273..37d1025fc7 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/core", - "version": "7.3.2", + "version": "7.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "7.3.2", + "version": "7.3.3", "license": "MIT", "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.2.0", "ionicons": "7.1.0", "tslib": "^2.1.0" }, @@ -1634,9 +1634,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz", + "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==", "bin": { "stencil": "bin/stencil" }, @@ -11524,9 +11524,9 @@ "requires": {} }, "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz", + "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==" }, "@stencil/react-output-target": { "version": "0.5.3", diff --git a/core/package.json b/core/package.json index c681ad21c5..4ea27ef3ed 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "7.3.2", + "version": "7.3.3", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -31,7 +31,7 @@ "loader/" ], "dependencies": { - "@stencil/core": "^4.1.0", + "@stencil/core": "^4.2.0", "ionicons": "7.1.0", "tslib": "^2.1.0" }, diff --git a/core/playwright.config.ts b/core/playwright.config.ts index 1fa886c512..9cfb9fb810 100644 --- a/core/playwright.config.ts +++ b/core/playwright.config.ts @@ -55,9 +55,6 @@ const config: PlaywrightTestConfig = { timeout: 5000, toHaveScreenshot: { threshold: 0.1 - }, - toMatchSnapshot: { - threshold: 0.1 } }, /* Fail the build on CI if you accidentally left test.only in the source code. */ diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index c2a99e1fd8..4a1a09e84b 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -59,15 +59,73 @@ } :host(.menu-side-start) .menu-inner { + /** + * Menu does not cover the whole screen so we need to set the safe area for the + * side that touches the screen edge only. Since safe area is not logical, it + * needs to be applied to the correct side depending on the language direction. + * Otherwise, the content will have less space on both sides. + * + * LTR: + * The left side of the menu touches the screen edge. The safe area padding has + * already been set in the core styles, so there's no need to set it again. + * The right side of the menu is not touching the screen edge. Padding is not + * applied to the right side of the menu. A value of 0 is set. + */ --ion-safe-area-right: 0px; @include position(0, auto, 0, 0); + + @include rtl() { + /** + * Menu does not cover the whole screen so we need to set the safe area for the + * side that touches the screen edge only. Since safe area is not logical, it + * needs to be applied to the correct side depending on the language direction. + * Otherwise, the content will have less space on both sides. + * + * RTL: + * The right side of the menu touches the screen edge. The safe area padding has + * already been set in the core styles, so there's no need to set it again. + * The left side of the menu is not touching the screen edge. Padding is not + * applied to the left side of the menu. A value of 0 is set. + */ + --ion-safe-area-right: env(safe-area-inset-right); + --ion-safe-area-left: 0px; + } } :host(.menu-side-end) .menu-inner { + /** + * Menu does not cover the whole screen so we need to set the safe area for the + * side that touches the screen edge only. Since safe area is not logical, it + * needs to be applied to the correct side depending on the language direction. + * Otherwise, the content will have less space on both sides. + * + * LTR: + * The right side of the menu touches the screen edge. The safe area padding has + * already been set in the core styles, so there's no need to set it again. + * The left side of the menu is not touching the screen edge. Padding is not + * applied to the left side of the menu. A value of 0 is set. + */ --ion-safe-area-left: 0px; @include position(0, 0, 0, auto); + + @include rtl() { + /** + * Menu does not cover the whole screen so we need to set the safe area for the + * side that touches the screen edge only. Since safe area is not logical, it + * needs to be applied to the correct side depending on the language direction. + * Otherwise, the content will have less space on both sides. + * + * RTL: + * The left side of the menu touches the screen edge. The safe area padding has + * already been set in the core styles, so there's no need to set it again. + * The right side of the menu is not touching the screen edge. Padding is not + * applied to the right side of the menu. A value of 0 is set. + */ + --ion-safe-area-left: env(safe-area-inset-left); + --ion-safe-area-right: 0px; + } } ion-backdrop { diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 0b4a0d3799..3c8a091901 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -473,6 +473,19 @@ export class Modal implements ComponentInterface, OverlayInterface { writeTask(() => this.el.classList.add('show-modal')); + const hasCardModal = presentingElement !== undefined; + + /** + * We need to change the status bar at the + * start of the animation so that it completes + * by the time the card animation is done. + */ + if (hasCardModal && getIonMode(this) === 'ios') { + // Cache the original status bar color before the modal is presented + this.statusBarStyle = await StatusBar.getStyle(); + setCardStatusBarDark(); + } + await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, { presentingEl: presentingElement, currentBreakpoint: this.initialBreakpoint, @@ -511,19 +524,6 @@ export class Modal implements ComponentInterface, OverlayInterface { window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback); } - const hasCardModal = presentingElement !== undefined; - - /** - * We need to change the status bar at the - * start of the animation so that it completes - * by the time the card animation is done. - */ - if (hasCardModal && getIonMode(this) === 'ios') { - // Cache the original status bar color before the modal is presented - this.statusBarStyle = await StatusBar.getStyle(); - setCardStatusBarDark(); - } - if (this.isSheetModal) { this.initSheetGesture(); } else if (hasCardModal) { @@ -566,6 +566,16 @@ export class Modal implements ComponentInterface, OverlayInterface { * removed from the DOM. */ this.gestureAnimationDismissing = true; + + /** + * Reset the status bar style as the dismiss animation + * starts otherwise the status bar will be the wrong + * color for the duration of the dismiss animation. + * The dismiss method does this as well, but + * in this case it's only called once the animation + * has finished. + */ + setCardStatusBarDefault(this.statusBarStyle); this.animation!.onFinish(async () => { await this.dismiss(undefined, GESTURE); this.gestureAnimationDismissing = false; diff --git a/core/src/components/progress-bar/test/basic/index.html b/core/src/components/progress-bar/test/basic/index.html index af5de592d0..56e4f73434 100644 --- a/core/src/components/progress-bar/test/basic/index.html +++ b/core/src/components/progress-bar/test/basic/index.html @@ -79,18 +79,6 @@ - - Determinate (change progress with slider) - - - - - - 0 - 100 - - - Buffer @@ -105,39 +93,8 @@ Buffer (without value) - - - Buffer (change buffer with slider) - - - - - - - 0 - 100 - - - - diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Chrome-linux.png index 4cc6e7f771..03beb69a11 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Firefox-linux.png index 136389d3dc..103553d02d 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Safari-linux.png index f4a193becd..554d6c58f7 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Chrome-linux.png index 0b9acd8a38..6299488be0 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Firefox-linux.png index 88d1920a34..718ddc263e 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Safari-linux.png index 9e7892cd27..3f3a9161fe 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Chrome-linux.png index a6f311ba76..ce3224afaa 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Firefox-linux.png index e9dfda436a..335844427d 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Safari-linux.png index 8ba2873b51..63ae234dbc 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Chrome-linux.png index fbb46f7a29..b77b0120ac 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Firefox-linux.png index d76cb9c4e2..6c234f50f0 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Safari-linux.png index 42e175bab1..135f8e2ec7 100644 Binary files a/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Safari-linux.png and b/core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/progress-bar/test/buffer/index.html b/core/src/components/progress-bar/test/buffer/index.html new file mode 100644 index 0000000000..9bd1019055 --- /dev/null +++ b/core/src/components/progress-bar/test/buffer/index.html @@ -0,0 +1,82 @@ + + + + + Progress Bar - Buffer + + + + + + + + + + + + + + + Progress Bar - Buffer + + + + + + + Buffer + + + + + Buffer (reversed) + + + + + Buffer (without value) + + + + + Buffer (change buffer with slider) + + + + + + + 0 + 100 + + + + + + + + + diff --git a/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts new file mode 100644 index 0000000000..7ed74f1045 --- /dev/null +++ b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts @@ -0,0 +1,25 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('progress-bar: buffer'), () => { + test.describe('with a dynamic progress value', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + await page.setIonViewport(); + + const progressBar = await page.locator('ion-progress-bar'); + + await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8)); + + await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`)); + }); + }); + }); +}); diff --git a/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a93ce7b0ac Binary files /dev/null and b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ee968b4fff Binary files /dev/null and b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f2184604ca Binary files /dev/null and b/core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/progress-bar/test/determinate/index.html b/core/src/components/progress-bar/test/determinate/index.html new file mode 100644 index 0000000000..2ffda64dc3 --- /dev/null +++ b/core/src/components/progress-bar/test/determinate/index.html @@ -0,0 +1,91 @@ + + + + + Progress Bar - Determinate + + + + + + + + + + + + + + + Progress Bar - Determinate + + + + + + + Determinate + + + + + Determinate (reversed) + + + + + Determinate (secondary color) + + + + + Determinate (with no bar background) + + + + + Determinate (with a custom background) + + + + + Determinate (change progress with slider) + + + + + + 0 + 100 + + + + + + + + + diff --git a/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts new file mode 100644 index 0000000000..8da6024612 --- /dev/null +++ b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts @@ -0,0 +1,25 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('progress-bar: determinate'), () => { + test.describe('with a dynamic progress value', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + await page.setIonViewport(); + + const progressBar = await page.locator('ion-progress-bar'); + + await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8)); + + await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`)); + }); + }); + }); +}); diff --git a/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1f954cce31 Binary files /dev/null and b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9930578e5f Binary files /dev/null and b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4bea04aae8 Binary files /dev/null and b/core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts index 5ebdba1549..e83e755dab 100644 --- a/core/src/components/radio/test/item/radio.e2e.ts +++ b/core/src/components/radio/test/item/radio.e2e.ts @@ -17,7 +17,7 @@ configs().forEach(({ title, screenshot, config }) => { config ); const list = page.locator('ion-list'); - await expect(list).toHaveScreenshot(screenshot(`toggle-list`)); + await expect(list).toHaveScreenshot(screenshot(`radio-list`)); }); test('should render correctly in inset list', async ({ page }) => { await page.setContent( diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-ltr-Mobile-Safari-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/radio/test/item/radio.e2e.ts-snapshots/toggle-list-md-rtl-Mobile-Safari-linux.png rename to core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts b/core/src/components/textarea/test/cols/textarea.e2e.ts new file mode 100644 index 0000000000..574f7ba0fe --- /dev/null +++ b/core/src/components/textarea/test/cols/textarea.e2e.ts @@ -0,0 +1,43 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('textarea: cols'), () => { + test('should respect cols when autogrow is not set', async ({ page }) => { + await page.setContent( + ` + +
+ +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot('textarea-cols')); + }); + test('should ignore cols when autogrow is set', async ({ page }) => { + await page.setContent( + ` + +
+ +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot('textarea-cols-autogrow')); + }); + }); +}); diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..de8d1b5f8f Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..70eb06187d Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2b5d0a0ff7 Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-autogrow-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4ba8dfd503 Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..35538aaf06 Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d5308090bf Binary files /dev/null and b/core/src/components/textarea/test/cols/textarea.e2e.ts-snapshots/textarea-cols-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index f9a60a0125..6e7299ffa4 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -67,6 +67,22 @@ box-sizing: border-box; } +/** + * When the cols property is set we should + * respect that width instead of defaulting + * to taking up the entire line. + * Requires both the cols and autoGrow + * properties to be reflected as attributes + * on the host. + * + * cols does not work with autoGrow because + * autoGrow would prevent line breaks from naturally + * occurring until the textarea takes up the entire line width. + */ +:host([cols]:not([auto-grow])) { + width: fit-content; +} + // TODO: FW-2876 - Remove this selector :host(.legacy-textarea) { flex: 1; diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index e2bb7e1a57..b78121d97d 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -180,7 +180,7 @@ export class Textarea implements ComponentInterface { /** * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. */ - @Prop() cols?: number; + @Prop({ reflect: true }) cols?: number; /** * The number of visible text lines for the control. diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss index bd286d3662..92cf570651 100644 --- a/core/src/components/toolbar/toolbar.scss +++ b/core/src/components/toolbar/toolbar.scss @@ -28,7 +28,6 @@ --opacity-scale: 1; @include font-smoothing(); - @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right)); display: block; @@ -36,6 +35,11 @@ width: 100%; + // stylelint-disable-next-line property-disallowed-list + padding-right: var(--ion-safe-area-right); + // stylelint-disable-next-line property-disallowed-list + padding-left: var(--ion-safe-area-left); + color: var(--color); font-family: $font-family-base; diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index d28eb9d3fc..56580cff65 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06) + +**Note:** Version bump only for package @ionic/docs + + + + + ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30) **Note:** Version bump only for package @ionic/docs diff --git a/docs/package-lock.json b/docs/package-lock.json index e17bbb8724..4f44382eec 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/docs", - "version": "7.3.2", + "version": "7.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/docs", - "version": "7.3.2", + "version": "7.3.3", "license": "MIT" } } diff --git a/docs/package.json b/docs/package.json index d27d0b19a7..90b30bd116 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "7.3.2", + "version": "7.3.3", "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 143e308ad3..8f12de8dc2 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "docs", "packages/*" ], - "version": "7.3.2" + "version": "7.3.3" } diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index 2a66bc5fd3..3dcd9866b2 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06) + +**Note:** Version bump only for package @ionic/angular-server + + + + + ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30) **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 1189d52691..fb7d0df9ed 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.3.2", + "version": "7.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "7.3.2", + "version": "7.3.3", "license": "MIT", "dependencies": { - "@ionic/core": "^7.3.2" + "@ionic/core": "^7.3.3" }, "devDependencies": { "@angular-eslint/eslint-plugin": "^14.0.0", @@ -1060,9 +1060,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "dependencies": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", @@ -7342,9 +7342,9 @@ "dev": true }, "@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "requires": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index dda2d7ebe6..23db03d378 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "7.3.2", + "version": "7.3.3", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -61,6 +61,6 @@ }, "prettier": "@ionic/prettier-config", "dependencies": { - "@ionic/core": "^7.3.2" + "@ionic/core": "^7.3.3" } } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index 91458b40e1..95bd972847 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06) + +**Note:** Version bump only for package @ionic/angular + + + + + ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30) **Note:** Version bump only for package @ionic/angular diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index 2a2e616f13..0932012346 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "7.3.2", + "version": "7.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "7.3.2", + "version": "7.3.3", "license": "MIT", "dependencies": { - "@ionic/core": "^7.3.2", + "@ionic/core": "^7.3.3", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -1227,9 +1227,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "dependencies": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", @@ -8104,9 +8104,9 @@ "dev": true }, "@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "requires": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", diff --git a/packages/angular/package.json b/packages/angular/package.json index 645ee1c847..efbf98b26d 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "7.3.2", + "version": "7.3.3", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -47,7 +47,7 @@ } }, "dependencies": { - "@ionic/core": "^7.3.2", + "@ionic/core": "^7.3.3", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index 840cb6e34d..1acfa9174b 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06) + +**Note:** Version bump only for package @ionic/react-router + + + + + ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30) **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 b0a1e86264..a06478df27 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.3.2", + "version": "7.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react-router", - "version": "7.3.2", + "version": "7.3.3", "license": "MIT", "dependencies": { - "@ionic/react": "^7.3.2", + "@ionic/react": "^7.3.3", "tslib": "*" }, "devDependencies": { @@ -205,9 +205,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "dependencies": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", @@ -401,11 +401,11 @@ } }, "node_modules/@ionic/react": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.2.tgz", - "integrity": "sha512-fJAZ0Ar3OG7BczaFwwx5BvxI0YZFPJBGdaBm0JmEZ7LoPlsnMfLOd02LbUz1l5BcV2E3ykI9bY0jevLVtFRjnQ==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.3.tgz", + "integrity": "sha512-2ubDuPYy816pUd3rRs+kRlvz3QClQWcjwt/N39IFoUG8AFT1yTa2OE5ZMOvUhgmdnknSxfBH/40JAowTUvdtxw==", "dependencies": { - "@ionic/core": "7.3.2", + "@ionic/core": "7.3.3", "ionicons": "^7.0.0", "tslib": "*" }, @@ -486,9 +486,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz", + "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==", "bin": { "stencil": "bin/stencil" }, @@ -3663,9 +3663,9 @@ "dev": true }, "@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "requires": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", @@ -3786,11 +3786,11 @@ "requires": {} }, "@ionic/react": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.2.tgz", - "integrity": "sha512-fJAZ0Ar3OG7BczaFwwx5BvxI0YZFPJBGdaBm0JmEZ7LoPlsnMfLOd02LbUz1l5BcV2E3ykI9bY0jevLVtFRjnQ==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.3.3.tgz", + "integrity": "sha512-2ubDuPYy816pUd3rRs+kRlvz3QClQWcjwt/N39IFoUG8AFT1yTa2OE5ZMOvUhgmdnknSxfBH/40JAowTUvdtxw==", "requires": { - "@ionic/core": "7.3.2", + "@ionic/core": "7.3.3", "ionicons": "^7.0.0", "tslib": "*" } @@ -3844,9 +3844,9 @@ } }, "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz", + "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==" }, "@types/estree": { "version": "0.0.39", diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 62dcb9ce3f..74e6063ea7 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "7.3.2", + "version": "7.3.3", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -37,7 +37,7 @@ "dist/" ], "dependencies": { - "@ionic/react": "^7.3.2", + "@ionic/react": "^7.3.3", "tslib": "*" }, "peerDependencies": { diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index c740c60830..fc39ba6c75 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06) + + +### Bug Fixes + +* **react:** overlay content is shown with hook ([#28109](https://github.com/ionic-team/ionic-framework/issues/28109)) ([7b551fd](https://github.com/ionic-team/ionic-framework/commit/7b551fd54b9e16a2538e5b82a13d72b3007fa045)), closes [#28102](https://github.com/ionic-team/ionic-framework/issues/28102) + + + + + ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30) **Note:** Version bump only for package @ionic/react diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index f6fd583116..cfa4f02505 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react", - "version": "7.3.2", + "version": "7.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react", - "version": "7.3.2", + "version": "7.3.3", "license": "MIT", "dependencies": { - "@ionic/core": "^7.3.2", + "@ionic/core": "^7.3.3", "ionicons": "^7.0.0", "tslib": "*" }, @@ -697,9 +697,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "dependencies": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", @@ -11778,9 +11778,9 @@ "dev": true }, "@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "requires": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", diff --git a/packages/react/package.json b/packages/react/package.json index b8a11a6239..769e54c48b 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "7.3.2", + "version": "7.3.3", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -41,7 +41,7 @@ "css/" ], "dependencies": { - "@ionic/core": "^7.3.2", + "@ionic/core": "^7.3.3", "ionicons": "^7.0.0", "tslib": "*" }, diff --git a/packages/react/src/components/IonOverlayManager.tsx b/packages/react/src/components/IonOverlayManager.tsx index 60e7ef1f92..0c07ea7823 100644 --- a/packages/react/src/components/IonOverlayManager.tsx +++ b/packages/react/src/components/IonOverlayManager.tsx @@ -40,7 +40,6 @@ export const IonOverlayManager: React.FC = ({ onAddOverl */ const [overlays, setOverlays] = useState({}); const overlaysRef = useRef({}); - overlaysRef.current = overlays; useEffect(() => { /* Setup the callbacks that get called from */ @@ -51,12 +50,50 @@ export const IonOverlayManager: React.FC = ({ onAddOverl const addOverlay = (id: string, component: ReactComponentOrElement, containerElement: HTMLDivElement) => { const newOverlays = { ...overlaysRef.current }; newOverlays[id] = { component, containerElement }; + + /** + * In order for this function to use the latest data + * we need to update the ref synchronously. + * However, updating a ref does not cause a re-render + * which is why we still update the state. + * + * Note that updating the ref in the body + * of IonOverlayManager is not sufficient + * because that relies on overlaysRef being + * updated as part of React's render loop. State updates + * are batched, so updating the state twice in quick succession does + * not necessarily result in 2 separate render calls. + * This means if two modals are added one after the other, + * the first modal will not have been added to + * overlaysRef since React has not re-rendered yet. + * More info: https://react.dev/reference/react/useState#setstate-caveats + */ + overlaysRef.current = newOverlays; setOverlays(newOverlays); }; const removeOverlay = (id: string) => { const newOverlays = { ...overlaysRef.current }; delete newOverlays[id]; + + /** + * In order for this function to use the latest data + * we need to update the ref synchronously. + * However, updating a ref does not cause a re-render + * which is why we still update the state. + * + * Note that updating the ref in the body + * of IonOverlayManager is not sufficient + * because that relies on overlaysRef being + * updated as part of React's render loop. State updates + * are batched, so updating the state twice in quick succession does + * not necessarily result in 2 separate render calls. + * This means if two modals are added one after the other, + * the first modal will not have been added to + * overlaysRef since React has not re-rendered yet. + * More info: https://react.dev/reference/react/useState#setstate-caveats + */ + overlaysRef.current = newOverlays; setOverlays(newOverlays); }; diff --git a/packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx b/packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx index 9712f5a226..fe3dfd0c28 100644 --- a/packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx +++ b/packages/react/test/base/src/pages/overlay-hooks/ModalHook.tsx @@ -30,6 +30,8 @@ const Body: React.FC<{ onDismiss({ test: true }, 'close')}> Close + + ); @@ -83,6 +85,14 @@ const ModalHook: React.FC = () => { const [presentModalWithContext] = useIonModal(ModalWithContext); + const [presentSecondaryModal] = useIonModal(ModalSecondary); + const [presentRootModal, dismissRootModal] = useIonModal(Body, { + onDismiss: () => { + dismissRootModal(); + presentSecondaryModal(); + } + }); + return ( @@ -134,6 +144,16 @@ const ModalHook: React.FC = () => { Show Modal with Context + { + presentRootModal() + }} + id="show-root-modal" + > + Show Root Modal + +
Count: {count}
Dismissed with role: {dismissedRole}
Data: {dismissedData && JSON.stringify(dismissedData)}
@@ -143,6 +163,15 @@ const ModalHook: React.FC = () => { ); }; +const ModalSecondary: React.FC = () => { + return ( +
+

Secondary Modal

+

This text should be visible

+
+ ) +} + const MyContext = React.createContext({ value: 'default value', }); diff --git a/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonModal.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonModal.cy.ts index 64e904061c..12835ee7c7 100644 --- a/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonModal.cy.ts +++ b/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonModal.cy.ts @@ -70,4 +70,16 @@ describe('useIonModal', () => { //verify context value is overriden value cy.get('div').contains('overriden value') }); + + it('should render nested modal when modals are added and removed at the same time', () => { + cy.get('#show-root-modal').click(); + + cy.get('ion-modal').should('have.length', 1); + + cy.get('ion-modal #show-secondary-modal').click(); + + cy.get('ion-modal').should('have.length', 1); + + cy.get('ion-modal').contains('This text should be visible'); + }); }); diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 7529b3c9c3..d39a440585 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06) + +**Note:** Version bump only for package @ionic/vue-router + + + + + ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30) **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 05b1b83c0c..aa7d00b00c 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.3.2", + "version": "7.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "7.3.2", + "version": "7.3.3", "license": "MIT", "dependencies": { - "@ionic/vue": "^7.3.2" + "@ionic/vue": "^7.3.3" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", @@ -660,9 +660,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "dependencies": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", @@ -871,11 +871,11 @@ } }, "node_modules/@ionic/vue": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.2.tgz", - "integrity": "sha512-Hjaa+k56cFdpeMBFRy3obUM5O8A5CP9pTaTae/kfbm/20RVlDAb/AU0cP3maDhLeAGiVpraDXnUutM55Ow2xrw==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.3.tgz", + "integrity": "sha512-QAScy1XMBwqX/5t4Iw6PSTE1kJMohnTuXSCqxk2v/K3V+wgmNA/A8SfqCkvj4jnmNXJwEP/AF/FlUm3+Fp0HJg==", "dependencies": { - "@ionic/core": "7.3.2", + "@ionic/core": "7.3.3", "ionicons": "^7.0.0" } }, @@ -1323,9 +1323,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz", + "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==", "bin": { "stencil": "bin/stencil" }, @@ -7697,9 +7697,9 @@ "dev": true }, "@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "requires": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", @@ -7829,11 +7829,11 @@ "requires": {} }, "@ionic/vue": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.2.tgz", - "integrity": "sha512-Hjaa+k56cFdpeMBFRy3obUM5O8A5CP9pTaTae/kfbm/20RVlDAb/AU0cP3maDhLeAGiVpraDXnUutM55Ow2xrw==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.3.3.tgz", + "integrity": "sha512-QAScy1XMBwqX/5t4Iw6PSTE1kJMohnTuXSCqxk2v/K3V+wgmNA/A8SfqCkvj4jnmNXJwEP/AF/FlUm3+Fp0HJg==", "requires": { - "@ionic/core": "7.3.2", + "@ionic/core": "7.3.3", "ionicons": "^7.0.0" } }, @@ -8192,9 +8192,9 @@ } }, "@stencil/core": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", - "integrity": "sha512-yIpL+CX02fy5zvFXwXcHZjjEILRm3aiONbucpfLIWPS7zcBAuucdROssartEa+D7E1JRko97ydxn1Ntdu4GoWg==" + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.0.tgz", + "integrity": "sha512-HhxRs/b/VHTCM35lunFCzYajRQeYezsJQGgalENNpkrKUOPMvzv0dalXe8Yn/8p9eyn+GZVZuWLd0CAR4VWBbA==" }, "@tootallnate/once": { "version": "2.0.0", diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index 9ed5a1cb29..52068dc7ff 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "7.3.2", + "version": "7.3.3", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", @@ -45,7 +45,7 @@ }, "homepage": "https://github.com/ionic-team/ionic#readme", "dependencies": { - "@ionic/vue": "^7.3.2" + "@ionic/vue": "^7.3.3" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 87a7121416..7295b72c7e 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06) + +**Note:** Version bump only for package @ionic/vue + + + + + ## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30) **Note:** Version bump only for package @ionic/vue diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index 208f697e53..a0d0544379 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue", - "version": "7.3.2", + "version": "7.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "7.3.2", + "version": "7.3.3", "license": "MIT", "dependencies": { - "@ionic/core": "^7.3.2", + "@ionic/core": "^7.3.3", "ionicons": "^7.0.0" }, "devDependencies": { @@ -207,9 +207,9 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "dependencies": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", @@ -3746,9 +3746,9 @@ "dev": true }, "@ionic/core": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.2.tgz", - "integrity": "sha512-I0OHBydk7Qxj+qC89hdwzjVOC3rAgQWMkqTWOVFVR5opr/eYJMCnVLIyoe05oIemLFk+LUzfPh0bvtw2aZcY/Q==", + "version": "7.3.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.3.3.tgz", + "integrity": "sha512-v/Zdx5otxRjfGrm9gJKmuLkEBcOk1aUUBYbgZ4xHNQiRCZzuuy3P55CFoUUZnBIJofiUh08whNndNuEkC8TOvg==", "requires": { "@stencil/core": "^4.1.0", "ionicons": "7.1.0", diff --git a/packages/vue/package.json b/packages/vue/package.json index 18d6aa7c09..c758e1a608 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "7.3.2", + "version": "7.3.3", "description": "Vue specific wrapper for @ionic/core", "scripts": { "eslint": "eslint src", @@ -66,7 +66,7 @@ "vue-router": "^4.0.16" }, "dependencies": { - "@ionic/core": "^7.3.2", + "@ionic/core": "^7.3.3", "ionicons": "^7.0.0" }, "vetur": {