diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000000..6313b56c578 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto eol=lf diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 00000000000..b1f04ad75d3 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,14 @@ +# Lines starting with '#' are comments. +# Each line is a file pattern followed by one or more owners. + +# More details are here: https://help.github.com/articles/about-codeowners/ + +# The '*' pattern is global owners. + +# Order is important. The last matching pattern has the most precedence. +# The folders are ordered as follows: + +# In each subsection folders are ordered first by depth, then alphabetically. +# This should make it easy to add new rules without breaking existing ones. + +* @ionic-team/framework diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md deleted file mode 100644 index b5cd6b64a79..00000000000 --- a/.github/CONTRIBUTING.md +++ /dev/null @@ -1,140 +0,0 @@ -# Contributing - -Thanks for your interest in contributing to the Ionic Framework! :tada: - - -## Contributing Etiquette - -Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct. - - -## Creating an Issue - -If you have a question about using the framework, please ask on the [Ionic Forum](http://forum.ionicframework.com/) or in the [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/) group. - -If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution. - -Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue. - - -## Creating a Pull Request - -We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort. - -Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label! - -### Setup - -1. Fork the repo. -2. Clone your fork. -3. Make a branch for your change. -4. Run `npm install` (make sure you have [node](https://nodejs.org/en/) and [npm](http://blog.npmjs.org/post/85484771375/how-to-install-npm) installed first) - - -### Modifying Components - -1. Make any changes to the component. -2. Modify the e2e test in the `test/` directory under the component directory, if possible. If the test does not exist and it is possible to show the change, please create a new test in a directory called `basic/`. - - -#### TypeScript Changes - -1. If there is a `*.spec.ts` file located in the `test/` folder, update it to include a karma test for your change, if needed. If this file doesn't exist, please notify us. -2. Run `gulp test` to make sure all tests are working, regardless if a test was added. -3. Run `gulp lint.ts` and fix any linter errors. - - -#### Sass Changes - -1. If the css property is something that the user may want to override and it won't break the component layout, it should be given a Sass variable. See our [doc on naming Sass variables](https://docs.google.com/document/d/1OyOyrRE5lpB_9mdkF0HWVQLV97fHma450N8XqE4mjZQ/edit?usp=sharing). -2. After any changes to the Sass files run the [Sass Linter](https://github.com/brigade/scss-lint): - - Requires [Ruby](https://www.ruby-lang.org/en/documentation/installation/). **Skip this step entirely if you are unable to install Ruby.** - - Install the linter: `gem install scss_lint` - - Make sure to run the linter at the root of the repository. - - Run `gulp lint.sass` and fix any linter errors. - - -#### Viewing Changes - -1. Run the gulp e2e task to build all tests: `gulp e2e` -2. Run the gulp e2e.watch task to watch your specific test (replace `button` with the component you are modifying and `basic` with the test folder): `gulp e2e.watch --f=button/basic` -3. A browser should open at `http://localhost:8080/dist/e2e`. From here, navigate to the component you are changing. -4. If your changes look good, you're ready to [commit](#committing)! - - -#### Adding Documentation - -1. To add or modify API Documentation for a component, it should be added/changed in the component's TypeScript (`*.ts`) file, prior to the Class definition. For example, `Badge` looks similar to this: - - ``` - /** - * @name Badge - * @module ionic - * @description - * Badges are simple components in Ionic containing numbers or text. - * - * @see {@link /docs/v2/components/#badges Badges Component Docs} - * @demo /docs/v2/demos/badge/ - **/ - ``` - - where `@name` is the Class name, `@description` is the description displayed on the documentation page, `@see` links to any related pages, and `@demo` links to the API demo located in the `demos` folder. -2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/driftyco/ionic-site#local-build -3. Then, run `gulp docs` in the `ionic` repo every time you make a change and the site will update. -4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues - - -#### Adding Demos - -1. Create or modify the demo in the `demos/` folder. -2. If it is new, link to the demo in the component's TypeScript (`*.ts`) file (under `src/components`) by adding a link to it in the documentation using `@demo`, for example: - - ``` - /** - * @name Badge - * - * ... - * - * @demo /docs/v2/demos/src/badge/ - **/ - ``` -3. Run `gulp watch.demos` to watch for changes to the demo -4. Navigate to `http://localhost:8000/dist/demos/` and then to your component's demo to view it. -5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues - - -## Commit Message Format - -We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format). - -`type(scope): subject` - -#### Type -Must be one of the following: - -* **feat**: A new feature -* **fix**: A bug fix -* **docs**: Documentation only changes -* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) -* **refactor**: A code change that neither fixes a bug nor adds a feature -* **perf**: A code change that improves performance -* **test**: Adding missing tests -* **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation - -#### Scope -The scope can be anything specifying place of the commit change. For example `action-sheet`, `button`, `menu`, `nav`, etc. If you make multiple commits for the same component, please keep the naming of this component consistent. For example, if you make a change to navigation and the first commit is `fix(nav)`, you should continue to use `nav` for any more commits related to navigation. - -#### Subject -The subject contains succinct description of the change: - -* use the imperative, present tense: "change" not "changed" nor "changes" -* do not capitalize first letter -* do not place a period `.` at the end -* entire length of the commit message must not go over 50 characters -* describe what the commit does, not what issue it relates to or fixes -* **be brief, yet descriptive** - we should have a good understanding of what the commit does by reading the subject - - -## License - -By contributing your code to the driftyco/ionic GitHub Repository, you agree to license your contribution under the MIT license. diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 183b268d333..2fa1c3e3549 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,11 +1,23 @@ -**Ionic version:** (check one with "x") -[ ] **1.x** -[ ] **2.x** + -**I'm submitting a ...** (check one with "x") + + + + + + +**Ionic version:** + + +[x] **4.x** +[ ] **5.x** + +**I'm submitting a ...** + [ ] bug report [ ] feature request -[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ + + **Current behavior:** @@ -14,26 +26,30 @@ **Steps to reproduce:** - -For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview +**Related code:** -For Ionic 2 issues - http://plnkr.co/edit/GJte2b?p=preview ---> + ``` -insert any relevant code here +insert short code snippets here ``` **Other information:** -**Ionic info:** (run `ionic info` from a terminal/cmd prompt and paste output below): +**Ionic info:** + ``` insert the output from ionic info here ``` - - diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml new file mode 100644 index 00000000000..98905a6c843 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -0,0 +1,86 @@ +name: πŸ› Bug Report +description: Create a report to help us improve Ionic Framework +title: 'bug: ' + +body: + - type: checkboxes + id: prerequisites + attributes: + label: Prerequisites + description: Please ensure you have completed all of the following. + options: + - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue). + required: true + - label: I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct). + required: true + - label: I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success. + required: true + + - type: dropdown + id: affected-versions + attributes: + label: Ionic Framework Version + description: Which version(s) of Ionic Framework does this issue impact? [Ionic Framework 1.x to 7.x are no longer supported](https://ionicframework.com/docs/reference/support#framework-maintenance-and-support-status). + options: + - v8.x + - v9.x + - Nightly + multiple: true + validations: + required: true + + - type: textarea + id: current-behavior + attributes: + label: Current Behavior + description: A clear description of what the bug is and how it manifests. + validations: + required: true + + - type: textarea + id: expected-behavior + attributes: + label: Expected Behavior + description: A clear description of what you expected to happen. + validations: + required: true + + - type: textarea + id: steps-to-reproduce + attributes: + label: Steps to Reproduce + description: Explain the steps required to reproduce this issue. + placeholder: | + 1. Go to '...' + 2. Click on '...' + 3. Observe: '...' + validations: + required: true + + - type: input + id: reproduction-url + attributes: + label: Code Reproduction URL + description: | + Reproduce this issue in a blank [Ionic Framework starter application](https://ionicframework.com/start#basics) or a Stackblitz example. + + You can use the Stackblitz button available on any of the [component playgrounds](https://ionicframework.com/docs/components) to open an editable example. Remember to save your changes to obtain a link to copy. + + Reproductions cases must be minimal and focused around the specific problem you are experiencing. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting. + placeholder: https://github.com/... + validations: + required: true + + - type: textarea + id: ionic-info + attributes: + label: Ionic Info + description: Please run `ionic info` from within your Ionic Framework project directory and paste the output below. + validations: + required: true + + - type: textarea + id: additional-information + attributes: + label: Additional Information + description: List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc. diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 00000000000..25a8dbb606f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,10 @@ +contact_links: + - name: πŸ“š Documentation + url: https://github.com/ionic-team/ionic-docs/issues/new/choose + about: This issue tracker is not for documentation issues. Please file documentation issues on the Ionic Docs repo. + - name: πŸ’» CLI + url: https://github.com/ionic-team/ionic-cli/issues/new/choose + about: This issue tracker is not for CLI issues. Please file CLI issues on the Ionic CLI repo. + - name: πŸ€” Support Question + url: https://forum.ionicframework.com/ + about: This issue tracker is not for support questions. Please post your question on the Ionic Forums. diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml new file mode 100644 index 00000000000..788d41e3a2e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -0,0 +1,57 @@ +name: πŸ’‘ Feature Request +description: Suggest an idea for Ionic Framework +title: 'feat: ' +body: + + - type: checkboxes + id: prerequisites + attributes: + label: Prerequisites + description: Please ensure you have completed all of the following. + options: + - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue). + required: true + - label: I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct). + required: true + - label: I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success. + required: true + + - type: textarea + id: description + attributes: + label: Describe the Feature Request + description: A clear and concise description of what the feature does. + validations: + required: true + + - type: textarea + id: use-case + attributes: + label: Describe the Use Case + description: A clear and concise use case for what problem this feature would solve. + validations: + required: true + + - type: textarea + id: proposed-solution + attributes: + label: Describe Preferred Solution + description: A clear and concise description of what you how you want this feature to be added to Ionic Framework. + + - type: textarea + id: alternatives-considered + attributes: + label: Describe Alternatives + description: A clear and concise description of any alternative solutions or features you have considered. + + - type: textarea + id: related-code + attributes: + label: Related Code + description: If you are able to illustrate the feature request with an example, please provide a sample Ionic Framework application. Try out our [Getting Started Wizard](https://ionicframework.com/start#basics) to quickly spin up an Ionic Framework starter app. + + - type: textarea + id: additional-information + attributes: + label: Additional Information + description: List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to implement, Stack Overflow links, forum links, etc. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 9df38c036f8..29910b7b2b2 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,12 +1,34 @@ -#### Short description of what this resolves: +Issue number: resolves # +--------- -#### Changes proposed in this pull request: + + + + +## What is the current behavior? + + +## What is the new behavior? + - - - -**Ionic Version**: 1.x / 2.x +## Does this introduce a breaking change? + +- [ ] Yes +- [ ] No + + + + +## Other information -**Fixes**: # + diff --git a/.github/actions/publish-npm/action.yml b/.github/actions/publish-npm/action.yml new file mode 100644 index 00000000000..6913b493ef1 --- /dev/null +++ b/.github/actions/publish-npm/action.yml @@ -0,0 +1,60 @@ +name: 'Release' +description: 'Releases a package' +inputs: + scope: + description: 'The package to release. Must match a package specified in lerna.json.' + version: + description: 'The type of version to release.' + tag: + description: 'The tag to publish to on NPM.' + preid: + description: "Prerelease identifier such as 'alpha', 'beta', 'rc', or 'next'. Leave blank to skip prerelease tagging." + working-directory: + description: 'The directory of the package.' + folder: + default: './' + description: 'A folder containing a package.json file.' + node-version: + description: 'Node.js version to use when publishing.' + required: false + default: '24.x' +runs: + using: 'composite' + steps: + - name: 🟒 Configure Node for Publish + uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: ${{ inputs.node-version }} + registry-url: 'https://registry.npmjs.org' + scope: '@ionic' + # Provenance requires npm 9.5.0+ + - name: πŸ“¦ Install latest npm + run: npm install -g npm@latest + shell: bash + # This ensures the local version of Lerna is installed + # and that we do not use the global Lerna version + - name: πŸ•ΈοΈ Install root dependencies + run: npm ci + shell: bash + - name: πŸ“¦ Install Dependencies + run: npx lerna@5 bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps + shell: bash + working-directory: ${{ inputs.working-directory }} + - name: 🏷️ Set Version + run: | + if [ -z "${{ inputs.preid }}" ]; then + npx lerna@5 version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version + else + npx lerna@5 version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }} + fi + shell: bash + working-directory: ${{ inputs.working-directory }} + - name: πŸ—οΈ Run Build + run: npm run build + shell: bash + working-directory: ${{ inputs.working-directory }} + - name: πŸš€ Publish to NPM + run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance + shell: bash + working-directory: ${{ inputs.working-directory }} + diff --git a/.github/assets/logo.png b/.github/assets/logo.png new file mode 100644 index 00000000000..42c5f25bfae Binary files /dev/null and b/.github/assets/logo.png differ diff --git a/.github/ionic-issue-bot.yml b/.github/ionic-issue-bot.yml new file mode 100644 index 00000000000..d98b2a53205 --- /dev/null +++ b/.github/ionic-issue-bot.yml @@ -0,0 +1,145 @@ +triage: + label: triage + removeLabelWhenProjectAssigned: true + dryRun: false + +comment: + labels: + - label: "help wanted" + message: > + This issue has been labeled as `help wanted`. This label is added to issues + that we believe would be good for contributors. + + + If you'd like to work on this issue, please comment here letting us know that + you would like to submit a pull request for it. This helps us to keep track of + the pull request and make sure there isn't duplicated effort. + + + For a guide on how to create a pull request and test this project locally to see + your changes, see our [contributing documentation](https://ionicframework.com/docs/building/contributing). + + + Thank you! + - label: "ionitron: needs reproduction" + message: > + Thanks for the issue! This issue has been labeled as `needs reproduction`. This label + is added to issues that need a code reproduction. + + + Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. + + + If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue. + + + For a guide on how to create a good reproduction, see our [Contributing Guide](https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction). + - label: "community feedback wanted" + message: > + This issue has been labeled as `community feedback wanted`. This label is added to issues that we would like to hear from the community on before moving forward with any final decision on the feature request. + + + If the requested feature is something you would find useful for your applications, please react to the original post with πŸ‘ (`+1`). If you would like to provide an additional use case for the feature, please post a comment. + + + The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature. + + + Thank you! + dryRun: false + +closeAndLock: + labels: + - label: "ionitron: support" + message: > + Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for + bug reports and feature requests. Please use our [forum](https://forum.ionicframework.com) for questions about the framework. + + + Thank you for using Ionic! + - label: "ionitron: missing template" + message: > + Thanks for the issue! It appears that you have not filled out the provided issue template. We use this issue + template in order to gather more information and further assist you. Please create a new issue and ensure the + template is fully filled out. + + + Thank you for using Ionic! + close: true + lock: true + dryRun: false + +lockClosed: + days: 30 + maxIssuesPerRun: 100 + message: > + Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. + If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. + dryRun: false + +stale: + days: 365 + maxIssuesPerRun: 100 + exemptLabels: + - "good first issue" + - "triage" + - "bug: external" + - "type: bug" + - "type: feature request" + - "needs: investigation" + exemptAssigned: true + exemptProjects: true + exemptMilestones: true + label: "ionitron: stale issue" + message: > + Thanks for the issue! This issue is being closed due to inactivity. If this is still + an issue with the latest version of Ionic, please create a new issue and ensure the + template is fully filled out. + + + Thank you for using Ionic! + close: true + lock: true + dryRun: false + +noReply: + days: 14 + maxIssuesPerRun: 100 + label: "needs: reply" + responseLabel: triage + exemptProjects: true + exemptMilestones: true + message: > + Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still + an issue with the latest version of Ionic, please create a new issue and ensure the + template is fully filled out. + + + Thank you for using Ionic! + close: true + lock: true + dryRun: false + +noReproduction: + days: 14 + maxIssuesPerRun: 100 + label: "ionitron: needs reproduction" + responseLabel: triage + exemptProjects: true + exemptMilestones: true + message: > + Thanks for the issue! This issue is being closed due to the lack of a code reproduction. If this is still + an issue with the latest version of Ionic, please create a new issue and ensure the + template is fully filled out. + + + Thank you for using Ionic! + close: true + lock: true + dryRun: false + +screenshot: + appId: 18001 + checkName: "build" + baseUrl: "https://screenshot.ionicframework.com" + dryRun: false diff --git a/.github/labeler.yml b/.github/labeler.yml new file mode 100644 index 00000000000..7ea70aaf7f1 --- /dev/null +++ b/.github/labeler.yml @@ -0,0 +1,22 @@ +# This is used with the label workflow which +# will triage pull requests and apply a label based on the +# paths that are modified in the pull request. +# +# For more information, see: +# https://github.com/actions/labeler + +'package: core': +- changed-files: + - any-glob-to-any-file: ['core/**/*'] + +'package: angular': +- changed-files: + - any-glob-to-any-file: ['packages/angular/**/*', 'packages/angular-*/**/*'] + +'package: react': +- changed-files: + - any-glob-to-any-file: ['packages/react/**/*', 'packages/react-*/**/*'] + +'package: vue': +- changed-files: + - any-glob-to-any-file: ['packages/vue/**/*', 'packages/vue-*/**/*'] diff --git a/.github/workflows/actions/build-angular-server/action.yml b/.github/workflows/actions/build-angular-server/action.yml new file mode 100644 index 00000000000..70c65316883 --- /dev/null +++ b/.github/workflows/actions/build-angular-server/action.yml @@ -0,0 +1,45 @@ +name: 'Build Ionic Angular Server' +description: 'Build Ionic Angular Server' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - name: πŸ•ΈοΈ Install Angular Server Dependencies + run: npm ci + shell: bash + working-directory: ./packages/angular-server + - name: πŸ”„ Sync + run: npm run sync + shell: bash + working-directory: ./packages/angular-server + - name: πŸ–ŒοΈ Lint + run: npm run lint + shell: bash + working-directory: ./packages/angular-server + # No Typecheck step here. Unlike the rollup-built packages, which report + # type errors as warnings and still exit 0, ng-packagr fails the build on + # them, so the Build step below already covers this. + - name: πŸ—οΈ Build + run: npm run build.prod + shell: bash + working-directory: ./packages/angular-server + - name: Clean core package.json + run: git checkout ./package.json + shell: bash + working-directory: ./core + - name: πŸ” Check Diff + run: git diff --exit-code + shell: bash + working-directory: ./packages/angular-server + - uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-angular-server + output: packages/angular-server/AngularServerBuild.zip + paths: packages/angular-server/dist diff --git a/.github/workflows/actions/build-angular/action.yml b/.github/workflows/actions/build-angular/action.yml new file mode 100644 index 00000000000..121fa6f7da9 --- /dev/null +++ b/.github/workflows/actions/build-angular/action.yml @@ -0,0 +1,45 @@ +name: 'Build Ionic Angular' +description: 'Build Ionic Angular' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - name: πŸ•ΈοΈ Install Angular Dependencies + run: npm ci + shell: bash + working-directory: ./packages/angular + - name: πŸ”„ Sync + run: npm run sync + shell: bash + working-directory: ./packages/angular + - name: πŸ–ŒοΈ Lint + run: npm run lint + shell: bash + working-directory: ./packages/angular + # No Typecheck step here. Unlike the rollup-built packages, which report + # type errors as warnings and still exit 0, ng-packagr fails the build on + # them, so the Build step below already covers this. + - name: πŸ—οΈ Build + run: npm run build + shell: bash + working-directory: ./packages/angular + - name: Clean core package.json + run: git checkout ./package.json + shell: bash + working-directory: ./core + - name: πŸ” Check Diff + run: git diff --exit-code + shell: bash + working-directory: ./packages/angular + - uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-angular + output: ./packages/angular/AngularBuild.zip + paths: ./packages/angular/dist ./packages/angular/css diff --git a/.github/workflows/actions/build-core-stencil-prerelease/action.yml b/.github/workflows/actions/build-core-stencil-prerelease/action.yml new file mode 100644 index 00000000000..f1e33c8b55e --- /dev/null +++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml @@ -0,0 +1,52 @@ +name: 'Build Ionic Core with Stencil Prerelease' +description: 'Build Ionic Core with a Prerelease Build of Stencil' +inputs: + stencil-core-version: + description: 'The NPM tag of @stencil/core to install.' + type: string + required: true + stencil-react-output-target-version: + description: 'The NPM tag of @stencil/react-output-target to install.' + type: string + required: true +runs: + using: 'composite' + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + + - name: πŸ•ΈοΈ Install Core Dependencies + run: npm ci + working-directory: ./core + shell: bash + - name: πŸ“¦ Install Stencil Core ${{ inputs.stencil-core-version }} + working-directory: ./core + run: npm i @stencil/core@${{ inputs.stencil-core-version }} + shell: bash + - name: πŸ“¦ Install Stencil React Output Target ${{ inputs.stencil-react-output-target-version }} + working-directory: ./core + run: npm i @stencil/react-output-target@${{ inputs.stencil-react-output-target-version }} + shell: bash + - name: πŸ—οΈ Build Core + run: npm run build -- --ci --debug --verbose + working-directory: ./core + shell: bash + - name: πŸ” Verify Lazy Imports + run: npm run test.lazy-imports + working-directory: ./core + shell: bash + - name: πŸ•ΈοΈ Install React Package Dependencies + run: npm ci + working-directory: ./packages/react + shell: bash + - name: πŸ—οΈ Lint React Package + run: npm run lint + working-directory: ./packages/react + shell: bash + - uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-core + output: core/CoreBuild.zip + paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/package.json packages/react/src/components/components.ts diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml new file mode 100644 index 00000000000..068eab5c471 --- /dev/null +++ b/.github/workflows/actions/build-core/action.yml @@ -0,0 +1,40 @@ +name: 'Build Ionic Core' +description: 'Build Ionic Core' +inputs: + ionicons-version: + description: 'The NPM tag of ionicons to install.' + type: string + required: false +runs: + using: 'composite' + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - name: πŸ•ΈοΈ Install Dependencies + run: npm install + working-directory: ./core + shell: bash + # If an Ionicons version was specified install that. + # Otherwise just use the version defined in the package.json. + - name: πŸ“¦ Install Ionicons Version + if: inputs.ionicons-version != '' + run: npm install ionicons@${{ inputs.ionicons-version }} + working-directory: ./core + shell: bash + - name: πŸ—οΈ Build Core + run: npm run build -- --ci + working-directory: ./core + shell: bash + - name: πŸ” Verify Lazy Imports + run: npm run test.lazy-imports + working-directory: ./core + shell: bash + - uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-core + output: core/CoreBuild.zip + # Include generated proxy files from Stencil output targets so + # framework builds can detect when they need to be updated + paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/lazy/directives/proxies.ts packages/angular/src/lazy/directives/proxies-list.ts packages/angular/src/standalone/directives packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts diff --git a/.github/workflows/actions/build-react-router/action.yml b/.github/workflows/actions/build-react-router/action.yml new file mode 100644 index 00000000000..bb2cbb27eea --- /dev/null +++ b/.github/workflows/actions/build-react-router/action.yml @@ -0,0 +1,51 @@ +name: 'Build Ionic React Router' +description: 'Build Ionic React Router' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-react + path: ./packages/react + filename: ReactBuild.zip + - name: πŸ•ΈοΈ Install Dependencies + run: npm ci + shell: bash + working-directory: ./packages/react-router + - name: πŸ”„ Sync + run: npm run sync + shell: bash + working-directory: ./packages/react-router + - name: πŸ–ŒοΈ Lint + run: npm run lint + shell: bash + working-directory: ./packages/react-router + # The rollup build reports type errors as warnings and still succeeds, so + # this step is what keeps the package type-clean. + - name: πŸ”Ž Typecheck + run: npm run typecheck + shell: bash + working-directory: ./packages/react-router + - name: πŸ—οΈ Build + run: npm run build + shell: bash + working-directory: ./packages/react-router + - name: Clean package.json updates + run: git checkout ./core/package.json ./packages/react/package.json + shell: bash + - name: πŸ” Check Diff + run: git diff --exit-code + shell: bash + - uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-react-router + output: packages/react-router/ReactRouterBuild.zip + paths: packages/react-router/dist diff --git a/.github/workflows/actions/build-react/action.yml b/.github/workflows/actions/build-react/action.yml new file mode 100644 index 00000000000..b7d3ac6b99a --- /dev/null +++ b/.github/workflows/actions/build-react/action.yml @@ -0,0 +1,50 @@ +name: 'Build Ionic React' +description: 'Build Ionic React' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - name: πŸ•ΈοΈ Install React Dependencies + run: npm ci + shell: bash + working-directory: ./packages/react + - name: πŸ”„ Sync + run: npm run sync + shell: bash + working-directory: ./packages/react + - name: πŸ–ŒοΈ Lint + run: npm run lint + shell: bash + working-directory: ./packages/react + # The rollup build reports type errors as warnings and still succeeds, so + # this step is what keeps the package type-clean. + - name: πŸ”Ž Typecheck + run: npm run typecheck + shell: bash + working-directory: ./packages/react + - name: πŸ—οΈ Build + run: npm run build + shell: bash + working-directory: ./packages/react + - name: πŸ§ͺ Test Spec + run: npm run test.spec + shell: bash + working-directory: ./packages/react + - uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-react + output: packages/react/ReactBuild.zip + paths: packages/react/dist packages/react/css packages/react/package.json + - name: Clean package.json updates + run: git checkout ./core/package.json ./packages/react/package.json + shell: bash + - name: πŸ” Check Diff + run: git diff --exit-code + shell: bash diff --git a/.github/workflows/actions/build-vue-router/action.yml b/.github/workflows/actions/build-vue-router/action.yml new file mode 100644 index 00000000000..68972ef2324 --- /dev/null +++ b/.github/workflows/actions/build-vue-router/action.yml @@ -0,0 +1,51 @@ +name: 'Build Ionic Vue Router' +description: 'Builds Ionic Vue Router' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-vue + path: ./packages/vue + filename: VueBuild.zip + - name: πŸ•ΈοΈ Install Vue Router Dependencies + run: npm ci + shell: bash + working-directory: ./packages/vue-router + - name: πŸ”„ Sync + run: npm run sync + shell: bash + working-directory: ./packages/vue-router + - name: πŸ–ŒοΈ Lint + run: npm run lint + shell: bash + working-directory: ./packages/vue-router + # The rollup build reports type errors as warnings and still succeeds, so + # this step is what keeps the package type-clean. + - name: πŸ”Ž Typecheck + run: npm run typecheck + shell: bash + working-directory: ./packages/vue-router + - name: πŸ—οΈ Build + run: npm run build + shell: bash + working-directory: ./packages/vue-router + - name: Clean package.json updates + run: git checkout ./core/package.json + shell: bash + - name: πŸ” Check Diff + run: git diff --exit-code + shell: bash + - uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-vue-router + output: ./packages/vue-router/VueRouterBuild.zip + paths: packages/vue-router/dist diff --git a/.github/workflows/actions/build-vue/action.yml b/.github/workflows/actions/build-vue/action.yml new file mode 100644 index 00000000000..22c731e99ad --- /dev/null +++ b/.github/workflows/actions/build-vue/action.yml @@ -0,0 +1,46 @@ +name: 'Build Ionic Vue' +description: 'Build Ionic Vue' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - name: πŸ•ΈοΈ Install Vue Dependencies + run: npm ci + shell: bash + working-directory: ./packages/vue + - name: πŸ”„ Sync + run: npm run sync + shell: bash + working-directory: ./packages/vue + - name: πŸ–ŒοΈ Lint + run: npm run lint + shell: bash + working-directory: ./packages/vue + # The rollup build reports type errors as warnings and still succeeds, so + # this step is what keeps the package type-clean. + - name: πŸ”Ž Typecheck + run: npm run typecheck + shell: bash + working-directory: ./packages/vue + - name: πŸ—οΈ Build + run: npm run build + shell: bash + working-directory: ./packages/vue + - name: Clean package.json updates + run: git checkout ./core/package.json ./packages/react/package.json + shell: bash + - name: πŸ” Check Diff + run: git diff --exit-code + shell: bash + - uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-vue + output: packages/vue/VueBuild.zip + paths: packages/vue/dist packages/vue/css diff --git a/.github/workflows/actions/download-archive/action.yml b/.github/workflows/actions/download-archive/action.yml new file mode 100644 index 00000000000..97f07f8627a --- /dev/null +++ b/.github/workflows/actions/download-archive/action.yml @@ -0,0 +1,19 @@ +name: 'Ionic Framework Archive Download' +description: 'Downloads and decompresses an archive from a previous job' +inputs: + path: + description: 'Input archive name' + filename: + description: 'Input file name' + name: + description: 'Archive name' +runs: + using: 'composite' + steps: + - uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1 + with: + name: ${{ inputs.name }} + path: ${{ inputs.path }} + - name: πŸ”Ž Extract Archive + run: unzip -q -o ${{ inputs.path }}/${{ inputs.filename }} + shell: bash diff --git a/.github/workflows/actions/test-angular-e2e/action.yml b/.github/workflows/actions/test-angular-e2e/action.yml new file mode 100644 index 00000000000..8a15bfb5037 --- /dev/null +++ b/.github/workflows/actions/test-angular-e2e/action.yml @@ -0,0 +1,46 @@ +name: 'Test Angular E2E' +description: 'Test Angular E2E' +inputs: + app: + description: 'The specific test application' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-angular + path: ./packages/angular + filename: AngularBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-angular-server + path: ./packages/angular-server + filename: AngularServerBuild.zip + - name: πŸ§ͺ Create Test App + run: ./build.sh ${{ inputs.app }} + shell: bash + working-directory: ./packages/angular/test + - name: πŸ•ΈοΈ Install Dependencies + run: npm install + shell: bash + working-directory: ./packages/angular/test/build/${{ inputs.app }} + - name: πŸ“¦ Install Playwright Browsers + run: npx playwright install chromium + shell: bash + working-directory: ./packages/angular/test/build/${{ inputs.app }} + - name: πŸ”„ Sync Built Changes + run: npm run sync + shell: bash + working-directory: ./packages/angular/test/build/${{ inputs.app }} + - name: πŸ§ͺ Run Tests + run: npm run test + shell: bash + working-directory: ./packages/angular/test/build/${{ inputs.app }} diff --git a/.github/workflows/actions/test-core-clean-build/action.yml b/.github/workflows/actions/test-core-clean-build/action.yml new file mode 100644 index 00000000000..f6275acbee5 --- /dev/null +++ b/.github/workflows/actions/test-core-clean-build/action.yml @@ -0,0 +1,30 @@ +name: 'Test Core Clean Build' +description: 'Test Core Clean Build' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - name: Clean package.json updates + run: git checkout ./core/package.json ./packages/react/package.json + shell: bash + - name: πŸ” Check Diff + run: | + git diff --exit-code || { + echo -e "\033[1;31m⚠️ Error: Differences Detected ⚠️\033[0m" + echo -e "\033[1;31mThere are uncommitted changes between the build outputs from CI and your branch.\033[0m" + echo -e "\033[1;31mPlease ensure you have followed these steps:\033[0m" + echo -e "\033[1;31m1. Run 'npm run build' locally to generate the latest build output.\033[0m" + echo -e "\033[1;31m2. Commit and push all necessary changes to your branch.\033[0m" + echo -e "\033[1;31m3. Compare and validate the differences before proceeding.\033[0m" + exit 1 + } + shell: bash + working-directory: ./core diff --git a/.github/workflows/actions/test-core-lint/action.yml b/.github/workflows/actions/test-core-lint/action.yml new file mode 100644 index 00000000000..66a3036ef04 --- /dev/null +++ b/.github/workflows/actions/test-core-lint/action.yml @@ -0,0 +1,27 @@ +name: 'Test Core Lint' +description: 'Test Core Lint' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - name: πŸ•ΈοΈ Install Dependencies + run: npm ci + working-directory: ./core + shell: bash + - name: Clean core package.json + run: git checkout ./package.json + shell: bash + working-directory: ./core + - name: πŸ–ŒοΈ Lint + run: npm run lint + shell: bash + working-directory: ./core + # Lint changes should be pushed + # to the branch before the branch + # is merge eligible. + - name: πŸ”Ž Check Lint Results + run: git diff --exit-code + shell: bash + working-directory: ./core diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml new file mode 100644 index 00000000000..379ce934edc --- /dev/null +++ b/.github/workflows/actions/test-core-screenshot/action.yml @@ -0,0 +1,85 @@ +name: 'Test Core Screenshot' +description: 'Test Core Screenshot' +inputs: + shard: + description: 'Playwright Test Shard (ex: 2)' + totalShards: + 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' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - name: πŸ•ΈοΈ Install Dependencies + run: npm install + shell: bash + working-directory: ./core + - name: πŸ§ͺ Test + if: inputs.update != 'true' + run: npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} + shell: bash + working-directory: ./core + - name: Clean core package.json + run: git checkout ./package.json + shell: bash + working-directory: ./core + - name: Test and Update + id: test-and-update + if: inputs.update == 'true' + # Keep track of the files that were + # changed so they can be correctly restored + # in the combine step. + # To do this, we move only the changed files + # to a separate directory, while preserving the + # directory structure of the source. + # When, we create and archive of these results + # so that the combine step can simply + # unzip and move the changed files into place. + # We have extra logic added so that job runners + # that do not have any new screenshots do not create + # an unnecessary .zip. + # Note that we need to unzip directory to be "core" + # which is why we not using the upload-archive + # composite step here. + run: | + npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots='changed' + git add src/\*.png --force + mkdir updated-screenshots + cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots + if [ -d core/updated-screenshots/core ]; then + echo "hasUpdatedScreenshots=$(echo 'true')" >> $GITHUB_OUTPUT + cd core/updated-screenshots + zip -q -r ../../UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip core + fi + shell: bash + working-directory: ./core + - name: πŸ“¦ Archive Updated Screenshots + if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true' + uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1 + with: + name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }} + path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip + - name: πŸ“¦ Archive Test Results + # The always() ensures that this step + # runs even if the previous step fails. + # We want the test results to be archived + # even if the test fails in the previous + # step, otherwise there would be no way + # to debug these tests. + if: always() + uses: ./.github/workflows/actions/upload-archive + with: + name: test-results-${{ inputs.shard }}-${{ inputs.totalShards }} + output: core/TestResults-${{ inputs.shard }}-${{ inputs.totalShards }}.zip + paths: core/playwright-report diff --git a/.github/workflows/actions/test-core-spec/action.yml b/.github/workflows/actions/test-core-spec/action.yml new file mode 100644 index 00000000000..f33ab0aa3e3 --- /dev/null +++ b/.github/workflows/actions/test-core-spec/action.yml @@ -0,0 +1,29 @@ +name: 'Test Core Spec' +description: 'Test Core Spec' +inputs: + stencil-version: + description: 'The NPM tag of @stencil/core to install.' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - name: πŸ•ΈοΈ Install Dependencies + run: npm ci + working-directory: ./core + shell: bash + - name: πŸ“¦ Install Stencil ${{ inputs.stencil-version }} + run: npm install @stencil/core@${{ inputs.stencil-version }} + shell: bash + working-directory: ./core + if: ${{ inputs.stencil-version != '' }} + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - name: πŸ§ͺ Test + run: npm run test.spec -- --ci + shell: bash + working-directory: ./core diff --git a/.github/workflows/actions/test-react-e2e/action.yml b/.github/workflows/actions/test-react-e2e/action.yml new file mode 100644 index 00000000000..af6100bdb07 --- /dev/null +++ b/.github/workflows/actions/test-react-e2e/action.yml @@ -0,0 +1,47 @@ +name: 'Test React E2E' +description: 'Test React E2E' +inputs: + app: + description: 'The specific test application' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-react + path: ./packages/react + filename: ReactBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-react-router + path: ./packages/react-router + filename: ReactRouterBuild.zip + - name: πŸ§ͺ Create Test App + run: ./build.sh ${{ inputs.app }} + shell: bash + working-directory: ./packages/react/test + - name: πŸ•ΈοΈ Install Dependencies + run: npm install + shell: bash + working-directory: ./packages/react/test/build/${{ inputs.app }} + - name: πŸ”„ Sync Built Changes + run: npm run sync + shell: bash + working-directory: ./packages/react/test/build/${{ inputs.app }} + - name: πŸ—οΈ Build + run: npm run build + shell: bash + working-directory: ./packages/react/test/build/${{ inputs.app }} + - name: πŸ§ͺ Run Tests + run: npm run e2e + shell: bash + working-directory: ./packages/react/test/build/${{ inputs.app }} + diff --git a/.github/workflows/actions/test-react-router-e2e/action.yml b/.github/workflows/actions/test-react-router-e2e/action.yml new file mode 100644 index 00000000000..beea150b549 --- /dev/null +++ b/.github/workflows/actions/test-react-router-e2e/action.yml @@ -0,0 +1,56 @@ +name: 'Test React Router E2E' +description: 'Test React Router' +inputs: + app: + description: 'The specific test application' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-react + path: ./packages/react + filename: ReactBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-react-router + path: ./packages/react-router + filename: ReactRouterBuild.zip + - name: πŸ§ͺ Create Test App + run: ./build.sh ${{ inputs.app }} + shell: bash + working-directory: ./packages/react-router/test + - name: πŸ•ΈοΈ Install Dependencies + run: npm install + shell: bash + working-directory: ./packages/react-router/test/build/${{ inputs.app }} + - name: πŸ“¦ Install Playwright Browsers + run: npx playwright install chromium + shell: bash + working-directory: ./packages/react-router/test/build/${{ inputs.app }} + - name: πŸ”„ Sync Built Changes + run: npm run sync + shell: bash + working-directory: ./packages/react-router/test/build/${{ inputs.app }} + - name: πŸ—οΈ Build + run: npm run build + shell: bash + working-directory: ./packages/react-router/test/build/${{ inputs.app }} + - name: πŸ§ͺ Run Cypress Tests + run: npm run e2e + shell: bash + working-directory: ./packages/react-router/test/build/${{ inputs.app }} + - name: 🎭 Run Playwright Tests + run: npx playwright test --retries=2 + env: + CI: true + shell: bash + working-directory: ./packages/react-router/test/build/${{ inputs.app }} diff --git a/.github/workflows/actions/test-vue-e2e/action.yml b/.github/workflows/actions/test-vue-e2e/action.yml new file mode 100644 index 00000000000..2316e019a46 --- /dev/null +++ b/.github/workflows/actions/test-vue-e2e/action.yml @@ -0,0 +1,56 @@ +name: 'Test Vue E2E' +description: 'Test Vue E2E' +inputs: + app: + description: 'The specific test application' +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-vue + path: ./packages/vue + filename: VueBuild.zip + - uses: ./.github/workflows/actions/download-archive + with: + name: ionic-vue-router + path: ./packages/vue-router + filename: VueRouterBuild.zip + - name: πŸ§ͺ Create Test App + run: ./build.sh ${{ inputs.app }} + shell: bash + working-directory: ./packages/vue/test + - name: πŸ“¦ Install Dependencies + run: npm install + shell: bash + working-directory: ./packages/vue/test/build/${{ inputs.app }} + - name: πŸ“¦ Install Playwright Browsers + run: npx playwright install chromium + shell: bash + working-directory: ./packages/vue/test/build/${{ inputs.app }} + - name: πŸ”„ Sync + run: npm run sync + shell: bash + working-directory: ./packages/vue/test/build/${{ inputs.app }} + - name: πŸ§ͺ Run Spec Tests + run: npm run test:unit + shell: bash + working-directory: ./packages/vue/test/build/${{ inputs.app }} + - name: πŸ§ͺ Run E2E Tests + run: npm run test:e2e + shell: bash + working-directory: ./packages/vue/test/build/${{ inputs.app }} + - name: 🎭 Run Playwright Tests + run: npx playwright test --retries=2 + env: + CI: true + shell: bash + working-directory: ./packages/vue/test/build/${{ inputs.app }} diff --git a/.github/workflows/actions/update-reference-screenshots/action.yml b/.github/workflows/actions/update-reference-screenshots/action.yml new file mode 100644 index 00000000000..844f4e6d2ac --- /dev/null +++ b/.github/workflows/actions/update-reference-screenshots/action.yml @@ -0,0 +1,58 @@ +name: 'Update Reference Screenshots' +description: 'Update Reference Screenshots' + +on: + workflow_dispatch: + +runs: + using: 'composite' + steps: + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + - uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1 + with: + path: ./artifacts + - name: πŸ”Ž Extract Archives + # This finds all .zip files in the ./artifacts + # directory, including nested directories. + # It then unzips every .zip to the root directory + run: | + find . -type f -name 'UpdatedScreenshots-*.zip' -exec unzip -q -o -d ../ {} \; + shell: bash + working-directory: ./artifacts + - name: Clean core package.json + run: git checkout ./package.json + shell: bash + working-directory: ./core + - name: πŸ“Έ Push Screenshots + # Configure user as Ionitron + # and push only the changed .png snapshots + # to the remote branch. + # Non-Linux screenshots are in .gitignore + # to prevent local screenshots from getting + # pushed to Git. + run: | + git config user.name ionitron + git config user.email hi@ionicframework.com + + # This adds an empty entry for new + # screenshot files so we can track them with + # git diff + git add src/\*.png -N + + 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 + # This actually adds the contents + # of the screenshots (including new ones) + git add src/\*.png + git commit -m "chore(): add updated snapshots" + git push + fi + + shell: bash + working-directory: ./core diff --git a/.github/workflows/actions/upload-archive/action.yml b/.github/workflows/actions/upload-archive/action.yml new file mode 100644 index 00000000000..3cfff8853fc --- /dev/null +++ b/.github/workflows/actions/upload-archive/action.yml @@ -0,0 +1,19 @@ +name: 'Ionic Framework Archive Upload' +description: 'Compresses and uploads an archive to be reused across jobs' +inputs: + paths: + description: 'Paths to files or directories to archive' + output: + description: 'Output file name' + name: + description: 'Archive name' +runs: + using: 'composite' + steps: + - name: πŸ—„οΈ Create Archive + run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }} + shell: bash + - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1 + with: + name: ${{ inputs.name }} + path: ${{ inputs.output }} diff --git a/.github/workflows/assign-issues.yml b/.github/workflows/assign-issues.yml new file mode 100644 index 00000000000..fc254b78976 --- /dev/null +++ b/.github/workflows/assign-issues.yml @@ -0,0 +1,18 @@ +name: Assign issues to triage + +on: + issues: + types: [opened] + +jobs: + auto-assign: + runs-on: ubuntu-latest + permissions: + issues: write + steps: + - name: 'Auto-assign issue' + uses: pozil/auto-assign-issue@af6beea6bdf1e8eb373f061c5bc168681fc6d011 # v4.0.1 + with: + assignees: brandyscarney, thetaPC, ShaneK + numOfAssignee: 1 + allowSelfAssign: false diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 00000000000..90d65ee18f0 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,217 @@ +name: 'Ionic Framework Build' + +on: + pull_request: + branches: [ '**' ] + merge_group: + workflow_dispatch: + inputs: + ionicons_npm_release_tag: + required: false + type: string + description: What version of ionicons should be pulled from NPM? Use this if you want to test a custom version of Ionicons with Ionic. + +# When pushing a new commit we should +# cancel the previous test run to not +# consume more runners than we need to. +concurrency: + group: ${{ github.ref }} + cancel-in-progress: true + +jobs: + build-core: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-core + with: + ionicons-version: ${{ inputs.ionicons_npm_release_tag }} + + test-core-clean-build: + needs: [build-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-core-clean-build + + test-core-lint: + needs: [build-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-core-lint + + test-core-spec: + needs: [build-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-core-spec + + test-core-screenshot: + strategy: + matrix: + # Divide the tests into n buckets + # and run those buckets in parallel. + # To increase the number of shards, + # add new items to the shard array + # and change the value of totalShards + # to be the length of the shard array. + shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] + totalShards: [20] + needs: [build-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-core-screenshot + with: + shard: ${{ matrix.shard }} + totalShards: ${{ matrix.totalShards }} + + # Screenshots are required to pass + # in order for the branch to be merge + # eligible. However, the screenshot tests + # are run on n runners where n can change + # over time. The verify-screenshots step allows + # us to have a required status check for screenshot + # results without having to manually add each + # matrix run in the branch protection rules + # Source: https://github.community/t/status-check-for-a-matrix-jobs/127354 + verify-screenshots: + if: ${{ always() }} + needs: test-core-screenshot + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-core-screenshot.result != 'success' }} + run: exit 1 + + build-vue: + needs: [build-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-vue + + build-vue-router: + needs: [build-vue] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-vue-router + + test-vue-e2e: + strategy: + fail-fast: false + matrix: + apps: [vue3] + needs: [build-vue, build-vue-router] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-vue-e2e + with: + app: ${{ matrix.apps }} + + verify-test-vue-e2e: + if: ${{ always() }} + needs: test-vue-e2e + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-vue-e2e.result != 'success' }} + run: exit 1 + + build-angular: + needs: [build-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-angular + + build-angular-server: + needs: [build-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-angular-server + + test-angular-e2e: + strategy: + fail-fast: false + matrix: + apps: [ng18, ng19, ng20, ng21, ng22] + needs: [build-angular, build-angular-server] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-angular-e2e + with: + app: ${{ matrix.apps }} + + verify-test-angular-e2e: + if: ${{ always() }} + needs: test-angular-e2e + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-angular-e2e.result != 'success' }} + run: exit 1 + + build-react: + needs: [build-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-react + + build-react-router: + needs: [build-react] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-react-router + + test-react-router-e2e: + strategy: + fail-fast: false + matrix: + apps: [reactrouter6-react18, reactrouter6-react19] + needs: [build-react, build-react-router] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-react-router-e2e + with: + app: ${{ matrix.apps }} + + verify-test-react-router-e2e: + if: ${{ always() }} + needs: test-react-router-e2e + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-react-router-e2e.result != 'success' }} + run: exit 1 + + test-react-e2e: + strategy: + fail-fast: false + matrix: + apps: [react18, react19] + needs: [build-react, build-react-router] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-react-e2e + with: + app: ${{ matrix.apps }} + + verify-test-react-e2e: + if: ${{ always() }} + needs: test-react-e2e + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-react-e2e.result != 'success' }} + run: exit 1 diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml new file mode 100644 index 00000000000..df238d50502 --- /dev/null +++ b/.github/workflows/codeql-analysis.yml @@ -0,0 +1,21 @@ +name: CodeQL + +on: + push: + branches: + - main + pull_request: + branches: + - main + +jobs: + analyze: + runs-on: ubuntu-latest + permissions: + security-events: write + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: github/codeql-action/init@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9 + with: + languages: javascript + - uses: github/codeql-action/analyze@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9 diff --git a/.github/workflows/conventional-commit.yml b/.github/workflows/conventional-commit.yml new file mode 100644 index 00000000000..65c026de5eb --- /dev/null +++ b/.github/workflows/conventional-commit.yml @@ -0,0 +1,43 @@ +name: PR Conventional Commit Validation + +on: + pull_request: + types: [opened, synchronize, reopened, edited] + +jobs: + validate-pr-title: + runs-on: ubuntu-latest + steps: + - name: Validate PR title + if: | + !contains(github.event.pull_request.title, 'release') && + !contains(github.event.pull_request.title, 'chore') + uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + # Configure that a scope must always be provided. + requireScope: true + # Configure allowed commit types + types: | + feat + fix + docs + style + refactor + perf + test + build + ci + revert + release + chore + # Configure additional validation for the subject based on a regex. + # This example ensures the subject doesn't start with an uppercase character. + subjectPattern: ^(?![A-Z]).+$ + # If `subjectPattern` is configured, you can use this property to + # override the default error message that is shown when the pattern + # doesn't match. The variables `subject` and `title` can be used + # within the message. + subjectPatternError: | + The subject "{subject}" found in the pull request title "{title}" didn't match the configured pattern. Please ensure that the subject doesn't start with an uppercase character. diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml new file mode 100644 index 00000000000..29b499e1855 --- /dev/null +++ b/.github/workflows/dev-build.yml @@ -0,0 +1,45 @@ +name: 'Ionic Dev Build' + +on: + workflow_call: + +permissions: + contents: read + id-token: write + +jobs: + create-dev-hash: + runs-on: ubuntu-latest + outputs: + dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }} + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + # A 1 is required before the timestamp + # as lerna will fail when there is a leading 0 + # See https://github.com/lerna/lerna/issues/2840 + - name: Install Dependencies + run: npm ci + shell: bash + - id: create-dev-hash + name: Create Dev Hash + run: | + echo "DEV_HASH=$(node ./.scripts/bump-version.js)-dev.1$(date +%s).1$(git log -1 --format=%H | cut -c 1-7)" >> $GITHUB_OUTPUT + shell: bash + + release-ionic: + needs: [create-dev-hash] + permissions: + contents: read + id-token: write + uses: ./.github/workflows/release-ionic.yml + with: + tag: dev + version: ${{ needs.create-dev-hash.outputs.dev-hash }} + + get-build: + name: Get your dev build! + runs-on: ubuntu-latest + needs: [create-dev-hash, release-ionic] + steps: + - run: echo ${{ needs.create-dev-hash.outputs.dev-hash }} + diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml new file mode 100644 index 00000000000..49606e47e90 --- /dev/null +++ b/.github/workflows/label.yml @@ -0,0 +1,19 @@ +# This workflow will triage pull requests and apply a label based on the +# paths that are modified in the pull request. +# +# To use this workflow, you will need to set up a .github/labeler.yml +# file with configuration. For more information, see: +# https://github.com/actions/labeler + +name: "Pull Request Labeler" +on: +- pull_request_target + +jobs: + triage: + runs-on: ubuntu-latest + steps: + - uses: actions/labeler@bf12e9b00b37c5c0ca2b87b79b2daf7891dbda13 # v7.0.0 + with: + repo-token: "${{ secrets.GITHUB_TOKEN }}" + sync-labels: true diff --git a/.github/workflows/migrate.yml b/.github/workflows/migrate.yml new file mode 100644 index 00000000000..54990664544 --- /dev/null +++ b/.github/workflows/migrate.yml @@ -0,0 +1,93 @@ +name: 'Ionic Migrate' + +# Lint, test, and build the @ionic/migrate CLI. +# +# The workflow always triggers (no trigger-level `paths` filter) so the +# `verify-migrate` gate always reports a status and can be marked a required +# check: a path-filtered *trigger* would skip the whole workflow on unrelated +# PRs, and a required check that never runs blocks merges forever. Instead the +# `changes` job detects whether the package was touched and the heavy job runs +# only then; `verify-migrate` reports success either way (skipped == fine). +on: + pull_request: + branches: [ '**' ] + merge_group: + workflow_dispatch: + +# Lint/test/build only reads the repo; keep the token least-privilege. +permissions: + contents: read + +concurrency: + group: migrate-${{ github.ref }} + cancel-in-progress: true + +jobs: + changes: + runs-on: ubuntu-latest + outputs: + migrate: ${{ steps.filter.outputs.migrate }} + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + with: + # Full history so the PR base commit is reachable for the diff below. + fetch-depth: 0 + - name: Detect migrate changes + id: filter + shell: bash + run: | + # Fail the step (not the else branch) if git diff itself errors, so a + # broken detector can't masquerade as "package untouched". + set -euo pipefail + # Only pull_request runs get the path optimization. merge_group and + # manual dispatch run the (fast) tests unconditionally, so the merge + # queue never blocks on a check that was skipped by a stale diff. + if [ "${{ github.event_name }}" != "pull_request" ]; then + echo "migrate=true" >> "$GITHUB_OUTPUT" + exit 0 + fi + base="${{ github.event.pull_request.base.sha }}" + changed="$(git diff --name-only "$base" HEAD)" + if echo "$changed" \ + | grep -qE '^(packages/migrate/|\.github/workflows/migrate\.yml$)'; then + echo "migrate=true" >> "$GITHUB_OUTPUT" + else + echo "migrate=false" >> "$GITHUB_OUTPUT" + fi + + test-migrate: + needs: changes + if: ${{ needs.changes.outputs.migrate == 'true' }} + runs-on: ubuntu-latest + defaults: + run: + working-directory: ./packages/migrate + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + cache: 'npm' + cache-dependency-path: packages/migrate/package-lock.json + - name: Install Dependencies + run: npm ci + - name: Lint + run: npm run lint + - name: Test + run: npm test + - name: Build + run: npm run build + + # Always-running required gate. See header comment for why this exists. + # Green when the package was untouched (test-migrate skipped) or tests pass; + # red when detection failed or the tests actually failed. + verify-migrate: + if: ${{ always() }} + needs: [ changes, test-migrate ] + runs-on: ubuntu-latest + steps: + - name: Check results + # changes.result != 'success' catches a failed/cancelled detector, + # whose skipped test-migrate would otherwise slip through as green. + if: ${{ needs.changes.result != 'success' || needs.test-migrate.result == 'failure' || needs.test-migrate.result == 'cancelled' }} + run: exit 1 diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml new file mode 100644 index 00000000000..3f81651868f --- /dev/null +++ b/.github/workflows/nightly.yml @@ -0,0 +1,40 @@ +name: 'Ionic Nightly Build' + +on: + workflow_call: + +permissions: + contents: read + id-token: write + +jobs: + create-nightly-hash: + runs-on: ubuntu-latest + outputs: + nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }} + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + # A 1 is required before the timestamp + # as lerna will fail when there is a leading 0 + # See https://github.com/lerna/lerna/issues/2840 + - name: Install Dependencies + run: npm ci + shell: bash + - id: create-nightly-hash + name: Create Nightly Hash + # The date should output YYYYMMDD + # so that it is human readable + run: | + echo "NIGHTLY_HASH=$(node ./.scripts/bump-version.js)-nightly.$(date +%Y%m%d)" >> $GITHUB_OUTPUT + shell: bash + + release-ionic: + needs: [create-nightly-hash] + permissions: + contents: read + id-token: write + uses: ./.github/workflows/release-ionic.yml + secrets: inherit + with: + tag: nightly + version: ${{ needs.create-nightly-hash.outputs.nightly-hash }} diff --git a/.github/workflows/release-ionic.yml b/.github/workflows/release-ionic.yml new file mode 100644 index 00000000000..e8b7030966d --- /dev/null +++ b/.github/workflows/release-ionic.yml @@ -0,0 +1,209 @@ +name: 'Release Ionic' + +on: + workflow_call: + inputs: + version: + description: 'The type of version to release.' + type: string + required: true + tag: + description: 'The tag to publish to NPM.' + type: string + required: true + preid: + description: 'The prerelease identifier used when doing a prerelease.' + type: string + +permissions: + contents: read + id-token: write + +jobs: + release-core: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/actions/publish-npm + with: + scope: '@ionic/core' + tag: ${{ inputs.tag }} + version: ${{ inputs.version }} + preid: ${{ inputs.preid }} + working-directory: 'core' + - name: Cache Built @ionic/core + uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-core + output: core/CoreBuild.zip + paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts + - name: Cache Built @ionic/docs + uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-docs + output: packages/docs/DocsBuild.zip + paths: packages/docs/core.json packages/docs/core.d.ts + + release-docs: + needs: [release-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: Restore @ionic/docs built cache + uses: ./.github/workflows/actions/download-archive + with: + name: ionic-docs + path: ./packages/docs + filename: DocsBuild.zip + - uses: ./.github/actions/publish-npm + with: + scope: '@ionic/docs' + tag: ${{ inputs.tag }} + version: ${{ inputs.version }} + preid: ${{ inputs.preid }} + working-directory: 'packages/docs' + + release-angular: + needs: [release-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: Restore @ionic/core built cache + uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/actions/publish-npm + with: + scope: '@ionic/angular' + tag: ${{ inputs.tag }} + version: ${{ inputs.version }} + preid: ${{ inputs.preid }} + working-directory: 'packages/angular' + - name: Cache Built @ionic/angular + uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-angular + output: packages/angular/AngularBuild.zip + paths: packages/angular/dist packages/angular/css + + release-react: + needs: [release-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: Restore @ionic/core built cache + uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/actions/publish-npm + with: + scope: '@ionic/react' + tag: ${{ inputs.tag }} + version: ${{ inputs.version }} + preid: ${{ inputs.preid }} + working-directory: 'packages/react' + - name: Cache Built @ionic/react + uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-react + output: packages/react/ReactBuild.zip + paths: packages/react/dist packages/react/css + + release-vue: + needs: [release-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: Restore @ionic/core built cache + uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/actions/publish-npm + with: + scope: '@ionic/vue' + tag: ${{ inputs.tag }} + version: ${{ inputs.version }} + preid: ${{ inputs.preid }} + working-directory: 'packages/vue' + - name: Cache Built @ionic/vue + uses: ./.github/workflows/actions/upload-archive + with: + name: ionic-vue + output: packages/vue/VueBuild.zip + paths: packages/vue/dist packages/vue/css + + release-angular-server: + needs: [release-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: Restore @ionic/core built cache + uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - uses: ./.github/actions/publish-npm + with: + scope: '@ionic/angular-server' + tag: ${{ inputs.tag }} + version: ${{ inputs.version }} + preid: ${{ inputs.preid }} + working-directory: 'packages/angular-server' + folder: './dist' + + release-react-router: + needs: [release-react] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: Restore @ionic/core built cache + uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - name: Restore @ionic/react built cache + uses: ./.github/workflows/actions/download-archive + with: + name: ionic-react + path: ./packages/react + filename: ReactBuild.zip + - uses: ./.github/actions/publish-npm + with: + scope: '@ionic/react-router' + tag: ${{ inputs.tag }} + version: ${{ inputs.version }} + preid: ${{ inputs.preid }} + working-directory: 'packages/react-router' + + release-vue-router: + needs: [release-vue] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: Restore @ionic/core built cache + uses: ./.github/workflows/actions/download-archive + with: + name: ionic-core + path: ./core + filename: CoreBuild.zip + - name: Restore @ionic/vue built cache + uses: ./.github/workflows/actions/download-archive + with: + name: ionic-vue + path: ./packages/vue + filename: VueBuild.zip + - uses: ./.github/actions/publish-npm + with: + scope: '@ionic/vue-router' + tag: ${{ inputs.tag }} + version: ${{ inputs.version }} + preid: ${{ inputs.preid }} + working-directory: 'packages/vue-router' diff --git a/.github/workflows/release-migrate.yml b/.github/workflows/release-migrate.yml new file mode 100644 index 00000000000..d119e6830de --- /dev/null +++ b/.github/workflows/release-migrate.yml @@ -0,0 +1,72 @@ +name: 'Release @ionic/migrate' + +on: + workflow_call: + inputs: + tag: + description: 'Which npm tag should this be published to?' + required: true + type: string + +permissions: + contents: read + id-token: write + +jobs: + release-migrate: + runs-on: ubuntu-latest + defaults: + run: + working-directory: ./packages/migrate + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: 🟒 Configure Node for Publish + uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: 24.x + registry-url: 'https://registry.npmjs.org' + scope: '@ionic' + cache: 'npm' + cache-dependency-path: packages/migrate/package-lock.json + - name: πŸ“¦ Install latest npm + run: npm install -g npm@latest + shell: bash + - name: πŸ•ΈοΈ Install Dependencies + run: npm ci + shell: bash + - name: πŸ”Ž Resolve Version + id: resolve-version + run: | + set -euo pipefail + version="$(node -p "require('./package.json').version")" + echo "version=$version" >> "$GITHUB_OUTPUT" + echo "Releasing @ionic/migrate@$version to the '${{ inputs.tag }}' tag" + shell: bash + - name: 🚧 Ensure Version Is Unpublished + run: | + set -euo pipefail + version="${{ steps.resolve-version.outputs.version }}" + # `npm view` exits non-zero both for an unpublished version and for a + # package that does not exist yet, and the latter is the expected state + # on the very first release. So inspect stdout rather than the exit + # code: empty output means the version is free to publish. + if [ -n "$(npm view "@ionic/migrate@$version" version 2>/dev/null || true)" ]; then + echo "::error::@ionic/migrate@$version is already published. Bump the version in packages/migrate/package.json." + exit 1 + fi + shell: bash + - name: πŸ” Lint + run: npm run lint + shell: bash + - name: πŸ§ͺ Test + run: npm test + shell: bash + - name: πŸ—οΈ Run Build + run: npm run build + shell: bash + # `--access public` is not passed here because publishConfig.access in + # package.json already sets it; a scoped package would otherwise default to + # restricted on its first publish. + - name: πŸš€ Publish to NPM + run: npm publish --tag ${{ inputs.tag }} --provenance + shell: bash diff --git a/.github/workflows/release-orchestrator.yml b/.github/workflows/release-orchestrator.yml new file mode 100644 index 00000000000..67964f340d5 --- /dev/null +++ b/.github/workflows/release-orchestrator.yml @@ -0,0 +1,92 @@ +name: 'Release - Ionic Framework' + +on: + schedule: + # Run every Monday-Friday + # at 6:00 UTC (6:00 am UTC) + - cron: '00 06 * * 1-5' + workflow_dispatch: + inputs: + release-type: + description: 'Which Ionic release workflow should run?' + required: true + type: choice + default: dev + options: + - dev + - production + - migrate + version: + description: 'Which version should be published? (Only for production releases)' + required: false + type: choice + options: + - patch + - minor + - major + - prepatch + - preminor + - premajor + - prerelease + tag: + description: 'Which npm tag should this be published to? (Only for production and migrate releases)' + required: false + type: choice + default: latest + options: + - latest + - next + preid: + description: 'Which prerelease identifier should be used? (Only for production releases)' + required: false + type: choice + default: '' + options: + - '' + - alpha + - beta + - rc + - next + +permissions: + contents: read + id-token: write + +jobs: + run-nightly: + if: ${{ github.event_name == 'schedule' }} + permissions: + contents: read + id-token: write + uses: ./.github/workflows/nightly.yml + secrets: inherit + + run-dev: + if: ${{ github.event_name == 'workflow_dispatch' && inputs.release-type == 'dev' }} + permissions: + contents: read + id-token: write + uses: ./.github/workflows/dev-build.yml + secrets: inherit + + run-migrate: + if: ${{ github.event_name == 'workflow_dispatch' && inputs.release-type == 'migrate' }} + permissions: + contents: read + id-token: write + uses: ./.github/workflows/release-migrate.yml + secrets: inherit + with: + tag: ${{ inputs.tag }} + + run-production: + if: ${{ github.event_name == 'workflow_dispatch' && inputs.release-type == 'production' }} + permissions: + contents: write + id-token: write + uses: ./.github/workflows/release.yml + secrets: inherit + with: + version: ${{ inputs.version }} + tag: ${{ inputs.tag }} + preid: ${{ inputs.preid }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 00000000000..bb552039012 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,148 @@ +name: 'Ionic Production Release' + +on: + workflow_call: + inputs: + version: + description: 'Which version should be published?' + required: true + type: string + tag: + description: 'Which npm tag should this be published to?' + required: true + type: string + preid: + description: 'Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease".' + required: false + type: string + +permissions: + contents: read + id-token: write + +jobs: + validate_version: + name: βœ… Validate Version Input + runs-on: ubuntu-latest + steps: + - name: πŸ”Ž Ensure version is allowed + env: + VERSION: ${{ inputs.version }} + run: | + case "$VERSION" in + patch|minor|major|prepatch|preminor|premajor|prerelease) + exit 0 + ;; + *) + echo "::error::Invalid version input: '$VERSION'. Allowed values: patch, minor, major, prepatch, preminor, premajor, prerelease." + exit 1 + ;; + esac + shell: bash + + release-ionic: + needs: [validate_version] + permissions: + contents: read + id-token: write + uses: ./.github/workflows/release-ionic.yml + with: + tag: ${{ inputs.tag }} + version: ${{ inputs.version }} + preid: ${{ inputs.preid }} + + finalize-release: + needs: [release-ionic] + runs-on: ubuntu-latest + permissions: + contents: write + id-token: write + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + with: + token: ${{ secrets.IONITRON_TOKEN }} + fetch-depth: 0 + - name: Configure Identity + # Commits from github-actions do not + # trigger other GitHub Actions. As a result, + # we publish releases from Ionitron instead + # so actions run when merging the release branch + # back into main. + run: | + git config user.name ionitron + git config user.email hi@ionicframework.com + shell: bash + - name: Create GitHub Release + run: lerna version ${{ inputs.version }} --yes --force-publish='*' --conventional-commits --create-release github --preid=${{ inputs.preid }} + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + shell: bash + + update-package-lock: + # This needs to run after finalize-release + # because we also push to the repo in that + # job. If these jobs ran in parallel then it is + # possible for them to push at the same time. + needs: [finalize-release] + runs-on: ubuntu-latest + permissions: + contents: write + id-token: write + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + # Pull the latest version of the reference + # branch instead of the revision that triggered + # the workflow otherwise we won't get the commit + # created in the previous job and this next job + # will fail. + with: + ref: ${{ github.ref }} + - name: Configure Identity + # Commits from github-actions do not + # trigger other GitHub Actions. As a result, + # we push from Ionitron instead so actions + # run when merging the release branch + # back into main. + run: | + git config user.name ionitron + git config user.email hi@ionicframework.com + shell: bash + # Lerna does not automatically bump versions + # of Ionic dependencies that have changed, + # so we do that here. + - name: Bump Package Lock + run: | + lerna exec "npm install --package-lock-only" + git add . + git commit -m "chore(): update package lock files" + git push + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + shell: bash + + purge-cdn-cache: + needs: [release-ionic] + runs-on: ubuntu-latest + steps: + - name: Purge JSDelivr Cache + run: | + curl -X POST \ + https://purge.jsdelivr.net/ \ + -H 'cache-control: no-cache' \ + -H 'content-type: application/json' \ + -d '{ + "path": [ + "/npm/@ionic/core@6/dist/ionic/ionic.esm.js", + "/npm/@ionic/core@7/dist/ionic/ionic.esm.js", + "/npm/@ionic/core@8/dist/ionic/ionic.esm.js", + "/npm/@ionic/core@9/dist/ionic/ionic.esm.js", + "/npm/@ionic/core@latest/dist/ionic/ionic.esm.js", + "/npm/@ionic/core@next/dist/ionic/ionic.esm.js", + "/npm/@ionic/core@6/css/ionic.bundle.css", + "/npm/@ionic/core@7/css/ionic.bundle.css", + "/npm/@ionic/core@8/css/ionic.bundle.css", + "/npm/@ionic/core@9/css/ionic.bundle.css", + "/npm/@ionic/core@latest/css/ionic.bundle.css" + "/npm/@ionic/core@next/css/ionic.bundle.css" + ]}' + shell: bash diff --git a/.github/workflows/stencil-nightly.yml b/.github/workflows/stencil-nightly.yml new file mode 100644 index 00000000000..5953e974d15 --- /dev/null +++ b/.github/workflows/stencil-nightly.yml @@ -0,0 +1,270 @@ +# This workflow is intended to run against the `HEAD` of Stencil's primary branch. +# See https://github.com/ionic-team/stencil for contents of the repository +name: 'Stencil Nightly Build' + +on: + schedule: + # Run every Monday-Friday + # at 6:00 UTC (6:00 am UTC) + - cron: '00 06 * * 1-5' + workflow_dispatch: + inputs: + npm_release_tag_core: + required: true + type: string + description: What stencil/core version should be pulled from NPM? + default: nightly + npm_release_tag_react_output_target: + required: true + type: string + description: What stencil/react-output-target version should be pulled from NPM? + default: latest + +# When pushing a new commit we should +# cancel the previous test run to not +# consume more runners than we need to. +concurrency: + group: ${{ github.ref }} + cancel-in-progress: false + +jobs: + build-core-with-stencil-nightly: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-core-stencil-prerelease + with: + stencil-core-version: ${{ inputs.npm_release_tag_core || 'nightly' }} + stencil-react-output-target-version: ${{ inputs.npm_release_tag_react_output_target || 'latest' }} + + + test-core-clean-build: + needs: [build-core-with-stencil-nightly] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-core-clean-build + + test-core-lint: + needs: [build-core-with-stencil-nightly] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-core-lint + + test-core-spec: + needs: [build-core-with-stencil-nightly] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-core-spec + with: + stencil-version: ${{ inputs.npm_release_tag_core || 'nightly' }} + + test-core-screenshot: + strategy: + # This ensures that all screenshot shard + # failures are reported so the dev can + # review everything at once. + fail-fast: false + matrix: + # Divide the tests into n buckets + # and run those buckets in parallel. + # To increase the number of shards, + # add new items to the shard array + # and change the value of totalShards + # to be the length of the shard array. + shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] + totalShards: [20] + needs: [build-core-with-stencil-nightly] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-core-screenshot + with: + shard: ${{ matrix.shard }} + totalShards: ${{ matrix.totalShards }} + + # Screenshots are required to pass + # in order for the branch to be merge + # eligible. However, the screenshot tests + # are run on n runners where n can change + # over time. The verify-screenshots step allows + # us to have a required status check for screenshot + # results without having to manually add each + # matrix run in the branch protection rules + # Source: https://github.community/t/status-check-for-a-matrix-jobs/127354 + verify-screenshots: + if: ${{ always() }} + needs: test-core-screenshot + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-core-screenshot.result != 'success' }} + run: exit 1 + + build-vue: + needs: [build-core-with-stencil-nightly] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-vue + + build-vue-router: + needs: [build-vue] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-vue-router + + test-vue-e2e: + strategy: + fail-fast: false + matrix: + apps: [vue3] + needs: [build-vue, build-vue-router] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-vue-e2e + with: + app: ${{ matrix.apps }} + + verify-test-vue-e2e: + if: ${{ always() }} + needs: test-vue-e2e + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-vue-e2e.result != 'success' }} + run: exit 1 + + build-angular: + needs: [build-core-with-stencil-nightly] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-angular + + build-angular-server: + needs: [build-core-with-stencil-nightly] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-angular-server + + test-angular-e2e: + strategy: + fail-fast: false + matrix: + apps: [ng18, ng19, ng20, ng21, ng22] + needs: [build-angular, build-angular-server] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-angular-e2e + with: + app: ${{ matrix.apps }} + + verify-test-angular-e2e: + if: ${{ always() }} + needs: test-angular-e2e + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-angular-e2e.result != 'success' }} + run: exit 1 + + build-react: + needs: [build-core-with-stencil-nightly] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: Install Stencil React Output Target + working-directory: ./packages/react + run: npm i @stencil/react-output-target@${{ inputs.npm_release_tag_react_output_target || 'latest' }} + shell: bash + - uses: ./.github/workflows/actions/build-react + + build-react-router: + needs: [build-react] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-react-router + + test-react-router-e2e: + strategy: + fail-fast: false + matrix: + apps: [reactrouter6-react18, reactrouter6-react19] + needs: [build-react, build-react-router] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-react-router-e2e + with: + app: ${{ matrix.apps }} + + verify-test-react-router-e2e: + if: ${{ always() }} + needs: test-react-router-e2e + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-react-router-e2e.result != 'success' }} + run: exit 1 + + test-react-e2e: + strategy: + fail-fast: false + matrix: + apps: [react18, react19] + needs: [build-react, build-react-router] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-react-e2e + with: + app: ${{ matrix.apps }} + + verify-test-react-e2e: + if: ${{ always() }} + needs: test-react-e2e + runs-on: ubuntu-latest + steps: + - name: Check build matrix status + if: ${{ needs.test-react-e2e.result != 'success' }} + run: exit 1 + + send-success-messages: + needs: [test-core-clean-build, test-core-lint, test-core-spec, verify-screenshots, verify-test-vue-e2e, verify-test-angular-e2e, verify-test-react-router-e2e, verify-test-react-e2e] + runs-on: ubuntu-latest + if: ${{ !cancelled() && !contains(needs.*.result, 'failure') }} + steps: + - name: Notify success on Discord + run: | + curl -H "Content-Type:application/json" \ + -d '{"embeds": [{"title": "βœ… Workflow ${{github.workflow}} #${{github.run_number}} finished successfully", "color": 65280, "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}]}' \ + ${{secrets.DISCORD_NOTIFY_WEBHOOK}} + - name: Notify success on Slack + run: | + curl -H "Content-Type:application/json" \ + -d '{"title": "βœ… Workflow ${{github.workflow}} #${{github.run_number}} finished successfully", "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}' \ + ${{secrets.SLACK_NOTIFY_SUCCESS_WEBHOOK}} + + send-failure-messages: + needs: [test-core-clean-build, test-core-lint, test-core-spec, verify-screenshots, verify-test-vue-e2e, verify-test-angular-e2e, verify-test-react-router-e2e, verify-test-react-e2e] + runs-on: ubuntu-latest + if: ${{ !cancelled() && contains(needs.*.result, 'failure') }} + steps: + - name: Notify failure on Discord + run: | + curl -H "Content-Type:application/json" \ + -d '{"content": "Alerting <@&1347593178580254761>!", "embeds": [{"title": "❌ Workflow ${{github.workflow}} #${{github.run_number}} failed", "color": 16711680, "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}]}' \ + ${{secrets.DISCORD_NOTIFY_WEBHOOK}} + - name: Notify failure on Slack + run: | + curl -H "Content-Type:application/json" \ + -d '{"title": "❌ Workflow ${{github.workflow}} #${{github.run_number}} failed", "url": "${{github.server_url}}/${{github.repository}}/actions/runs/${{github.run_id}}"}' \ + ${{secrets.SLACK_NOTIFY_FAILURE_WEBHOOK}} diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml new file mode 100644 index 00000000000..acfe30ef553 --- /dev/null +++ b/.github/workflows/update-screenshots.yml @@ -0,0 +1,72 @@ +name: 'Update Reference Screenshots' + +on: + workflow_dispatch: + inputs: + # 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 instances of the specified component(s) in the `src/components` folder + # -- For example: if the `component` value is "item", then the following command will be: `npm run test.e2e item` + # - run the specified file path + # -- For example: if the `component` value is "src/components/item/test/basic", then the following command will be: `npm run test.e2e src/components/item/test/basic` + # - run multiple specified components based on the space-separated value + # -- For example: if the `component` value is "item basic", then the following command will be: `npm run test.e2e item basic` + # -- For example: if the `component` value is "src/components/item/test/basic src/components/item/test/a11y", then the following command will be: `npm run test.e2e src/components/item/test/basic src/components/item/test/a11y` + # + # If the `component` variable is not set, then the test will run all the instances of the components in the `src/components` folder. + # - For example: `npm run test.e2e` + # + # More common options can be found at the Playwright Command line page: https://playwright.dev/docs/test-cli + 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: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/build-core + + test-core-screenshot: + strategy: + # This ensures that all screenshot shard + # failures are reported so the dev can + # review everything at once. + fail-fast: false + matrix: + # Divide the tests into n buckets + # and run those buckets in parallel. + # To increase the number of shards, + # add new items to the shard array + # and change the value of totalShards + # to be the length of the shard array. + shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] + totalShards: [20] + needs: [build-core] + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - uses: ./.github/workflows/actions/test-core-screenshot + with: + shard: ${{ matrix.shard }} + totalShards: ${{ matrix.totalShards }} + update: true + component: ${{ inputs.component }} + + update-reference-screenshots: + runs-on: ubuntu-latest + needs: [test-core-screenshot] + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + # Normally, we could just push with the + # default GITHUB_TOKEN, but that will + # not cause the build workflow + # to re-run. We use Ionitron's + # Personal Access Token instead + # to allow for this build workflow + # to run when the screenshots are pushed. + with: + token: ${{ secrets.IONITRON_TOKEN }} + - uses: ./.github/workflows/actions/update-reference-screenshots diff --git a/.gitignore b/.gitignore index 3aed639190d..d49be2c644e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,26 +1,34 @@ *~ *.sw[mnpcod] *.log +*.lock *.tmp *.tmp.* log.txt *.sublime-project *.sublime-workspace +*.tgz .idea/ .vscode/ .sass-cache/ .versions/ coverage/ +collection/ dist/ +dist-transpiled/ node_modules/ tmp/ temp/ +core/theme-builder/ +core/test-components/ +core/css/ $RECYCLE.BIN/ .DS_Store Thumbs.db UserInterfaceState.xcuserstate +.env .package.tmp.json @@ -29,13 +37,61 @@ scripts/e2e/webpackEntryPoints.json scripts/build/e2e-generated-tsconfig.json *.css.ts +stats.json + # demo stuff demos/node_modules demos/polyfills demos/css demos/fonts -demos/src/**/*.js* +demos/src/**/*.js +demos/src/**/*.map demos/src/**/*.ngfactory.ts demos/src/**/*.d.ts demos/src/**/*.metadata.json demos/src/**/*.css.shim.ts +prerender.html +prerender-domino.html +prerender-hydrated.html +prerender-static.html + +# stencil +packages/react/css/ +packages/vue/css/ +core/components/ +core/css/ +core/hydrate/ +core/loader/ +core/www/ +.stencil/ + +# playwright +core/test-results/ +core/playwright-report/ +packages/angular/test-results/ + +# ground truths generated outside of docker should not be committed to the repo +core/**/*-snapshots/* + +# new ground truths should only be generated inside of docker which will result in -linux.png screenshots +!core/**/*-snapshots/*-linux.png + +# these files are going to be different per-developer environment so do not add them to the repo +core/docker-display.txt +core/docker-display-volume.txt + +# angular +packages/angular/css/ +packages/angular/test/build/ +.angular/ + +# vue +packages/vue/test/build/ + +# react +packages/react/test/build/ + +# react router +packages/react-router/test/build/ + +.npmrc diff --git a/.scripts/bump-version.js b/.scripts/bump-version.js new file mode 100644 index 00000000000..4ef17c089f8 --- /dev/null +++ b/.scripts/bump-version.js @@ -0,0 +1,10 @@ +const semver = require('semver'); + +const getDevVersion = () => { + const originalVersion = require('../lerna.json').version; + const baseVersion = semver.inc(originalVersion, 'patch'); + + return baseVersion; +} + +console.log(getDevVersion()); diff --git a/.scss-lint.yml b/.scss-lint.yml deleted file mode 100644 index 8f47412b545..00000000000 --- a/.scss-lint.yml +++ /dev/null @@ -1,209 +0,0 @@ -# Default application configuration that all configurations inherit from. - -# See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml - -exclude: - - 'src/components/item/item.ios.scss' - - 'src/components/item/item.md.scss' - - 'src/components/list/list.ios.scss' - - 'src/components/show-hide-when/**' - - 'src/components/slides/**' - - 'src/themes/ionic.mixins.scss' - - 'src/themes/license.scss' - - 'src/themes/util.scss' - - 'src/themes/version.scss' - - 'src/platform/cordova.*.scss' - - -linters: - ColorVariable: - enabled: false - - DuplicateProperty: - enabled: false - - MergeableSelector: - enabled: true - force_nesting: false - - PropertySortOrder: - enabled: true - ignore_unspecified: false - min_properties: 2 - separate_groups: true - order: - - # Box - - - position - - top - - right - - bottom - - left - - z-index - - display - - overflow - - float - - clear - - - - flex - - flex-basis - - flex-direction - - flex-flow - - flex-grow - - flex-shrink - - flex-wrap - - align-content - - align-items - - align-self - - justify-content - - order - - - - margin - - margin-top - - margin-right - - margin-bottom - - margin-left - - padding - - padding-top - - padding-right - - padding-bottom - - padding-left - - - - width - - min-width - - max-width - - height - - min-height - - max-height - - - - columns - - column-gap - - column-fill - - column-rule - - column-span - - column-count - - column-width - - # Border - - - border - - border-top - - border-right - - border-bottom - - border-left - - border-width - - border-top-width - - border-right-width - - border-bottom-width - - border-left-width - - - border-style - - border-top-style - - border-right-style - - border-bottom-style - - border-left-style - - - border-radius - - border-top-left-radius - - border-top-right-radius - - border-bottom-left-radius - - border-bottom-right-radius - - - border-color - - border-top-color - - border-right-color - - border-bottom-color - - border-left-color - - - outline - - outline-color - - outline-offset - - outline-style - - outline-width - - # Text - - - font - - font-family - - font-size - - font-smoothing - - font-style - - font-variant - - font-weight - - - letter-spacing - - line-height - - list-style - - text-align - - text-decoration - - text-indent - - text-overflow - - text-rendering - - text-shadow - - text-transform - - text-wrap - - - white-space - - word-spacing - - - color - - # Background - - - background - - background-attachment - - background-color - - background-image - - background-repeat - - background-position - - background-size - - # Other - - - border-collapse - - border-spacing - - box-shadow - - caption-side - - content - - cursor - - empty-cells - - opacity - - quotes - - speak - - table-layout - - vertical-align - - visibility - - # Transforms - - - transform - - transform-box - - transform-origin - - transform-style - - - transition - - transition-delay - - transition-duration - - transition-property - - transition-timing-function - - # This doesn't allow chaining between elements and attributes, ids or classes - # if we turn this on it breaks a lot of components - QualifyingElement: - enabled: false - allow_element_with_attribute: false - allow_element_with_class: false - allow_element_with_id: false - - SelectorFormat: - enabled: false - convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern - - StringQuotes: - enabled: true - style: double_quotes - - PropertySpelling: - extra_properties: - - contain diff --git a/.stackblitz/codeflow.json b/.stackblitz/codeflow.json new file mode 100644 index 00000000000..6354218ee30 --- /dev/null +++ b/.stackblitz/codeflow.json @@ -0,0 +1,10 @@ +{ + "bot": { + "issues": { + "enabled": false + }, + "pullRequests": { + "enabled": false + } + } +} diff --git a/.vercelignore b/.vercelignore new file mode 100644 index 00000000000..c18553dfa1e --- /dev/null +++ b/.vercelignore @@ -0,0 +1 @@ +core/src/components/**/*/*.png diff --git a/BREAKING.md b/BREAKING.md new file mode 100644 index 00000000000..2ca32ea114b --- /dev/null +++ b/BREAKING.md @@ -0,0 +1,712 @@ +# Breaking Changes + +This is a comprehensive list of the breaking changes introduced in the major version releases of Ionic Framework. + +## Versions + +- [Version 9.x](#version-9x) +- [Version 8.x](./BREAKING_ARCHIVE/v8.md) +- [Version 7.x](./BREAKING_ARCHIVE/v7.md) +- [Version 6.x](./BREAKING_ARCHIVE/v6.md) +- [Version 5.x](./BREAKING_ARCHIVE/v5.md) +- [Version 4.x](./BREAKING_ARCHIVE/v4.md) +- [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md) + +## Version 9.x + +- [Browser and Platform Support](#version-9x-browser-platform-support) +- [Package Exports](#version-9x-package-exports) +- [Components](#version-9x-components) + - [Input](#version-9x-input) + - [Legacy Picker](#version-9x-legacy-picker) + - [Modal](#version-9x-modal) + - [Nav](#version-9x-nav) + - [Router Outlet](#version-9x-router-outlet) + - [Searchbar](#version-9x-searchbar) + - [Select](#version-9x-select) + - [Textarea](#version-9x-textarea) +- [Framework Specific](#version-9x-framework-specific) + - [Angular](#version-9x-angular) + - [React](#version-9x-react) + - [Vue](#version-9x-vue) + +

Browser and Platform Support

+ +This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 9. + +**Minimum Browser Versions** +| Desktop Browser | Supported Versions | +| --------------- | ------------------ | +| Chrome | 89+ | +| Safari | 16+ | +| Edge | 89+ | +| Firefox | 75+ | + +**Minimum JavaScript Framework Versions** +| Framework | Supported Version | +| --------- | --------------------- | +| Angular | 18+ | +| React | 18 or 19 | +| Vue | 3.5+ | + +**Minimum Mobile Platform Versions** +| Platform | Supported Version | +| -------- | ---------------------- | +| iOS | 16+ | +| Android | 5.1+ with Chromium 89+ | + +**Minimum Native Runtime Versions** +| Native Runtime | Supported Version | +| -------------- | ----------------- | +| Capacitor | 7+ | + +Ionic's native platform detection no longer checks the Capacitor 2 `isNative` flag. `isCapacitorNative` now relies solely on `Capacitor.isNativePlatform()`, which was added in Capacitor 3. Apps running Capacitor 2 will no longer be detected as a native/hybrid platform, so `isPlatform('capacitor')`, `isPlatform('hybrid')`, and `getPlatforms()` will report web instead of native. Upgrade to a supported Capacitor version (7 or later). + +

Package Exports

+ +`@ionic/core`'s `package.json` now declares an `exports` field. Subpaths like `@ionic/core/components` and `@ionic/core/loader` previously failed under Node ESM (Angular 21's default Vitest builder, raw Node, etc.) with `ERR_UNSUPPORTED_DIR_IMPORT`, because the strict ESM resolver doesn't read the nested `package.json` files this package relied on. The new `exports` map declares the documented subpaths explicitly. + +`exports` is an allowlist. Apps using Node ESM, webpack 5, or TypeScript `moduleResolution: "bundler"`/`"node16"`/`"nodenext"` that import from undocumented internal paths need to switch to one of the supported subpaths: + +| Subpath | Use | +| ---------------------------------- | ----------------------------------------------------- | +| `@ionic/core` | Root entry, controllers, animation builders | +| `@ionic/core/components` | Custom-element constructors and shared utilities | +| `@ionic/core/components/ion-*.js` | Single-component custom-element constructor | +| `@ionic/core/loader` | `defineCustomElements` lazy loader | +| `@ionic/core/hydrate` | SSR hydration entry | +| `@ionic/core/css/*.css` | Global stylesheets and palettes | + +Apps on `moduleResolution: "node"` (classic) and webpack 4 keep resolving through the legacy fields and are unaffected. + +

Components

+ +

Input

+ +**`autocorrect` Property Type Changed to Boolean** + +The `autocorrect` property on `ion-input` is now a `boolean` and defaults to `false`. It was previously typed as `'on' | 'off'` with a default of `'off'`. This resolves a type conflict introduced when TypeScript 5.9 added `autocorrect: boolean` to the DOM `HTMLElement` interface. + +The string form no longer behaves the same way. Because an HTML attribute coerces to `true` for any non-empty string, `autocorrect="off"` now evaluates to `true` (autocorrect enabled). Migrate to the boolean property: + +- Remove the attribute to keep autocorrect disabled (the default). +- Use a property binding to enable it: `[autocorrect]="true"` (Angular), `autocorrect={true}` (React), or `:autocorrect="true"` (Vue). + +**Floating Label Behavior** + +Floating labels no longer automatically float when the input contains slotted content. Labels float only when the input is focused or has a value. + +**Internal DOM Structure Changes** + +The internal DOM structure has been reorganized to support floating labels with slotted content. + +Added: +- `.input-start` +- `.input-control` +- `.input-end` + +Restructured: +- `.label-text-wrapper` moved from `.input-wrapper` into `.input-control` +- `.native-wrapper` moved from `.input-wrapper` into `.input-control` +- Start slot moved from `.native-wrapper` into `.input-start` +- Clear button icon moved from `.native-wrapper` into `.input-end` +- End slot moved from `.native-wrapper` into `.input-end` +- `.input-control` now contains the label text and native `input`, while start/end content is separated into dedicated wrappers + +Update your selectors to account for these structural changes: + +```diff +-ion-input .input-wrapper .native-wrapper { } ++ion-input .input-control .native-wrapper { } + +-ion-input .input-wrapper .native-wrapper [slot="start"] { } ++ion-input .input-start [slot="start"] { } + +-ion-input .input-wrapper .native-wrapper .input-clear-icon { } ++ion-input .input-end .input-clear-icon { } + +-ion-input .input-wrapper .native-wrapper [slot="end"] { } ++ion-input .input-end [slot="end"] { } +``` + +

Legacy Picker

+ +- `ion-picker-legacy` and `ion-picker-legacy-column` have been removed. The legacy picker component has been replaced with an inline picker component. + - Usages such as `ion-picker-legacy` or `IonPickerLegacy` should be changed to `ion-picker` and `IonPicker`, respectively. +- Remove any usages of `pickerController`. If using React, remove any usages of the `useIonPicker` hook. These controller-based APIs have been removed. Use the inline picker component instead. +- Remove any usages of the `PickerOptions`, `PickerButton`, `PickerColumn`, and `PickerColumnOption` type exports. These types were associated with the legacy picker and have been removed. + +

Modal

+ +The `handleBehavior` property on `ion-modal` now defaults to `"cycle"` instead of `"none"`. For sheet modals that display a handle, this means the handle is now focusable and activating it (by click, keyboard, or screen reader) cycles the sheet through its available breakpoints. This matches the native iOS sheet behavior and keeps sheet modals operable for assistive technology users by default. + +Sheet modals that relied on the handle being inert should set `handleBehavior="none"` to restore the previous behavior: + +```html + +``` + +

Nav

+ +`ion-nav` no longer integrates with `ion-router`. It is now a standalone imperative stack navigation component, driven only through its own API (`root`, `push`, `pop`, `setRoot`, etc.) and `ion-nav-link`. + +The following behaviors have been removed: + +- The router no longer discovers or drives an `ion-nav`. Placing an `ion-nav` inside an `ion-router` no longer turns it into a routed outlet. +- Navigating an `ion-nav` (via `push`, `pop`, `ion-nav-link`, or the swipe-to-go-back gesture) no longer updates the URL, and the router's navigation guards no longer run for `ion-nav` transitions. +- The internal `setRouteId()` and `getRouteId()` methods and the `updateURL` nav option have been removed. + +Apps that relied on `ion-nav` to update the URL (for example, pushing components and expecting the browser URL to change) should use `ion-router-outlet` for URL-based routing. Keep the `ion-route` definitions and swap the outlet element: + +```diff + + + + + +- ++ +``` + +An `ion-nav` can still be used inside a routed page for local, URL-less stack navigation. It manages its own stack via `root` and `ion-nav-link`, and the URL never changes as you push and pop: + +```html + + + + +``` + +

Router Outlet

+ +`ion-router-outlet` now exposes a `swipeGesture` property that controls the swipe-to-go-back gesture per outlet. This property defaults to `true` in `"ios"` mode and `false` in `"md"` mode. + +**`swipeBackEnabled` Config Behavior Change** + +In React and Vue, the `swipeBackEnabled` config option is now read once when the outlet mounts. Apps that dynamically toggle this config value at runtime should migrate to the `swipeGesture` property instead: + +**React:** + +```diff +- setupIonicReact({ swipeBackEnabled: someCondition }); ++ +``` + +**Vue:** + +```diff +- createApp(App).use(IonicVue, { swipeBackEnabled: someCondition }) ++ +``` + +**Disabling Swipe-to-Go-Back** + +To disable the gesture on a specific outlet, set `swipeGesture` to `false`: + +```tsx + +``` + +The `swipeBackEnabled` config option is still respected as the initial default and does not need to change for apps that set it once at startup. + + + +The `autocorrect` property on `ion-searchbar` is now a `boolean` and defaults to `false`. It was previously typed as `'on' | 'off'` with a default of `'off'`. This resolves a type conflict introduced when TypeScript 5.9 added `autocorrect: boolean` to the DOM `HTMLElement` interface. + +The string form no longer behaves the same way. Because an HTML attribute coerces to `true` for any non-empty string, `autocorrect="off"` now evaluates to `true` (autocorrect enabled). Migrate to the boolean property: + +- Remove the attribute to keep autocorrect disabled (the default). +- Use a property binding to enable it: `[autocorrect]="true"` (Angular), `autocorrect={true}` (React), or `:autocorrect="true"` (Vue). + +

Select

+ +**`ionChange` Only Fires When the Value Changes** + +The `ionChange` event on `ion-select` now only fires when the selected value actually changes. Previously, the `alert` and `action-sheet` interfaces emitted `ionChange` every time the overlay was confirmed, even when the user chose the option that was already selected. This aligns the `alert` and `action-sheet` interfaces with the existing behavior of the `popover` and `modal` interfaces, and with the documented contract of `ionChange`. + +Apps that relied on `ionChange` firing on every confirmation (for example, to detect overlay dismissal without a value change) should listen for `ionDismiss` instead, or use the `didDismiss` event on the underlying alert or action sheet. + +**Action Sheet Interface `selected` Role Removed** + +When using `interface="action-sheet"`, `ion-select` no longer assigns the `selected` role to the action sheet button for the currently selected option. This aligns the `action-sheet` interface with the `alert`, `popover`, and `modal` interfaces, none of which assign this role. This does not change the selected option's styling. + +Previously, the `selected` role was assigned only to the option matching the select's current value. Because the dismiss role mirrors the tapped button, this surfaced in just one case: re-selecting the already-selected option dismissed the action sheet with `role: "selected"` in `ionActionSheetDidDismiss`. Tapping any other option changed the value and dismissed with `role: ""`. Now that the role is no longer assigned, both cases dismiss with `role: undefined`. Apps that inspected this role to detect that a value was chosen, such as reading `role` from the underlying action sheet's `onDidDismiss` result, should listen for `ion-select`'s `ionChange` event instead, which emits the selected value when the selection changes. + +**Floating Label Behavior** + +Floating labels no longer automatically float when the select contains slotted content. Labels float only when the select is focused or has a value. Additionally, when using a floating label, the placeholder is only visible when the select is focused. + +**Internal DOM Structure Changes** + +The internal DOM structure has been reorganized to support floating labels with slotted content. This changes the structure and location of several exposed shadow parts. + +Added: +- `.select-start` β€” `part="start"` +- `.select-control` β€” `part="control"` +- `.select-end` β€” `part="end"` + +Removed: +- `.select-wrapper-inner` β€” `part="inner"` + +Restructured: +- `.label-text-wrapper` remains `part="label"` but moved from `.select-wrapper` into `.select-control` +- `.native-wrapper` remains `part="container"` but moved from `.select-wrapper-inner` into `.select-control` +- Start slot moved from `.select-wrapper-inner` into `.select-start` (`part="start"`) +- End slot moved from `.select-wrapper-inner` into `.select-end` (`part="end"`) +- `.select-icon` remains `part="icon"` but its location depends on the label state: + - With a start/end label, the icon is inside `.native-wrapper` + - With a floating/stacked label, the icon is inside `.select-end` + +Update selectors that target the exposed shadow parts to account for the new structure: + +If you currently target `part="inner"`, that part has been removed. Update those styles to target the new parts as appropriate. + +If you target `part="label"`, `part="container"`, or `part="icon"`, the part names remain unchanged, but their position in the shadow DOM has changed. This may affect styles that depend on the relationship or layout of these parts. + +Use the new `part="start"`, `part="control"`, and `part="end"` parts to target the new structural wrappers. + +

Textarea

+ +**Floating Label Behavior** + +Floating labels no longer automatically float when the textarea contains slotted content. Labels float only when the textarea is focused or has a value. + +**Internal DOM Structure Changes** + +The internal DOM structure has been reorganized to support floating labels with slotted content. + +Removed: `.textarea-wrapper-inner` + +Added: `.textarea-control` + +Renamed: +- `.start-slot-wrapper` β†’ `.textarea-start` +- `.end-slot-wrapper` β†’ `.textarea-end` + +Restructured: +- `.label-text-wrapper` moved from `.textarea-wrapper-inner` into `.textarea-control` +- `.native-wrapper` moved from `.textarea-wrapper-inner` into `.textarea-control` +- `.start-slot-wrapper` moved from `.textarea-wrapper-inner` to `.textarea-wrapper` and was renamed `.textarea-start` +- `.end-slot-wrapper` moved from `.textarea-wrapper-inner` to `.textarea-wrapper` and was renamed `.textarea-end` + +Update your selectors to account for these structural changes: + +```diff +-ion-textarea .textarea-wrapper-inner .native-wrapper { } ++ion-textarea .textarea-control .native-wrapper { } + +-ion-textarea .start-slot-wrapper [slot="start"] { } ++ion-textarea .textarea-start [slot="start"] { } + +-ion-textarea .end-slot-wrapper [slot="end"] { } ++ion-textarea .textarea-end [slot="end"] { } +``` + +**Minimum Height Change** + +The minimum height of textarea in Material Design (`md` mode) is now `72px`. At the default number of rows this makes textareas the same height regardless of the `fill` property or `labelPlacement`. Previously the minimum height was: + +| Fill | Label placement | Previous minimum height | +| --- | --- | --- | +| default | `start`, `end`, `fixed` | `44px` | +| default | `floating`, `stacked` | `56px` | +| `solid`, `outline` | any | `56px` | + +These were minimums, not the heights textareas actually rendered at. A textarea with content in the `start` or `end` slots was already taller than its minimum, so the change affects it differently. For example, a `fill="solid"` textarea with slotted icons and buttons previously rendered at `72px` with a `start` label and `81px` with a `floating` label. Both are now `72px`, so that floating label case is `9px` shorter than before rather than taller. + +Because `72px` is taller than two rows of text, `rows` values below `3` no longer change the height of the textarea in `md` mode: `rows="1"` and `rows="2"` both render at `72px`. + +If you were relying on the previous heights, or you need `rows` to control the height, override the minimum height back. The override has to be more specific than the component's own style, so a bare `ion-textarea` selector will not apply. Add a custom class to the textarea to increase specificity: + +```css +/* Add a custom class to the textarea */ +ion-textarea.custom { + min-height: 44px; +} +``` + +

Framework Specific

+ +

Angular

+ +**Minimum Angular Version** + +Ionic 9 requires Angular 18 or later. Angular 16 and 17 are no longer supported. + +**Standalone Components Imported by Default** + +Following industry standards, Ionic 9 makes standalone components the default import path. Standalone component imports have changed from `@ionic/angular/standalone` to `@ionic/angular`. Lazy-loaded component imports have changed from `@ionic/angular` to `@ionic/angular/lazy`. + +**IonicModule Deprecation** + +`IonicModule` is deprecated in Ionic 9 and will be removed in a future major version. It remains fully functional in Ionic 9, so existing applications continue to work without changes. + +Applications should migrate to `provideIonicAngular()`, which works in both standalone and NgModule-based applications. For an NgModule-based app, replace `IonicModule.forRoot(config)` in the `imports` array with `provideIonicAngular(config)` in the `providers` array. Any config passed to `IonicModule.forRoot()` can be passed as an object to `provideIonicAngular()`. Refer to the [build options guide](https://ionicframework.com/docs/angular/build-options) for migration steps. + +**Zoneless Change Detection by Default** + +Ionic 9 defaults to zoneless change detection. Angular 21 bootstraps zoneless out of the box, so a new Ionic 9 app on Angular 21 runs without Zone.js and requires no change-detection provider. The `ng add @ionic/angular` schematic no longer registers `provideZoneChangeDetection()`. + +Because Zone.js no longer triggers change detection automatically, component state that you update from an asynchronous callback that Angular doesn't wrap (awaiting an overlay result such as `modal.onWillDismiss()`, `setTimeout`, RxJS subscriptions, `Platform` events) no longer re-renders on its own. Update a signal or call `ChangeDetectorRef.markForCheck()` in those callbacks. Template event bindings, `@HostListener`, reactive forms, and Ionic lifecycle hooks (`ionViewWillEnter`, etc.) that set state synchronously are unaffected. Refer to the [Zoneless Change Detection guide](https://ionicframework.com/docs/angular/zoneless) for the patterns. + +On Angular 18 through 20, Zone.js remains Angular's default, so those versions are unaffected and require no change. To adopt zoneless there, add `provideZonelessChangeDetection()` (named `provideExperimentalZonelessChangeDetection()` on Angular 18 and 19). + +**Keeping Zone.js on Angular 21 (optional)** + +To keep using Zone.js on Angular 21, opt back in with `provideZoneChangeDetection()` and keep `zone.js` in your polyfills. + +Standalone bootstrap: + +```diff + import { bootstrapApplication } from '@angular/platform-browser'; ++ import { provideZoneChangeDetection } from '@angular/core'; + + bootstrapApplication(AppComponent, { + providers: [ ++ provideZoneChangeDetection(), + // ...other providers + ], + }); +``` + +NgModule bootstrap: + +```diff + import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; ++ import { provideZoneChangeDetection } from '@angular/core'; + + platformBrowserDynamic() +- .bootstrapModule(AppModule) ++ .bootstrapModule(AppModule, { ++ applicationProviders: [provideZoneChangeDetection()], ++ }) + .catch((err) => console.error(err)); +``` + +Angular forbids `provideZoneChangeDetection()` inside an NgModule's `providers` array, so for NgModule apps it must be passed as `applicationProviders` on the `bootstrapModule()` call. Both paths also require `zone.js` in your polyfills, which Angular 21's default scaffold omits: + +```ts +// src/polyfills.ts +import 'zone.js'; +``` + +**OnPush by Default on Angular 22** + +Angular 22 changes the default change detection strategy to `OnPush` for components that don't declare one. Combined with the zoneless default above, any component state that you mutate as a plain field from an Ionic lifecycle hook (`ionViewWillEnter`, etc.) no longer re-renders on its own. Run `ng update`, which migrates existing components to eager change detection and preserves the previous behavior, or use a signal (or `ChangeDetectorRef.markForCheck()`) for state set in those hooks. Ionic's own Angular components already declare `OnPush` explicitly and are unaffected. Angular 18 through 21 keep the eager default, so they require no change. + +**TypeScript** + +Ionic 9 supports TypeScript 5.4 or later, matching the minimum for Angular 18. Angular 21 requires TypeScript 5.9 or later, and Angular 22 requires TypeScript 6.0 or later, per Angular's own requirements. + +**Node.js** + +Angular 22 raises the minimum Node.js version to `^22.22.3 || ^24.15.0 || ^26.0.0`. Angular 18 through 21 are unaffected. + +**Module Resolution** + +`@ionic/angular` is now published with `exports`-based subpath resolution. Apps using TypeScript `moduleResolution: "node"` (classic) can fail to resolve subpaths such as `@ionic/angular/lazy`. Set `moduleResolution` to `"bundler"` (the default for `ng new` on Angular 17 and later). Refer to [Package Exports](#version-9x-package-exports). + +**CSS Imports No Longer Use the `~` Prefix** + +Angular's current build pipeline no longer supports the webpack-loader `~` prefix in CSS `@import` statements: + +```diff +- @import '~@ionic/angular/css/core.css'; ++ @import '@ionic/angular/css/core.css'; +``` + +

React

+ +The `@ionic/react` and `@ionic/react-router` packages now require React 18 or 19. React 17 is no longer supported. + +The `@ionic/react-router` package now requires React Router v6. React Router v5 is no longer supported. + +**Minimum Version Requirements** +| Package | Supported Version | +| ---------------- | ----------------- | +| react | 18 or 19 | +| react-dom | 18 or 19 | +| react-router | 6.4.0+ | +| react-router-dom | 6.4.0+ | + +**TypeScript** + +The `@ionic/react` package now requires TypeScript 5.4 or later. Its type definitions use `NoInfer`, which TypeScript added in 5.4. This matches the minimum that `@ionic/angular` already requires. + +**Typed Overlay Hook Props** + +The `useIonModal` and `useIonPopover` hooks type `componentProps` against the component they are given, instead of accepting `any`. Props that do not match the component are a compile error, and `componentProps` is required when the component declares required props. Applications passing incorrect props will see new type errors at build time rather than failing at runtime. + +```diff + const Modal: React.FC<{ title: string }> = ({ title }) => {title}; + +- const [present, dismiss] = useIonModal(Modal, { subtitle: 'Wrong' }); ++ const [present, dismiss] = useIonModal(Modal, { title: 'Hello' }); +``` + +Props are read from the component rather than from `componentProps`, so a component declared inline needs its props annotated: + +```diff +- const [present, dismiss] = useIonModal(({ name }) =>
Hello {name}.
, { name: 'Dave' }); ++ const [present, dismiss] = useIonModal(({ name }: { name: string }) =>
Hello {name}.
, { name: 'Dave' }); +``` + +Passing a JSX element rather than a component is unchanged, and `componentProps` is not type checked in that case. + +`npx @ionic/migrate` reports the calls this affects and names what is wrong with each, but does not rewrite them, since the right fix depends on what the call was meant to do. For the inline case above, `--experimental` can annotate the parameter from the `componentProps` object literal being passed. + +React Router v6 introduces several API changes that will require updates to your application's routing configuration: + +**Route Definition Changes** + +The `component` prop has been replaced with the `element` prop, which accepts JSX: + +```diff +- ++ } /> +``` + +**Redirect Changes** + +The `` component has been replaced with ``: + +```diff +- import { Redirect } from 'react-router-dom'; ++ import { Navigate } from 'react-router-dom'; + +- ++ +``` + +**Nested Route Paths** + +Routes that contain nested routes or child `IonRouterOutlet` components need a `/*` suffix to match sub-paths: + +```diff +- } /> ++ } /> +``` + +**Accessing Route Parameters** + +Route parameters are now accessed via the `useParams` hook instead of props: + +```diff +- import { RouteComponentProps } from 'react-router-dom'; ++ import { useParams } from 'react-router-dom'; + +- const MyComponent: React.FC> = ({ match }) => { +- const id = match.params.id; ++ const MyComponent: React.FC = () => { ++ const { id } = useParams<{ id: string }>(); +``` + +**RouteComponentProps Removed** + +The `RouteComponentProps` type and its `history`, `location`, and `match` props are no longer available in React Router v6. Use the equivalent hooks instead: + +- `history` -> `useNavigate` (see below) or `useIonRouter` +- `match.params` -> `useParams` (covered above) +- `location` -> `useLocation` + +```diff +- import { RouteComponentProps } from 'react-router-dom'; ++ import { useNavigate, useLocation } from 'react-router-dom'; ++ import { useIonRouter } from '@ionic/react'; + +- const MyComponent: React.FC = ({ history, location }) => { +- history.push('/path'); +- history.replace('/path'); +- history.goBack(); +- console.log(location.pathname); ++ const MyComponent: React.FC = () => { ++ const navigate = useNavigate(); ++ const router = useIonRouter(); ++ const location = useLocation(); ++ // In an event handler or useEffect: ++ navigate('/path'); ++ navigate('/path', { replace: true }); ++ router.goBack(); ++ console.log(location.pathname); +``` + +**Exact Prop Removed** + +The `exact` prop is no longer needed. React Router v6 routes match exactly by default. To match sub-paths, use a `/*` suffix on the path: + +```diff +- ++ +``` + +**Render Prop Removed** + +The `render` prop has been replaced with the `element` prop: + +```diff +- } /> ++ } /> +``` + +**Programmatic Navigation** + +The `useHistory` hook has been replaced with `useNavigate`: + +```diff +- import { useHistory } from 'react-router-dom'; ++ import { useNavigate } from 'react-router-dom'; ++ import { useIonRouter } from '@ionic/react'; + +- const history = useHistory(); ++ const navigate = useNavigate(); ++ const router = useIonRouter(); + +- history.push('/path'); ++ navigate('/path'); + +- history.replace('/path'); ++ navigate('/path', { replace: true }); + +- history.goBack(); ++ router.goBack(); +``` + +**Custom History Prop Removed** + +The `history` prop has been removed from `IonReactRouter`, `IonReactHashRouter`, and `IonReactMemoryRouter`. React Router v6's `BrowserRouter`, `HashRouter`, and `MemoryRouter` no longer accept custom `history` objects. + +```diff +- import { createBrowserHistory } from 'history'; +- const history = createBrowserHistory(); +- ++ +``` + +For `IonReactMemoryRouter` (commonly used in tests), use `initialEntries` instead: + +```diff +- import { createMemoryHistory } from 'history'; +- const history = createMemoryHistory({ initialEntries: ['/start'] }); +- ++ +``` + +**IonRedirect Removed** + +The `IonRedirect` component has been removed. Use React Router's `` component instead: + +```diff +- import { IonRedirect } from '@ionic/react'; +- ++ import { Navigate } from 'react-router-dom'; ++ } /> +``` + +**Path Regex Constraints Removed** + +React Router v6 no longer supports regex constraints in path parameters (e.g., `/:tab(sessions)`). Use literal paths instead: + +```diff +- +- ++ } /> ++ } /> +``` + +**IonRoute API Changes** + +The `IonRoute` component follows the same API changes as React Router's ``. The `render` prop has been replaced with `element`, and the `exact` prop has been removed: + +```diff +- } /> ++ } /> +``` + +For more information on migrating from React Router v5 to v6, refer to the [React Router v6 Upgrade Guide](https://reactrouter.com/6.28.0/upgrading/v5). + +

Vue

+ +The `@ionic/vue-router` package now requires Vue Router v5. Vue Router v4 is no longer supported. Vue Router v5 also raises its peer requirement on Vue itself, so the minimum supported Vue version moves to `3.5.0`. + +**Minimum Version Requirements** +| Package | Supported Version | +| ---------- | ----------------- | +| vue-router | 5.0.0+ | +| vue | 3.5.0+ | + +**Migration** + +Vue Router 5 is a transition release that ships no runtime breaking changes for Vue Router 4 consumers, so no application code changes are required for routes, navigation guards, or the `IonRouterOutlet`. Bump the dep ranges in your app's `package.json`: + +```diff + "dependencies": { +- "vue": "^3.4.0", +- "vue-router": "^4.0.0" ++ "vue": "^3.5.0", ++ "vue-router": "^5.0.0" + } +``` + +**Deprecation Warning for `next()` in Navigation Guards** + +Vue Router 5 prints a deprecation warning when `next()` is called inside `beforeRouteLeave`, `beforeRouteEnter`, `beforeRouteUpdate`, or `router.beforeEach`. The callback form still works, but Vue Router 6 will remove it. Migrate to the return-value pattern: + +```diff + // Composition API + onBeforeRouteLeave((to, from) => { +- if (!confirm('Leave?')) return next(false); +- next(); ++ if (!confirm('Leave?')) return false; ++ return true; + }); +``` + +```diff + // Options API + beforeRouteLeave(to, from, next) { +- if (!confirm('Leave?')) return next(false); +- next(); ++ beforeRouteLeave(to, from) { ++ if (!confirm('Leave?')) return false; ++ return true; + } +``` + +For more information on Vue Router 5, refer to the [Vue Router v4-to-v5 migration guide](https://router.vuejs.org/guide/migration/v4-to-v5.html). diff --git a/BREAKING_ARCHIVE/v4.md b/BREAKING_ARCHIVE/v4.md new file mode 100644 index 00000000000..7a791bc0960 --- /dev/null +++ b/BREAKING_ARCHIVE/v4.md @@ -0,0 +1,1962 @@ + +# Breaking Changes + +## Migrating + +### Migration Guide + +If you aren't sure where to start in upgrading to v4, we recommend reading through our [migration guide](https://ionicframework.com/docs/building/migration) first. + +### Migration Linter + +Looking for a tool that automatically warns (and sometimes fixes) the breaking changes listed? Check out our [migration linter](https://github.com/ionic-team/v4-migration-tslint)! + + +## Components + +A list of the breaking changes introduced to each component in Ionic Angular v4. + +- [Action Sheet](#action-sheet) +- [Alert](#alert) +- [Back Button](#back-button) +- [Button](#button) +- [Colors](#colors) +- [Component Imports](#component-imports) +- [Content](#content) +- [Datetime](#datetime) +- [Dynamic Mode](#dynamic-mode) +- [FAB](#fab) +- [Fixed Content](#fixed-content) +- [Grid](#grid) +- [Icon](#icon) +- [Infinite Scroll](#infinite-scroll) +- [Item](#item) +- [Item Divider](#item-divider) +- [Item Options](#item-options) +- [Item Sliding](#item-sliding) +- [Label](#label) +- [List Header](#list-header) +- [Loading](#loading) +- [Menu](#menu) +- [Menu Toggle](#menu-toggle) +- [Modal](#modal) +- [Nav](#nav) +- [Navbar](#navbar) +- [Option](#option) +- [Overlays](#overlays) +- [Popover](#popover) +- [Radio](#radio) +- [Range](#range) +- [Refresher](#refresher) +- [Scroll](#scroll) +- [Segment Button](#segment-button) +- [Select](#select) +- [Show When / Hide When](#show-when--hide-when) +- [Spinner](#spinner) +- [Tabs](#tabs) +- [Text / Typography](#text--typography) +- [Theming](#theming) +- [Toast](#toast) +- [Toolbar](#toolbar) + + +## Action Sheet + +The `title`, `subTitle` and `enableBackdropDismiss` properties have been renamed to `header`, `subHeader` and `backdropDismiss` respectively. + +**Old Usage Example:** + +```js +const actionSheet = await actionSheetCtrl.create({ + title: 'This is the title', + subTitle: 'this is the sub title', + enableBackdropDismiss: false +}); +await actionSheet.present(); +``` + +**New Usage Example:** + +```js +const actionSheet = await actionSheetCtrl.create({ + header: 'This is the title', + subHeader: 'this is the sub title', + backdropDismiss: false +}); +await actionSheet.present(); +``` + + +## Alert + +The `title`, `subTitle` and `enableBackdropDismiss` properties have been renamed to `header`, `subHeader` and `backdropDismiss` respectively. + +**Old Usage Example:** + +```js +const alert = await alertCtrl.create({ + title: 'This is the title', + subTitle: 'this is the sub title', + enableBackdropDismiss: false +}); +await alert.present(); +``` + +**New Usage Example:** + +```js +const alert = await alertCtrl.create({ + header: 'This is the title', + subHeader: 'this is the sub title', + backdropDismiss: false +}); +await alert.present(); +``` + + +## Back Button + +The back button is no longer added by default to a navigation bar. It should be explicitly written in a toolbar: + +**Old Usage Example:** + +```html + + Back Button Example + +``` + +**New Usage Example:** + +```html + + + + + Back Button Example + +``` + +See the [back button documentation](https://github.com/ionic-team/ionic/blob/main/core/src/components/back-button) for more usage examples. + +## Button + +### Markup Changed + +Button should now be written as an `` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute. + +**Old Usage Example:** + +```html + + + + Default Anchor + +``` + +**New Usage Example:** + +```html + + Default Button + + + + Default Anchor + +``` + +### Attributes Renamed + +Previously to style icons inside of a button the following attributes were used: `icon-left`, `icon-right`, (and with the added support of RTL) `icon-start`, `icon-end`. + +These have been renamed to the following, and moved from the button element to the icon itself: + +| Old Property | New Property | Property Behavior | +|---------------------------|----------------|-----------------------------------------------------------------------| +| `icon-left`, `icon-start` | `slot="start"` | Positions to the left of the button in LTR, and to the right in RTL. | +| `icon-right`, `icon-end` | `slot="end"` | Positions to the right of the button in LTR, and to the left in RTL. | + +In addition, several sets of mutually exclusive boolean attributes have been combined into a single string attribute. + +The `small` and `large` attributes are now combined under the `size` attribute. The `clear`, `outline`, and `solid` attributes have been combined under `fill`. The `full` and `block` attributes have been combined under `expand`. And, lastly, the `round` attribute is now used under `shape`. + +| Old Property | New Property | Property Behavior | +| --------------------------- | ------------ | --------------------------- | +| `small`, `large` | `size` | Sets the button size. | +| `clear`, `outline`, `solid` | `fill` | Sets the button fill style. | +| `full`, `block` Β  Β  Β  Β  Β  Β  | `expand` | Sets the button width. | +| `round` Β  Β  Β  Β  Β  Β  | `shape` | Sets the button shape. | + + +**Old Usage Example:** + +```html + + + Icon Left + + + + + Icon Left on LTR, Right on RTL + + + + Icon Right + + + + + Icon Right on LTR, Left on RTL + + + + + Large Button + + + + Outline Button + + + + Full-width Button + + + + Round Button + +``` + +**New Usage Example:** + +```html + + + Icon Left on LTR, Right on RTL + + + + Icon Right on LTR, Left on RTL + + + + + Large Button + + + + Outline Button + + + + Full-width Button + + + + Round Button + +``` + + +## Colors + +The default Ionic theme colors have changed. Previously we had: + +``` +primary: #327eff +secondary: #32db64 +danger: #f53d3d +light: #f4f4f4 +dark: #222 +``` + +Some of their values have changed, and we now include more colors by default: + +``` +primary: #3880ff +secondary: #0cd1e8 +tertiary: #7044ff +success: #10dc60 +warning: #ffce00 +danger: #f04141 +light: #f4f5f8 +medium: #989aa2 +dark: #222428 +``` + +The `secondary` color saw the largest change. If you were previously using our `secondary` color we recommend switching to `success` instead. + + +## Component Imports + +For consistency with other frameworks and the rest of APIs and tooling, the exported +Ionic components are now prefixed with `Ion`: + +```diff +- import { Input, List, Slides } from 'ionic-angular'; ++ import { IonInput, IonList, IonSlides } from '@ionic/angular'; +``` + + +## Content + +Content is now a drop-in replacement for `ion-scroll`. This makes `ion-content` much more flexible. It can be used anywhere, even nested. + +### Method Removed + +The `resize` method has been removed from Content. In Ionic 4, the `ion-content` is based on a flex layout. This means the content size will automatically adjust without requiring a call to `resize()`. + + +### Attributes Renamed + + +| Old Property | New Property | Property Behavior | +|--------------|-----------------------|-------------------------------------------------------------------------| +| no-bounce | forceOverflow="false" | If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. | + + +## Datetime + +The Datetime classes and interfaces have changed capitalization from `DateTime` to `Datetime`. This is more consistent with other components and their tags. + +**Old Usage Example:** + +```javascript +import { DateTime } from 'ionic-angular'; +``` + +**New Usage Example:** + +```javascript +import { Datetime } from '@ionic/angular'; +``` + + +## Dynamic Mode + +Components are no longer able to have their mode changed dynamically. You can change the mode before the first render, but after that it will not style properly because only the initial mode's styles are included. + + +## Events + +Events now emit as a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) interface that extends the [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) interface. This interface includes a `detail` property that holds any data passed when the event is triggered. + +This allows you to still get the details of the event. For example, to get the target where the event was dispatched, such as a button that was clicked, you can read in the value of `event.target`. + +**Old Usage Example:** + +```html + +``` + +```typescript +onSelectChange(event) { + const value = event.value; + console.log('Select value is', value); +} +``` + +**New Usage Example:** + +```typescript +onSelectChange(event: CustomEvent) { + const value = event.detail.value; + console.log('Select value is', value); +} +``` + + +## FAB + +### Markup Changed + +Buttons inside of an `` container should now be written as an `` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute. + +**Old Usage Example:** + +```html + + + + + + + + + +``` + +**New Usage Example:** + +```html + + + + + + + + + + + + + + + + + + + +``` + +### Attributes Renamed + +The mutually exclusive boolean attributes to position the fab have been combined into two single string attributes. + +The attributes to align the fab horizontally are now combined under the `horizontal` attribute and the attributes to align the fab vertically are now combined under the `vertical` attribute: + +| Old Property | New Property | Property Behavior | +|--------------|----------------------|-------------------------------------------------------------------------| +| left | Removed, see `start` | | +| right | Removed, see `end` | | +| center | `horizontal="center"`| Positions to the center of the viewport. | +| start | `horizontal="start"` | Positions to the left of the viewport in LTR, and to the right in RTL. | +| end | `horizontal="end"` | Positions to the right of the viewport in LTR, and to the left in RTL. | +| top | `vertical="top"` | Positions at the top of the viewport. | +| bottom | `vertical="bottom"` | Positions at the bottom of the viewport. | +| middle | `vertical="center"` | Positions at the center of the viewport. | + +_Note that `middle` has been changed to `center` for the vertical positioning._ + +**Old Usage Example:** + +```html + + + + + + + +``` + +**New Usage Example:** + +```html + + + + + + + +``` + +## Fixed Content + +The `` container was previously placed inside of the fixed content by default. Now, any fixed content should use the `fixed` slot. + +**Old Usage Example:** + +```html + + + + + Scrollable Content + +``` + +**New Usage Example:** + +```html + + + + + Scrollable Content + +``` + +## Grid + +### Markup Changed + +The Grid has been refactored in order to support CSS variables and a dynamic number of columns. The following column attributes have been changed. + +_In the following examples, `{breakpoint}` refers to the optional screen breakpoint (xs, sm, md, lg, xl) and `{value}` refers to the number of columns (`auto` or a number between `1` and `12`)._ + +- `col-{breakpoint}-{value}` attributes have been renamed to `size-{breakpoint}=β€œ{value}”` +- `offset-{breakpoint}-{value}` attributes have been renamed to `offset-{breakpoint}=β€œ{value}”` +- `push-{breakpoint}-{value}` attributes have been renamed to `push-{breakpoint}=β€œ{value}”` +- `pull-{breakpoint}-{value}` attributes have been renamed to `pull-{breakpoint}=β€œ{value}”` + +Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/main/src/pages/layout/grid.md). + +## Icon + +### Fonts Removed + +Icons have been refactored to use SVGs instead of fonts. Ionic will only fetch the SVG for the icon when it is needed, instead of having a large font file that is always loaded in. + +If any `CSS` is being overridden for an icon it will need to change to override the SVG itself. Below is a usage example of the differences in changing the icon color. + +**Old Usage Example:** + +```css +.icon { + color: #000; +} +``` + +**New Usage Example:** + +```css +ion-icon { + fill: #000; +} +``` + +_Note: we are no longer adding the `icon` class to an `ion-icon`, so the element should be targeted instead._ + + +### Property Removed + +The `isActive` property has been removed. It only worked for `ios` icons previously. If you would like to switch between an outline and solid icon you should set it in the `name`, or `ios`/`md` attribute and then change it when needed. + +## Infinite Scroll + +### Method Removed + +The `enable()` method has been removed in favor of using the `disabled` property on the `ion-infinite-scroll` element. + +**Old Usage Example:** + +```html + + + +``` + +```javascript +doInfinite(infiniteScroll) { + console.log('Begin async operation'); + + setTimeout(() => { + console.log('Async operation has ended'); + infiniteScroll.complete(); + + // To disable the infinite scroll + infiniteScroll.enable(false); + }, 500); +} +``` + +**New Usage Example:** + +```html + + + +``` + +```javascript +doInfinite(event) { + console.log('Begin async operation'); + + setTimeout(() => { + console.log('Async operation has ended'); + event.target.complete(); + + // To disable the infinite scroll + event.target.disabled = true; + }, 500); +} +``` + + +## Item + +### Markup Changed + +Item should now be written as an `` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute, and a button tag based on the presence of an `onclick` or `button` attribute. Otherwise, it will render a div. + +**Old Usage Example:** + +```html + + Default Item + + + + + + Anchor Item + +``` + +**New Usage Example:** + +```html + + + Default Item + + + + + + Button Item + + + + + + Anchor Item + + +``` + +### Label Required + +Previously an `ion-label` would automatically get added to an `ion-item` if one wasn't provided. Now an `ion-label` should always be added in the item component. + +```html + + + Item Label + + +``` + +### Attributes Renamed + +Previously to position elements inside of an `ion-item` the following attributes were used: `item-left`, `item-right`, (and with the added support of RTL) `item-start`, `item-end`. + +These have been renamed to the following: + +| Old Property | New Property | Property Behavior | +|---------------------------|----------------|---------------------------------------------------------------------| +| `item-left`, `item-start` | `slot="start"` | Positions to the left of the item in LTR, and to the right in RTL. | +| `item-right`, `item-end` | `slot="end"` | Positions to the right of the item in LTR, and to the left in RTL. | + + +**Old Usage Example:** + +```html + +
Left
+ Item Label +
Right
+ + + +
Left on LTR, Right on RTL
+ Item Label +
Right on LTR, Left on RTL
+ +``` + +**New Usage Example:** + +```html + +
Left on LTR, Right on RTL
+ Item Label +
Right on LTR, Left on RTL
+ +``` + +### Detail Push + +The attributes to show/hide the detail arrows on items have been converted to a single property and value. Instead of writing `detail-push` or `detail-none` to show/hide the arrow, it should be written `detail`/`detail="true"` or `detail="false"`. + +**Old Usage Example:** + +```html + + + + Item Label + +``` + +**New Usage Example:** + +```html + + Item Label + + + + Item Label + +``` + +By default, items that render buttons or anchor tags will show the arrow in `ios` mode. + +## Item Divider + +### Label Required + +Previously an `ion-label` would automatically get added to an `ion-item-divider` if one wasn't provided. Now an `ion-label` should always be added around the text. + +```html + + Item Divider Label + +``` + + +## Item Options + +### Attributes Renamed + +Previously to position the item options inside of an `ion-item-sliding` the `side` attribute would be used with one of the following values: `"left"`, `"right"`. + +These values have been renamed to `"start"` and `"end"` to better align with our support for RTL. + + +| Old Value | New Value | +|-----------------|-----------------| +| `side="left"` | `side="start"` | +| `side="right"` | `side="end"` | + + +## Item Sliding + +### Markup Changed + +The option component should now be written as an `ion-item-option`. Previously it was written as a `button` with an `ion-button` directive. The `ion-item-option` element will render a native button element inside of it. + +**Old Usage Example:** + +```html + + + Item 1 + + + + + +``` + +**New Usage Example:** + +```html + + + Item 1 + + + + + + + +``` + +### Method Renamed + +The `getSlidingPercent` method has been renamed to `getSlidingRatio` since the function is returning a ratio of the open amount of the item compared to the width of the options. + +### Arguments Changed + +The `ionDrag` event no longer gets the sliding item as an argument. It now takes an event with a property `details` which contains two properties `amount` and `ratio` reflecting the absolute and ratio values of the sliding action respectively. + +**Old Usage Example:** + +```typescript +dragged(item: ItemSliding) { + console.log(item.getSlidingPercent()); + console.log(item.getOpenAmount()); +} +``` + +**New Usage Example:** +```typescript +dragged(ev: { details: { amount: number, ratio: number } }) { + console.log(ev.details.ratio); + console.log(ev.details.amount); +} +``` + +## Label + +### Attributes Renamed + +The attributes to set label position in an item are now combined under the `position` attribute: + +| Old Property | New Property | Property Behavior | +|--------------|----------------------|------------------------------------------------------------------------------| +| fixed | `position="fixed"` | A persistent label that sits next the input. | +| floating | `position="floating"`| A label that will float above the input if the input is empty or loses focus.| +| stacked | `position="stacked"` | A stacked label will always appear on top of the input. | + +**Old Usage Example:** + +```html + + Floating Label + + + + + Fixed Label + + +``` + +**New Usage Example:** + +```html + + Floating Label + + + + + Fixed Label + + +``` + + +## List Header + +### Label Required + +Previously an `ion-label` would automatically get added to an `ion-list-header` if one wasn't provided. Now an `ion-label` should always be added around the text. + +```html + + List Header Label + +``` + +## Loading + +See [Overlays](#overlays). + + +## Menu + +### Properties Renamed + +- The `swipeEnabled` property has been renamed to `swipeGesture`. +- The `content` prop has been renamed to `contentId` and it points to the DOM id of the content. + +**Old Usage Example:** + +```html + + + +``` + +**New Usage Example:** + +```html + + + +``` + + +### Events Renamed + +- `ionClose` was renamed to `ionDidClose` +- `ionOpen` was renamed to `ionDidOpen` + + +## Menu Toggle + +### Markup Changed + +The `menuToggle` attribute should not be added to an element anymore. Elements that should toggle a menu should be wrapped in an `ion-menu-toggle` element. + +**Old Usage Example:** + +```html + +``` + +**New Usage Example:** + +```html + + + Toggle Menu + + +``` + +## Modal + +### Arguments Changed + +The component is no longer the first argument in the `create` method. Instead, a single argument of type `ModalOptions` is passed in with a `component` property and the value is the component as part of the passed object. + +**Old Usage Example:** + +```javascript +import { Component } from '@angular/core'; +import { ModalController } from 'ionic-angular'; + +import { ModalPage } from './modal-page'; + +@Component({ + ... +}) +export class MyPage { + + constructor(public modalCtrl: ModalController) { } + + presentModal() { + const modal = this.modalCtrl.create(ModalPage); + modal.present(); + } +} +``` + +**New Usage Example:** + +```javascript +import { Component } from '@angular/core'; +import { ModalController } from '@ionic/angular'; + +import { ModalPage } from './modal-page'; + +@Component({ + ... +}) +export class MyPage { + + constructor(public modalCtrl: ModalController) { } + + async presentModal() { + const modal = await this.modalCtrl.create({ + component: ModalPage + }); + return await modal.present(); + } +} +``` + +## Nav + +### Method Renamed + +- The `remove` method has been renamed to `removeIndex` to avoid conflicts with HTML and be more descriptive as to what it does. +- The `getActiveChildNavs` method has been renamed to `getChildNavs`. + +### Prop Renamed + +- The `swipeBackEnabled` prop has been renamed to `swipeGesture`. + + +## Navbar + +The `` component has been removed in favor of always using an `` with an explicit back button: + +**Old Usage Example:** + +```html + + My Navigation Bar + +``` + +**New Usage Example:** + +```html + + + + + My Navigation Bar + +``` + +See the [back button](#back-button) changes for more information. + + +## Option + +### Markup Changed + +Select's option element should now be written as ``. This makes it more obvious that the element should only be used with a Select. + +**Old Usage Example:** + +```html + + Option 1 + Option 2 + Option 3 + +``` + +**New Usage Example:** + +```html + + Option 1 + Option 2 + Option 3 + +``` + +### Class Renamed + +The class has been renamed from `Option` to `SelectOption` to keep it consistent with the element tag name. + + +## Overlays + +### Markup Changed + +All overlays should now use `async`/`await`. This includes Action Sheet, Alert, Loading, Modal, Popover, and Toast. In addition, the `enableBackdropDismiss` property has been renamed to `backdropDismiss`. + +**Old Usage Example:** + +```javascript +presentPopover(ev: any) { + const popover = this.popoverController.create({ + component: PopoverComponent, + event: event, + translucent: true, + enableBackdropDismiss: false + }); + popover.present(); +} +``` + +**New Usage Example:** + +```javascript +async presentPopover(ev: any) { + const popover = await this.popoverController.create({ + component: PopoverComponent, + event: event, + translucent: true, + backdropDismiss: false + }); + return await popover.present(); +} +``` + + +### Property Removed + +The `dismissOnPageChange` property of the create was removed from Loading & Toast. All of the navigation API is promise based and there are global events (`ionNavWillChange`, `ionNavDidChange`) that you can listen to in order to detect when navigation occurs. + +**Old Usage Example:** + +```javascript +openLoading() { + let loading = this.loadingCtrl.create({ + content: 'Loading...', + dismissOnPageChange: true + }); +} +``` + +**New Usage Example:** + +```javascript +async openLoading() { + let loading = this.loadingCtrl.create({ + message: 'Loading...' + }); + + await loading.present(); + + const { role, data } = await loading.onDidDismiss(); + + console.log('Loading dismissed!'); +} +``` + + +## Popover + +See [Overlays](#overlays). + + +## Radio + +### Slot Required + +Previously radio was positioned inside of an item automatically or by using `item-left`/`item-right`. It is now required to have a `slot` to be positioned properly in an item. + +**Old Usage Example:** + +```html + + Apple + + + + + Grape, checked, disabled + + + + + Cherry + + +``` + +**New Usage Example:** + +```html + + Apple + + + + + Grape, checked, disabled + + + + + Cherry + + +``` + +### Radio Group + +Radio group has been changed to an element. It should now be wrapped around any `` elements as ``. + +**Old Usage Example:** + +```html + + + Apple + + + + + Grape, checked, disabled + + + + + Cherry + + + +``` + +**New Usage Example:** + +```html + + + + Apple + + + + + Grape, checked, disabled + + + + + Cherry + + + + +``` + + +## Range + +### Attributes Renamed + +Previously to place content inside of a range the following attributes were used: `range-left`, `range-right`, (and with the added support of RTL) `range-start`, `range-end`. + +These have been renamed to the following: + +| Old Property | New Property | Property Behavior | +|-----------------------------|----------------|-----------------------------------------------------------------------| +| `range-left`, `range-start` | `slot="start"` | Positions to the left of the range in LTR, and to the right in RTL. | +| `range-right`, `range-end` | `slot="end"` | Positions to the right of the range in LTR, and to the left in RTL. | + + +**Old Usage Example:** + +```html + + + + + + + + + +``` + +**New Usage Example:** + +```html + + + + +``` + + +## Refresher + +The `enabled` property (with a default value of `true`) has been renamed to `disabled` (with a default value of `false`). + +**Old Usage Example:** + +```html + + ... + +``` + +**New Usage Example:** + +```html + + ... + +``` + +## Scroll + +`ion-scroll` has been removed in favor of using `ion-content`: + +```diff +- ++ +``` + +Another very good option is to style a `div` to become scrollable using CSS: + +```css +div.scrollable { + overflow: scroll +} +``` + + +## Segment Button + +Segment Button text is now required to be wrapped in an `ion-label`. + +*Old usage:* + +```html + + Item One + +``` + +*New usage:* + +```html + + Item One + +``` + + +## Select + +The `selectOptions` property was renamed to `interfaceOptions` since it directly correlates with the `interface` property. + +**Old Usage Example:** + +```html + + ... + +``` + +```ts +this.customOptions = { + title: 'Pizza Toppings', + subTitle: 'Select your toppings' +}; +``` + +**New Usage Example:** + +```html + + ... + +``` + +```ts +this.customOptions = { + title: 'Pizza Toppings', + subTitle: 'Select your toppings' +}; +``` + +## Show When / Hide When + +The `showWhen` and `hideWhen` directives (`ion-show-when` and `ion-hide-when` components) have been removed in v4 in favor of using CSS and [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to accomplish the desired look. + +### Media Query Examples + +Examples of media queries in CSS: + +```css +/* targeting only portrait orientation */ +@media (orientation: portrait) { + /* CSS to apply when orientation is portrait goes here */ +} + +/* targeting only landscape orientation */ +@media (orientation: landscape) { + /* CSS to apply when orientation is landscape goes here */ +} + +/* targeting minimum width */ +@media (min-width: 300px) { + /* CSS to apply when the minimum width is 300px goes here */ +} + +/* targeting both minimum width and maximum width */ +@media (min-width: 300px) and (max-width: 600px) { + /* CSS to apply when the minimum width is 300px and maximum width is 600px goes here */ +} +``` + +### Showing and Hiding by Breakpoint + +The default breakpoints used by Ionic can be used internally if desired: + +| Breakpoint | Screen Width | +| -----------| -------------| +| `xs` | `0` | +| `sm` | `576px` | +| `md` | `768px` | +| `lg` | `992px` | +| `xl` | `1200px` | + +For example, to hide all `h3` elements when the minimum breakpoint is `sm`, the following CSS can be used: + +```css +/* Hide all h3 elements when the minimum width is 576px (sm breakpoint) */ +@media (min-width: 576px) { + h3 { + display: none; + } +} +``` + +You can even create your own reusable classes for this, such as the following: + +```css +/* Hide all elements with the .hide-xs-up class when the minimum width is 0px (xs breakpoint) */ +@media (min-width: 0px) { + .hide-xs-up { + display: none; + } +} + +/* Hide all elements with the .hide-sm-up class when the minimum width is 576px (sm breakpoint) */ +@media (min-width: 576px) { + .hide-sm-up { + display: none; + } +} + +/* Repeat above for the other breakpoints */ +``` + +This can also be combined to only show specific elements when there is a min width: + +```css +@media (min-width: 0px) { + /* Hide all elements with the .hide-xs-up class when the minimum width is 0px (xs breakpoint) */ + .hide-xs-up { + display: none; + } + + /* Show all elements with the .show-xs-up class when the minimum width is 0px (xs breakpoint) */ + .show-xs-up { + display: block; + } +} + +@media (min-width: 576px) { + /* Hide all elements with the .hide-sm-up class when the minimum width is 576px (sm breakpoint) */ + .hide-sm-up { + display: none; + } + + /* Show all elements with the .show-sm-up class when the minimum width is 576px (sm breakpoint) */ + .show-sm-up { + display: block; + } +} + +/* Repeat above for the other breakpoints */ +``` + +If you'd only like to show the element when it is in that specific breakpoint, but don't want to add multiple classes to achieve it, you can combine `min-width` and `max-width` to target specific breakpoints: + +```css +@media (min-width: 0px) and (max-width: 575px) { + /* Hide all elements with the .hide-xs-only class when the minimum width is 0px (xs breakpoint) and the maximum width is 575px (right before sm breakpoint) */ + .show-xs-only { + display: block; + } +} + +@media (min-width: 576px) and (max-width: 767px) { + /* Hide all elements with the .hide-sm-only class when the minimum width is 576px (sm breakpoint) and the maximum width is 767px (right before md breakpoint) */ + .show-sm-only { + display: block; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + /* Hide all elements with the .hide-md-only class when the minimum width is 768px (md breakpoint) and the maximum width is 991px (right before lg breakpoint) */ + .show-md-only { + display: block; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + /* Hide all elements with the .hide-lg-only class when the minimum width is 992px (lg breakpoint) and the maximum width is 1199px (right before xl breakpoint) */ + .show-lg-only { + display: block; + } +} + +/* Not necessary for xl since there isn't a larger breakpoint, can use the show-xl-up */ +``` + +### Showing and Hiding by Mode + +Styling based on the mode can be achieved by targeting an element with the mode class as the parent. + +For example, to hide all `h3` elements when the mode is `md`, the following CSS can be used: + +```css +/* Hide all h3 elements when the mode is md */ +.md h3 { + display: none; +} +``` + +Similar to breakpoints, a class can be created to make this easier. For example, to hide all elements with the `.hide-ios` class in `ios` mode: + +```css +/* Hide all elements when the mode is ios and they have the .hide-ios class */ +.ios .hide-ios { + display: none; +} +``` + +### Showing and Hiding by Platform + +Styling based on the platform is similar to styling by mode and can be achieved by targeting an element with the class `plt-{PLATFORM}` where {PLATFORM} is the name of the platform to be styled, from the following list: + +``` +ipad +iphone +ios +android +phablet +tablet +cordova +capacitor +electron +pwa +mobile +desktop +hybrid +``` + +For example, to hide all `h3` elements when the platform is `desktop`, the following CSS can be used: + +```css +/* Hide all h3 elements when the platform is desktop */ +.plt-desktop h3 { + display: none; +} +``` + + +## Spinner + +### Name Changed + +The `ios` and `ios-small` spinner's have been renamed to `lines` and `lines-small`, respectively. This also applies to any components that use spinner: `ion-loading`, `ion-infinite-scroll`, `ion-refresher`. + +**Old Usage Example:** + +```html + + + +``` + +**New Usage Example:** + +```html + + + +``` + + +## Tabs + +Tabs has been completely refactored for Ionic 4. In Ionic 3 there was a lot of magic going on behind the scenes to style and generate the tab bar and buttons. While this made it easy to get up and running using tabs in Ionic, it made it more difficult to customize the tabs. + +We decided to rethink the tabs implementation to make it more flexible and easier to theme for your application. In order to accomplish this, there had to be some changes to the markup. + + +### `ion-tabs` + +The general usage of the `ion-tabs` element hasn't changed too drastically. Its purpose is still mostly the same - it wraps the entire layout. + +#### Properties Removed + +The attributes to position the tabs, change the tab layout, enable the tab highlight and hide the tabs have been removed. Instead customize this content in the [ion-tab-button](#ion-tab-button). + +**Old Usage Example:** + +```html + +``` + +**New Usage Example:** + +```html + + ... + +``` + + +### `ion-tab` + +The `ion-tab` has been removed in the Angular version of Ionic 4. You should use the Angular router with an [ion-tab-button](#ion-tab-button) that has a `tab` property. + +```typescript +import { RouterModule, Routes } from '@angular/router'; + +import { TabsPage } from './tabs.page'; + +const routes: Routes = [ + { + path: 'tabs', + component: TabsPage, + children: [ + { + path: 'tab1', + children: [ + { + path: '', + loadChildren: '../tab1/tab1.module#Tab1PageModule' + } + ] + }, + { + path: 'tab2', + children: [ + { + path: '', + loadChildren: '../tab2/tab2.module#Tab2PageModule' + } + ] + }, + { + path: 'tab3', + children: [ + { + path: '', + loadChildren: '../tab3/tab3.module#Tab3PageModule' + } + ] + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full' + } + ] + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full' + } +]; +``` + +```html + + + + + Tab One + + + + + Tab Two + + + + + Tab Three + + + +``` + +### `ion-tab-bar` + +A new element, `ion-tab-bar`, creates the tab bar that will contain the tab buttons and allow for full customization. It requires `slot` to be placed properly above or below the content. + +### `ion-tab-button` + +A new element, `ion-tab-button`, is used to create each button in the tab bar. These could be static links to different routes, buttons with click handlers on them, or link to whole tab views. + +You can add `` and `` inside of an ``. An `` should be wrapped by an ``. + +The tab attribute defines the route to be shown upon clicking on this tab. + +**Old Usage Example:** + +```html + + + +``` + +**New Usage Example:** + +```html + + + + + + Map + 2 + + + +``` + +See more usage examples in the [Tabs](https://github.com/ionic-team/ionic/blob/main/core/src/components/tabs) documentation. + + +## Text / Typography + +### Markup Changed + +Typography should now be written as an `` element. Previously the `ion-text` attribute could be added to any HTML element to set its color. It should now be used as a wrapper around the HTML elements to style. + +**Old Usage Example:** + +```html +

H1: The quick brown fox jumps over the lazy dog

+ +

H2: The quick brown fox jumps over the lazy dog

+ +

H3: The quick brown fox jumps over the lazy dog

+ +

+ I saw a werewolf with a Chinese menu in his hand. + Walking through the streets of Soho in the rain. + He was looking for a place called Lee Ho Fook's. + Gonna get a big dish of beef chow mein. +

+``` + +**New Usage Example:** + +```html + +

H1: The quick brown fox jumps over the lazy dog

+ + + +

H2: The quick brown fox jumps over the lazy dog

+ + + +

H3: The quick brown fox jumps over the lazy dog

+ + +

+ I saw a werewolf with a Chinese menu in his hand. + Walking through the streets of Soho in the rain. + He was looking for a place called Lee Ho Fook's. + Gonna get a big dish of beef chow mein. +

+``` + + +## Theming + +### Global CSS + +Many of the components in Ionic 4 have self-contained styles thanks to [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). + +However, there are still global styles that need to be included in order for an Ionic app to look and behave properly. The global styles include normalizing elements, typography, colors, and more. + +#### Basic CSS Files + +The basic set of CSS files should be included to ensure the Ionic application behaves natively. + +- **core.css** +Contains styles for the font, structure, and the `color` property for all Ionic components. + +- **normalize.css** +Normalizes the CSS differences between browsers, it's based on https://necolas.github.io/normalize.css/ + +- **structure.css** +Applies styles to the `` element and defaults `box-sizing` to `border-box`. It's used to ensure scrolling behaves natively on mobile devices. + +- **typography.css** +Changes the `font-family` of the whole page based on the mode selected (iOS or Material Design). It also applies global styles to native HTML elements. + + +#### Additional CSS Files + +The following set of CSS files are optional and can safely be commented out if the application is not using any of the features. + +- **padding.css** +Adds utility attributes that allow adding `padding` and `margin` attributes to any element. See [content space](https://ionicframework.com/docs/layout/css-utilities#content-space) for what this includes. + +- **float-elements.css** +Adds utility attributes that allow adding `float` attributes to any element. See [element placement](https://ionicframework.com/docs/layout/css-utilities/#element-placement) for what this includes. + +- **text-alignment.css** +Adds utility attributes that allow adding text alignment attributes to any element. See [text alignment](https://ionicframework.com/docs/layout/css-utilities/#text-alignment) for what this includes. + +- **text-transformation.css** +Adds utility attributes that allow adding text transformation attributes to any element. See [text transformation](https://ionicframework.com/docs/layout/css-utilities/#text-transformation) for what this includes. + +- **flex-utils.css** +Adds utility attributes that allow adding flex container and item attributes to any element. See [flex properties](https://ionicframework.com/docs/layout/css-utilities/#flex-properties) for what this includes. + + +#### Including the CSS Files + +Official Ionic starters are already properly configured so the following steps are not needed. + +#### Testing + +To include the stylesheet for testing such as in a Plunker, Codepen, or anywhere else: + +```html + +``` + +#### Production + +To use the CSS in production, we recommend importing it into a global file, such as `app/global.scss`: + +```css +/** Basic CSS for Ionic Apps */ +@import "~@ionic/angular/css/core.css"; +@import "~@ionic/angular/css/normalize.css"; +@import "~@ionic/angular/css/structure.css"; +@import "~@ionic/angular/css/typography.css"; + +/** Optional CSS utilities that can be commented out */ +@import "~@ionic/angular/css/padding.css"; +@import "~@ionic/angular/css/float-elements.css"; +@import "~@ionic/angular/css/text-alignment.css"; +@import "~@ionic/angular/css/text-transformation.css"; +@import "~@ionic/angular/css/flex-utils.css"; +``` + + +### CSS Utilities + +#### Padding + +Previously to add padding to the left and right side of elements, the `padding-left` and `padding-right` attributes, respectively, would be added to the element. + +These attributes have been renamed to `padding-start` and `padding-end` to better align with our support for RTL. + +#### Margin + +Previously to add margin to the left and right side of elements, the `margin-left` and `margin-right` attributes, respectively, would be added to the element. + +These attributes have been removed in favor of using the `margin-start` and `margin-end` attributes to better align with our support for RTL. + + +### Including Sass + +Previously all `scss` files in the `src` directory were imported. Now each `scss` file should be included for the component via Angular's `styleUrls` metadata. View [Angular's Component Styles](https://angular.io/guide/component-styles) for more information. + +This means that any styles wrapped with a page should now be removed since they will automatically be scoped to the component. + +**Old Usage Example:** + +```scss +page-schedule { + p { + color: red; + } +} +``` + +**New Usage Example:** + +```scss +p { + color: red; +} +``` + + +### Sass Variables + +Sass variables should no longer be used to change Ionic components. We have built Ionic to be customizable using CSS variables, instead. + +For more information on theming, check out the [theming documentation](https://ionicframework.com/docs/theming/basics). + + +## Toast + +See [Overlays](#overlays). + + +## Toolbar + +### Menu Toggle + +Previously if a `menuToggle` directive was added to an Ionic `button` in a toolbar, it would be positioned outside of the `ion-buttons` element. Since menu toggle is simply a wrapper to a button now, it should be placed inside of the `ion-buttons` element. + +**Old Usage Example:** + +```html + + + Left side menu toggle + +``` + +**New Usage Example:** + +```html + + + + + + + + + Left side menu toggle + +``` + +### Attributes Renamed + +Previously to positions buttons inside of a toolbar the following attributes were used: `start`, `left`, `right`, `end`. + +These have been renamed to the following: + +| Old Property | New Property | Property Behavior | +|--------------|--------------------|----------------------------------------------------------------------------------------------------------| +| `start` | `slot="secondary"` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | +| `end` | `slot="primary"` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | +| `left` | `slot="start"` | Positions to the `left` of the content in LTR, and to the `right` in RTL. | +| `right` | `slot="end"` | Positions to the `right` of the content in LTR, and to the `left` in RTL. | + +**Old Usage Example:** + +```html + + + + + + + + + + Title + + + + + + + + + +``` + +**New Usage Example:** + +```html + + + Left + + + Secondary + + + + Title + + + + Primary + + + Right + + +``` diff --git a/BREAKING_ARCHIVE/v5.md b/BREAKING_ARCHIVE/v5.md new file mode 100644 index 00000000000..a7e55cf9f28 --- /dev/null +++ b/BREAKING_ARCHIVE/v5.md @@ -0,0 +1,628 @@ +# Breaking Changes + +## Version 5.x + +- [CSS](#css) + - [CSS Utilities](#css-utilities) + - [Display Classes](#display-classes) + - [Activated, Focused, Hover States](#activated-focused-hover-states) + - [Distributed Sass](#distributed-sass) +- [Components](#components) + - [Action Sheet](#action-sheet) + - [Anchor](#anchor) + - [Back Button](#back-button) + - [Button](#button) + - [Card](#card) + - [Controllers](#controllers) + - [FAB Button](#fab-button) + - [Item](#item) + - [Header / Footer](#header---footer) + - [List Header](#list-header) + - [Menu](#menu) + - [Menu Button](#menu-button) + - [Nav Link](#nav-link) + - [Radio](#radio) + - [Searchbar](#searchbar) + - [Segment](#segment) + - [Segment Button](#segment-button) + - [Select Option](#select-option) + - [Skeleton Text](#skeleton-text) + - [Split Pane](#split-pane) + - [Toast](#toast) + - [Tabs](#tabs) +- [Colors](#colors) +- [Events](#events) +- [Mode](#mode) +- [Ionicons](#ionicons) + +### CSS + +#### CSS Utilities + +We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities. + +Some examples of what's changed are below. _This is not all-inclusive, see the documentation linked above for all of the available CSS utility classes._ + +**Before** + +```html + + + + +``` + +**After** + +```html + + + + +``` + +#### Display Classes + +The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. Instead of using the maximum value of the breakpoint for `.ion-hide-{breakpoint}-down` classes it will use the minimum of that breakpoint. + +The [Ionic breakpoints](https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints) are the following: + +| Breakpoint Name | Width | +| --------------- | ------ | +| xs | 0 | +| sm | 576px | +| md | 768px | +| lg | 992px | +| xl | 1200px | + +Previously, if you added the class `ion-hide-md-down` to an element, it would hide the element when the screen size was `991px` (the maximum of the `md` breakpoint) or smaller. Now, using this same class will hide the element when the maximum screen size is `768px`. + +Below is a table of how the media queries have changed for each class: + +| Class Name | Ionic 4 | Ionic 5 | +| ------------------- | ---------------------------- | ---------------------------- | +| `.ion-hide-down` | `@media (max-width: 575px)` | all screen sizes | +| `.ion-hide-sm-down` | `@media (max-width: 767px)` | `@media (max-width: 576px)` | +| `.ion-hide-md-down` | `@media (max-width: 991px)` | `@media (max-width: 768px)` | +| `.ion-hide-lg-down` | `@media (max-width: 1199px)` | `@media (max-width: 992px)` | +| `.ion-hide-xl-down` | all screen sizes | `@media (max-width: 1200px)` | + +_Note that no changes were made to the `.ion-hide-{breakpoint}-up` classes._ + +See the [CSS Utilities responsive display documentation](https://ionicframework.com/docs/layout/css-utilities#responsive-display-attributes) for more information. + +#### Activated, Focused, Hover States + +The `.activated` class that is automatically added to clickable components has been renamed to `.ion-activated`. + +The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components: + +- Action Sheet +- Back Button +- Button +- FAB Button +- Item +- Menu Button +- Segment Button +- Tab Button + +Previously, in order to update any of the background colors for the states you would have to know what the opacity was set to. Using the Material Design spec as an example, it would require you to know that the hover state uses a white overlay with an opacity of `.08`. This means that if we had the following set by default: + +```css +--background-hover: rgba(255, 255, 255, 0.08); +``` + +If you wanted to change the hover overlay to use black but still match the spec, you'd have to set it to: + +```css +--background-hover: rgba(0, 0, 0, 0.08); +``` + +The new way adds the following variables: + +```css +--background-activated-opacity +--background-focused-opacity +--background-hover-opacity +``` + +It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the new variable names. + +This allows you to still have control over the opacity if desired, but when updating the state, you only have to set the main variables: `--background-activated`, `--background-focused`, `--background-hover` and the button will still match the spec. This is most important when changing the global theme, as updating the toolbar color will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is. + +##### Examples + +```css +/* Setting the button background on hover to solid red */ +ion-button { + --background-hover: red; + --background-hover-opacity: 1; +} + +/* Setting the action sheet button background on focus to an opaque green */ +ion-action-sheet { + --button-background-focus: green; + --button-background-focus-opacity: 0.5; +} + +/* + * Setting the fab button background on hover to match the text color with + * the default --background-hover-opacity on md + */ +.md ion-fab-button { + --color: #222; + --background-hover: #222; +} +``` + +##### Global CSS Properties + +Some variables were renamed, removed or added. See the chart below for the changes. + +| Old variable | Status | New variable | +| ------------------------------------ | ------- | ------------------------------------------ | +| `--ion-toolbar-color-unchecked` | renamed | `--ion-toolbar-segment-color` | +| `--ion-toolbar-color-checked` | renamed | `--ion-toolbar-segment-color-checked` | +| `--ion-toolbar-background-unchecked` | renamed | `--ion-toolbar-segment-background` | +| `--ion-toolbar-background-checked` | renamed | `--ion-toolbar-segment-background-checked` | +| `--ion-tab-bar-color-activated` | renamed | `--ion-tab-bar-color-selected` | +| | added | `--ion-toolbar-segment-indicator-color` | +| `--ion-toolbar-color-activated` | removed | | +| `--ion-item-background-activated` | removed | | +| `--ion-item-background-focused` | removed | | +| `--ion-item-background-hover` | removed | | + +#### Distributed Sass + +The `scss` files have been removed from `dist/`. CSS variables should be used to theme instead. + +### Components + +#### Action Sheet + +The following CSS variables have been renamed or added: + +| Old | New | +| ------------------------ | --------------------------------------- | +| | `--button-background` | +| `--background-activated` | `--button-background-activated` | +| | `--button-background-activated-opacity` | +| `--background-selected` | `--button-background-selected` | +| | `--button-background-focused` | +| | `--button-background-focused-opacity` | +| | `--button-background-hover` | +| | `--button-background-hover-opacity` | +| | `--button-background-selected` | +| | `--button-background-selected-opacity` | +| | `--button-color` | +| | `--button-color-activated` | +| | `--button-color-focused` | +| | `--button-color-hover` | +| | `--button-color-selected` | + +See the [Action Sheet CSS Custom Properties](https://ionicframework.com/docs/api/action-sheet#css-custom-properties) documentation for descriptions. + +#### Anchor + +The `ion-anchor` component has been renamed to `ion-router-link` as this is a better description of which component it should be used with. This component should still only be used in vanilla and Stencil JavaScript projects. Angular projects should use an `` and `routerLink` with the Angular router. See the [documentation for router-link](https://ionicframework.com/docs/api/router-link) for more information. + +#### Back Button + +- Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). +- [Focused, Hover States](#activated-focused-hover-states) have been updated. + +#### Button + +- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated. + +#### Card + +Converted `ion-card` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). + +#### Controllers + +The controller components (`ion-action-sheet-controller`, `ion-alert-controller`, `ion-loading-controller`, `ion-menu-controller`, `ion-modal-controller`, `ion-picker-controller`, `ion-popover-controller`, `ion-toast-controller`) have been removed from Ionic core as elements. They should be imported from `@ionic/core` instead. This will not affect projects that use Angular or React. Below is an example of the loading controller change in a JavaScript project, but this change applies to all controller elements. + +**Before** + +```html + + + +``` + +**After** + +```html + + + +``` + +#### FAB Button + +- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated. + +#### Item + +- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated. + +#### Header / Footer + +The `no-border` attribute has been removed, use `ion-no-border` class instead. See [CSS Utilities](#css-utilities) above for more information on why this change was made. + +#### List Header + +The list header has been redesigned to match the latest iOS spec. This may break the design of your application as the previous design had a small font size with uppercase text. The latest design includes a larger, bolder text. + +In addition, any text content inside of an `` should be wrapped in an `` in order to get the proper styling of the new design. If the label is missing, the button alignment in the list header may look off. + +**Before** + +```html + + New This Week + See All + +``` + +**After** + +```html + + New This Week + See All + +``` + +The button has also been updated to default to `fill="clear"` and `size="small"` when inside of a list header. If the old look of the list header or buttons is desired, use custom CSS or button properties to achieve it. + +For more information see the [List Header usage](https://ionicframework.com/docs/api/list-header#usage). + +#### Menu + +- The `swipeEnable()` function has been removed in Angular, use `swipeGesture()` instead. +- The `side` values `left` and `right` have been removed, use `start` and `end` instead. +- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead. + + **Before** + + ```html + ... ... + ``` + + **After** + + ```html + + ... + ``` + +- The presentation type in `ios` now defaults to `"overlay"`. + +#### Menu Button + +- [Focused, Hover States](#activated-focused-hover-states) have been updated. + +#### Nav Link + +The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `β€œforward”`, and `β€œback”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information. + +#### Radio + +The `ion-radio` must be used inside of an `ion-radio-group` even if there is only one `ion-radio`. Additionally, the `checked` property has been removed. Developers should set the `value` property on the parent `ion-radio-group` to match the value of the desired checked radio button. + +`ion-radio` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-radio-group` instead. + +**Before** + +```html +One + + + One + Two + +``` + +**After** + +```html + + One + + + + One + Two + +``` + +#### Searchbar + +##### Show Cancel Button + +The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`. + +**Before** + +```html + + + +``` + +**After** + +```html + + + +``` + +See the [Searchbar documentation](https://ionicframework.com/docs/api/searchbar#properties) for more information. + +##### Inputmode + +The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get the old behavior, set the inputmode property to `"search"`. + +#### Segment + +Segment was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes, some breaking changes were inevitably introduced in order to support the new design. + +##### Renamed Events + +`ion-segment` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-segment` instead. + +##### Button States + +- The activated styles and custom CSS properties have been removed. These are no longer being used in the latest spec as the indicator and ripple are used to show activation. Properties removed: + ``` + --color-activated + --background-activated + ``` +- The [Focused & Hover States](#activated-focused-hover-states) have been updated. + +##### Indicator Color + +- `--indicator-color` now applies to the checked segment button (for both `ios` and `md`) +- `--indicator-color-checked` has been removed +- The Material Design spec does not include an indicator color on non-checked buttons: https://material.io/components/tabs/ +- In order to style the Segment to match the old spec, please use custom CSS. For example, to update Material Design to include a bottom line all of the time: + ```css + .md ion-segment::after { + position: absolute; + bottom: 0; + height: 2px; + width: 100%; + content: ""; + background: rgba(0, 0, 0, 0.5); + z-index: -1; + } + ``` + +##### Background & Color + +A `--background` variable has been added to style the `ion-segment` component. As a result of this, the following background variables for a child segment button must now be set on the `ion-segment-button`: + +``` +--background: Background of the segment button +--background-checked: Background of the checked segment button +--background-disabled: Background of the disabled segment button +--background-hover: Background of the segment button on hover +``` + +> Note: iOS no longer checks the button background, so setting the `--background-checked` variable may have an undesired outcome. Instead, Segment uses an indicator to slide between the buttons, showing which one is checked. See the previous section on the indicator color variables. + +The above variables _will not_ be inherited in the button if set on the `ion-segment`. In addition to this, all color variables should also be set on the button for consistency: + +``` +--color: Color of the segment button +--color-checked: Color of the checked segment button +--color-disabled: Color of the disabled segment button +--color-hover: Color of the segment button on hover +``` + +###### Removed variables + +The following variables were removed due to the current spec no longer using them. + +- `--color-checked-disabled` +- `--background-disabled` +- `--color-disabled` +- `--background-activated` +- `--color-activated` + +##### Global CSS Properties + +Some variables were renamed or added. See the chart below for the new names. + +| Old variable | Status | New variable | +| ------------------------------------ | ------- | ------------------------------------------ | +| `--ion-toolbar-color-unchecked` | renamed | `--ion-toolbar-segment-color` | +| `--ion-toolbar-color-checked` | renamed | `--ion-toolbar-segment-color-checked` | +| `--ion-toolbar-background-unchecked` | renamed | `--ion-toolbar-segment-background` | +| `--ion-toolbar-background-checked` | renamed | `--ion-toolbar-segment-background-checked` | +| | added | `--ion-toolbar-segment-indicator-color` | + +#### Segment Button + +The `checked` property has been removed. Developers should set the `value` property on the parent `ion-segment` to match the value of the desired checked segment button. + +**Before** + +```html + + One + Two + Three + +``` + +**After** + +```html + + One + Two + Three + +``` + +#### Select Option + +The `selected` property has been removed. Developers should set the `value` property on the parent `ion-select` to match the desired selected option. + +**Before** + +```html + + One + Two + +``` + +**After** + +```html + + One + Two + +``` + +#### Skeleton Text + +The `width` property has been removed in favor of using CSS styling. + +#### Split Pane + +- Converted to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). +- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead. + **Before** + + ```html + + ... +
...
+ + ``` + + **After** + + ```html + + ... +
...
+ + ``` + +#### Tabs + +- [Focused State](#activated-focused-hover-states) have been updated. + +#### Toast + +The close button properties (`showCloseButton` and `closeButtonText`) have been removed. Use the `buttons` array instead with `role: 'cancel'`. See the [usage documentation](https://ionicframework.com/docs/api/toast#usage) for more information. + +**Before** + +```javascript +async presentToast() { + const toast = await this.toastController.create({ + message: 'Your settings have been saved.', + showCloseButton: true, + closeButtonText: 'Close' + }); + toast.present(); +} +``` + +**After** + +```javascript +async presentToast() { + const toast = await this.toastController.create({ + message: 'Your settings have been saved.', + buttons: [ + { + text: 'Close', + role: 'cancel', + handler: () => { + console.log('Close clicked'); + } + } + ] + }); + toast.present(); +} +``` + +### Colors + +The default Ionic colors have been updated to the following: + +```scss +primary: #3880ff +secondary: #3dc2ff +tertiary: #5260ff +success: #2dd36f +warning: #ffc409 +danger: #eb445a +light: #f4f5f8 +medium: #92949c +dark: #222428 +``` + +`primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`. + +This will only be a breaking change in your app if you are not using one of our starters and not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired. + +### Events + +The `@ionic/angular` Events service has been removed. + +- Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables +- Use "Redux" for advanced state management: https://ngrx.io + +### Mode + +Mode is now cascaded from the parent to the child component. Previously, if you wanted to update a component and its children to use the same mode, you'd have to set it on all components. For example, if you wanted to use a `md` segment no matter the mode, you'd have to write the following: + +```html + + Button + Button + +``` + +Now, the `mode` only needs to be set on the `ion-segment` and it will be inherited. If this behavior is not desired set a different mode on the child component. + +### Ionicons + +Ionicons 5 has been released! :tada: This brings many changes including a top to bottom re-draw of every icon, variants for each icon (filled, outline, and sharp), and the removal of auto-switching icons based on the platform. + +For more information, check out the [Ionicons Changelog](https://github.com/ionic-team/ionicons/blob/master/CHANGELOG.md)! diff --git a/BREAKING_ARCHIVE/v6.md b/BREAKING_ARCHIVE/v6.md new file mode 100644 index 00000000000..934665a2c39 --- /dev/null +++ b/BREAKING_ARCHIVE/v6.md @@ -0,0 +1,389 @@ +# Breaking Changes + +## Version 6.x + +- [Components](#components) + * [Datetime](#datetime) + * [Header](#header) + * [Icons](#icons) + * [Input](#input) + * [Modal](#modal) + * [Popover](#popover) + * [Radio](#radio) + * [Searchbar](#searchbar) + * [Select](#select) + * [Tab Bar](#tab-bar) + * [Textarea](#textarea) + * [Toast](#toast) + * [Toolbar](#toolbar) +- [Config](#config) + * [Transition Shadow](#transition-shadow) +- [Angular](#angular) + * [Config](#config-1) +- [Vue](#vue) + * [Config](#config-2) + * [Tabs Config](#tabs-config) + * [Tabs Router Outlet](#tabs-router-outlet) + * [Overlay Events](#overlay-events) + * [Utility Function Types](#utility-function-types) +- [React](#react) + * [Config](#config-3) +- [Browser and Platform Support](#browser-and-platform-support) + + +### Components + +#### Datetime + +The `ion-datetime` component has undergone a complete rewrite and uses a new calendar style. As a result, some of the properties no longer apply and have been removed. + +- `ion-datetime` now displays the calendar inline by default, allowing for more flexibility in presentation. As a result, the `placeholder` property has been removed. Additionally, the `text` and `placeholder` Shadow Parts have been removed. + +- The `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, and `--placeholder-color` CSS Variables have been removed since `ion-datetime` now displays inline by default. + +- The `displayFormat` and `displayTimezone` properties have been removed since `ion-datetime` now displays inline with a calendar picker. To parse the UTC string provided in the payload of the `ionChange` event, we recommend using a 3rd-party date library like [date-fns](https://date-fns.org/). Here is an example of how you can take the UTC string from `ion-datetime` and format it to whatever style you prefer: + +```typescript +import { format, parseISO } from 'date-fns'; + +/** + * This is provided in the event + * payload from the `ionChange` event. + */ +const dateFromIonDatetime = '2021-06-04T14:23:00-04:00'; +const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy'); + +console.log(formattedString); // Jun 4, 2021 +``` + +- The `pickerOptions` and `pickerFormat` properties have been removed since `ion-datetime` now uses a calendar style rather than a wheel picker style. + +- The `monthNames`, `monthShortNames`, `dayNames`, and `dayShortNames` properties have been removed. `ion-datetime` can now automatically format these values according to your devices locale thanks to the [Intl.DateTimeFormat API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). If you wish to force a specific locale, you can use the new `locale` property: + +```html + +``` + +- The `open` method has been removed. To present the datetime in an overlay, you can pass it into an `ion-modal` or `ion-popover` component and call the `present` method on the overlay instance. Alternatively, you can use the `trigger` property on `ion-modal` or `ion-popover` to present the overlay on a button click: + +```html +Open Datetime Modal + + + +``` + +#### Header + +When using a collapsible large title, the last toolbar in the header with `collapse="condense"` no longer has a border. This does not affect the toolbar when the large title is collapsed. + +To get the old style back, add the following CSS to your global stylesheet: + +```css +ion-header.header-collapse-condense ion-toolbar:last-of-type { + --border-width: 0 0 0.55px; +} +``` + +#### Icons + +Ionic 6 now ships with Ionicons 6. Please be sure to review the [Ionicons 6.0.0 Changelog](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) and make any necessary changes. + +#### Input + +The `placeholder` property now has a type of `string | undefined` rather than `null | string | undefined`. + +#### Modal + +Converted `ion-modal` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). + +If you were targeting the internals of `ion-modal` in your CSS, you will need to target the `backdrop` or `content` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables. + +Developers dynamically creating modals using `document.createElement('ion-modal')` will now need to call `modal.remove()` after the modal has been dismissed if they want the modal to be removed from the DOM. + +#### Popover + +Converted `ion-popover` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). + +If you were targeting the internals of `ion-popover` in your CSS, you will need to target the `backdrop`, `arrow`, or `content` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables. + +Developers dynamically creating popovers using `document.createElement('ion-popover')` will now need to call `popover.remove()` after the popover has been dismissed if they want the popover to be removed from the DOM. + +#### Radio + +The `RadioChangeEventDetail` interface has been removed. Instead, listen for the `ionChange` event on `ion-radio-group` and use the `RadioGroupChangeEventDetail` interface. + +#### Searchbar + +The `showClearButton` property now defaults to `'always'` for improved usability with screen readers. + +To get the old behavior, set `showClearButton` to `'focus'`. + +#### Select + +The `placeholder` property now has a type of `string | undefined` rather than `null | string | undefined`. + +#### Tab Bar + +The default iOS tab bar background color has been updated to better reflect the latest iOS styles. The new default value is: + +```css +var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7)); +``` + +#### Textarea + +The `placeholder` property now has a type of `string | undefined` rather than `null | string | undefined`. + +#### Toast + +The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`. + +#### Toolbar + +The default iOS toolbar background color has been updated to better reflect the latest iOS styles. The new default value is: + +```css +var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7)); +``` + + +### Config + +#### Transition Shadow + +The `experimentalTransitionShadow` config option has been removed. The transition shadow is now enabled when running in `ios` mode. + + +### Angular + +#### Config + +The `Config.set()` method has been removed. See https://ionicframework.com/docs/angular/config for examples on how to set config globally, per-component, and per-platform. + +Additionally, the `setupConfig` function is no longer exported from `@ionic/angular`. Developers should use `IonicModule.forRoot` to set the config instead. See https://ionicframework.com/docs/angular/config for more information. + +### React + +#### Config + +All Ionic React applications must now import `setupIonicReact` from `@ionic/react` and call it. If you are setting a custom config with `setupConfig`, pass your config directly to `setupIonicReact` instead: + +**Old** +```javascript +import { setupConfig } from '@ionic/react'; + +setupConfig({ + mode: 'md' +}) +``` + +**New** +```javascript +import { setupIonicReact } from '@ionic/react'; + +setupIonicReact({ + mode: 'md' +}) +``` + +Note that all Ionic React applications must call `setupIonicReact` even if they are not setting custom configuration. + +Additionally, the `setupConfig` function is no longer exported from `@ionic/react`. + +### Vue + +#### Config + +The `setupConfig` function is no longer exported from `@ionic/vue`. Developers should pass their config into the `IonicVue` plugin. See https://ionicframework.com/docs/vue/config for more information. + +#### Tabs Config + +Support for child routes nested inside of tabs has been removed to better conform to Vue Router's best practices. Additional routes should be written as sibling routes with the parent tab as the path prefix: + +**Old** +```typescript +const routes: Array = [ + { + path: '/', + redirect: '/tabs/tab1' + }, + { + path: '/tabs/', + component: Tabs, + children: [ + { + path: '', + redirect: 'tab1' + }, + { + path: 'tab1', + component: () => import('@/views/Tab1.vue'), + children: { + { + path: 'view', + component: () => import('@/views/Tab1View.vue') + } + } + }, + { + path: 'tab2', + component: () => import('@/views/Tab2.vue') + }, + { + path: 'tab3', + component: () => import('@/views/Tab3.vue') + } + ] + } +] +``` + +**New** +```typescript +const routes: Array = [ + { + path: '/', + redirect: '/tabs/tab1' + }, + { + path: '/tabs/', + component: Tabs, + children: [ + { + path: '', + redirect: 'tab1' + }, + { + path: 'tab1', + component: () => import('@/views/Tab1.vue') + }, + { + path: 'tab1/view', + component: () => import('@/views/Tab1View.vue') + }, + { + path: 'tab2', + component: () => import('@/views/Tab2.vue') + }, + { + path: 'tab3', + component: () => import('@/views/Tab3.vue') + } + ] + } +] +``` + +In the example above `tabs/tab1/view` has been rewritten has a sibling route to `tabs/tab1`. The `path` field now includes the `tab1` prefix. + +#### Tabs Router Outlet + +Developers must now provide an `ion-router-outlet` inside of `ion-tabs`. Previously one was generated automatically, but this made it difficult for developers to access the properties on the generated `ion-router-outlet`. + +**Old** +```html + + + ... + + + + +``` + +**New** +```html + + + + ... + + + + +``` + +#### Overlay Events + +Overlay events `onWillPresent`, `onDidPresent`, `onWillDismiss`, and `onDidDismiss` have been removed in favor of `willPresent`, `didPresent`, `willDismiss`, and `didDismiss`. + +This applies to the following components: `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-picker`, `ion-popover`, and `ion-toast`. + +**Old** +```html + + ... + +``` + +**New** +```html + + ... + +``` + +#### Utility Function Types + +- The `IonRouter` type for `useIonRouter` has been renamed to `UseIonRouterResult`. + +- The `IonKeyboardRef` type for `useKeyboard` has been renamed to `UseKeyboardResult`. + + +### Browser and Platform Support + +This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic Framework v6. + +**Minimum Browser Versions** +| Desktop Browser | Supported Versions | +| --------------- | ----------------- | +| Chrome | 60+ | +| Safari | 13+ | +| Firefox | 63+ | +| Edge | 79+ | + +**Minimum JavaScript Framework Versions** + +| Framework | Supported Version | +| --------- | --------------------- | +| Angular | 12+ | +| React | 17+ | +| Vue | 3.0.6+ | + +**Minimum Mobile Platform Versions** + +| Platform | Supported Version | +| -------- | --------------------------------------- | +| iOS | 13+ | +| Android | 5.0+ with Chromium 60+ (See note below) | + +Starting with Android 5.0, the webview was moved to a separate application that can be updated independently of Android. This means that most Android 5.0+ devices are going to be running a modern version of Chromium. However, there are a still a subset of Android devices whose manufacturer has locked the webview version and does not allow the webview to update. These webviews are typically stuck at the version that was available when the device initially shipped. + +As a result, Ionic Framework only supports Android devices and emulators running Android 5.0+ with a webview of Chromium 60 or newer. For context, this is the version that Stencil can support with no polyfills: https://stenciljs.com/docs/browser-support diff --git a/BREAKING_ARCHIVE/v7.md b/BREAKING_ARCHIVE/v7.md new file mode 100644 index 00000000000..c5f5643b95d --- /dev/null +++ b/BREAKING_ARCHIVE/v7.md @@ -0,0 +1,331 @@ +# Breaking Changes + +## Version 7.x + +- [Browser and Platform Support](#version-7x-browser-platform-support) +- [Components](#version-7x-components) + - [Accordion Group](#version-7x-accordion-group) + - [Action Sheet](#version-7x-action-sheet) + - [Back Button](#version-7x-back-button) + - [Button](#version-7x-button) + - [Card Header](#version-7x-card-header) + - [Checkbox](#version-7x-checkbox) + - [Datetime](#version-7x-datetime) + - [Input](#version-7x-input) + - [Item](#version-7x-item) + - [Modal](#version-7x-modal) + - [Overlays](#version-7x-overlays) + - [Picker](#version-7x-picker) + - [Radio Group](#version-7x-radio-group) + - [Range](#version-7x-range) + - [Searchbar](#version-7x-searchbar) + - [Segment](#version-7x-segment) + - [Select](#version-7x-select) + - [Slides](#version-7x-slides) + - [Textarea](#version-7x-textarea) + - [Toggle](#version-7x-toggle) + - [Virtual Scroll](#version-7x-virtual-scroll) +- [Config](#version-7x-config) +- [Types](#version-7x-types) + - [Overlay Attribute Interfaces](#version-7x-overlay-attribute-interfaces) +- [JavaScript Frameworks](#version-7x-javascript-frameworks) + - [Angular](#version-7x-angular) + - [React](#version-7x-react) + - [Vue](#version-7x-vue) +- [CSS Utilities](#version-7x-css-utilities) + - [hidden attribute](#version-7x-hidden-attribute) + +

Browser and Platform Support

+ +This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 7. + +**Minimum Browser Versions** +| Desktop Browser | Supported Versions | +| --------------- | ----------------- | +| Chrome | 79+ | +| Safari | 14+ | +| Firefox | 70+ | +| Edge | 79+ | + +**Minimum JavaScript Framework Versions** + +| Framework | Supported Version | +| --------- | --------------------- | +| Angular | 14+ | +| React | 17+ | +| Vue | 3.0.6+ | + +**Minimum Mobile Platform Versions** + +| Platform | Supported Version | +| -------- | ---------------------- | +| iOS | 14+ | +| Android | 5.1+ with Chromium 79+ | + +

Components

+ +

Accordion Group

+ +- `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header. + +- Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly. + +

Action Sheet

+ +- Action Sheet is updated to align with the design specification. + +**Design tokens** + +| Token | Previous Value | New Value | +| ---------- | -------------- | --------- | +| `--height` | `100%` | `auto` | + +

Button

+ +- Button is updated to align with the design specification for iOS. + +**Design tokens** + +| Token | Previous Value | New Value | +| ---------------------------------- | -------------- | --------- | +| `$button-ios-letter-spacing` | `-0.03em` | `0` | +| `$button-ios-clear-letter-spacing` | `0` | Removed | +| `$button-ios-height` | `2.8em` | `3.1em` | +| `$button-ios-border-radius` | `10px` | `14px` | +| `$button-ios-large-height` | `2.8em` | `3.1em` | +| `$button-ios-large-border-radius` | `12px` | `16px` | + +

Back Button

+ +- Back Button is updated to align with the design specification for iOS. + +**Design tokens** + +| Token | Previous Value | New Value | +| ------------------- | -------------- | --------- | +| `--icon-margin-end` | `-5px` | `1px` | +| `--icon-font-size` | `1.85em` | `1.6em` | + +

Card Header

+ +- The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title. + +

Checkbox

+ +- `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox. + +- The `--background` and `--background-checked` CSS variables have been renamed to `--checkbox-background` and `--checkbox-background-checked` respectively. + +

Datetime

+ +- `ionChange` is no longer emitted when the `value` property of `ion-datetime` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping a date. + +- Datetime no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly. + +- Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored. + +- Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value. + +- The haptics when swiping the wheel picker are now enabled only on iOS. + +

Input

+ +- `ionChange` is no longer emitted when the `value` of `ion-input` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the input and the input losing focus, clicking the clear action within the input, or pressing the "Enter" key. + + - If your application requires immediate feedback based on the user typing actively in the input, consider migrating your event listeners to using `ionInput` instead. + +- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`. + +- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately. + +- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`. + +**Design tokens** + +| Token | Previous Value | New Value | +| ----------------------- | -------------- | --------- | +| `--placeholder-opacity` | `0.5` | `0.6` | + +

Item

+ +**Design tokens** + +iOS: + +| Token | Previous Value | New Value | +| --------------------- | -------------- | --------- | +| `$item-ios-font-size` | `17px` | `16px` | +| `--inner-padding-end` | `10px` | `16px` | +| `--padding-start` | `20px` | `16px` | + +

Modal

+ +- The `swipeToClose` property has been removed in favor of `canDismiss`. +- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`. + +

Overlays

+ +Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. + +

Picker

+ +- The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view. + +

Radio Group

+ +- `ionChange` is no longer emitted when the `value` of `ion-radio-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping an `ion-radio` in the group. + +

Range

+ +- Range is updated to align with the design specification for supported modes. + + **Design tokens** + + iOS: + + | Token | Previous Value | New Value | + | --------------------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | + | `--bar-border-radius` | `0px` | `$range-ios-bar-border-radius` (`2px` default) | + | `--knob-size` | `28px` | `$range-ios-knob-width` (`26px` default) | + | `$range-ios-bar-height` | `2px` | `4px` | + | `$range-ios-bar-background-color` | `rgba(var(--ion-text-color-rgb, 0, 0, 0), .1)` | `var(--ion-color-step-900, #e6e6e6)` | + | `$range-ios-knob-box-shadow` | `0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02)` | `0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12)` | + | `$range-ios-knob-width` | `28px` | `26px` | + +- `ionChange` is no longer emitted when the `value` of `ion-range` is modified externally. `ionChange` is only emitted from user committed changes, such as dragging and releasing the range knob or selecting a new value with the keyboard arrows. + - If your application requires immediate feedback based on the user actively dragging the range knob, consider migrating your event listeners to using `ionInput` instead. + +- The `debounce` property's value value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately. + +- Range no longer clamps assigned values within bounds. Developers will need to validate the value they are assigning to `ion-range` is within the `min` and `max` bounds when programmatically assigning a value. + +- The `name` property defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of `ion-range`. + + + +- `ionChange` is no longer emitted when the `value` of `ion-searchbar` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the searchbar and the searchbar losing focus or pressing the "Enter" key. + + - If your application requires immediate feedback based on the user typing actively in the searchbar, consider migrating your event listeners to using `ionInput` instead. + +- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`. + +- The `debounce` property's default value has changed from 250 to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately. + +- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`. + +**Design tokens** + +| Token | Previous Value | New Value | +| ----------------------- | -------------- | --------- | +| `--placeholder-opacity` | `0.5` | `0.6` | + + +

Segment

+ +- `ionChange` is no longer emitted when the `value` of `ion-segment` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking a segment button or dragging to activate a segment button. + +- The type signature of `value` supports `string | undefined`. Previously the type signature was `string | null | undefined`. + - Developers needing to clear the checked segment item should assign a value of `''` instead of `null`. + +

Select

+ +- `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay. + +- The `icon` CSS Shadow Part now targets an `ion-icon` component. + +**Design tokens** + +| Token | Previous Value | New Value | +| ----------------------- | -------------- | --------- | +| `--placeholder-opacity` | `0.33` | `0.6` | + +

Slides

+ +`ion-slides`, `ion-slide`, and the `IonicSwiper` plugin have been removed from Ionic. + +Developers using these components will need to migrate to using Swiper.js directly, optionally using the `IonicSlides` plugin. Guides for migration and usage are linked below: + +- [Angular](https://ionicframework.com/docs/angular/slides) +- [React](https://ionicframework.com/docs/react/slides) +- [Vue](https://ionicframework.com/docs/vue/slides) + +

Textarea

+ +- `ionChange` is no longer emitted when the `value` of `ion-textarea` is modified externally. `ionChange` is only emitted from user committed changes, such as typing in the textarea and the textarea losing focus. + + - If your application requires immediate feedback based on the user typing actively in the textarea, consider migrating your event listeners to using `ionInput` instead. + +- The `debounce` property has been updated to control the timing in milliseconds to delay the event emission of the `ionInput` event after each keystroke. Previously it would delay the event emission of `ionChange`. + +- The `debounce` property's default value has changed from `0` to `undefined`. If `debounce` is undefined, the `ionInput` event will fire immediately. + +- `ionInput` dispatches an event detail of `null` when the textarea is cleared as a result of `clear-on-edit="true"`. + +- The `detail` payload for the `ionInput` event now contains an object with the current `value` as well as the native event that triggered `ionInput`. + +**Design tokens** + +| Token | Previous Value | New Value | +| ----------------------- | -------------- | --------- | +| `--placeholder-opacity` | `0.5` | `0.6` | + + +

Toggle

+ +- `ionChange` is no longer emitted when the `checked` property of `ion-toggle` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking the toggle to set it on or off. + +- The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively. + +

Virtual Scroll

+ +`ion-virtual-scroll` has been removed from Ionic. + +Developers using the component will need to migrate to a virtual scroll solution provided by their framework: + +- [Angular](https://ionicframework.com/docs/angular/virtual-scroll) +- [React](https://ionicframework.com/docs/react/virtual-scroll) +- [Vue](https://ionicframework.com/docs/vue/virtual-scroll) + +Any references to the virtual scroll types from `@ionic/core` have been removed. Please remove or replace these types: `Cell`, `VirtualNode`, `CellType`, `NodeChange`, `HeaderFn`, `ItemHeightFn`, `FooterHeightFn`, `ItemRenderFn` and `DomRenderFn`. + +

Config

+ +- `innerHTMLTemplatesEnabled` defaults to `false`. Developers who wish to use the `innerHTML` functionality inside of `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` must set this config to `true` and properly sanitize their content. + +

Types

+ +

Overlay Attribute Interfaces

+ +`ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead. + +

JavaScript Frameworks

+ +

Angular

+ +- Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0). + +- `null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, `ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`. + +- The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components. + +

React

+ +`@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite. + +

Vue

+ +`@ionic/vue` and `@ionic/vue-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite. + +

CSS Utilities

+ +

`hidden` attribute

+ +The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation. + +Developers can add the following CSS to their global stylesheet if they need the old behavior: + +```css +[hidden] { + display: none !important; +} +``` diff --git a/BREAKING_ARCHIVE/v8.md b/BREAKING_ARCHIVE/v8.md new file mode 100644 index 00000000000..d0e6b063158 --- /dev/null +++ b/BREAKING_ARCHIVE/v8.md @@ -0,0 +1,282 @@ +# Breaking Changes + +## Version 8.x + +- [Browser and Platform Support](#version-8x-browser-platform-support) +- [Dark Mode](#version-8x-dark-mode) +- [Global Styles](#version-8x-global-styles) +- [Haptics](#version-8x-haptics) +- [Components](#version-8x-components) + - [Button](#version-8x-button) + - [Checkbox](#version-8x-checkbox) + - [Content](#version-8x-content) + - [Datetime](#version-8x-datetime) + - [Input](#version-8x-input) + - [Item](#version-8x-item) + - [Modal](#version-8x-modal) + - [Nav](#version-8x-nav) + - [Picker](#version-8x-picker) + - [Progress bar](#version-8x-progress-bar) + - [Radio](#version-8x-radio) + - [Range](#version-8x-range) + - [Searchbar](#version-8x-searchbar) + - [Select](#version-8x-select) + - [Textarea](#version-8x-textarea) + - [Toggle](#version-8x-toggle) +- [Framework Specific](#version-8x-framework-specific) + - [Angular](#version-8x-angular) + +

Browser and Platform Support

+ +This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 8. + +**Minimum Browser Versions** +| Desktop Browser | Supported Versions | +| --------------- | ----------------- | +| Chrome | 89+ | +| Safari | 15+ | +| Firefox | 75+ | +| Edge | 89+ | + +**Minimum JavaScript Framework Versions** +| Framework | Supported Version | +| --------- | --------------------- | +| Angular | 16+ | +| React | 17+ | +| Vue | 3.0.6+ | + +**Minimum Mobile Platform Versions** +| Platform | Supported Version | +| -------- | ---------------------- | +| iOS | 15+ | +| Android | 5.1+ with Chromium 89+ | + +Ionic Framework v8 removes backwards support for CSS Animations in favor of the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). All minimum browser versions listed above support the Web Animations API. + +

Dark Mode

+ + +In previous versions, it was recommended to define the dark palette in the following way: + +```css +@media (prefers-color-scheme: dark) { + body { + /* global app variables */ + } + + .ios body { + /* global ios app variables */ + } + + .md body { + /* global md app variables */ + } +} +``` + +In Ionic Framework version 8, the dark palette is being distributed via css files that can be imported. Below is an example of importing a dark palette file in Angular: + +```css +/* @import '@ionic/angular/css/palettes/dark.always.css'; */ +/* @import "@ionic/angular/css/palettes/dark.class.css"; */ +@import "@ionic/angular/css/palettes/dark.system.css"; +``` + +By importing the `dark.system.css` file, the dark palette variables will be defined like the following: + +```css +@media (prefers-color-scheme: dark) { + :root { + /* global app variables */ + } + + :root.ios { + /* global ios app variables */ + } + + :root.md { + /* global md app variables */ + } +} +``` + +Notice that the dark palette is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `` element and is identical to the selector `html`, except that its specificity is higher. + +While migrating to include the new dark palette files is unlikely to cause breaking changes, these new selectors can lead to unexpected overrides if custom CSS variables are being set on the `body` element. We recommend updating any instances where global application variables are set to target the `:root` selector instead. + +For more information on the new dark palette files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode). + +

Global Styles

+ +

Text Color

+ +The `core.css` file has been updated to set the text color on the `body` element: + +```diff +body { ++ color: var(--ion-text-color); +} +``` + +This allows components to inherit the color properly when used outside of Ionic Framework and is required for custom themes to work properly. However, it may have unintentional side effects in apps if the color was not expected to inherit. + +

Dynamic Font

+ +The `core.css` file has been updated to enable dynamic font scaling by default. + +The `--ion-default-dynamic-font` variable has been removed and replaced with `--ion-dynamic-font`. + +Developers who had previously chosen dynamic font scaling by activating it in their global stylesheets can revert to the default setting by removing their custom CSS. In doing so, their application will seamlessly continue utilizing dynamic font scaling as it did before. It's essential to note that altering the font-size of the html element should be avoided, as it may disrupt the proper functioning of dynamic font scaling. + +Developers who want to disable dynamic font scaling can set `--ion-dynamic-font: initial;` in their global stylesheets. However, this is not recommended because it may introduce accessibility challenges for users who depend on enlarged font sizes. + +For more information on the dynamic font, refer to the [Dynamic Font Scaling documentation](https://ionicframework.com/docs/layout/dynamic-font-scaling). + +

Haptics

+ +- Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components. + +

Components

+ +

Button

+ +- Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities). + +

Checkbox

+ + The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax). + +

Content

+ +- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host. + +

Datetime

+ +- The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`. + - Developers using the CSS variables available on `ion-item` will need to migrate their CSS to use CSS properties. For example: + ```diff + ion-datetime::part(month-year-button) { + - --background: red; + + + background: red; + } + ``` + +

Input

+ +- `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input. +- `accept` has been removed from the `ion-input` component. This was previously used in conjunction with the `type="file"`. However, the `file` value for `type` is not a valid value in Ionic Framework. +- The `legacy` property and support for the legacy syntax, which involved placing an `ion-input` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy input syntax, refer to the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax). + +

Item

+ +- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`. +- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`. +- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`. +- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`. +- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`. +- Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected. + +
CSS variables
+ +The following deprecated CSS variables have been removed: `--highlight-height`, `--highlight-color-focused`, `--highlight-color-valid`, and `--highlight-color-invalid`. These variables were used on the bottom border highlight of an item when the form control inside of that item was focused. The form control syntax was [simplified in v7](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax) so that inputs, selects, and textareas would no longer be required to be used inside of an item. + +If you have not yet migrated to the modern form control syntax, migration guides for each of the form controls that added a highlight to item can be found below: +- [Input migration documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax) +- [Select migration documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax) +- [Textarea migration documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax) + +Once all form controls are using the modern syntax, the same variables can be used to customize them from the form control itself: + +| Name | Description | +| ----------------------------| ----------------------------------------| +| `--highlight-color-focused` | The color of the highlight when focused | +| `--highlight-color-invalid` | The color of the highlight when invalid | +| `--highlight-color-valid` | The color of the highlight when valid | +| `--highlight-height` | The height of the highlight indicator | + +The following styles for item: + +```css +ion-item { + --highlight-color-focused: purple; + --highlight-color-valid: blue; + --highlight-color-invalid: orange; + --highlight-height: 6px; +} +``` + +will instead be applied on the form controls: + +```css +ion-input, +ion-textarea, +ion-select { + --highlight-color-focused: purple; + --highlight-color-valid: blue; + --highlight-color-invalid: orange; + --highlight-height: 6px; +} +``` + +> [!NOTE] +> The input and textarea components are scoped, which means they will automatically scope their CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` or `ion-textarea` for customization will not work; therefore we recommend adding a class and customizing it that way. + +

Modal

+ +- Detection for Capacitor <= 2 with applying status bar styles has been removed. Developers should ensure they are using Capacitor 3 or later when using the card modal presentation. + +

Nav

+ +- `getLength` returns `Promise` instead of ``. This method was not previously available in Nav's TypeScript interface, but developers could still access it by casting Nav as `any`. Developers should ensure they `await` their `getLength` call before accessing the returned value. + +

Picker

+ +- `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period. + - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively. + - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. + +

Progress bar

+ +- The `--buffer-background` CSS variable has been removed. Use `--background` instead. + +

Toast

+ +- `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons. + +For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming). + +

Radio

+ +- The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax). + +

Range

+ +- The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling ` -# [2.0.0-rc.3](https://github.com/driftyco/ionic/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2016-11-17) +# Change Log +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [9.0.1](https://github.com/ionic-team/ionic-framework/compare/v9.0.0...v9.0.1) (2026-08-26) + +### Bug Fixes + +* **core:** restore prop defaults when consumers downlevel ([#31375](https://github.com/ionic-team/ionic-framework/issues/31375)) ([b4174f9](https://github.com/ionic-team/ionic-framework/commit/b4174f96f5061ebc93119cc7e1363162ae666ae9)), closes [#31280](https://github.com/ionic-team/ionic-framework/issues/31280) +* **item-sliding, segment-button:** read props after frameworks assign them ([#31391](https://github.com/ionic-team/ionic-framework/issues/31391)) ([7956b97](https://github.com/ionic-team/ionic-framework/commit/7956b973b8bb55e5f0cae844ee992fe9921432cb)), closes [#31388](https://github.com/ionic-team/ionic-framework/issues/31388) +* **overlays:** restore presented state after a DOM move ([#31400](https://github.com/ionic-team/ionic-framework/issues/31400)) ([bfff8e1](https://github.com/ionic-team/ionic-framework/commit/bfff8e1377a8faff3581e61026733ce29b671513)), closes [#31389](https://github.com/ionic-team/ionic-framework/issues/31389) [#31390](https://github.com/ionic-team/ionic-framework/issues/31390) [#31389](https://github.com/ionic-team/ionic-framework/issues/31389) +* **picker-column:** commit value on outside press ([#31397](https://github.com/ionic-team/ionic-framework/issues/31397)) ([95e2224](https://github.com/ionic-team/ionic-framework/commit/95e222488d4e4bac9c6c8c0b42a2154082846767)), closes [#30449](https://github.com/ionic-team/ionic-framework/issues/30449) [#30674](https://github.com/ionic-team/ionic-framework/issues/30674) +* **react-router:** skip page clone when nothing will animate ([#31387](https://github.com/ionic-team/ionic-framework/issues/31387)) ([898001c](https://github.com/ionic-team/ionic-framework/commit/898001c5c6a92a3269dd8e60c4e79da1c634af9d)) +* **refresher:** validate slot after frameworks assign it ([#31377](https://github.com/ionic-team/ionic-framework/issues/31377)) ([d41f258](https://github.com/ionic-team/ionic-framework/commit/d41f25860dcb9a71a40226973cca9ca223b7f7ca)), closes [#31376](https://github.com/ionic-team/ionic-framework/issues/31376) +* **select:** derive option text from all child nodes ([#31382](https://github.com/ionic-team/ionic-framework/issues/31382)) ([7879ec5](https://github.com/ionic-team/ionic-framework/commit/7879ec5763be92b4ecf03c6c58975265166e33ba)), closes [#31381](https://github.com/ionic-team/ionic-framework/issues/31381) + + +# [9.0.0](https://github.com/ionic-team/ionic-framework/compare/v8.8.19...v9.0.0) (2026-08-19) + +**Full Changelog**: https://github.com/ionic-team/ionic-framework/compare/v8.8.19...v9.0.0 + +**Migration guide**: https://ionicframework.com/docs/updating/9-0 + +**Breaking changes**: https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-9x + + +## [8.8.19](https://github.com/ionic-team/ionic-framework/compare/v8.8.18...v8.8.19) (2026-08-19) + +### Bug Fixes + +* **gesture:** remove leaked optsTest listener from passive support check ([#31363](https://github.com/ionic-team/ionic-framework/issues/31363)) ([c689000](https://github.com/ionic-team/ionic-framework/commit/c6890002df0a1ec5ac030626b1694e87022365c0)), closes [#30539](https://github.com/ionic-team/ionic-framework/issues/30539) +* **menu:** respect ion-app dir attribute for menu animation side ([#31246](https://github.com/ionic-team/ionic-framework/issues/31246)) ([2618a6f](https://github.com/ionic-team/ionic-framework/commit/2618a6f7bd793ad09e38e4868d753189610eff9d)), closes [#30226](https://github.com/ionic-team/ionic-framework/issues/30226) +* **range:** update knob positions when dualKnobs changes ([#31365](https://github.com/ionic-team/ionic-framework/issues/31365)) ([7d64d62](https://github.com/ionic-team/ionic-framework/commit/7d64d62a31d59078560575ad9c4fc67a8e49e524)), closes [#31026](https://github.com/ionic-team/ionic-framework/issues/31026) + + +## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12) + + +### Bug Fixes + +* **core:** resolve lazy component chunks under Vite 8 ([#31341](https://github.com/ionic-team/ionic-framework/issues/31341)) ([a73e183](https://github.com/ionic-team/ionic-framework/commit/a73e1831d389e6dc968f646c0322b3984c1d3224)), closes [#31333](https://github.com/ionic-team/ionic-framework/issues/31333) +* **core:** update offsets when safe-area insets arrive late ([#31343](https://github.com/ionic-team/ionic-framework/issues/31343)) ([bc4fce2](https://github.com/ionic-team/ionic-framework/commit/bc4fce218d6c3aaac69f11d416b9fc8c8dacdfa4)), closes [#31337](https://github.com/ionic-team/ionic-framework/issues/31337) +* **datetime:** tear down ready state when an overlay dismisses ([#31335](https://github.com/ionic-team/ionic-framework/issues/31335)) ([d59e341](https://github.com/ionic-team/ionic-framework/commit/d59e3415df06cb26a7dea688f6720ba228b775d5)), closes [#31155](https://github.com/ionic-team/ionic-framework/issues/31155) [#31143](https://github.com/ionic-team/ionic-framework/issues/31143) +* **modal:** allow pull-to-refresh with a custom scroll host ([#31339](https://github.com/ionic-team/ionic-framework/issues/31339)) ([d6202a8](https://github.com/ionic-team/ionic-framework/commit/d6202a8933ad77735fceca05cb4b0fe6b33bfb55)), closes [#31332](https://github.com/ionic-team/ionic-framework/issues/31332) + + + + + +## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05) + + +### Bug Fixes + +* **checkbox,radio,toggle:** add missing keyboard focus indicators ([#31295](https://github.com/ionic-team/ionic-framework/issues/31295)) ([2f9c0b7](https://github.com/ionic-team/ionic-framework/commit/2f9c0b7d8fa6371785cfdf1d99857eece4835e4d)) +* **fab-button:** restore submit, reset, and disabled form functionality ([#31249](https://github.com/ionic-team/ionic-framework/issues/31249)) ([93ee380](https://github.com/ionic-team/ionic-framework/commit/93ee38015125619509b9aa844d6f0025be0a71b7)), closes [#18550](https://github.com/ionic-team/ionic-framework/issues/18550) +* **react-router:** symmetric pathname+search url comparison ([#31153](https://github.com/ionic-team/ionic-framework/issues/31153)) ([ffef25d](https://github.com/ionic-team/ionic-framework/commit/ffef25d2e2597bee5fdb8833d9e50ff9234d74e0)), closes [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#25534](https://github.com/ionic-team/ionic-framework/issues/25534) +* **refresher:** avoid gesture setup after disconnect ([#31316](https://github.com/ionic-team/ionic-framework/issues/31316)) ([d9b877f](https://github.com/ionic-team/ionic-framework/commit/d9b877f6059992808cccec503dbe2a30f6ccdb48)), closes [#31315](https://github.com/ionic-team/ionic-framework/issues/31315) +* **tab:** retry lazy load after a failed attach ([#31324](https://github.com/ionic-team/ionic-framework/issues/31324)) ([81b52e2](https://github.com/ionic-team/ionic-framework/commit/81b52e25bd8fa55b905da2791d84b381a2db630b)) + + + + + +## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29) + + +### Bug Fixes + +* **angular:** guard transition against destroyed router outlet ([#31297](https://github.com/ionic-team/ionic-framework/issues/31297)) ([fdef61c](https://github.com/ionic-team/ionic-framework/commit/fdef61cc74285caff0549ba8bdac70cedaaba865)), closes [#31296](https://github.com/ionic-team/ionic-framework/issues/31296) +* **modal:** keep focus on dialog for cycle sheet modals ([#31293](https://github.com/ionic-team/ionic-framework/issues/31293)) ([b4b2603](https://github.com/ionic-team/ionic-framework/commit/b4b2603210b313fc2f2ee2c88b9112751e24b338)) +* **select:** prevent floating label and placeholder from overlapping when focused ([#31276](https://github.com/ionic-team/ionic-framework/issues/31276)) ([e987009](https://github.com/ionic-team/ionic-framework/commit/e9870091c2f7460a1dc12c4b407ddfde39e1b156)), closes [#30401](https://github.com/ionic-team/ionic-framework/issues/30401) + + + + + +## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22) + + +### Bug Fixes + +* **angular-server:** fallback to scoped+annotations when SSR DOM lacks attachShadow ([#30967](https://github.com/ionic-team/ionic-framework/issues/30967)) ([ae6911f](https://github.com/ionic-team/ionic-framework/commit/ae6911f6c8d46467ae54114295688bbba5ccbf5e)), closes [#29751](https://github.com/ionic-team/ionic-framework/issues/29751) +* **modal:** focus the dialog wrapper on present so screen readers can enter the modal ([#31260](https://github.com/ionic-team/ionic-framework/issues/31260)) ([6251eb8](https://github.com/ionic-team/ionic-framework/commit/6251eb85db0e5b43b9e09604248dc8451e1664c0)) + + + + + +## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15) + + +### Bug Fixes + +* **tab-bar:** fire tab change events on tab click ([#31262](https://github.com/ionic-team/ionic-framework/issues/31262)) ([44461dd](https://github.com/ionic-team/ionic-framework/commit/44461ddda5ef44030f477931dd94cce4674801a6)), closes [#30145](https://github.com/ionic-team/ionic-framework/issues/30145) + + + + + +## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01) + + +### Bug Fixes + +* **button:** sync disabled state and type in renderHiddenButton ([#31225](https://github.com/ionic-team/ionic-framework/issues/31225)) ([0c76135](https://github.com/ionic-team/ionic-framework/commit/0c76135f8c373dfad66a65717092ffd4d52461c5)), closes [#30968](https://github.com/ionic-team/ionic-framework/issues/30968) +* **datetime-button:** respect datetime constraints in initial text ([#31218](https://github.com/ionic-team/ionic-framework/issues/31218)) ([044f358](https://github.com/ionic-team/ionic-framework/commit/044f3589f184b51f093419556a38d1a0ff2413d6)), closes [#30183](https://github.com/ionic-team/ionic-framework/issues/30183) +* **datetime:** don't setActiveParts from month/year wheels when multiple=true ([#31248](https://github.com/ionic-team/ionic-framework/issues/31248)) ([bf46a3d](https://github.com/ionic-team/ionic-framework/commit/bf46a3d7405e77c28659dbfc0a094023a9e8bd87)), closes [#29673](https://github.com/ionic-team/ionic-framework/issues/29673) +* **datetime:** respect config animated setting when paging month calendar ([#31227](https://github.com/ionic-team/ionic-framework/issues/31227)) ([a35f8a9](https://github.com/ionic-team/ionic-framework/commit/a35f8a98e31f5895e36c845484207f3ed4c74689)), closes [#30484](https://github.com/ionic-team/ionic-framework/issues/30484) + + + + + +## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24) + + +### Bug Fixes + +* **angular:** honor modifier-click on routerLink ([#31230](https://github.com/ionic-team/ionic-framework/issues/31230)) ([2ac9851](https://github.com/ionic-team/ionic-framework/commit/2ac98512c78f6d47e3a6a17ff0159047ba14a5cd)), closes [#26394](https://github.com/ionic-team/ionic-framework/issues/26394) +* **angular:** run change detection on attached overlay views ([#31235](https://github.com/ionic-team/ionic-framework/issues/31235)) ([8e76fd0](https://github.com/ionic-team/ionic-framework/commit/8e76fd0cceeb878ad4b071515acb593892512111)), closes [#31220](https://github.com/ionic-team/ionic-framework/issues/31220) + + + + + +## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17) + + +### Bug Fixes + +* **react:** remove relocated inline overlays orphaned on unmount ([#31223](https://github.com/ionic-team/ionic-framework/issues/31223)) ([d28d25b](https://github.com/ionic-team/ionic-framework/commit/d28d25b798d32db6148155bb34fdbd13243286d9)) +* **searchbar:** fix search icon sometimes being offset incorrectly ([#31212](https://github.com/ionic-team/ionic-framework/issues/31212)) ([3394c30](https://github.com/ionic-team/ionic-framework/commit/3394c305b5141326cc045132507dff62dd0e4dd6)), closes [#30434](https://github.com/ionic-team/ionic-framework/issues/30434) + + + + + +## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10) + + +### Bug Fixes + +* **modal:** prevent sheet gesture crash with late-bound breakpoints ([#31202](https://github.com/ionic-team/ionic-framework/issues/31202)) ([c61265a](https://github.com/ionic-team/ionic-framework/commit/c61265adb5891b24d4d413245244ee8dcf61757e)) + + + + + +## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03) + + +### Bug Fixes + +* **router:** support anchor fragments in href ([#31172](https://github.com/ionic-team/ionic-framework/issues/31172)) ([a982516](https://github.com/ionic-team/ionic-framework/commit/a982516afad1e848534db702694ef47f5e49c78d)), closes [#19566](https://github.com/ionic-team/ionic-framework/issues/19566) [#19365](https://github.com/ionic-team/ionic-framework/issues/19365) + + + + + +## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20) + + +### Bug Fixes + +* **react:** bind events properly for overlays rendered within a nav ([#31159](https://github.com/ionic-team/ionic-framework/issues/31159)) ([fa4593d](https://github.com/ionic-team/ionic-framework/commit/fa4593d8a4d61a583dbf6fa551cd846fe258624f)), closes [#27843](https://github.com/ionic-team/ionic-framework/issues/27843) +* **tabs:** preserve query params and fragment from tab button href ([#31154](https://github.com/ionic-team/ionic-framework/issues/31154)) ([0182bba](https://github.com/ionic-team/ionic-framework/commit/0182bba06d6171dd2faf80556fd2131abf03fa93)), closes [#25470](https://github.com/ionic-team/ionic-framework/issues/25470) +* **vue-router:** prevent out-of-bounds index when popping across tabs ([#31148](https://github.com/ionic-team/ionic-framework/issues/31148)) ([c88c0de](https://github.com/ionic-team/ionic-framework/commit/c88c0de3ade92469fa1f37e1b8220911adf113e0)), closes [#29413](https://github.com/ionic-team/ionic-framework/issues/29413) + + + + + +## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13) + + +### Bug Fixes + +* **alert:** switch to vertical layout when two buttons wrap ([#31130](https://github.com/ionic-team/ionic-framework/issues/31130)) ([07675f9](https://github.com/ionic-team/ionic-framework/commit/07675f9ed976867827301808dc7d9e857f8a33ae)) +* **input:** scroll assist no longer fires duplicate click events ([#31124](https://github.com/ionic-team/ionic-framework/issues/31124)) ([4670996](https://github.com/ionic-team/ionic-framework/commit/4670996a41e406cc831f0982923d3bde7572eb88)), closes [#30412](https://github.com/ionic-team/ionic-framework/issues/30412) + + + + + +## [8.8.6](https://github.com/ionic-team/ionic-framework/compare/v8.8.5...v8.8.6) (2026-05-06) + + +### Bug Fixes + +* **action-sheet:** restore action-sheet-selected class on non-radio buttons ([#31109](https://github.com/ionic-team/ionic-framework/issues/31109)) ([c18502f](https://github.com/ionic-team/ionic-framework/commit/c18502f3efdec5440a11289235a93c62ce27ab89)), closes [#31090](https://github.com/ionic-team/ionic-framework/issues/31090) +* **datetime:** prevent hidden-state observer from tearing down ready class on initial entry ([#31108](https://github.com/ionic-team/ionic-framework/issues/31108)) ([30b479a](https://github.com/ionic-team/ionic-framework/commit/30b479a53acbc16961002df256bec358dc11e7fa)) +* **segment:** segment drag would set disabled segment button checked ([#31112](https://github.com/ionic-team/ionic-framework/issues/31112)) ([44be424](https://github.com/ionic-team/ionic-framework/commit/44be424221bee11ffbe91c4b1fa0a4d56fe1ecac)) + + + + + +## [8.8.5](https://github.com/ionic-team/ionic-framework/compare/v8.8.4...v8.8.5) (2026-04-29) + + +### Bug Fixes + +* **modal:** remove safe-area gap and flash in fullscreen modals ([#31092](https://github.com/ionic-team/ionic-framework/issues/31092)) ([f3cd39b](https://github.com/ionic-team/ionic-framework/commit/f3cd39b7fb291286374285c4a326ec6b9a8ea237)), closes [#31015](https://github.com/ionic-team/ionic-framework/issues/31015) +* **select:** select focused option on Enter in popover and modal interfaces ([#31093](https://github.com/ionic-team/ionic-framework/issues/31093)) ([fd79771](https://github.com/ionic-team/ionic-framework/commit/fd79771e5be77c9f38379a3a7b9ab44bb11ff325)), closes [#30561](https://github.com/ionic-team/ionic-framework/issues/30561) + + + + + +## [8.8.4](https://github.com/ionic-team/ionic-framework/compare/v8.8.3...v8.8.4) (2026-04-15) + + +### Bug Fixes + +* **checkbox:** show labels after page navigation ([#31062](https://github.com/ionic-team/ionic-framework/issues/31062)) ([f4ac445](https://github.com/ionic-team/ionic-framework/commit/f4ac4459f8317bd5eeff7d4809f9cb0991c8efd9)), closes [#31052](https://github.com/ionic-team/ionic-framework/issues/31052) +* **datetime:** multiple month selected and flakiness display ([#31053](https://github.com/ionic-team/ionic-framework/issues/31053)) ([308aef5](https://github.com/ionic-team/ionic-framework/commit/308aef569d8c6ebc3ad2186bca6969da8e4b2a8d)) +* **tab-button:** update dark palette focused background color ([#31050](https://github.com/ionic-team/ionic-framework/issues/31050)) ([dec46b5](https://github.com/ionic-team/ionic-framework/commit/dec46b5d317080dd5d97dc056f0d8e6d4c8c45ac)) + + + + + +## [8.8.3](https://github.com/ionic-team/ionic-framework/compare/v8.8.2...v8.8.3) (2026-04-01) + + +### Bug Fixes + +* **datetime:** scroll failing for adjacent days on ios ([#31033](https://github.com/ionic-team/ionic-framework/issues/31033)) ([3afd67f](https://github.com/ionic-team/ionic-framework/commit/3afd67f997521290a34c4448445ae227dc67f8f1)) +* **input-otp:** prevent deletion and paste when disabled or readonly ([#30983](https://github.com/ionic-team/ionic-framework/issues/30983)) ([81aa977](https://github.com/ionic-team/ionic-framework/commit/81aa977fde4867146adf67fcf72e24026574929c)), closes [#30913](https://github.com/ionic-team/ionic-framework/issues/30913) + + + + + +## [8.8.2](https://github.com/ionic-team/ionic-framework/compare/v8.8.1...v8.8.2) (2026-03-25) + + +### Bug Fixes + +* **angular:** forward generic type parameter on ModalOptions and PopoverOptions ([#31022](https://github.com/ionic-team/ionic-framework/issues/31022)) ([cbfe7cc](https://github.com/ionic-team/ionic-framework/commit/cbfe7cce3be345eacbf9fe29e74438a927c16679)), closes [#31012](https://github.com/ionic-team/ionic-framework/issues/31012) +* **checkbox:** re-evaluate label visibility when label is updated ([#30980](https://github.com/ionic-team/ionic-framework/issues/30980)) ([ce83407](https://github.com/ionic-team/ionic-framework/commit/ce83407e1debbe74f20d2d6dc2535a0ef3f974a0)) +* **datetime:** days keep in focus after changing the month ([#31021](https://github.com/ionic-team/ionic-framework/issues/31021)) ([5fdaba2](https://github.com/ionic-team/ionic-framework/commit/5fdaba2b021fe8b2b43a49eae7c687544c97d502)) + + + + + +## [8.8.1](https://github.com/ionic-team/ionic-framework/compare/v8.8.0...v8.8.1) (2026-03-06) + + +### Bug Fixes + +* **accordion:** update tabindex based on disabled state ([#30986](https://github.com/ionic-team/ionic-framework/issues/30986)) ([0e76a69](https://github.com/ionic-team/ionic-framework/commit/0e76a69370083702568825c29d63cf257d6b88f1)) +* **angular:** export RefresherPullEnd types ([#30991](https://github.com/ionic-team/ionic-framework/issues/30991)) ([72abcca](https://github.com/ionic-team/ionic-framework/commit/72abccaad8df3c1db004da28610fddd95ac93c02)) + + +### Features + +* **toast:** add wrapper and content parts (originally intended for 8.8.0 but omitted from that release) ([#30992](https://github.com/ionic-team/ionic-framework/issues/30992)) ([366f00e](https://github.com/ionic-team/ionic-framework/commit/366f00e25f06e28aa7166275445716c2d301e44a)), closes [#30735](https://github.com/ionic-team/ionic-framework/issues/30735) + + + + + +# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04) + + +### Features + +* **angular:** add custom injector support for modal and popover controllers ([#30899](https://github.com/ionic-team/ionic-framework/issues/30899)) ([822da42](https://github.com/ionic-team/ionic-framework/commit/822da428af86cd9b036b81515272321eb8fa586c)), closes [#30638](https://github.com/ionic-team/ionic-framework/issues/30638) +* **content:** add content-fullscreen class when fullscreen is true ([#30926](https://github.com/ionic-team/ionic-framework/issues/30926)) ([d74b11b](https://github.com/ionic-team/ionic-framework/commit/d74b11bc19d6268b256daf23ba6f107483c00320)) +* **datetime:** add header parts ([#30945](https://github.com/ionic-team/ionic-framework/issues/30945)) ([6ea186d](https://github.com/ionic-team/ionic-framework/commit/6ea186d96d80a94b774d4d0a51d536e0e5599935)) +* **datetime:** add wheel part to ion-picker-column ([#30934](https://github.com/ionic-team/ionic-framework/issues/30934)) ([0cf4c03](https://github.com/ionic-team/ionic-framework/commit/0cf4c03e298bb4f7eea71c966a1473765ebd6d7a)) +* **item-divider:** add inner and container parts ([#30928](https://github.com/ionic-team/ionic-framework/issues/30928)) ([5cdeb7f](https://github.com/ionic-team/ionic-framework/commit/5cdeb7fd357298f15e7ae29b14412d97bdc7c656)) +* **item-option:** add inner and container parts ([#30929](https://github.com/ionic-team/ionic-framework/issues/30929)) ([f8f7ffd](https://github.com/ionic-team/ionic-framework/commit/f8f7ffda318c0143d9bb5c79fe55b4ecb88e6ce3)) +* **item:** add inner and container parts ([#30927](https://github.com/ionic-team/ionic-framework/issues/30927)) ([a2c6559](https://github.com/ionic-team/ionic-framework/commit/a2c655923bb1cff51864949575e19028623c695d)) +* **list-header:** add inner part ([#30930](https://github.com/ionic-team/ionic-framework/issues/30930)) ([ef73476](https://github.com/ionic-team/ionic-framework/commit/ef73476e08670630907e775a38f9ed30a84e3f1f)) +* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4)), closes [#23955](https://github.com/ionic-team/ionic-framework/issues/23955) +* **range:** add classes and expose parts to allow individual styling of dual knobs ([#30941](https://github.com/ionic-team/ionic-framework/issues/30941)) ([5bcf921](https://github.com/ionic-team/ionic-framework/commit/5bcf92184118055483bf306ab9e319b8e3e61870)), closes [#29862](https://github.com/ionic-team/ionic-framework/issues/29862) +* **range:** add classes to the range when the value is at the min or max ([#30932](https://github.com/ionic-team/ionic-framework/issues/30932)) ([fac1a66](https://github.com/ionic-team/ionic-framework/commit/fac1a6673c88a531f1d79656be4eb544f235f819)) +* **refresher:** add ionPullStart and ionPullEnd events ([#30946](https://github.com/ionic-team/ionic-framework/issues/30946)) ([814c2e5](https://github.com/ionic-team/ionic-framework/commit/814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b)), closes [#24524](https://github.com/ionic-team/ionic-framework/issues/24524) +* **segment-view:** add swipeGesture property to disable swiping ([#30948](https://github.com/ionic-team/ionic-framework/issues/30948)) ([46806bd](https://github.com/ionic-team/ionic-framework/commit/46806bd6e2af90a0b31fca68f508c06d3d281ec0)), closes [#30290](https://github.com/ionic-team/ionic-framework/issues/30290) +* **select:** add wrapper and bottom shadow parts ([#30951](https://github.com/ionic-team/ionic-framework/issues/30951)) ([5cea5ae](https://github.com/ionic-team/ionic-framework/commit/5cea5aeb44393edab7064e5980a1eb7e607d1b8d)) +* **select:** pass cancelText property to modal interface ([#30282](https://github.com/ionic-team/ionic-framework/issues/30282)) ([6e4f60a](https://github.com/ionic-team/ionic-framework/commit/6e4f60af4c188ae04028b444aa21118ae27c2ca7)) +* **textarea:** reflect disabled and readonly props ([#30910](https://github.com/ionic-team/ionic-framework/issues/30910)) ([55735df](https://github.com/ionic-team/ionic-framework/commit/55735df3fa62c8e259c56db3169f3d5459e71c0c)) + + + + + +## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25) + + +### Bug Fixes + +* **datetime:** stretch ion-buttons to fill space for ios ([#30963](https://github.com/ionic-team/ionic-framework/issues/30963)) ([d46b0b1](https://github.com/ionic-team/ionic-framework/commit/d46b0b15f6a652da6f863cf303e7ce06cfc820a8)) +* **many:** clear timeouts ([#30851](https://github.com/ionic-team/ionic-framework/issues/30851)) ([70b1237](https://github.com/ionic-team/ionic-framework/commit/70b1237823dd0cdab852486a6b2cbbfe0d0aaae9)), closes [#30860](https://github.com/ionic-team/ionic-framework/issues/30860) +* **modal, popover:** respect safe area insets on popovers and modals ([#30949](https://github.com/ionic-team/ionic-framework/issues/30949)) ([6490797](https://github.com/ionic-team/ionic-framework/commit/6490797851cede3bfda893a19b10f165259ec988)), closes [#28411](https://github.com/ionic-team/ionic-framework/issues/28411) +* **nav-controller:** reset direction state when navigation is canceled ([#30955](https://github.com/ionic-team/ionic-framework/issues/30955)) ([53172d1](https://github.com/ionic-team/ionic-framework/commit/53172d1a4035d5b510c230553aabd53dc1389e4b)) +* **radio-group:** prevent DOMException and NotFoundError when filtering radios ([#30958](https://github.com/ionic-team/ionic-framework/issues/30958)) ([682a17e](https://github.com/ionic-team/ionic-framework/commit/682a17ebb754da7714989623cf84b75e715e20e1)), closes [#30279](https://github.com/ionic-team/ionic-framework/issues/30279) [#30359](https://github.com/ionic-team/ionic-framework/issues/30359) +* **toast:** keep icon on the same line as long message in stacked layout ([#30923](https://github.com/ionic-team/ionic-framework/issues/30923)) ([442e3e9](https://github.com/ionic-team/ionic-framework/commit/442e3e983107a69cea4fb5587fb33da718eee8a3)), closes [#30908](https://github.com/ionic-team/ionic-framework/issues/30908) + + + + + +## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14) + + +### Bug Fixes + +* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc)) +* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f)) +* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d)) + + + + + +## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31) + + +### Bug Fixes + +* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679) + + + + + +## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23) + + +### Bug Fixes + +* **core:** use Capacitor safe-area CSS variables on older WebViews ([#30865](https://github.com/ionic-team/ionic-framework/issues/30865)) ([8573bf8](https://github.com/ionic-team/ionic-framework/commit/8573bf8083f75eda13c954a56731a6aac8ca5724)) +* **header:** show iOS condense header when app is in MD mode ([#30690](https://github.com/ionic-team/ionic-framework/issues/30690)) ([f83b000](https://github.com/ionic-team/ionic-framework/commit/f83b0005309400d674e43c497bdffbcb9d2c4d94)), closes [#29929](https://github.com/ionic-team/ionic-framework/issues/29929) +* **input-password-toggle:** improve screen reader announcements ([#30885](https://github.com/ionic-team/ionic-framework/issues/30885)) ([12ede4b](https://github.com/ionic-team/ionic-framework/commit/12ede4b79c8d5cffc2b014c7c8a0d2ef1d3bf90d)) +* **modal:** dismiss top-most overlay when multiple IDs match ([#30883](https://github.com/ionic-team/ionic-framework/issues/30883)) ([3b60a1d](https://github.com/ionic-team/ionic-framework/commit/3b60a1d68a1df1606ffee0bde7db7a206bac404a)), closes [#30030](https://github.com/ionic-team/ionic-framework/issues/30030) + + + + + +## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17) + + +### Bug Fixes + +* **tabs:** select correct tab when routes have similar prefixes ([#30863](https://github.com/ionic-team/ionic-framework/issues/30863)) ([03fb422](https://github.com/ionic-team/ionic-framework/commit/03fb422bfa775e3e9dd695ea1857fa88d4245ecd)), closes [#30448](https://github.com/ionic-team/ionic-framework/issues/30448) + + + + + +## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13) + +**Note:** Version bump only for package ionic-framework + + + + + +## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10) + + +### Bug Fixes + +* **modal:** allow interaction with parent content through sheet modals in child routes ([#30839](https://github.com/ionic-team/ionic-framework/issues/30839)) ([b9e3cf0](https://github.com/ionic-team/ionic-framework/commit/b9e3cf0f5aae79a1f27a07b102c77e51f24825f4)), closes [#30700](https://github.com/ionic-team/ionic-framework/issues/30700) +* **modal:** prevent browser hang when using ModalController in Angular ([#30845](https://github.com/ionic-team/ionic-framework/issues/30845)) ([b164516](https://github.com/ionic-team/ionic-framework/commit/b1645168a7fb9378dc39a081c207b2de0e180089)) +* **popover:** recalculate the content dimensions after the header has fully loaded ([#30853](https://github.com/ionic-team/ionic-framework/issues/30853)) ([99dcf38](https://github.com/ionic-team/ionic-framework/commit/99dcf3810a0c32416996d1e992ddf63359965cfc)) +* **select, action-sheet:** use radio role for options ([#30769](https://github.com/ionic-team/ionic-framework/issues/30769)) ([1c89cf0](https://github.com/ionic-team/ionic-framework/commit/1c89cf06ac959f9c9a35a66f811227c244d3198b)) + + + + + +## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26) + + +### Bug Fixes + +* **datetime:** ensure datetime is shown when intersection observer fails to report visibility ([#30793](https://github.com/ionic-team/ionic-framework/issues/30793)) ([9d781db](https://github.com/ionic-team/ionic-framework/commit/9d781db662d213090d0b7198d0cdc5abb16fed1b)), closes [#30706](https://github.com/ionic-team/ionic-framework/issues/30706) + + + + + +## [8.7.10](https://github.com/ionic-team/ionic-framework/compare/v8.7.9...v8.7.10) (2025-11-19) + + +### Bug Fixes + +* **checkbox, toggle, radio-group:** improve screen reader announcement timing for validation errors ([#30714](https://github.com/ionic-team/ionic-framework/issues/30714)) ([92db364](https://github.com/ionic-team/ionic-framework/commit/92db36489cca944caf1593dbd518a1f025a171a2)) + + + + + +## [8.7.9](https://github.com/ionic-team/ionic-framework/compare/v8.7.8...v8.7.9) (2025-11-05) + + +### Bug Fixes + +* **accordion-group:** skip initial animation ([#30729](https://github.com/ionic-team/ionic-framework/issues/30729)) ([58d5638](https://github.com/ionic-team/ionic-framework/commit/58d563805fca1db88caeeb40a8f710ac30416d93)), closes [#30613](https://github.com/ionic-team/ionic-framework/issues/30613) + + + + + +## [8.7.8](https://github.com/ionic-team/ionic-framework/compare/v8.7.7...v8.7.8) (2025-10-29) + + +### Bug Fixes + +* **checkbox, toggle:** fire ionFocus and ionBlur ([#30733](https://github.com/ionic-team/ionic-framework/issues/30733)) ([54a1c86](https://github.com/ionic-team/ionic-framework/commit/54a1c86d6a5d533b0c8c2d18edc62454a7c17bab)) + + + + + +## [8.7.7](https://github.com/ionic-team/ionic-framework/compare/v8.7.6...v8.7.7) (2025-10-15) + + +### Bug Fixes + +* **header:** ensure one banner role in condensed header ([#30718](https://github.com/ionic-team/ionic-framework/issues/30718)) ([12084af](https://github.com/ionic-team/ionic-framework/commit/12084af163ed811b9c6bda3c7850fc0c53c60c7b)) +* **header:** prevent flickering during iOS page transitions ([#30705](https://github.com/ionic-team/ionic-framework/issues/30705)) ([820fa28](https://github.com/ionic-team/ionic-framework/commit/820fa2854331722d22efd0e38a1936117477967a)), closes [#25326](https://github.com/ionic-team/ionic-framework/issues/25326) +* **select:** improve screen reader announcement timing for validation errors ([#30723](https://github.com/ionic-team/ionic-framework/issues/30723)) ([03303d7](https://github.com/ionic-team/ionic-framework/commit/03303d73f0bfe2380ced7931525fc52fd8576367)) + + + + + +## [8.7.6](https://github.com/ionic-team/ionic-framework/compare/v8.7.5...v8.7.6) (2025-10-08) + + +### Bug Fixes + +* **tabs:** respect stencil lifecycle order for tab selection ([#30702](https://github.com/ionic-team/ionic-framework/issues/30702)) ([7bb9535](https://github.com/ionic-team/ionic-framework/commit/7bb9535f601d2469ce60687a9c03f8b1cfe4aba4)), closes [#30611](https://github.com/ionic-team/ionic-framework/issues/30611) + + + + + +## [8.7.5](https://github.com/ionic-team/ionic-framework/compare/v8.7.4...v8.7.5) (2025-09-24) + + +### Bug Fixes + +* **modal:** allow sheet modals to skip focus trap ([#30689](https://github.com/ionic-team/ionic-framework/issues/30689)) ([a40d957](https://github.com/ionic-team/ionic-framework/commit/a40d957ad9c1897af365a91b45b00228a00d614c)), closes [#30684](https://github.com/ionic-team/ionic-framework/issues/30684) +* **vue:** emit component-specific overlay events ([#30688](https://github.com/ionic-team/ionic-framework/issues/30688)) ([024d090](https://github.com/ionic-team/ionic-framework/commit/024d090122548e26ec2cdcfae4637dde8f288278)), closes [#30641](https://github.com/ionic-team/ionic-framework/issues/30641) + + + + + +## [8.7.4](https://github.com/ionic-team/ionic-framework/compare/v8.7.3...v8.7.4) (2025-09-17) + + +### Bug Fixes + +* **input:** improve error text accessibility ([#30635](https://github.com/ionic-team/ionic-framework/issues/30635)) ([c339bc3](https://github.com/ionic-team/ionic-framework/commit/c339bc36827b62ef871325869a9a5db9b17ac785)) +* **overlays,picker:** remove invalid aria-hidden attribute ([#30563](https://github.com/ionic-team/ionic-framework/issues/30563)) ([49f96d7](https://github.com/ionic-team/ionic-framework/commit/49f96d7f1e9050a95e3e33a821c0467ecc0bed64)), closes [#30040](https://github.com/ionic-team/ionic-framework/issues/30040) +* **segment-view:** scroll and select the right item when the component is in RTL context; ([#30675](https://github.com/ionic-team/ionic-framework/issues/30675)) ([66f517d](https://github.com/ionic-team/ionic-framework/commit/66f517d5b2154fff00b294a78f4107f057a580c6)), closes [#30079](https://github.com/ionic-team/ionic-framework/issues/30079) + + + + + +## [8.7.3](https://github.com/ionic-team/ionic-framework/compare/v8.7.2...v8.7.3) (2025-08-20) + + +### Bug Fixes + +* **checkbox:** add aria attributes to ignore checkbox icon ([#30633](https://github.com/ionic-team/ionic-framework/issues/30633)) ([e9e6605](https://github.com/ionic-team/ionic-framework/commit/e9e6605862a05a46d26c26a144ed1cf22133a2b7)), closes [#30231](https://github.com/ionic-team/ionic-framework/issues/30231) +* **refresher:** prevent focus-related scroll jumps on refresh ([#30636](https://github.com/ionic-team/ionic-framework/issues/30636)) ([1899b49](https://github.com/ionic-team/ionic-framework/commit/1899b49d252abc6003f763cea8db2a51efa941ec)) + + + + + +## [8.7.2](https://github.com/ionic-team/ionic-framework/compare/v8.7.1...v8.7.2) (2025-08-06) + + +### Bug Fixes + +* **reorder-group:** add children fallback for framework compatibility ([#30593](https://github.com/ionic-team/ionic-framework/issues/30593)) ([1cd81b9](https://github.com/ionic-team/ionic-framework/commit/1cd81b92301378d55bce63a01dfcf95a91c92652)), closes [#30592](https://github.com/ionic-team/ionic-framework/issues/30592) +* **tabs:** add fallback to select tab if router integration fails ([#30599](https://github.com/ionic-team/ionic-framework/issues/30599)) ([a2e803a](https://github.com/ionic-team/ionic-framework/commit/a2e803a553dc58fc0e1599e515a56180a7ab263a)), closes [#30552](https://github.com/ionic-team/ionic-framework/issues/30552) + + + + + +## [8.7.1](https://github.com/ionic-team/ionic-framework/compare/v8.7.0...v8.7.1) (2025-07-31) + +### Dependencies + +* **stencil:** upgrade `@stencil/core` to version 4.36.2 + + + + + +# [8.7.0](https://github.com/ionic-team/ionic-framework/compare/v8.6.7...v8.7.0) (2025-07-30) + + +### Features + +* **css:** add new css utility classes for display and flex utils ([#30567](https://github.com/ionic-team/ionic-framework/issues/30567)) ([75f6c05](https://github.com/ionic-team/ionic-framework/commit/75f6c05fb96313ef890cc80a229a3a3ed3d57460)), closes [#22469](https://github.com/ionic-team/ionic-framework/issues/22469) +* **datetime:** add border property to highlightedDates ([#30534](https://github.com/ionic-team/ionic-framework/issues/30534)) ([d5627c7](https://github.com/ionic-team/ionic-framework/commit/d5627c73681faf658ea3b869f3fb04d708391eb9)), closes [#29833](https://github.com/ionic-team/ionic-framework/issues/29833) +* **deps:** update ionicons to v8 ([#30390](https://github.com/ionic-team/ionic-framework/issues/30390)) ([74cd71a](https://github.com/ionic-team/ionic-framework/commit/74cd71af243183aa738d11b280e155bdfd652126)), closes [#30445](https://github.com/ionic-team/ionic-framework/issues/30445) +* **modal:** add IonModalToken for injecting modal elements in Angular components ([#30474](https://github.com/ionic-team/ionic-framework/issues/30474)) ([30d1910](https://github.com/ionic-team/ionic-framework/commit/30d1910d6ea5428b414d0e127e7681f59426c538)) +* **reorder-group:** add ionReorderStart, ionReorderMove, ionReorderEnd events ([#30471](https://github.com/ionic-team/ionic-framework/issues/30471)) ([b154f4e](https://github.com/ionic-team/ionic-framework/commit/b154f4ed095890f57ccab539fd9217976a5466e5)), closes [#23148](https://github.com/ionic-team/ionic-framework/issues/23148) [#27614](https://github.com/ionic-team/ionic-framework/issues/27614) + + + + + +## [8.6.7](https://github.com/ionic-team/ionic-framework/compare/v8.6.6...v8.6.7) (2025-07-30) + +### Dependencies + +* **stencil:** downgrade `@stencil/core` to version 4.33.1 + +_Stencil has been downgraded due to an uncaught regression in Reorder._ + + + + + +## [8.6.6](https://github.com/ionic-team/ionic-framework/compare/v8.6.5...v8.6.6) (2025-07-30) + +### Dependencies + +* **stencil:** upgrade `@stencil/core` to version 4.36.2 + + + + + +## [8.6.5](https://github.com/ionic-team/ionic-framework/compare/v8.6.4...v8.6.5) (2025-07-16) + + +### Bug Fixes + +* **input-otp:** improve autofill detection and invalid character handling ([#30541](https://github.com/ionic-team/ionic-framework/issues/30541)) ([8b4023d](https://github.com/ionic-team/ionic-framework/commit/8b4023d520212c254395a5be6d3a76dcbee6f2da)), closes [#30459](https://github.com/ionic-team/ionic-framework/issues/30459) +* **input:** prevent layout shift when hiding password toggle ([#30533](https://github.com/ionic-team/ionic-framework/issues/30533)) ([f1defba](https://github.com/ionic-team/ionic-framework/commit/f1defba2acb417c6f243b2902923d85efbb6f879)), closes [#29562](https://github.com/ionic-team/ionic-framework/issues/29562) +* **item:** allow nested content to be conditionally interactive ([#30519](https://github.com/ionic-team/ionic-framework/issues/30519)) ([3f730ab](https://github.com/ionic-team/ionic-framework/commit/3f730ab1d77be54d1faf14168eee9e9dc41002d6)), closes [#29763](https://github.com/ionic-team/ionic-framework/issues/29763) +* **modal:** dismiss child modals when parent is dismissed ([#30540](https://github.com/ionic-team/ionic-framework/issues/30540)) ([9b0099f](https://github.com/ionic-team/ionic-framework/commit/9b0099f462fda6d40b49dde1a1c97afbbbee2287)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389) +* **modal:** dismiss modal when parent element is removed from DOM ([#30544](https://github.com/ionic-team/ionic-framework/issues/30544)) ([850338c](https://github.com/ionic-team/ionic-framework/commit/850338cbd5c76addbc2cc3068b93071dea14c0af)), closes [#30389](https://github.com/ionic-team/ionic-framework/issues/30389) +* **modal:** improve card modal background transition from portrait to landscape ([#30551](https://github.com/ionic-team/ionic-framework/issues/30551)) ([d37b9b8](https://github.com/ionic-team/ionic-framework/commit/d37b9b8e468b7b2c9cda8b27fe7019bb905ad2bf)) +* **segment-view:** scroll to correct content when height is not set ([#30547](https://github.com/ionic-team/ionic-framework/issues/30547)) ([d14311f](https://github.com/ionic-team/ionic-framework/commit/d14311fb65ae3de7ba7578791ce1ea44f186c413)), closes [#30543](https://github.com/ionic-team/ionic-framework/issues/30543) + + + + + +## [8.6.4](https://github.com/ionic-team/ionic-framework/compare/v8.6.3...v8.6.4) (2025-07-09) + + +### Bug Fixes + +* **modal:** support iOS card view transitions for viewport changes ([#30520](https://github.com/ionic-team/ionic-framework/issues/30520)) ([0fd9e82](https://github.com/ionic-team/ionic-framework/commit/0fd9e824508333a53175d7da5f681fc3126a2394)), closes [#30296](https://github.com/ionic-team/ionic-framework/issues/30296) + + + + + +## [8.6.3](https://github.com/ionic-team/ionic-framework/compare/v8.6.2...v8.6.3) (2025-07-02) + + +### Bug Fixes + +* **angular:** update schematics to support Angular's latest build system ([#30525](https://github.com/ionic-team/ionic-framework/issues/30525)) ([08e3e7a](https://github.com/ionic-team/ionic-framework/commit/08e3e7ab5165baea668571af9845933b5befeb46)), closes [ionic-team/ionic-docs#2091](https://github.com/ionic-team/ionic-docs/issues/2091) +* **modal:** add conditional tabIndex for handle cycling ([#30510](https://github.com/ionic-team/ionic-framework/issues/30510)) ([ee47660](https://github.com/ionic-team/ionic-framework/commit/ee47660745428e04c78cfef0555f3c5788959a8c)) +* **select:** focus the correct selected item in an action sheet interface with a header ([#30481](https://github.com/ionic-team/ionic-framework/issues/30481)) ([80a111c](https://github.com/ionic-team/ionic-framework/commit/80a111cffac70e831eb57e827301370163ef4e2a)), closes [#30480](https://github.com/ionic-team/ionic-framework/issues/30480) + + + + + +## [8.6.2](https://github.com/ionic-team/ionic-framework/compare/v8.6.1...v8.6.2) (2025-06-18) + + +### Bug Fixes + +* **picker-column:** fallback to elementFromPoint for iOS 16 Shadow DOM bug ([#30479](https://github.com/ionic-team/ionic-framework/issues/30479)) ([6ae2907](https://github.com/ionic-team/ionic-framework/commit/6ae29077424434f3523d75426f3328765a4797f4)), closes [#29672](https://github.com/ionic-team/ionic-framework/issues/29672) +* **range:** improve focus and blur handling for dual knobs ([#30482](https://github.com/ionic-team/ionic-framework/issues/30482)) ([6811fe5](https://github.com/ionic-team/ionic-framework/commit/6811fe5cc88f132f998476a3f4b956ce21122631)) + + + + + +## [8.6.1](https://github.com/ionic-team/ionic-framework/compare/v8.6.0...v8.6.1) (2025-06-11) + + +### Bug Fixes + +* **item-sliding:** check for side attribute to avoid an `undefined` value ([#29845](https://github.com/ionic-team/ionic-framework/issues/29845)) ([c38aa07](https://github.com/ionic-team/ionic-framework/commit/c38aa07cf8bfab200b3c071328d893bd1627cde7)), closes [#29499](https://github.com/ionic-team/ionic-framework/issues/29499) +* **modal:** reset footer positioning after content drag and multi-footer support ([#30470](https://github.com/ionic-team/ionic-framework/issues/30470)) ([071b414](https://github.com/ionic-team/ionic-framework/commit/071b414a00f4497ed0baa1431f0bee4b3c7c13fb)), closes [#30468](https://github.com/ionic-team/ionic-framework/issues/30468) + + + + + +# [8.6.0](https://github.com/ionic-team/ionic-framework/compare/v8.5.9...v8.6.0) (2025-06-04) + + +### Bug Fixes + +* **input-otp:** correctly handle autofill by splitting the values into all inputs ([#30444](https://github.com/ionic-team/ionic-framework/issues/30444)) ([b77447b](https://github.com/ionic-team/ionic-framework/commit/b77447bea050821da1e5f618ec7b7b530e7f7f5d)) +* **scroll-assist:** allow focus on input's siblings ([#30409](https://github.com/ionic-team/ionic-framework/issues/30409)) ([2dea607](https://github.com/ionic-team/ionic-framework/commit/2dea6071db12903f2ce815328db19b95366aa9a5)) + + +### Features + +* **datetime:** add animation to adjacent days selection ([#30298](https://github.com/ionic-team/ionic-framework/issues/30298)) ([e140b90](https://github.com/ionic-team/ionic-framework/commit/e140b9010fd63490a8d340b3d705869fb04a4319)) +* **datetime:** add showAdjacentDays to display days from the previous and next months ([#30262](https://github.com/ionic-team/ionic-framework/issues/30262)) ([b67259e](https://github.com/ionic-team/ionic-framework/commit/b67259edae267c2dbece360da532ca9017c8febd)) +* **input-otp:** add new input-otp component ([#30386](https://github.com/ionic-team/ionic-framework/issues/30386)) ([4d6a067](https://github.com/ionic-team/ionic-framework/commit/4d6a067677a7b828263c2ed71a409a3a4c392c85)) +* **toggle:** add iOS 18 haptic feedback ([#29945](https://github.com/ionic-team/ionic-framework/issues/29945)) ([796e007](https://github.com/ionic-team/ionic-framework/commit/796e00720e0da90eda1d246a6d5b11f954e5993c)) + + + + + +## [8.5.9](https://github.com/ionic-team/ionic-framework/compare/v8.5.8...v8.5.9) (2025-06-04) + + +### Bug Fixes + +* **datetime:** display the correct month when multiple values are set ([#29610](https://github.com/ionic-team/ionic-framework/issues/29610)) ([14f32f8](https://github.com/ionic-team/ionic-framework/commit/14f32f8feea7b3880367868ff0a2134b0c28cc07)), closes [#29094](https://github.com/ionic-team/ionic-framework/issues/29094) +* **modal:** move sheet footers instead of cloning while dragging ([#30433](https://github.com/ionic-team/ionic-framework/issues/30433)) ([4cbbbb0](https://github.com/ionic-team/ionic-framework/commit/4cbbbb053ad36d176f1d79ad09777f94ca8076d2)), closes [#30315](https://github.com/ionic-team/ionic-framework/issues/30315) [#30341](https://github.com/ionic-team/ionic-framework/issues/30341) [#30312](https://github.com/ionic-team/ionic-framework/issues/30312) + + + + + +## [8.5.8](https://github.com/ionic-team/ionic-framework/compare/v8.5.7...v8.5.8) (2025-05-28) + + +### Bug Fixes + +* **input-password-toggle, button:** force update aria attributes ([#30411](https://github.com/ionic-team/ionic-framework/issues/30411)) ([4e38700](https://github.com/ionic-team/ionic-framework/commit/4e387005663b4e8425cb28e41608bb4f924b3864)) + + + + + +## [8.5.7](https://github.com/ionic-team/ionic-framework/compare/v8.5.6...v8.5.7) (2025-05-07) + + +### Bug Fixes + +* **labels:** prevent clicking a label from triggering onClick twice on several components ([#30384](https://github.com/ionic-team/ionic-framework/issues/30384)) ([7d639b0](https://github.com/ionic-team/ionic-framework/commit/7d639b0412120523f758942c855cb69f9a52e9d9)), closes [#30165](https://github.com/ionic-team/ionic-framework/issues/30165) + + + + + +## [8.5.6](https://github.com/ionic-team/ionic-framework/compare/v8.5.5...v8.5.6) (2025-04-30) + + +### Bug Fixes + +* **item:** emit click event once when clicking padded space on item and emit correct element ([#30373](https://github.com/ionic-team/ionic-framework/issues/30373)) ([7a9d138](https://github.com/ionic-team/ionic-framework/commit/7a9d138e3d5ecde55c12ff337ca29052a9194d69)), closes [#29758](https://github.com/ionic-team/ionic-framework/issues/29758) [#29761](https://github.com/ionic-team/ionic-framework/issues/29761) + + + + + +## [8.5.5](https://github.com/ionic-team/ionic-framework/compare/v8.5.4...v8.5.5) (2025-04-16) + + +### Bug Fixes + +* **config:** allow LogLevel to work with isolatedModules and update all warns and errors to respect logLevel ([#30350](https://github.com/ionic-team/ionic-framework/issues/30350)) ([d52fca0](https://github.com/ionic-team/ionic-framework/commit/d52fca084cf5a9924d0f6a6c4d9ece0373b83213)) +* **modal:** add expandToScroll property to ModalOptions ([#30357](https://github.com/ionic-team/ionic-framework/issues/30357)) ([8dd566b](https://github.com/ionic-team/ionic-framework/commit/8dd566b5c1241022e26cc91c0f415de20c0d0f34)), closes [#30356](https://github.com/ionic-team/ionic-framework/issues/30356) +* **select:** update icon color and use correct focused class ([#30342](https://github.com/ionic-team/ionic-framework/issues/30342)) ([cad1c61](https://github.com/ionic-team/ionic-framework/commit/cad1c61528c52a53b2164f2ea46f49144d3b46ad)) +* **toggle:** ensure proper visual selection when navigating via VoiceOver in Safari ([#30349](https://github.com/ionic-team/ionic-framework/issues/30349)) ([b1bc58f](https://github.com/ionic-team/ionic-framework/commit/b1bc58f1c8ffdc859e3f4349040bb1ad6e383d1e)) + + + + + +## [8.5.4](https://github.com/ionic-team/ionic-framework/compare/v8.5.3...v8.5.4) (2025-04-09) + + +### Bug Fixes + +* **config:** properly export LogLevel ([#30335](https://github.com/ionic-team/ionic-framework/issues/30335)) ([835ad52](https://github.com/ionic-team/ionic-framework/commit/835ad52c290a3687dc9e9c6bf4326948a9c3fe0d)), closes [#30255](https://github.com/ionic-team/ionic-framework/issues/30255) + + + + + +## [8.5.3](https://github.com/ionic-team/ionic-framework/compare/v8.5.2...v8.5.3) (2025-04-02) + + +### Bug Fixes + +* **checkbox:** ensure proper visual selection when navigating via VoiceOver in Safari ([#30300](https://github.com/ionic-team/ionic-framework/issues/30300)) ([bb40a1e](https://github.com/ionic-team/ionic-framework/commit/bb40a1efe71237075db2f3a536eddeb1d7c400fc)) +* **overlays:** exclude backdrop-no-scroll class when toast is presented ([#30123](https://github.com/ionic-team/ionic-framework/issues/30123)) ([7f9df7a](https://github.com/ionic-team/ionic-framework/commit/7f9df7a89447e51eec0b1516069a1e0c9c9722e5)), closes [#30112](https://github.com/ionic-team/ionic-framework/issues/30112) +* **segment-view:** prevent vertical scroll while scrolling horizontally ([#30276](https://github.com/ionic-team/ionic-framework/issues/30276)) ([105796f](https://github.com/ionic-team/ionic-framework/commit/105796f6bc8f961f58ecbb101285097cc86891c0)), closes [#30001](https://github.com/ionic-team/ionic-framework/issues/30001) + + + + + +## [8.5.2](https://github.com/ionic-team/ionic-framework/compare/v8.5.1...v8.5.2) (2025-03-26) + + +### Bug Fixes + +* **datetime:** support typing time values in a 24-hour format ([#30147](https://github.com/ionic-team/ionic-framework/issues/30147)) ([ac6e6a0](https://github.com/ionic-team/ionic-framework/commit/ac6e6a03174263d09ec55c9742a026862a3df444)), closes [#28877](https://github.com/ionic-team/ionic-framework/issues/28877) +* **range:** emit ionInput when value changes ([#30293](https://github.com/ionic-team/ionic-framework/issues/30293)) ([7789bb5](https://github.com/ionic-team/ionic-framework/commit/7789bb59ee5c76074ff4872dc6a50ae2d83df8f5)), closes [#29619](https://github.com/ionic-team/ionic-framework/issues/29619) +* **segment-button:** ensure consistent disabled state for segment-content error handling ([#30288](https://github.com/ionic-team/ionic-framework/issues/30288)) ([1cfa915](https://github.com/ionic-team/ionic-framework/commit/1cfa915e8fe362951c521bce970a9f5f10918ab2)) + + + + + +## [8.5.1](https://github.com/ionic-team/ionic-framework/compare/v8.5.0...v8.5.1) (2025-03-19) + + +### Bug Fixes + +* **modal:** consider scrollable content while dragging when expandToScroll is false ([#30257](https://github.com/ionic-team/ionic-framework/issues/30257)) ([68be8e9](https://github.com/ionic-team/ionic-framework/commit/68be8e915ce5637b20591bb0acfb3653c2184ff6)) +* **vue:** update output target and fix incorrect types ([#30259](https://github.com/ionic-team/ionic-framework/issues/30259)) ([f4186c6](https://github.com/ionic-team/ionic-framework/commit/f4186c6761c46bf386f8effecf90d88831c34726)), closes [#30254](https://github.com/ionic-team/ionic-framework/issues/30254) + + +### Performance Improvements + +* **modal:** fixing performance regression on modal sheets when expandToScroll is false ([#30267](https://github.com/ionic-team/ionic-framework/issues/30267)) ([c4b9212](https://github.com/ionic-team/ionic-framework/commit/c4b92126405ae5b7160ce03f40557563e755a8a5)) + + + + + +## [8.4.6](https://github.com/ionic-team/ionic-framework/compare/v8.4.5...v8.4.6) (2025-03-19) + + +### Bug Fixes + +* **vue:** update output target and fix incorrect types ([#30259](https://github.com/ionic-team/ionic-framework/issues/30259)) ([0eaee78](https://github.com/ionic-team/ionic-framework/commit/0eaee78fe1cae8f8a6cb04a01abad8c05dec0723)), closes [#30254](https://github.com/ionic-team/ionic-framework/issues/30254) + + + + + +# [8.5.0](https://github.com/ionic-team/ionic-framework/compare/v8.4.5...v8.5.0) (2025-03-13) + + +### Bug Fixes + +* **input:** update helper text and counter color ([#30149](https://github.com/ionic-team/ionic-framework/issues/30149)) ([fdd5283](https://github.com/ionic-team/ionic-framework/commit/fdd52832c65a36c3e6b58077bb7afbbcd8acf1d0)) +* **textarea:** update helper text and counter color ([#30148](https://github.com/ionic-team/ionic-framework/issues/30148)) ([4322935](https://github.com/ionic-team/ionic-framework/commit/432293554048fae29e2865acd4fc51b44f4524fe)) + + +### Features + +* **checkbox:** add helperText and errorText properties ([#30140](https://github.com/ionic-team/ionic-framework/issues/30140)) ([99d2f1c](https://github.com/ionic-team/ionic-framework/commit/99d2f1c7503c204d0f3d3e5c11cfdd98d1bb3c4d)), closes [#29810](https://github.com/ionic-team/ionic-framework/issues/29810) +* **checkbox:** add required prop ([#30157](https://github.com/ionic-team/ionic-framework/issues/30157)) ([41da4c3](https://github.com/ionic-team/ionic-framework/commit/41da4c3565421ccc1ddd792f883d010ba4dd618e)) +* **config:** add logLevel option to suppress ionic warnings and errors ([#30015](https://github.com/ionic-team/ionic-framework/issues/30015)) ([efd3e0f](https://github.com/ionic-team/ionic-framework/commit/efd3e0fd2bafd7e77ca192b5a9f54c460cbd8f79)), closes [#29814](https://github.com/ionic-team/ionic-framework/issues/29814) +* **input, textarea:** dir is inherited to native form control ([#30102](https://github.com/ionic-team/ionic-framework/issues/30102)) ([504fb6a](https://github.com/ionic-team/ionic-framework/commit/504fb6a25fddd4095b4ce69f3f0d38ccefae9dc7)), closes [#30193](https://github.com/ionic-team/ionic-framework/issues/30193) [#29577](https://github.com/ionic-team/ionic-framework/issues/29577) +* **modal:** add expandToScroll property to allow scrolling at all breakpoints ([#30097](https://github.com/ionic-team/ionic-framework/issues/30097)) ([166e435](https://github.com/ionic-team/ionic-framework/commit/166e43554e832ff550ce6ad3505a95979b4e7138)), closes [#24631](https://github.com/ionic-team/ionic-framework/issues/24631) +* **radio-group:** add helperText and errorText properties ([#30222](https://github.com/ionic-team/ionic-framework/issues/30222)) ([18e26ac](https://github.com/ionic-team/ionic-framework/commit/18e26acb0132234d13355d62d288e920edd11a88)) +* **react:** fixing support for react 19, adding test app for react 19 ([#30217](https://github.com/ionic-team/ionic-framework/issues/30217)) ([f4941f2](https://github.com/ionic-team/ionic-framework/commit/f4941f263990b95f2cb77fff0981f3731a521b47)), closes [#29991](https://github.com/ionic-team/ionic-framework/issues/29991) +* **select:** add helperText and errorText properties ([#30143](https://github.com/ionic-team/ionic-framework/issues/30143)) ([bbdaec0](https://github.com/ionic-team/ionic-framework/commit/bbdaec0cc192310d86dc2bd79577991337966224)), closes [#29205](https://github.com/ionic-team/ionic-framework/issues/29205) +* **select:** add required prop ([#30155](https://github.com/ionic-team/ionic-framework/issues/30155)) ([0b54983](https://github.com/ionic-team/ionic-framework/commit/0b549835b6b96fe9b3b312dc107ed972d0ea3d32)) +* **toggle:** add helperText and errorText properties ([#30161](https://github.com/ionic-team/ionic-framework/issues/30161)) ([94ca2e5](https://github.com/ionic-team/ionic-framework/commit/94ca2e54cbbe727e58472dd6402beb4381559c9f)) +* **toggle:** add required prop ([#30156](https://github.com/ionic-team/ionic-framework/issues/30156)) ([0bbb9f3](https://github.com/ionic-team/ionic-framework/commit/0bbb9f37b4f1f145be63765f1643dc4ac3c3b872)) +* **toolbar:** add shadow parts for background, container, and content ([#30069](https://github.com/ionic-team/ionic-framework/issues/30069)) ([ac4ea32](https://github.com/ionic-team/ionic-framework/commit/ac4ea3232b1ccffa1c31dc4c6c416e16848ff607)), closes [#30068](https://github.com/ionic-team/ionic-framework/issues/30068) + + + + + +## [8.4.5](https://github.com/ionic-team/ionic-framework/compare/v8.4.4...v8.4.5) (2025-03-13) + + +### Bug Fixes + +* **vue:** pin Vue output target to latest release ([#30248](https://github.com/ionic-team/ionic-framework/issues/30248)) ([3799d45](https://github.com/ionic-team/ionic-framework/commit/3799d456d9461faac9a5e2c44f187329f113b3db)), closes [#30221](https://github.com/ionic-team/ionic-framework/issues/30221) + + + + + +## [8.4.4](https://github.com/ionic-team/ionic-framework/compare/v8.4.3...v8.4.4) (2025-03-13) + + +### Bug Fixes + +* **alert:** change focused element and improve keyboard navigation ([#30220](https://github.com/ionic-team/ionic-framework/issues/30220)) ([4df0e0f](https://github.com/ionic-team/ionic-framework/commit/4df0e0f4c00faec33f5ddc802945bf4ad9dc53d3)) +* **capacitor:** replace deprecated platform check method ([#30195](https://github.com/ionic-team/ionic-framework/issues/30195)) ([b6b43ae](https://github.com/ionic-team/ionic-framework/commit/b6b43ae2925f8a12b35cabd43abd9d838bc9714f)) +* **capacitor:** use proper types for capacitor v7 support ([#30228](https://github.com/ionic-team/ionic-framework/issues/30228)) ([2149ba2](https://github.com/ionic-team/ionic-framework/commit/2149ba2c8d56a3a8ef4a6de89de1292f6efe3031)) +* **range:** handle unsupported values for range min and max ([#30070](https://github.com/ionic-team/ionic-framework/issues/30070)) ([3223193](https://github.com/ionic-team/ionic-framework/commit/322319397ca46bafda7ca0d2e3fb4cc554432d6a)), closes [#29667](https://github.com/ionic-team/ionic-framework/issues/29667) +* **segment-button:** protect connectedCallback for when segment-content has not yet been created ([#30138](https://github.com/ionic-team/ionic-framework/issues/30138)) ([14b6538](https://github.com/ionic-team/ionic-framework/commit/14b6538d98303cb753d881ec6978fb98f53ed54c)) +* **select:** auto-scroll to selected item for all interfaces ([#30202](https://github.com/ionic-team/ionic-framework/issues/30202)) ([8eaeb22](https://github.com/ionic-team/ionic-framework/commit/8eaeb22e7a967100ffaadae8c8221e2e4888a3b6)), closes [#19296](https://github.com/ionic-team/ionic-framework/issues/19296) +* **toggle:** trigger focus and blur on click ([#30234](https://github.com/ionic-team/ionic-framework/issues/30234)) ([ba8d8f4](https://github.com/ionic-team/ionic-framework/commit/ba8d8f489607537b3dac915cfc9f2c32a74b994c)) +* **vue:** update output target and properly emit events ([#30227](https://github.com/ionic-team/ionic-framework/issues/30227)) ([11554a5](https://github.com/ionic-team/ionic-framework/commit/11554a5d3590c660dbf609931dcb63cc2daf79cb)), closes [#30206](https://github.com/ionic-team/ionic-framework/issues/30206) [#30178](https://github.com/ionic-team/ionic-framework/issues/30178) [#30177](https://github.com/ionic-team/ionic-framework/issues/30177) [#30170](https://github.com/ionic-team/ionic-framework/issues/30170) +* **vue:** update output target and resolve type issues ([#30239](https://github.com/ionic-team/ionic-framework/issues/30239)) ([6dcb143](https://github.com/ionic-team/ionic-framework/commit/6dcb143307682793ac4fd46d03efa5868a49e87d)), closes [#30179](https://github.com/ionic-team/ionic-framework/issues/30179) + + + + + +## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29) + + +### Bug Fixes + +* **vue:** update Stencil Vue output target ([#30159](https://github.com/ionic-team/ionic-framework/issues/30159)) ([eb725fc](https://github.com/ionic-team/ionic-framework/commit/eb725fce6eb15facd8a1c21be11a1b2d46336479)) + + + + + +## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22) + + +### Bug Fixes + +* **segment:** add logic to connect to segment-view in `componentDidLoad()` callback ([#30060](https://github.com/ionic-team/ionic-framework/issues/30060)) ([000f553](https://github.com/ionic-team/ionic-framework/commit/000f55303e459c583e642337fb1894f419f37d48)), closes [#30000](https://github.com/ionic-team/ionic-framework/issues/30000) +* **select-modal:** match radio styles to iOS native ([#30119](https://github.com/ionic-team/ionic-framework/issues/30119)) ([3f8346e](https://github.com/ionic-team/ionic-framework/commit/3f8346e718ae3a6eb5008d739f10b6898b84ca9b)) + + + + + +## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27) + + +### Bug Fixes + +* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347) +* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604)) +* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e)) +* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2)) +* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998) + + + + + +# [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04) + + +### Bug Fixes + +* **alert:** use correct heading structure for subHeader when header exists ([#29964](https://github.com/ionic-team/ionic-framework/issues/29964)) ([0fdcb32](https://github.com/ionic-team/ionic-framework/commit/0fdcb32ce0f99b284b314f79f7d0b071bc37faec)) + + +### Features + +* **menu:** pass role to ionWillClose and ionDidClose events ([#29954](https://github.com/ionic-team/ionic-framework/issues/29954)) ([ee2fa19](https://github.com/ionic-team/ionic-framework/commit/ee2fa19a1e9f09d492c7c08340d95ba6a56ebb2b)) +* **segment-view:** adds support for new `ion-segment-view` component ([#29969](https://github.com/ionic-team/ionic-framework/issues/29969)) ([89508fb](https://github.com/ionic-team/ionic-framework/commit/89508fb89172900b1d11cc3fc18883f57a7fbab6)) +* **select:** add `modal` as interface ([#29972](https://github.com/ionic-team/ionic-framework/issues/29972)) ([3628ea8](https://github.com/ionic-team/ionic-framework/commit/3628ea875a66a717783de5e0a4df440872339040)) + + + + + +## [8.3.4](https://github.com/ionic-team/ionic-framework/compare/v8.3.3...v8.3.4) (2024-10-30) + + +### Bug Fixes + +* **angular:** add missing 'compareWith' input to standalone ion-radio-group ([#29870](https://github.com/ionic-team/ionic-framework/issues/29870)) ([47ba703](https://github.com/ionic-team/ionic-framework/commit/47ba703a57d1ca506f943f6b790d0bf7583d79cb)), closes [#29826](https://github.com/ionic-team/ionic-framework/issues/29826) +* **backdrop:** remove tabindex for improved accessibility ([#29956](https://github.com/ionic-team/ionic-framework/issues/29956)) ([7294e96](https://github.com/ionic-team/ionic-framework/commit/7294e969bb913692eaf28e54860614f445132713)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773) +* **input, textarea:** ensure screen readers announce helper and error text when focused ([#29958](https://github.com/ionic-team/ionic-framework/issues/29958)) ([5a73145](https://github.com/ionic-team/ionic-framework/commit/5a7314553a8def87bd19275640c92dd72a6ef1a4)) +* **overlay:** hide from screen readers while animating ([#29951](https://github.com/ionic-team/ionic-framework/issues/29951)) ([cb60073](https://github.com/ionic-team/ionic-framework/commit/cb6007363a8d42b5f126945427c2bfc3d7209c21)), closes [#29857](https://github.com/ionic-team/ionic-framework/issues/29857) +* **overlays:** do not hide root when toast appears ([#29962](https://github.com/ionic-team/ionic-framework/issues/29962)) ([322d7c9](https://github.com/ionic-team/ionic-framework/commit/322d7c98cf6613df0b0db3f119e3f892e6a17e7b)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773) +* **overlays:** hide the focus trap div from screen readers ([#29970](https://github.com/ionic-team/ionic-framework/issues/29970)) ([c3b58f1](https://github.com/ionic-team/ionic-framework/commit/c3b58f1620bcb74db43e3983ef570b7b982abd83)), closes [#29858](https://github.com/ionic-team/ionic-framework/issues/29858) +* **vue:** incorrect view rendered when using router.go(-n) ([#29877](https://github.com/ionic-team/ionic-framework/issues/29877)) ([e32fbe0](https://github.com/ionic-team/ionic-framework/commit/e32fbe02102fe80db29f73c26496a40852032354)), closes [#28201](https://github.com/ionic-team/ionic-framework/issues/28201) [#28201](https://github.com/ionic-team/ionic-framework/issues/28201) [#29847](https://github.com/ionic-team/ionic-framework/issues/29847) + + + + + +## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16) + + +### Bug Fixes + +* **tabs, tab-bar:** use standalone tab bar in Vue, React ([#29940](https://github.com/ionic-team/ionic-framework/issues/29940)) ([b7b383b](https://github.com/ionic-team/ionic-framework/commit/b7b383bee080b72de2e6307ff9a9a051314c69ed)), closes [#29885](https://github.com/ionic-team/ionic-framework/issues/29885) [#29924](https://github.com/ionic-team/ionic-framework/issues/29924) + + + + + +## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02) + + +### Bug Fixes + +* **segment:** prevent flickering for scrollable on iOS ([#29884](https://github.com/ionic-team/ionic-framework/issues/29884)) ([078ed0b](https://github.com/ionic-team/ionic-framework/commit/078ed0b86a0d8e9f8457481cb739ea214195adce)), closes [#29523](https://github.com/ionic-team/ionic-framework/issues/29523) + + + + + +## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17) + + +### Bug Fixes + +* **checkbox:** align checkbox properly in item using start alignment ([#29850](https://github.com/ionic-team/ionic-framework/issues/29850)) ([88b7013](https://github.com/ionic-team/ionic-framework/commit/88b701363c1865e81d7d136acab4b9fef3b1ab7a)), closes [#29837](https://github.com/ionic-team/ionic-framework/issues/29837) +* **datetime:** display today's date and time when value is an empty string ([#29839](https://github.com/ionic-team/ionic-framework/issues/29839)) ([f1d50c0](https://github.com/ionic-team/ionic-framework/commit/f1d50c0f645b3adf51426c24a1da0bbd1223f1d5)), closes [#29669](https://github.com/ionic-team/ionic-framework/issues/29669) +* **range:** disable scroll when range is being dragged ([#29241](https://github.com/ionic-team/ionic-framework/issues/29241)) ([35b1a45](https://github.com/ionic-team/ionic-framework/commit/35b1a459294657b609f683457e71babd4673a3a8)) +* **react, vue:** add default value for navManager on tabs ([#29865](https://github.com/ionic-team/ionic-framework/issues/29865)) ([df39cea](https://github.com/ionic-team/ionic-framework/commit/df39ceac6db6511518aed4766e6a59aa24fb53ec)) +* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([f64458d](https://github.com/ionic-team/ionic-framework/commit/f64458dc63a05acb955aa1f2ec3755c738466cf4)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848) + + + + + +# [8.3.0](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.3.0) (2024-09-05) + + +### Features + +* **checkbox:** display as block when justify or alignment properties are defined ([#29783](https://github.com/ionic-team/ionic-framework/issues/29783)) ([4ccd15e](https://github.com/ionic-team/ionic-framework/commit/4ccd15e47ad4ec7cb59d2694c5738eab1bb265ff)) +* **radio:** display as block when justify or alignment properties are defined ([#29801](https://github.com/ionic-team/ionic-framework/issues/29801)) ([18b02b3](https://github.com/ionic-team/ionic-framework/commit/18b02b3574f54a2f377f5bfe4e074bf015418dd3)) +* **react, vue, angular:** use tabs without router ([#29794](https://github.com/ionic-team/ionic-framework/issues/29794)) ([867066b](https://github.com/ionic-team/ionic-framework/commit/867066b4eba369de025f3c7c8ef33e7089cdf3bc)), closes [#25184](https://github.com/ionic-team/ionic-framework/issues/25184) +* **toggle:** display as block when justify or alignment properties are defined ([#29802](https://github.com/ionic-team/ionic-framework/issues/29802)) ([0332c8c](https://github.com/ionic-team/ionic-framework/commit/0332c8c6ceb612840e73f789d5c5b66f05cb53d4)) + + + + + +## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05) + + +### Bug Fixes + +* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792) +* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755) + + + + + +## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13) + + +### Bug Fixes + +* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704) +* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728) +* **angular:** remove the tabindex set by routerLink from Ionic components ([#29744](https://github.com/ionic-team/ionic-framework/issues/29744)) ([20073e1](https://github.com/ionic-team/ionic-framework/commit/20073e10c934d3704734195c72f4281c9b9658e3)), closes [#20632](https://github.com/ionic-team/ionic-framework/issues/20632) +* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735)) +* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765)) +* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712) +* **react:** add onPointerDown, onTouchEnd, add onTouchMove ([#29736](https://github.com/ionic-team/ionic-framework/issues/29736)) ([bfee3cd](https://github.com/ionic-team/ionic-framework/commit/bfee3cd064a9b495489c2679ccfb762e622dbf09)), closes [#29174](https://github.com/ionic-team/ionic-framework/issues/29174) +* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b)) + + + + + +## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24) + + +### Bug Fixes + +* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704) +* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728) +* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712) + + + + + +## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03) + + +### Bug Fixes + +* **dependencies:** use latest @stencil/core to remove DOMException errors ([#29685](https://github.com/ionic-team/ionic-framework/issues/29685)) ([d70ea4](https://github.com/ionic-team/ionic/commit/d70ea400a4713bd091af1393e196e10844a190b6)), closes [#29681](https://github.com/ionic-team/ionic/issues/29681) +* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158)), closes [#29659](https://github.com/ionic-team/ionic-framework/issues/29659) + + + + + +## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28) + + +### Bug Fixes + +* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640) + + + + + +## 8.2.3 + +This version should be skipped. Install 8.2.4 instead. + + + + + +## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12) + + +### Bug Fixes + +* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714) + + + + + +## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05) + +* **react:** export InputInputEventDetail type ([#29512](https://github.com/ionic-team/ionic-framework/issues/29512)) ([624ceba](https://github.com/ionic-team/ionic-framework/commit/624ceba2e128bb13a3afe4c35883f603f5488d0e)), closes [#29518](https://github.com/ionic-team/ionic-framework/issues/29518) + + + + + +# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22) + + +### Features + +* **angular:** setting props on a signal works ([#29453](https://github.com/ionic-team/ionic-framework/issues/29453)) ([4640e04](https://github.com/ionic-team/ionic-framework/commit/4640e046ebbd35bf92737368c6262f79a8803a59)), closes [#28876](https://github.com/ionic-team/ionic-framework/issues/28876) + + + + + +## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22) + + +### Bug Fixes + +* **core:** malformed URIs will not throw exception ([#29486](https://github.com/ionic-team/ionic-framework/issues/29486)) ([4a41983](https://github.com/ionic-team/ionic-framework/commit/4a41983098fe9bf83fdf05ce7ab28c79f414e11b)), closes [#29479](https://github.com/ionic-team/ionic-framework/issues/29479) + + + + + +## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15) + + +### Bug Fixes + +* **many:** do not grow slotted checkboxes, radios, selects and toggles ([#29501](https://github.com/ionic-team/ionic-framework/issues/29501)) ([c63d07b](https://github.com/ionic-team/ionic-framework/commit/c63d07bdd0c4d9939474c52b03a3f2535511933f)), closes [#29423](https://github.com/ionic-team/ionic-framework/issues/29423) +* **picker:** update keyboard navigation ([#29497](https://github.com/ionic-team/ionic-framework/issues/29497)) ([32bc681](https://github.com/ionic-team/ionic-framework/commit/32bc681192b1833f1c897e692d2d36ba90c6af53)) + + + + + +## [8.1.1](https://github.com/ionic-team/ionic-framework/compare/v8.1.0...v8.1.1) (2024-05-08) + + +### Bug Fixes + +* **angular:** add formatOptions property to standalone datetime ([#29468](https://github.com/ionic-team/ionic-framework/issues/29468)) ([bb1db52](https://github.com/ionic-team/ionic-framework/commit/bb1db52567e0884a896f9ccd76c27540b52f5e48)), closes [#29464](https://github.com/ionic-team/ionic-framework/issues/29464) +* **angular:** persist select disabled state in item ([#29448](https://github.com/ionic-team/ionic-framework/issues/29448)) ([dfb72d7](https://github.com/ionic-team/ionic-framework/commit/dfb72d7ea06e28d76069b23eb90c3426181b7c4c)), closes [#29234](https://github.com/ionic-team/ionic-framework/issues/29234) +* **angular:** set active segment button when dynamically changing items ([#29418](https://github.com/ionic-team/ionic-framework/issues/29418)) ([ee83388](https://github.com/ionic-team/ionic-framework/commit/ee833881da3ecaa0a9153397f0c7e62c1923f19c)), closes [#29414](https://github.com/ionic-team/ionic-framework/issues/29414) +* **radio:** persist checked state when items are updated in radio-group ([#29457](https://github.com/ionic-team/ionic-framework/issues/29457)) ([7ea14ae](https://github.com/ionic-team/ionic-framework/commit/7ea14ae41eb27f2a58952bd27d91ef4c77bb6a0c)), closes [#29442](https://github.com/ionic-team/ionic-framework/issues/29442) + + + + + +# [8.1.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.2...v8.1.0) (2024-05-01) + + +### Features + +* add experimental transition focus manager ([#29400](https://github.com/ionic-team/ionic-framework/issues/29400)) ([5b686ef](https://github.com/ionic-team/ionic-framework/commit/5b686efc1025cd4088c89ef29154311a3d7504ba)), closes [#23650](https://github.com/ionic-team/ionic-framework/issues/23650) +* **content:** add fixedSlotPlacement prop ([#29233](https://github.com/ionic-team/ionic-framework/issues/29233)) ([90a7e70](https://github.com/ionic-team/ionic-framework/commit/90a7e70a1c827835c18fd5f39d53ab17d286b4a7)) +* **datetime:** pass roles to overlay when dismissing ([#29221](https://github.com/ionic-team/ionic-framework/issues/29221)) ([6945adc](https://github.com/ionic-team/ionic-framework/commit/6945adc3cccabf59a2e640462ab4fd09ade59f6f)), closes [#28298](https://github.com/ionic-team/ionic-framework/issues/28298) +* **input:** add clearInputIcon property ([#29246](https://github.com/ionic-team/ionic-framework/issues/29246)) ([0f5d1c0](https://github.com/ionic-team/ionic-framework/commit/0f5d1c02d20483d47b6907fec696633cc7634554)), closes [#26974](https://github.com/ionic-team/ionic-framework/issues/26974) +* **modal, popover:** add ability to temporarily disable focus trapping ([#29379](https://github.com/ionic-team/ionic-framework/issues/29379)) ([7c00351](https://github.com/ionic-team/ionic-framework/commit/7c00351680a955130fa10d25d4439d3cc18db805)), closes [#24646](https://github.com/ionic-team/ionic-framework/issues/24646) +* **picker:** picker column is easier to select with assistive technology ([#29371](https://github.com/ionic-team/ionic-framework/issues/29371)) ([e38e2e4](https://github.com/ionic-team/ionic-framework/commit/e38e2e4d35076fa42241158568fb0ed50094fcbf)), closes [#25221](https://github.com/ionic-team/ionic-framework/issues/25221) + + + + + +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + + +### Bug Fixes + +* **datetime:** navigating months in RTL works correctly ([#29421](https://github.com/ionic-team/ionic-framework/issues/29421)) ([4d09890](https://github.com/ionic-team/ionic-framework/commit/4d09890d69590f0c8c32b387769a6e1e14a03c33)), closes [#29198](https://github.com/ionic-team/ionic-framework/issues/29198) +* **ios:** large title transition accounts for back button with no text ([#29327](https://github.com/ionic-team/ionic-framework/issues/29327)) ([bd8d065](https://github.com/ionic-team/ionic-framework/commit/bd8d065e1af038fe24fbe9a6acd9e0f2004bc0b7)), closes [#28751](https://github.com/ionic-team/ionic-framework/issues/28751) +* **md:** item border has improved contrast in dark mode ([#29398](https://github.com/ionic-team/ionic-framework/issues/29398)) ([fa85f03](https://github.com/ionic-team/ionic-framework/commit/fa85f030cfdb3ef8482ef29faff0144b27c9aa45)), closes [#29386](https://github.com/ionic-team/ionic-framework/issues/29386) +* **select:** options are visible with fit-content width and fill outline ([#29408](https://github.com/ionic-team/ionic-framework/issues/29408)) ([f15b62a](https://github.com/ionic-team/ionic-framework/commit/f15b62a9ca9a817d2252753d31025d431ac9f8e2)), closes [#29321](https://github.com/ionic-team/ionic-framework/issues/29321) + + + + + +## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) + + +### Bug Fixes + +* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([ee49824](https://github.com/ionic-team/ionic-framework/commit/ee49824a84df7a7b002f41dab7b935fbcdb64946)), closes [#29358](https://github.com/ionic-team/ionic-framework/issues/29358) +* **input:** debounce is set with binding syntax in angular on load ([#29377](https://github.com/ionic-team/ionic-framework/issues/29377)) ([23321f7](https://github.com/ionic-team/ionic-framework/commit/23321f7ab2a242c3c4193fd6cece3f1c7c0034ef)), closes [#29374](https://github.com/ionic-team/ionic-framework/issues/29374) + + + + + +# [8.0.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.2...v8.0.0) (2024-04-17) + +**Note:** Version bump only for package ionic-framework + + + + + +# [8.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.1...v8.0.0-rc.2) (2024-04-17) + + +### Bug Fixes + +* **dark-palette:** improve base colors ([#29239](https://github.com/ionic-team/ionic-framework/issues/29239)) ([4698d22](https://github.com/ionic-team/ionic-framework/commit/4698d22413966b59f9fa65b4e2533695cf00ed70)), closes [#29219](https://github.com/ionic-team/ionic-framework/issues/29219) +* **form-controls:** adjust flex properties inside of an item ([#29328](https://github.com/ionic-team/ionic-framework/issues/29328)) ([9b59138](https://github.com/ionic-team/ionic-framework/commit/9b59138011fd1e71def209ec3a43fb7f91b58949)), closes [#29319](https://github.com/ionic-team/ionic-framework/issues/29319) + + + + + +## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17) + + +### Bug Fixes + +* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583) + + + + + +# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10) + + +### Bug Fixes + +* **button:** use clamp for font sizes on circle shape ([#29200](https://github.com/ionic-team/ionic-framework/issues/29200)) ([4d6edee](https://github.com/ionic-team/ionic-framework/commit/4d6edee89c7bb2cb669d67730d7ddf24c78b3cb1)) + + + + + +## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10) + + +### Performance Improvements + +* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765)) + + + + + +## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03) + + +### Bug Fixes + +* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e)) +* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211) + + + + + +# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27) + +**Note:** Version bump only for package ionic-framework + + + + + +# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27) + + +### Bug Fixes + +* **angular:** schematics account for new theme files ([#29185](https://github.com/ionic-team/ionic-framework/issues/29185)) ([b0a10df](https://github.com/ionic-team/ionic-framework/commit/b0a10dfa56a65ee3905cc2c3d48d2221a42f222f)) + + +### Code Refactoring + +* **haptics:** remove cordova haptics support ([#29186](https://github.com/ionic-team/ionic-framework/issues/29186)) ([9efeb0a](https://github.com/ionic-team/ionic-framework/commit/9efeb0ad31aadee5f5ae542641d928ecf93fe82a)) +* **searchbar:** autocapitalize defaults to off ([#29107](https://github.com/ionic-team/ionic-framework/issues/29107)) ([6e477b7](https://github.com/ionic-team/ionic-framework/commit/6e477b743e41b2b37627c8208901704f599b762a)) + + +### Features + +* **button:** add circular shape as round ([#29161](https://github.com/ionic-team/ionic-framework/issues/29161)) ([44529f0](https://github.com/ionic-team/ionic-framework/commit/44529f0a62f1b1ce42750a20f19e829b2789febd)) +* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172)) +* remove css animations support for ionic animations ([#29123](https://github.com/ionic-team/ionic-framework/issues/29123)) ([892594d](https://github.com/ionic-team/ionic-framework/commit/892594de0665e8fc5c8a737d292812842ea03d64)) + + +### BREAKING CHANGES + +* **searchbar:** The `autocapitalize` property on Searchbar now defaults to `'off'`. +* **haptics:** Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components. + + + + + +## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27) + +### Bug Fixes + +* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193) + + + + + +# [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20) + + +### Bug Fixes + +* **input, textarea, select:** account for multiple start/end slot elements ([#29172](https://github.com/ionic-team/ionic-framework/issues/29172)) ([acc1042](https://github.com/ionic-team/ionic-framework/commit/acc104212468e2324b94c85ba6eebc2934fba812)) +* **range, select:** prefer labels passed by developer ([#29145](https://github.com/ionic-team/ionic-framework/issues/29145)) ([56014cf](https://github.com/ionic-team/ionic-framework/commit/56014cf64c387bd4492270905327c570f6814a6b)) + + +### Features + +* rename dark/high-contrast themes to palettes ([#29149](https://github.com/ionic-team/ionic-framework/issues/29149)) ([761e1b4](https://github.com/ionic-team/ionic-framework/commit/761e1b47dd5d49ab44c81ddba5490b6d2106f123)) + + + + + +## [7.8.1](https://github.com/ionic-team/ionic-framework/compare/v7.8.0...v7.8.1) (2024-03-20) + + +### Bug Fixes + +* **datetime:** wheel picker shows consistently in overlays ([#29147](https://github.com/ionic-team/ionic-framework/issues/29147)) ([19c1bc1](https://github.com/ionic-team/ionic-framework/commit/19c1bc16cbc6725463890382365203824b7fd353)), closes [#26234](https://github.com/ionic-team/ionic-framework/issues/26234) +* **header:** iOS headers in MD app are not hidden ([#29164](https://github.com/ionic-team/ionic-framework/issues/29164)) ([fdfecd3](https://github.com/ionic-team/ionic-framework/commit/fdfecd32c33c41cf202d3b30c073bfb1b077e2d6)), closes [#28867](https://github.com/ionic-team/ionic-framework/issues/28867) +* **react:** avoid definitely typed errors with @types/react@18 ([#29182](https://github.com/ionic-team/ionic-framework/issues/29182)) ([58d217d](https://github.com/ionic-team/ionic-framework/commit/58d217d0cf6b716da855c71c169fb1870d4067d3)), closes [#29178](https://github.com/ionic-team/ionic-framework/issues/29178) + + +### Performance Improvements + +* **datetime:** calendar body shows immediately in modal on ios ([#29163](https://github.com/ionic-team/ionic-framework/issues/29163)) ([f759776](https://github.com/ionic-team/ionic-framework/commit/f75977699dae5aeea3d97d4318377633e935afb9)), closes [#24542](https://github.com/ionic-team/ionic-framework/issues/24542) + + + + + +# [8.0.0-beta.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2024-03-13) + + +### Code Refactoring + +* **item:** remove deprecated apis ([#29102](https://github.com/ionic-team/ionic-framework/issues/29102)) ([743f517](https://github.com/ionic-team/ionic-framework/commit/743f517fec3a559646eb03d29477bc16af789d40)) + + +### Features + +* **input,textarea,select:** add --highlight-height variable ([#29090](https://github.com/ionic-team/ionic-framework/issues/29090)) ([13b7f8a](https://github.com/ionic-team/ionic-framework/commit/13b7f8ac3ab3b8d436400993d9a7c62d1670f475)) +* **menu:** apply strict type for menu type ([#28982](https://github.com/ionic-team/ionic-framework/issues/28982)) ([03d2670](https://github.com/ionic-team/ionic-framework/commit/03d26702f6444c195f54d3d2ab5aac490fb972b0)) + + +### BREAKING CHANGES + +* **item:** - The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`. +- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`. +- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`. +- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`. +- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`. + + + + + +# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13) + + +## Features + +* **datetime:** formatOptions property for Datetime ([#29065](https://github.com/ionic-team/ionic-framework/issues/29065)) ([7cdbc1b](https://github.com/ionic-team/ionic-framework/commit/7cdbc1b5ad004e17a7c51363653e0e67f50e6860)) +* **searchbar:** autocapitalize, dir, lang, maxlength, and minlength are inherited to native input ([#29098](https://github.com/ionic-team/ionic-framework/issues/29098)) ([a0a77f7](https://github.com/ionic-team/ionic-framework/commit/a0a77f799df0732d9f7182f15866035a3ce5a1eb)), closes [#27606](https://github.com/ionic-team/ionic-framework/issues/27606) + + + + + +## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13) + + +### Bug Fixes + +* **angular:** add ionNavWillChange and ionNavDidChange types for nav ([#29122](https://github.com/ionic-team/ionic-framework/issues/29122)) ([85b9d5c](https://github.com/ionic-team/ionic-framework/commit/85b9d5c35f626ffc273d220549b0126ddc1f7e4b)), closes [#29114](https://github.com/ionic-team/ionic-framework/issues/29114) +* **checkbox:** set aria-checked of indeterminate checkbox to 'mixed' ([#29115](https://github.com/ionic-team/ionic-framework/issues/29115)) ([b2d636f](https://github.com/ionic-team/ionic-framework/commit/b2d636f14dcd33313f6604cfd4a64b542c831b34)) +* **overlay:** do not hide overlay if toast is presented ([#29140](https://github.com/ionic-team/ionic-framework/issues/29140)) ([c0f5e5e](https://github.com/ionic-team/ionic-framework/commit/c0f5e5ebc0c9d45d71e10e09903b00b3ba8e6bba)), closes [#29139](https://github.com/ionic-team/ionic-framework/issues/29139) + + + + + +# [8.0.0-beta.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2024-03-06) + + +### Bug Fixes + +* **input-shims:** disable input blurring util by default ([#29104](https://github.com/ionic-team/ionic-framework/issues/29104)) ([bf1701e](https://github.com/ionic-team/ionic-framework/commit/bf1701ed39ee3895040ff741f45e215e2696143a)), closes [#29072](https://github.com/ionic-team/ionic-framework/issues/29072) +* **item, item-divider:** slotted spacing is correct ([#29103](https://github.com/ionic-team/ionic-framework/issues/29103)) ([ac72531](https://github.com/ionic-team/ionic-framework/commit/ac7253108a91945803ea4a01d1c90f0e576c25d7)) + + +### Code Refactoring + +* **item:** do not automatically delegate focus ([#29091](https://github.com/ionic-team/ionic-framework/issues/29091)) ([05e721d](https://github.com/ionic-team/ionic-framework/commit/05e721db1cd777880719ebb2345193a266522121)), closes [#21982](https://github.com/ionic-team/ionic-framework/issues/21982) + + +### Performance Improvements + +* **picker:** avoid flicker on ios ([#29101](https://github.com/ionic-team/ionic-framework/issues/29101)) ([94c3ffc](https://github.com/ionic-team/ionic-framework/commit/94c3ffcffe63e1285e968bbc0d69bba5207e65bb)) + + +### BREAKING CHANGES + +* **item:** - Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected. + + + + + +## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06) + + +### Bug Fixes + +* **modal:** ariaLabel and role are inherited when set via htmlAttributes ([#29099](https://github.com/ionic-team/ionic-framework/issues/29099)) ([de13633](https://github.com/ionic-team/ionic-framework/commit/de13633a182d963876434db773aa346833f956fd)) + + + + + +# [8.0.0-beta.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v8.0.0-beta.0) (2024-02-28) + + +### Bug Fixes + +* **angular:** transition plays when using browser buttons ([#28530](https://github.com/ionic-team/ionic-framework/issues/28530)) ([9883eac](https://github.com/ionic-team/ionic-framework/commit/9883eac0f74b4ebce6de02d88941cf1ce3efecb3)), closes [#16569](https://github.com/ionic-team/ionic-framework/issues/16569) +* **button:** wrap text by default ([#28682](https://github.com/ionic-team/ionic-framework/issues/28682)) ([666a01d](https://github.com/ionic-team/ionic-framework/commit/666a01dd6e9c236755adeb289fbc63e835acd9e8)), closes [#8700](https://github.com/ionic-team/ionic-framework/issues/8700) +* **datetime:** set default background color correctly ([#28809](https://github.com/ionic-team/ionic-framework/issues/28809)) ([3929b01](https://github.com/ionic-team/ionic-framework/commit/3929b0188a6b3a019e4e3ef64a42f59f77fe3769)) +* **menu:** menu can be encapsulated in a component ([#28801](https://github.com/ionic-team/ionic-framework/issues/28801)) ([76f6362](https://github.com/ionic-team/ionic-framework/commit/76f6362410fc98d588373025c992dcdede5a107c)), closes [#16304](https://github.com/ionic-team/ionic-framework/issues/16304) [#20681](https://github.com/ionic-team/ionic-framework/issues/20681) +* **nav:** getLength is part of the public API ([#28832](https://github.com/ionic-team/ionic-framework/issues/28832)) ([4fd05b6](https://github.com/ionic-team/ionic-framework/commit/4fd05b6416d6d108a24737ecd348445999c65c17)), closes [#28826](https://github.com/ionic-team/ionic-framework/issues/28826) +* **overlays:** prevent scroll gestures when the overlay is presented ([#28415](https://github.com/ionic-team/ionic-framework/issues/28415)) ([7ba939f](https://github.com/ionic-team/ionic-framework/commit/7ba939fb9401c9a2d807ee5aa7c15c97dd904140)), closes [#23942](https://github.com/ionic-team/ionic-framework/issues/23942) +* **themes:** modify the dark themes to use :root for mode-specific styles ([#28833](https://github.com/ionic-team/ionic-framework/issues/28833)) ([a8e1e16](https://github.com/ionic-team/ionic-framework/commit/a8e1e168ee739ac70305d6d2bf097e56b5844f05)) +* **toggle:** set switch icon color correctly ([#28812](https://github.com/ionic-team/ionic-framework/issues/28812)) ([749df5b](https://github.com/ionic-team/ionic-framework/commit/749df5bdcec95e718199c4915c2a762ee29cdefb)) + + +### Code Refactoring + +* **checkbox:** remove legacy property and support for legacy syntax ([#29043](https://github.com/ionic-team/ionic-framework/issues/29043)) ([fb5ae5b](https://github.com/ionic-team/ionic-framework/commit/fb5ae5b07f98a3b62a35ab07192a0fc7898ecbea)) +* **input:** remove accept property ([#28946](https://github.com/ionic-team/ionic-framework/issues/28946)) ([2816b87](https://github.com/ionic-team/ionic-framework/commit/2816b87ba6b3a7b6bc13e802a0076ad7fb696b81)) +* **radio:** remove legacy property and support for legacy syntax ([#29038](https://github.com/ionic-team/ionic-framework/issues/29038)) ([58d7315](https://github.com/ionic-team/ionic-framework/commit/58d731580237363be039d9b08ed5268cdae94629)) +* **range:** remove legacy property and support for legacy syntax ([#29040](https://github.com/ionic-team/ionic-framework/issues/29040)) ([58c795f](https://github.com/ionic-team/ionic-framework/commit/58c795f31583800c86253fb11bd4dc19370883b0)) +* **toast:** remove cssClass from ToastButton ([#28977](https://github.com/ionic-team/ionic-framework/issues/28977)) ([9856295](https://github.com/ionic-team/ionic-framework/commit/9856295915f1460ba1cd4b6f8c8d420627a533e6)) +* **toggle:** remove legacy property and support for legacy syntax ([#29037](https://github.com/ionic-team/ionic-framework/issues/29037)) ([c72eced](https://github.com/ionic-team/ionic-framework/commit/c72ecedc09fff0af9af8e077fc816110549fca57)) + + +### Features + +* **action-sheet:** add disabled button ([#28723](https://github.com/ionic-team/ionic-framework/issues/28723)) ([e76d729](https://github.com/ionic-team/ionic-framework/commit/e76d72989a9f18a52d9a6a8d1dd64e84a9c1e668)) +* add high contrast themes ([#29010](https://github.com/ionic-team/ionic-framework/issues/29010)) ([ca61e50](https://github.com/ionic-team/ionic-framework/commit/ca61e5061babead06b2cf3a3c38736e1c0101135)) +* **alert:** update styles to iOS 17 specs ([#28726](https://github.com/ionic-team/ionic-framework/issues/28726)) ([979b2f6](https://github.com/ionic-team/ionic-framework/commit/979b2f68f00c585d99aacc65dd47f2bc954d3271)) +* **angular:** remove IonBackButtonDelegate ([#29030](https://github.com/ionic-team/ionic-framework/issues/29030)) ([6baf005](https://github.com/ionic-team/ionic-framework/commit/6baf005da5be8c244a781bbffbcffca1a2ff90dc)) +* **checkbox:** update styles to iOS 17 specs ([#28729](https://github.com/ionic-team/ionic-framework/issues/28729)) ([45907aa](https://github.com/ionic-team/ionic-framework/commit/45907aa907958933c55346a0eb1253a08df32d3a)) +* **datetime-button:** update design to match iOS 17 spec ([#28730](https://github.com/ionic-team/ionic-framework/issues/28730)) ([4649637](https://github.com/ionic-team/ionic-framework/commit/4649637ad9b3b3f5a1cf12dea737a43f9e3aa2f1)) +* **datetime:** align active datetime font size with ios 17 ([#28738](https://github.com/ionic-team/ionic-framework/issues/28738)) ([a3b8254](https://github.com/ionic-team/ionic-framework/commit/a3b825475e95118b8fd599ed2266b64d1d551926)) +* **input:** remove size property in favor of CSS styling ([#28903](https://github.com/ionic-team/ionic-framework/issues/28903)) ([a393d2a](https://github.com/ionic-team/ionic-framework/commit/a393d2a86c37165f35eb556a6150170b5338c40d)) +* **modal:** remove capacitor 2 support for status bar styles ([#29028](https://github.com/ionic-team/ionic-framework/issues/29028)) ([1fb8ff7](https://github.com/ionic-team/ionic-framework/commit/1fb8ff78618aacbe7d67df295f2bb157d54a93d0)) +* **modal:** update styles to iOS 17 specs ([#28748](https://github.com/ionic-team/ionic-framework/issues/28748)) ([ff80155](https://github.com/ionic-team/ionic-framework/commit/ff8015511a352ed8adbd59bcea07a00da9834875)) +* **picker:** add inline picker ([#28689](https://github.com/ionic-team/ionic-framework/issues/28689)) ([cd5c099](https://github.com/ionic-team/ionic-framework/commit/cd5c099dd32ac1283de26a27ef572d05952538b2)), closes [#24905](https://github.com/ionic-team/ionic-framework/issues/24905) [#26840](https://github.com/ionic-team/ionic-framework/issues/26840) [#15710](https://github.com/ionic-team/ionic-framework/issues/15710) +* **progress-bar:** update styles to iOS 17 specs ([#28759](https://github.com/ionic-team/ionic-framework/issues/28759)) ([f65235a](https://github.com/ionic-team/ionic-framework/commit/f65235ac473e0c1a110613fc9c95cdc0783a8738)) +* **searchbar:** update styles to iOS 17 specs ([#28728](https://github.com/ionic-team/ionic-framework/issues/28728)) ([48c0d2c](https://github.com/ionic-team/ionic-framework/commit/48c0d2c0dd995581b70eaed62def00ebf7a834ff)) +* **tab-button:** update styles to iOS 17 specs ([#28754](https://github.com/ionic-team/ionic-framework/issues/28754)) ([63ea967](https://github.com/ionic-team/ionic-framework/commit/63ea967d0230c471a3870e58062cb9cfd16dee3e)) +* **theme:** export light theme tokens ([#28802](https://github.com/ionic-team/ionic-framework/issues/28802)) ([e1f9850](https://github.com/ionic-team/ionic-framework/commit/e1f98509fa7e5472240a7a09b41029bef2414028)) +* **theme:** improved color contrast with color palette ([#28791](https://github.com/ionic-team/ionic-framework/issues/28791)) ([15e368c](https://github.com/ionic-team/ionic-framework/commit/15e368c37829b14a5e138914d834bcad5033cf13)) +* **toggle:** update styles to iOS 17 specs ([#28722](https://github.com/ionic-team/ionic-framework/issues/28722)) ([0ce0693](https://github.com/ionic-team/ionic-framework/commit/0ce0693af1cd468192ea58a08106c704da04640c)) + + +### Performance Improvements + +* **angular:** views are not moved on mount ([#28544](https://github.com/ionic-team/ionic-framework/issues/28544)) ([77a0640](https://github.com/ionic-team/ionic-framework/commit/77a0640e92dc4300b9e89221ef03e96206eca9ae)), closes [#28534](https://github.com/ionic-team/ionic-framework/issues/28534) + + +### BREAKING CHANGES + +* **range:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed from range. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax). +* **checkbox:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax). +* **radio:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed from radio. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax). +* **toggle:** The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed from toggle. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax). +* **toast:** The `cssClass` property has been removed from `ToastButton` +* **input:** The `accept` property has been removed from `ion-input`. +* **nav:** `getLength` returns `Promise` instead of ``. This method was not previously available in Nav's TypeScript interface, but developers could still access it by casting Nav as `any`. Developers should ensure they `await` their `getLength` call before accessing the returned value. +* **button:** Button text now wraps by default. +* Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host. +* **breaking:** The supported JS Framework and Browser/Platform versions have been revised for Ionic 8 + + + + + +## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21) + +### Bug Fixes + +* **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033) +* **overlays:** focus is returned to last focus element when focusing toast ([#28950](https://github.com/ionic-team/ionic-framework/issues/28950)) ([2ed0ada](https://github.com/ionic-team/ionic-framework/commit/2ed0ada9237b3f4dbf5959746ce2d1744936eebe)), closes [#28261](https://github.com/ionic-team/ionic-framework/issues/28261) + + + + + +## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14) + + +### Bug Fixes + +* **overlays:** do not return focus if application has already moved focus manually ([#28850](https://github.com/ionic-team/ionic-framework/issues/28850)) ([a016670](https://github.com/ionic-team/ionic-framework/commit/a016670a8a46e101d23235b17bc8a2081fb992eb)), closes [#28849](https://github.com/ionic-team/ionic-framework/issues/28849) +* **overlays:** ensure that only topmost overlay is announced by screen readers ([#28997](https://github.com/ionic-team/ionic-framework/issues/28997)) ([ba4ba61](https://github.com/ionic-team/ionic-framework/commit/ba4ba6161c1a6c67f7804b07f49c64ac9ad2b14c)), closes [#23472](https://github.com/ionic-team/ionic-framework/issues/23472) +* **popover:** render arrow above backdrop ([#28986](https://github.com/ionic-team/ionic-framework/issues/28986)) ([0a8964d](https://github.com/ionic-team/ionic-framework/commit/0a8964d30c76218fe62f7f4aed4f81df7bb80cd0)), closes [#28985](https://github.com/ionic-team/ionic-framework/issues/28985) + + + + + +## [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) + + +### Bug Fixes + +* **alert:** remove border-right on ios stacked buttons ([#28821](https://github.com/ionic-team/ionic-framework/issues/28821)) ([ad65824](https://github.com/ionic-team/ionic-framework/commit/ad65824722da0eed90ef9e595b743754bfd360b8)) +* **datetime:** do not animate to new value when multiple values in different months are set ([#28847](https://github.com/ionic-team/ionic-framework/issues/28847)) ([9262f7d](https://github.com/ionic-team/ionic-framework/commit/9262f7da15969706039e9d5f11ef5c7bd73ced0d)), closes [#28602](https://github.com/ionic-team/ionic-framework/issues/28602) +* **datetime:** enter closes keyboard when typing time ([#28848](https://github.com/ionic-team/ionic-framework/issues/28848)) ([c47a16d](https://github.com/ionic-team/ionic-framework/commit/c47a16d6c3c57f56b053727dd10ead0bfe547e50)), closes [#28325](https://github.com/ionic-team/ionic-framework/issues/28325) +* **menu:** improve reliability of main content not being scrollable when menu opens ([#28829](https://github.com/ionic-team/ionic-framework/issues/28829)) ([9603a4d](https://github.com/ionic-team/ionic-framework/commit/9603a4de363d2b42622ff3585cd6e4787d9581d1)), closes [#28399](https://github.com/ionic-team/ionic-framework/issues/28399) +* **popover:** content inside of popover scrolls correctly ([#28861](https://github.com/ionic-team/ionic-framework/issues/28861)) ([10c38d0](https://github.com/ionic-team/ionic-framework/commit/10c38d0354e61e20bec9a313de84b22c3b85c323)), closes [#28455](https://github.com/ionic-team/ionic-framework/issues/28455) +* **segment:** setting value via binding updates button state ([#28837](https://github.com/ionic-team/ionic-framework/issues/28837)) ([0847c2a](https://github.com/ionic-team/ionic-framework/commit/0847c2ac2c52b5fa6d30e381685d6cbf7a41231a)), closes [#28816](https://github.com/ionic-team/ionic-framework/issues/28816) +* **select:** click handlers on slotted content fire ([#28839](https://github.com/ionic-team/ionic-framework/issues/28839)) ([aed7a03](https://github.com/ionic-team/ionic-framework/commit/aed7a03532b88628a4358c8cbae1a1cbb861462b)), closes [#28818](https://github.com/ionic-team/ionic-framework/issues/28818) +* **vue:** tabs and parameterized routes work with latest vue ([#28846](https://github.com/ionic-team/ionic-framework/issues/28846)) ([5bc4399](https://github.com/ionic-team/ionic-framework/commit/5bc439961fda2c595666e67688fdd1b8ff4dd0bf)), closes [#28774](https://github.com/ionic-team/ionic-framework/issues/28774) + + + + + +## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17) + + +### Bug Fixes + +* **angular:** add old IonBackButtonDelegate import ([#28831](https://github.com/ionic-team/ionic-framework/issues/28831)) ([fb77353](https://github.com/ionic-team/ionic-framework/commit/fb7735397ed53323dd93a172407117228610b929)), closes [#28827](https://github.com/ionic-team/ionic-framework/issues/28827) +* **list:** remove uneeded border radius from items in inset list ([#28830](https://github.com/ionic-team/ionic-framework/issues/28830)) ([dbaaa5b](https://github.com/ionic-team/ionic-framework/commit/dbaaa5bd9f43b8ba589b3f9c4b4204d2f203ef18)) + + + + + +## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10) + + +### Bug Fixes + +* **input:** slotted buttons are clickable ([#28772](https://github.com/ionic-team/ionic-framework/issues/28772)) ([4ccc150](https://github.com/ionic-team/ionic-framework/commit/4ccc150edff4e3f33f453343aedb081d920b2f90)), closes [#28762](https://github.com/ionic-team/ionic-framework/issues/28762) + + + + + +## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03) + + +### Bug Fixes + +* **datetime:** selected today button renders correctly on ios ([#28740](https://github.com/ionic-team/ionic-framework/issues/28740)) ([2f99aea](https://github.com/ionic-team/ionic-framework/commit/2f99aeae6f71d5ffd1880f2c549227ecf71becf3)) +* **nav, router-outlet:** ios page transition does not cover menu on larger screens ([#28745](https://github.com/ionic-team/ionic-framework/issues/28745)) ([878eec6](https://github.com/ionic-team/ionic-framework/commit/878eec6ea21d76586466d01e13e5e842e69eaceb)), closes [#28737](https://github.com/ionic-team/ionic-framework/issues/28737) +* **radio-group:** radio disabled prop can be undefined ([#28712](https://github.com/ionic-team/ionic-framework/issues/28712)) ([75ffeee](https://github.com/ionic-team/ionic-framework/commit/75ffeee933ae353d2601670178896116c81923e0)), closes [#28677](https://github.com/ionic-team/ionic-framework/issues/28677) +* **refresher:** native ios refresher works on iPadOS ([#28620](https://github.com/ionic-team/ionic-framework/issues/28620)) ([e522601](https://github.com/ionic-team/ionic-framework/commit/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4)), closes [#28617](https://github.com/ionic-team/ionic-framework/issues/28617) + + + + + +## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19) + + +### Bug Fixes + +* **input, textarea, select:** reduce padding on slotted buttons ([#28676](https://github.com/ionic-team/ionic-framework/issues/28676)) ([516b844](https://github.com/ionic-team/ionic-framework/commit/516b84475e5d78060f35fa2c4821efc712536353)) +* **item:** label does not expand indefinitely ([#28700](https://github.com/ionic-team/ionic-framework/issues/28700)) ([bc51dd0](https://github.com/ionic-team/ionic-framework/commit/bc51dd05cf036656980de584d2367db46054f774)) +* **refresher:** mode property can be used in typescript ([#28717](https://github.com/ionic-team/ionic-framework/issues/28717)) ([7ce1031](https://github.com/ionic-team/ionic-framework/commit/7ce1031c177487649c2a698664ec98f10d9002b9)), closes [#28716](https://github.com/ionic-team/ionic-framework/issues/28716) + + + + + +## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13) + + +### Bug Fixes + +* **datetime:** prefer wheel sets working value on confirmation ([#28520](https://github.com/ionic-team/ionic-framework/issues/28520)) ([e886e3f](https://github.com/ionic-team/ionic-framework/commit/e886e3ff2fcb8a3586a62881c5fc848f3074235d)), closes [#25839](https://github.com/ionic-team/ionic-framework/issues/25839) +* **input, textarea:** clearOnInput ignores key modifiers ([#28639](https://github.com/ionic-team/ionic-framework/issues/28639)) ([8f7d87c](https://github.com/ionic-team/ionic-framework/commit/8f7d87c6803b1600a3ca21785df0e9bac49f74a3)), closes [#28633](https://github.com/ionic-team/ionic-framework/issues/28633) +* **menu:** allow styling of the box shadow and transform when visible inside of a split pane ([#28691](https://github.com/ionic-team/ionic-framework/issues/28691)) ([8ee23d2](https://github.com/ionic-team/ionic-framework/commit/8ee23d20d5cc7419ce15f047b92d2f826d3eb681)), closes [#21530](https://github.com/ionic-team/ionic-framework/issues/21530) +* **react:** avoid type collision with @types/react@18.2.43 and greater ([#28687](https://github.com/ionic-team/ionic-framework/issues/28687)) ([92f1b86](https://github.com/ionic-team/ionic-framework/commit/92f1b8627a240c93891205f75adcb5ce3d46596d)) +* **react:** replacing route uses new route direction and animation ([#28671](https://github.com/ionic-team/ionic-framework/issues/28671)) ([a17b963](https://github.com/ionic-team/ionic-framework/commit/a17b9631829c36c2daf1d5227f5afa69f99f8743)), closes [#24260](https://github.com/ionic-team/ionic-framework/issues/24260) +* **react:** use custom animation when going back after a replace ([#28674](https://github.com/ionic-team/ionic-framework/issues/28674)) ([fc88613](https://github.com/ionic-team/ionic-framework/commit/fc88613fefa019a3b695a2c6e10c85cd3ce79ae8)), closes [#28673](https://github.com/ionic-team/ionic-framework/issues/28673) + + + + + +# [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06) + + +### Bug Fixes + +* **angular,vue:** range form value updates while dragging knob ([#28422](https://github.com/ionic-team/ionic-framework/issues/28422)) ([0854a11](https://github.com/ionic-team/ionic-framework/commit/0854a11a25759d0201eae66c96a62fe138d486f8)), closes [#28256](https://github.com/ionic-team/ionic-framework/issues/28256) +* **animation:** add stronger types to Animation interface ([#28334](https://github.com/ionic-team/ionic-framework/issues/28334)) ([4a088d5](https://github.com/ionic-team/ionic-framework/commit/4a088d5d612ab0387064d388b37d46cdf15cf1ff)) +* **animation:** progressEnd coercion is reset before onFinish ([#28394](https://github.com/ionic-team/ionic-framework/issues/28394)) ([eae8162](https://github.com/ionic-team/ionic-framework/commit/eae8162d0dc2e0bd7a9d56a3662a8e5f5d142b72)), closes [#28393](https://github.com/ionic-team/ionic-framework/issues/28393) +* **infinite-scroll:** remaining in threshold after ionInfinite can trigger event again on scroll ([#28569](https://github.com/ionic-team/ionic-framework/issues/28569)) ([8c235fd](https://github.com/ionic-team/ionic-framework/commit/8c235fd30c50f317de1f37f69068507aa0979068)), closes [#18071](https://github.com/ionic-team/ionic-framework/issues/18071) +* **item:** allow item to grow when it is used in a flex container ([#28594](https://github.com/ionic-team/ionic-framework/issues/28594)) ([1c1b567](https://github.com/ionic-team/ionic-framework/commit/1c1b567279dee44da70bb9b90c129946c9043987)) +* **item:** wrap elements and label contents when the font size increases or the elements do not fit ([#28146](https://github.com/ionic-team/ionic-framework/issues/28146)) ([6438e3e](https://github.com/ionic-team/ionic-framework/commit/6438e3e919c665569b731a2d74fe1547b4f3c1cc)) +* **select:** do not collapse to width: 0 when placed in flex container ([#28631](https://github.com/ionic-team/ionic-framework/issues/28631)) ([e71e7a0](https://github.com/ionic-team/ionic-framework/commit/e71e7a069000db8738abc304758de64286817442)) +* **toast:** add swipeGesture to ToastOptions ([#28518](https://github.com/ionic-team/ionic-framework/issues/28518)) ([4ad6df6](https://github.com/ionic-team/ionic-framework/commit/4ad6df67f01cebce30d4da46c7541c4b14c5d4a4)) + + +### Features + +* **checkbox:** add shadow part for label ([#28604](https://github.com/ionic-team/ionic-framework/issues/28604)) ([f9f5654](https://github.com/ionic-team/ionic-framework/commit/f9f5654ab0e920bf97089fbabfb9eedbcf6fe8ae)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300) +* **input, textarea, select:** add start and end slots ([#28583](https://github.com/ionic-team/ionic-framework/issues/28583)) ([357b8b2](https://github.com/ionic-team/ionic-framework/commit/357b8b2beb29b95d53ef043af349067be1d32658)), closes [#26297](https://github.com/ionic-team/ionic-framework/issues/26297) +* **radio-group:** add compareWith property ([#28452](https://github.com/ionic-team/ionic-framework/issues/28452)) ([0ae327f](https://github.com/ionic-team/ionic-framework/commit/0ae327f0e09cd97d705f2d3051c215034381e226)) +* **radio:** add shadow part for label ([#28607](https://github.com/ionic-team/ionic-framework/issues/28607)) ([b757970](https://github.com/ionic-team/ionic-framework/commit/b757970d23e87c59aa883ecb1bfa9b66bcae8de2)), closes [#28300](https://github.com/ionic-team/ionic-framework/issues/28300) +* **range:** expose label wrapper as shadow part ([#28601](https://github.com/ionic-team/ionic-framework/issues/28601)) ([52ed2bf](https://github.com/ionic-team/ionic-framework/commit/52ed2bf63777c764f57bb4c3a5d4a127bff46c50)) +* **toast:** add swipe to dismiss functionality ([#28442](https://github.com/ionic-team/ionic-framework/issues/28442)) ([30c21aa](https://github.com/ionic-team/ionic-framework/commit/30c21aab3ed40d73c28e7d60d0952d8891b0a9d3)), closes [#21769](https://github.com/ionic-team/ionic-framework/issues/21769) +* **toggle:** expose label wrapper as shadow part ([#28585](https://github.com/ionic-team/ionic-framework/issues/28585)) ([a34188f](https://github.com/ionic-team/ionic-framework/commit/a34188f7dbec4a16e4f2043ed3dc096e337725a7)) + +Note: Text inside of `ion-item` can now wrap to resolve accessibility issues related to readability. We recommend evaluating your application to account for text wrapping. + + + + + +## [7.5.8](https://github.com/ionic-team/ionic-framework/compare/v7.5.7...v7.5.8) (2023-12-06) + + +### Bug Fixes + +* **angular:** add missing menu controller methods ([#28618](https://github.com/ionic-team/ionic-framework/issues/28618)) ([7871b56](https://github.com/ionic-team/ionic-framework/commit/7871b56eccfe63326b6dd4b56ade3b3afd444fce)), closes [#20053](https://github.com/ionic-team/ionic-framework/issues/20053) +* **overlays:** trigger is configured on load ([#28526](https://github.com/ionic-team/ionic-framework/issues/28526)) ([a3cd204](https://github.com/ionic-team/ionic-framework/commit/a3cd204f616606ccffc35082655e55fdfb19fe28)), closes [#28524](https://github.com/ionic-team/ionic-framework/issues/28524) +* **react:** router creates new view instances of parameterized routes ([#28616](https://github.com/ionic-team/ionic-framework/issues/28616)) ([1705d06](https://github.com/ionic-team/ionic-framework/commit/1705d064cc041e99f432a27207f3aab7fa62c778)), closes [#26524](https://github.com/ionic-team/ionic-framework/issues/26524) +* **vue:** nav component accepts kebab-case component properties ([#28615](https://github.com/ionic-team/ionic-framework/issues/28615)) ([60303aa](https://github.com/ionic-team/ionic-framework/commit/60303aad23f823488afc8f8824e9c72e3ab86acc)), closes [#28611](https://github.com/ionic-team/ionic-framework/issues/28611) + + + + + +## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29) + + +### Bug Fixes + +* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494) +* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c)) + + + + + +## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21) + + +### Bug Fixes + +* **alert:** match MD spec on tablet ([#28501](https://github.com/ionic-team/ionic-framework/issues/28501)) ([6a2be9f](https://github.com/ionic-team/ionic-framework/commit/6a2be9fa3c12a893d98dc139a1575a6e7e3c7c26)), closes [#23977](https://github.com/ionic-team/ionic-framework/issues/23977) +* **angular:** ng add @ionic/angular in standalone projects ([#28523](https://github.com/ionic-team/ionic-framework/issues/28523)) ([c07312e](https://github.com/ionic-team/ionic-framework/commit/c07312e5ed931f6f825ccf083c9dead9fa815843)), closes [#28514](https://github.com/ionic-team/ionic-framework/issues/28514) +* **angular:** overlays are defined when using standalone controllers ([#28560](https://github.com/ionic-team/ionic-framework/issues/28560)) ([9453132](https://github.com/ionic-team/ionic-framework/commit/9453132aa8952b4adfa1326e61138b329e254f76)), closes [#28385](https://github.com/ionic-team/ionic-framework/issues/28385) +* **datetime:** updating value with min scrolls to new value ([#28549](https://github.com/ionic-team/ionic-framework/issues/28549)) ([388d19e](https://github.com/ionic-team/ionic-framework/commit/388d19e04f83f85abd4602adb04cc71ac575764a)), closes [#28548](https://github.com/ionic-team/ionic-framework/issues/28548) + + + + + +## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15) + + +### Bug Fixes + +* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506) +* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777) +* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466) +* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c)) +* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356) +* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468) + + + + + +## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08) + + +### Bug Fixes + +* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b)) +* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578)) +* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435) + + + + + +## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01) + + +### Bug Fixes + +* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406) +* **angular:** inputs on standalone form controls are reactive ([#28434](https://github.com/ionic-team/ionic-framework/issues/28434)) ([3b6e631](https://github.com/ionic-team/ionic-framework/commit/3b6e6318bf94125b3f8305b4d072a5945ceb3730)), closes [#28431](https://github.com/ionic-team/ionic-framework/issues/28431) +* **angular:** NavController works with nested outlets ([#28421](https://github.com/ionic-team/ionic-framework/issues/28421)) ([90acad1](https://github.com/ionic-team/ionic-framework/commit/90acad1837b117542830ec0083389a35c5b4ee76)), closes [#28417](https://github.com/ionic-team/ionic-framework/issues/28417) +* **angular:** run platform subscriptions inside zone ([#28404](https://github.com/ionic-team/ionic-framework/issues/28404)) ([a4b303e](https://github.com/ionic-team/ionic-framework/commit/a4b303e1338a35756a9cf7f67508d24d2f8537a2)), closes [#19539](https://github.com/ionic-team/ionic-framework/issues/19539) +* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418) +* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121) +* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388) +* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f)) +* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373) +* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a)) + + + + + +## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25) + + +### Bug Fixes + +* **alert, action-sheet:** show scrollbar for long list of options ([#28369](https://github.com/ionic-team/ionic-framework/issues/28369)) ([60f3d65](https://github.com/ionic-team/ionic-framework/commit/60f3d6579498ebad75c4f5163fca3947ac2dadff)), closes [#18487](https://github.com/ionic-team/ionic-framework/issues/18487) +* **angular:** remove form control side effects ([#28359](https://github.com/ionic-team/ionic-framework/issues/28359)) ([82d6309](https://github.com/ionic-team/ionic-framework/commit/82d6309ef1675c0a6e767e87c23f166d84579d8f)), closes [#28358](https://github.com/ionic-team/ionic-framework/issues/28358) +* **fab:** apply safe area in positioning to proper side regardless of direction ([#28377](https://github.com/ionic-team/ionic-framework/issues/28377)) ([331c08a](https://github.com/ionic-team/ionic-framework/commit/331c08aad542de158e53ed351705d4c396bb4e90)) +* **input, searchbar, textarea:** ensure nativeInput is always available ([#28362](https://github.com/ionic-team/ionic-framework/issues/28362)) ([2b015b2](https://github.com/ionic-team/ionic-framework/commit/2b015b22144e306444f2bf30ace0b5cc7e32a710)), closes [#28283](https://github.com/ionic-team/ionic-framework/issues/28283) +* **menu:** menu no longer disappears with multiple split panes ([#28370](https://github.com/ionic-team/ionic-framework/issues/28370)) ([5a30082](https://github.com/ionic-team/ionic-framework/commit/5a30082546cb19eb98128ca9091b35094841d4f2)), closes [#18683](https://github.com/ionic-team/ionic-framework/issues/18683) [#15538](https://github.com/ionic-team/ionic-framework/issues/15538) [#22341](https://github.com/ionic-team/ionic-framework/issues/22341) +* **rtl:** allow :host to use rtl() ([#28353](https://github.com/ionic-team/ionic-framework/issues/28353)) ([6b7d288](https://github.com/ionic-team/ionic-framework/commit/6b7d288536307fcb49231dca66ab938b389ea85e)) + + + + + +## [7.5.1](https://github.com/ionic-team/ionic-framework/compare/v7.5.0...v7.5.1) (2023-10-18) + + +### Bug Fixes + +* **angular:** do not create duplicate menuController instances ([#28343](https://github.com/ionic-team/ionic-framework/issues/28343)) ([fa78676](https://github.com/ionic-team/ionic-framework/commit/fa78676d57eb80655ee9447ffa07dcfdae0c6b2a)), closes [#28337](https://github.com/ionic-team/ionic-framework/issues/28337) +* **angular:** export missing lifecycle interfaces for standalone package ([#28346](https://github.com/ionic-team/ionic-framework/issues/28346)) ([dd93e0b](https://github.com/ionic-team/ionic-framework/commit/dd93e0b2689511f3145606f4dbb2c30dcf4c2950)), closes [/github.com/ionic-team/ionic-angular-standalone-codemods/pull/13/files/baa37ef1e3e8ba773b693db280542efba815482a#r1356414362](https://github.com//github.com/ionic-team/ionic-angular-standalone-codemods/pull/13/files/baa37ef1e3e8ba773b693db280542efba815482a/issues/r1356414362) +* **react:** cleanup functions are execute for lifecycle hooks ([#28319](https://github.com/ionic-team/ionic-framework/issues/28319)) ([1ba9973](https://github.com/ionic-team/ionic-framework/commit/1ba9973857503c6e47cb225b77a5b89e0a9d2718)), closes [#28186](https://github.com/ionic-team/ionic-framework/issues/28186) +* **react:** lifecycle events are removed on page unmount ([#28316](https://github.com/ionic-team/ionic-framework/issues/28316)) ([f14a59c](https://github.com/ionic-team/ionic-framework/commit/f14a59c5e0670ed7cc9ce1a73a087a5af13266e2)) +* **title:** large title transition supports dynamic font scaling ([#28290](https://github.com/ionic-team/ionic-framework/issues/28290)) ([fe47594](https://github.com/ionic-team/ionic-framework/commit/fe47594dc0bbb047f0bade144cf07b084fbeef5e)), closes [#28351](https://github.com/ionic-team/ionic-framework/issues/28351) + + + + + +# [7.5.0](https://github.com/ionic-team/ionic-framework/compare/v7.4.4...v7.5.0) (2023-10-11) + + +### Bug Fixes + +* **alert:** stop Enter keypress for checkboxes ([#28279](https://github.com/ionic-team/ionic-framework/issues/28279)) ([72b3899](https://github.com/ionic-team/ionic-framework/commit/72b389993df4b0dc392262a106d7949e176b13af)) +* **select:** use correct aria-haspopup value ([#28265](https://github.com/ionic-team/ionic-framework/issues/28265)) ([01167fc](https://github.com/ionic-team/ionic-framework/commit/01167fc185db9bbb45b3a4086aff98008a76af2c)) +* **toast:** toast does not warn when positionAnchor is undefined ([#28312](https://github.com/ionic-team/ionic-framework/issues/28312)) ([c37b3d8](https://github.com/ionic-team/ionic-framework/commit/c37b3d8bf4b440506fdc96455a532c6316e5673d)) + + +### Features + +* **a11y:** add dynamic font scaling ([#28314](https://github.com/ionic-team/ionic-framework/issues/28314)) ([f806781](https://github.com/ionic-team/ionic-framework/commit/f8067819eeb577db163bf3e0f95fc73064d62b8a)), closes [#24638](https://github.com/ionic-team/ionic-framework/issues/24638) [#18592](https://github.com/ionic-team/ionic-framework/issues/18592) +* **angular, react, vue, core:** export openURL utility ([#28295](https://github.com/ionic-team/ionic-framework/issues/28295)) ([6da82aa](https://github.com/ionic-team/ionic-framework/commit/6da82aab816b28bfc174f7634ded1fc1e06502ab)), closes [#27911](https://github.com/ionic-team/ionic-framework/issues/27911) +* **angular:** ship Ionic components as Angular standalone components ([#28311](https://github.com/ionic-team/ionic-framework/issues/28311)) ([57e2476](https://github.com/ionic-team/ionic-framework/commit/57e247637005b10f0d21d5ac5f5232bcb1908301)) +* **datetime:** add support for h11 and h24 hour formats ([#28219](https://github.com/ionic-team/ionic-framework/issues/28219)) ([597bc3f](https://github.com/ionic-team/ionic-framework/commit/597bc3f085c5ff1451c73d0cf4d7d664943e712f)), closes [#23750](https://github.com/ionic-team/ionic-framework/issues/23750) +* **toast:** allow custom positioning relative to specific element ([#28248](https://github.com/ionic-team/ionic-framework/issues/28248)) ([897ff6f](https://github.com/ionic-team/ionic-framework/commit/897ff6f7493d8d7e4ab22c6ae59de066b43ce682)), closes [#17499](https://github.com/ionic-team/ionic-framework/issues/17499) + + + + + +## [7.4.4](https://github.com/ionic-team/ionic-framework/compare/v7.4.3...v7.4.4) (2023-10-11) + + +### Bug Fixes + +* **animation:** play method resolves when animation is stopped ([#28264](https://github.com/ionic-team/ionic-framework/issues/28264)) ([e6031fb](https://github.com/ionic-team/ionic-framework/commit/e6031fbef0698dac0a346cd6202c47f2abf54f95)) +* **checkbox, radio, toggle:** disabled elements are not interactive ([#28294](https://github.com/ionic-team/ionic-framework/issues/28294)) ([c70432e](https://github.com/ionic-team/ionic-framework/commit/c70432e6934bcf1d570e1f7cf671c52d2bb52a8b)), closes [#28293](https://github.com/ionic-team/ionic-framework/issues/28293) +* **content:** fullscreen offset is computed correctly with tab bar ([#28245](https://github.com/ionic-team/ionic-framework/issues/28245)) ([7375dd6](https://github.com/ionic-team/ionic-framework/commit/7375dd6abafdf7457f23deb53ad5f016456a6af2)), closes [#21130](https://github.com/ionic-team/ionic-framework/issues/21130) +* **core:** allow fullscreen scroll content to flow outside container for translucent tab bar ([#28246](https://github.com/ionic-team/ionic-framework/issues/28246)) ([b297529](https://github.com/ionic-team/ionic-framework/commit/b297529afc4b93a93f7eaecd31dd5a88a3de5f4e)), closes [#17676](https://github.com/ionic-team/ionic-framework/issues/17676) +* **core:** swipe to go back gesture has priority over other horizontal swipe gestures ([#28304](https://github.com/ionic-team/ionic-framework/issues/28304)) ([d5f0c77](https://github.com/ionic-team/ionic-framework/commit/d5f0c776dfb5cb40b8119c596805dad3adb621e0)), closes [#28303](https://github.com/ionic-team/ionic-framework/issues/28303) +* **header:** collapsible large title main header does not flicker on load ([#28277](https://github.com/ionic-team/ionic-framework/issues/28277)) ([3259da0](https://github.com/ionic-team/ionic-framework/commit/3259da0de181c8f82c38d9de13733213c77d398f)), closes [#27060](https://github.com/ionic-team/ionic-framework/issues/27060) +* **menu:** do not error if disabled or swipeGesture is changed mid-animation ([#28268](https://github.com/ionic-team/ionic-framework/issues/28268)) ([a169044](https://github.com/ionic-team/ionic-framework/commit/a1690441e5bcee8176da32700de6f9e3fde9635e)), closes [#20092](https://github.com/ionic-team/ionic-framework/issues/20092) [#19676](https://github.com/ionic-team/ionic-framework/issues/19676) [#19000](https://github.com/ionic-team/ionic-framework/issues/19000) +* **segment:** scroll to active segment-button on first load ([#28276](https://github.com/ionic-team/ionic-framework/issues/28276)) ([1167a93](https://github.com/ionic-team/ionic-framework/commit/1167a9325fb930b6c727bc26889f5488d9620062)), closes [#28096](https://github.com/ionic-team/ionic-framework/issues/28096) + + + + + +## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04) + + +### Bug Fixes + +* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564) +* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444) + + + + + +## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27) + + +### Bug Fixes + +* **react:** Nav unmounts component while invoking popTo or popToRoot ([#27821](https://github.com/ionic-team/ionic-framework/issues/27821)) ([0edcb2c](https://github.com/ionic-team/ionic-framework/commit/0edcb2cd85133ae8c304c53c37ca829e5fbad447)), closes [#27798](https://github.com/ionic-team/ionic-framework/issues/27798) +* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d)) + + + + + +## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20) + + +### Bug Fixes + +* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180) +* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169) +* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199) +* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940) +* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940) + + + + + +# [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14) + + +### Bug Fixes + +* **datetime:** scroll to newly selected date when value changes ([#27806](https://github.com/ionic-team/ionic-framework/issues/27806)) ([32244fb](https://github.com/ionic-team/ionic-framework/commit/32244fbdd1931e59a9e3cedd2b143c8ee7d01459)), closes [#26391](https://github.com/ionic-team/ionic-framework/issues/26391) +* **many:** add correct scale to stacked labels ([#28163](https://github.com/ionic-team/ionic-framework/issues/28163)) ([8cb8786](https://github.com/ionic-team/ionic-framework/commit/8cb878669e53bad25bbe2787826b6d02d292848a)) +* **range:** add correct margin in item ([#28161](https://github.com/ionic-team/ionic-framework/issues/28161)) ([1d2b867](https://github.com/ionic-team/ionic-framework/commit/1d2b867f2207d366e355265b081bc9aabe31ce7e)) + + +### Features + +* **checkbox, radio, toggle, range:** stacked labels for form controls ([#28075](https://github.com/ionic-team/ionic-framework/issues/28075)) ([e6c7bb6](https://github.com/ionic-team/ionic-framework/commit/e6c7bb60e7e61c965f45e2bf3e3bd16f5125ad56)) +* **datetime:** add disabled part ([#28134](https://github.com/ionic-team/ionic-framework/issues/28134)) ([cd8d509](https://github.com/ionic-team/ionic-framework/commit/cd8d5091a133804ac97d0394354dcf7cd73d9355)) +* **datetime:** add parts for calendar day, active, and today ([#27641](https://github.com/ionic-team/ionic-framework/issues/27641)) ([79b005d](https://github.com/ionic-team/ionic-framework/commit/79b005da704c2ce481e1e3bc4d24cdba06a36d04)), closes [#25340](https://github.com/ionic-team/ionic-framework/issues/25340) +* export TransitionOptions interface and getIonPageElement ([#28140](https://github.com/ionic-team/ionic-framework/issues/28140)) ([19f3bb2](https://github.com/ionic-team/ionic-framework/commit/19f3bb23fd5587848fc41a744ca46ef5985c04d2)), closes [#28137](https://github.com/ionic-team/ionic-framework/issues/28137) + + + + + +## [7.3.4](https://github.com/ionic-team/ionic-framework/compare/v7.3.3...v7.3.4) (2023-09-13) + + +### Bug Fixes + +* **menu:** remove app dir from safe area padding ([#28123](https://github.com/ionic-team/ionic-framework/issues/28123)) ([e0542a7](https://github.com/ionic-team/ionic-framework/commit/e0542a7867871fa45a7fe6a4986e7de633063b4b)) + + + + + +## [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) + + +### Bug Fixes + +* **datetime:** gracefully handle invalid min/max ([#28054](https://github.com/ionic-team/ionic-framework/issues/28054)) ([01fc9b4](https://github.com/ionic-team/ionic-framework/commit/01fc9b45116f7ad6ddc56c7fb1535dec798c2b3a)), closes [#28041](https://github.com/ionic-team/ionic-framework/issues/28041) + + + + + +## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23) + + +### Bug Fixes + +* **angular:** ionTabsWillChange is fired before tab activation ([#27991](https://github.com/ionic-team/ionic-framework/issues/27991)) ([bbfb8f8](https://github.com/ionic-team/ionic-framework/commit/bbfb8f81a61475d7e73b63743db5d6a0cd979d21)), closes [#27212](https://github.com/ionic-team/ionic-framework/issues/27212) +* **input, textarea:** clearOnEdit does not clear when pressing Tab ([#28005](https://github.com/ionic-team/ionic-framework/issues/28005)) ([444acc1](https://github.com/ionic-team/ionic-framework/commit/444acc1f1bca348b62dfb398067cc087529f67f1)), closes [#27746](https://github.com/ionic-team/ionic-framework/issues/27746) +* **react:** avoid multiple invocations of onDidDismiss and onWillPresent ([#28020](https://github.com/ionic-team/ionic-framework/issues/28020)) ([0ac3df3](https://github.com/ionic-team/ionic-framework/commit/0ac3df3f378bdefc3a927adc798ebd9ec7a54fee)), closes [#28010](https://github.com/ionic-team/ionic-framework/issues/28010) + + + + + +# [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16) + + +### Bug Fixes + +* **alert:** radio and checkbox labels wrap to next line ([#27898](https://github.com/ionic-team/ionic-framework/issues/27898)) ([0d3127a](https://github.com/ionic-team/ionic-framework/commit/0d3127ad09df3c914a8c254f14931de5ca3beb31)), closes [#17269](https://github.com/ionic-team/ionic-framework/issues/17269) + + +### Features + +* **action-sheet:** add htmlAttributes property for passing attributes to buttons ([#27863](https://github.com/ionic-team/ionic-framework/issues/27863)) ([5ce4ec0](https://github.com/ionic-team/ionic-framework/commit/5ce4ec0439e4f31aba31062fd8af4a2ad792a54f)) +* **alert:** add htmlAttributes property for passing attributes to buttons ([#27862](https://github.com/ionic-team/ionic-framework/issues/27862)) ([06be0e5](https://github.com/ionic-team/ionic-framework/commit/06be0e511164ebdaa6af9a3747d0585260c030a9)) +* **toast:** add htmlAttributes property for passing attributes to buttons ([#27855](https://github.com/ionic-team/ionic-framework/issues/27855)) ([9a68588](https://github.com/ionic-team/ionic-framework/commit/9a685882b7085d911ff09eedacc367629e32348a)) +* **toast:** add shadow part for cancel button ([#27921](https://github.com/ionic-team/ionic-framework/issues/27921)) ([e9faf54](https://github.com/ionic-team/ionic-framework/commit/e9faf54d0a7409521706ce9c8b0d26f3fbe9ba41)), closes [#27920](https://github.com/ionic-team/ionic-framework/issues/27920) + + + + + +## [7.2.4](https://github.com/ionic-team/ionic-framework/compare/v7.2.3...v7.2.4) (2023-08-16) + + +### Bug Fixes + +* **tap-click:** do not error in document-less environment ([#27972](https://github.com/ionic-team/ionic-framework/issues/27972)) ([28bd4ba](https://github.com/ionic-team/ionic-framework/commit/28bd4ba720bb77d5f5c48cd7a45e0015daddc9dd)) +* **title:** large title aligns with ios spec ([#27969](https://github.com/ionic-team/ionic-framework/issues/27969)) ([8fa12fc](https://github.com/ionic-team/ionic-framework/commit/8fa12fc88857df27a1ca11249f0085e100fe1474)), closes [#27966](https://github.com/ionic-team/ionic-framework/issues/27966) + + + + + +## [7.2.3](https://github.com/ionic-team/ionic-framework/compare/v7.2.2...v7.2.3) (2023-08-09) + + +### Bug Fixes + +* **button:** hidden button is added when form is set async ([#27955](https://github.com/ionic-team/ionic-framework/issues/27955)) ([e9fa300](https://github.com/ionic-team/ionic-framework/commit/e9fa30002bd5dec4f2f56a15c84eec1b3e794942)), closes [#27952](https://github.com/ionic-team/ionic-framework/issues/27952) +* **datetime:** changing months work if partially visible ([#27917](https://github.com/ionic-team/ionic-framework/issues/27917)) ([eb19c28](https://github.com/ionic-team/ionic-framework/commit/eb19c289d6581639f6df7aff002bebdf2b27d31c)), closes [#27913](https://github.com/ionic-team/ionic-framework/issues/27913) +* **item-sliding:** account for options added before watcher ([#27915](https://github.com/ionic-team/ionic-framework/issues/27915)) ([a0b3ef0](https://github.com/ionic-team/ionic-framework/commit/a0b3ef02af718e232246515bb873ad8c090fa55d)), closes [#27910](https://github.com/ionic-team/ionic-framework/issues/27910) +* **many:** overlays present if isOpen is true on load ([#27933](https://github.com/ionic-team/ionic-framework/issues/27933)) ([a0e6ac6](https://github.com/ionic-team/ionic-framework/commit/a0e6ac6013552c5e3acdde33575d4aaf4d4c0bda)), closes [#27928](https://github.com/ionic-team/ionic-framework/issues/27928) +* **modal:** setCurrentBreakpoint respects animated prop ([#27924](https://github.com/ionic-team/ionic-framework/issues/27924)) ([da55ab9](https://github.com/ionic-team/ionic-framework/commit/da55ab949ef1894738da5a6241176089b7a2b6e3)), closes [#27923](https://github.com/ionic-team/ionic-framework/issues/27923) +* **nav:** improve reliability of swipe back gesture when quickly swiping back ([#27904](https://github.com/ionic-team/ionic-framework/issues/27904)) ([9500769](https://github.com/ionic-team/ionic-framework/commit/9500769f114d180613f0340b1a328b5e631b7188)), closes [#27893](https://github.com/ionic-team/ionic-framework/issues/27893) +* **tab-button:** update event type interface on React ([#27950](https://github.com/ionic-team/ionic-framework/issues/27950)) ([1cf1eca](https://github.com/ionic-team/ionic-framework/commit/1cf1eca00239f3e98854466116e42f9a2e7b4590)), closes [#27949](https://github.com/ionic-team/ionic-framework/issues/27949) + + + + + +## [7.2.2](https://github.com/ionic-team/ionic-framework/compare/v7.2.1...v7.2.2) (2023-08-02) + + +### Bug Fixes + +* **datetime-button:** render correct text when passing partial date values ([#27816](https://github.com/ionic-team/ionic-framework/issues/27816)) ([bd1910b](https://github.com/ionic-team/ionic-framework/commit/bd1910ba69348877ad5f99d9db2b59d06693b91e)), closes [#27797](https://github.com/ionic-team/ionic-framework/issues/27797) +* **input, textarea:** input does not block floating label ([#27870](https://github.com/ionic-team/ionic-framework/issues/27870)) ([f14c440](https://github.com/ionic-team/ionic-framework/commit/f14c440d6321ef9f168b272338e5cd21cab384ef)), closes [#27812](https://github.com/ionic-team/ionic-framework/issues/27812) +* **item-options:** use correct safe area padding ([#27853](https://github.com/ionic-team/ionic-framework/issues/27853)) ([0b8f1bc](https://github.com/ionic-team/ionic-framework/commit/0b8f1bc7dd4170a2a8c9ed3aede173dd489b25ea)) +* **radio:** radios can be focused and are announced with group ([#27817](https://github.com/ionic-team/ionic-framework/issues/27817)) ([ba2f49b](https://github.com/ionic-team/ionic-framework/commit/ba2f49b8a460520d20ac198db800ea2d9e5b015f)), closes [#27438](https://github.com/ionic-team/ionic-framework/issues/27438) +* **react, vue:** custom animations are used when going back ([#27895](https://github.com/ionic-team/ionic-framework/issues/27895)) ([824033f](https://github.com/ionic-team/ionic-framework/commit/824033f1d4b4a3e5d4c6a978a39e5bb1f33b5bb4)), closes [#27873](https://github.com/ionic-team/ionic-framework/issues/27873) +* **select:** popover uses modern form syntax ([#27818](https://github.com/ionic-team/ionic-framework/issues/27818)) ([0c117cf](https://github.com/ionic-team/ionic-framework/commit/0c117cfe7f383b7c7837d27de5a6eee12ddd6c2f)), closes [#27071](https://github.com/ionic-team/ionic-framework/issues/27071) [#27786](https://github.com/ionic-team/ionic-framework/issues/27786) + + + + + +## [7.2.1](https://github.com/ionic-team/ionic-framework/compare/v7.2.0...v7.2.1) (2023-07-26) + + +### Bug Fixes + +* **item-sliding:** buttons are not interactive on close ([#27829](https://github.com/ionic-team/ionic-framework/issues/27829)) ([6e4919c](https://github.com/ionic-team/ionic-framework/commit/6e4919caff90fc60988e5cc85ad7161844eb5b51)), closes [#22722](https://github.com/ionic-team/ionic-framework/issues/22722) +* **modal:** body background is reset with inline card modals ([#27835](https://github.com/ionic-team/ionic-framework/issues/27835)) ([38626d9](https://github.com/ionic-team/ionic-framework/commit/38626d96809d1c6be523ea62a4fac1dec73ee891)), closes [#27830](https://github.com/ionic-team/ionic-framework/issues/27830) + + + + + +# [7.2.0](https://github.com/ionic-team/ionic-framework/compare/v7.1.4...v7.2.0) (2023-07-19) + + +### Features + +* **angular:** support binding routing data to component inputs ([#27694](https://github.com/ionic-team/ionic-framework/issues/27694)) ([90f4124](https://github.com/ionic-team/ionic-framework/commit/90f41243d9404caaad99076965b7cd649ddf7f33)), closes [#27476](https://github.com/ionic-team/ionic-framework/issues/27476) +* **button:** allow button to increase in height when text wraps ([#27547](https://github.com/ionic-team/ionic-framework/issues/27547)) ([6fe716f](https://github.com/ionic-team/ionic-framework/commit/6fe716fd1320935632854e5d4f741b57801bda92)) +* **searchbar:** add name property ([#27737](https://github.com/ionic-team/ionic-framework/issues/27737)) ([7131037](https://github.com/ionic-team/ionic-framework/commit/71310372c94862342d607007ece127340df92a8c)), closes [#27675](https://github.com/ionic-team/ionic-framework/issues/27675) + + + + + +## [7.1.4](https://github.com/ionic-team/ionic-framework/compare/v7.1.3...v7.1.4) (2023-07-19) + + +### Bug Fixes + +* **angular:** menu button is enabled with Angular Universal builds ([#27814](https://github.com/ionic-team/ionic-framework/issues/27814)) ([2cf1a0b](https://github.com/ionic-team/ionic-framework/commit/2cf1a0bcae7d766aa25951c53470876f9569906c)), closes [#27524](https://github.com/ionic-team/ionic-framework/issues/27524) [#22206](https://github.com/ionic-team/ionic-framework/issues/22206) +* **button:** submit form when pressing enter key ([#27790](https://github.com/ionic-team/ionic-framework/issues/27790)) ([b78af75](https://github.com/ionic-team/ionic-framework/commit/b78af7598f19ca5e1b440ddc0091a62d86321066)), closes [#19368](https://github.com/ionic-team/ionic-framework/issues/19368) +* **radio, checkbox, toggle:** add top and bottom margins when in ion-item ([#27788](https://github.com/ionic-team/ionic-framework/issues/27788)) ([35f0ec5](https://github.com/ionic-team/ionic-framework/commit/35f0ec581a55e0cb080f0793fb94d3e424c06d4d)), closes [#27498](https://github.com/ionic-team/ionic-framework/issues/27498) +* safari no longer adjusts text in landscape ([#27787](https://github.com/ionic-team/ionic-framework/issues/27787)) ([66584b0](https://github.com/ionic-team/ionic-framework/commit/66584b03d0b33507170f954009998c72fb3f7755)), closes [#27782](https://github.com/ionic-team/ionic-framework/issues/27782) +* **textarea:** stacked/floating textarea size is correct on safari ([#27766](https://github.com/ionic-team/ionic-framework/issues/27766)) ([2cb7013](https://github.com/ionic-team/ionic-framework/commit/2cb701395487c6a0304400f6b821659ae6def820)), closes [#27345](https://github.com/ionic-team/ionic-framework/issues/27345) + + + + + +## [7.1.3](https://github.com/ionic-team/ionic-framework/compare/v7.1.2...v7.1.3) (2023-07-12) + + +### Bug Fixes + +* avoid unresolved import warning on stencil apps ([#27765](https://github.com/ionic-team/ionic-framework/issues/27765)) ([2085025](https://github.com/ionic-team/ionic-framework/commit/2085025644f075e63d04bece56eca4f2beeadbb6)), closes [#27762](https://github.com/ionic-team/ionic-framework/issues/27762) +* **overlays:** first button is not focused on backdrop tap ([#27774](https://github.com/ionic-team/ionic-framework/issues/27774)) ([82c568b](https://github.com/ionic-team/ionic-framework/commit/82c568b8c8e1e9934e1928452aa5216619290e7b)), closes [#27773](https://github.com/ionic-team/ionic-framework/issues/27773) + + + + + +## [7.1.2](https://github.com/ionic-team/ionic-framework/compare/v7.1.1...v7.1.2) (2023-07-06) + + +### Bug Fixes + +* **back-button:** show correct background on focus + hover with ios ([#27723](https://github.com/ionic-team/ionic-framework/issues/27723)) ([db9a001](https://github.com/ionic-team/ionic-framework/commit/db9a0010df3c7fd0fcd0dbcd8c4ad3b30d022b5c)), closes [#27722](https://github.com/ionic-team/ionic-framework/issues/27722) +* **nav:** root component is mounted with root params ([#27676](https://github.com/ionic-team/ionic-framework/issues/27676)) ([1f06be4](https://github.com/ionic-team/ionic-framework/commit/1f06be4a31965f2a949b4866a585aee6af0af29d)), closes [#27146](https://github.com/ionic-team/ionic-framework/issues/27146) + + + + + +## [7.1.1](https://github.com/ionic-team/ionic-framework/compare/v7.1.0...v7.1.1) (2023-06-26) + + +### Bug Fixes + +* **textarea:** autogrow resizes correctly ([#27691](https://github.com/ionic-team/ionic-framework/issues/27691)) ([f263611](https://github.com/ionic-team/ionic-framework/commit/f263611260c465bfeefc2db7b1ea04bfa5b54303)), closes [#27688](https://github.com/ionic-team/ionic-framework/issues/27688) + + + + + +# [7.1.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.14...v7.1.0) (2023-06-21) + + +### Bug Fixes + +* **angular:** tabs supports conditional slot bindings ([#27582](https://github.com/ionic-team/ionic-framework/issues/27582)) ([d20bea5](https://github.com/ionic-team/ionic-framework/commit/d20bea561c362eacd250cdedbc9b79159eb2c95f)), closes [#19484](https://github.com/ionic-team/ionic-framework/issues/19484) +* **datetime:** ascending order for years ([#27551](https://github.com/ionic-team/ionic-framework/issues/27551)) ([2098806](https://github.com/ionic-team/ionic-framework/commit/209880622a4600f88c4878e82975ad0492bd55db)), closes [#27422](https://github.com/ionic-team/ionic-framework/issues/27422) +* import paths ([d10509f](https://github.com/ionic-team/ionic-framework/commit/d10509f84099515f62c895dcd736cc387e382bde)) +* **select:** hide notch cutout if no visible label provided ([#27649](https://github.com/ionic-team/ionic-framework/issues/27649)) ([606a892](https://github.com/ionic-team/ionic-framework/commit/606a892e400a531cac5c413dc7492a54ae0e1fea)) + + +### Features + +* **datetime:** add part for month/year button ([#27618](https://github.com/ionic-team/ionic-framework/issues/27618)) ([d44422e](https://github.com/ionic-team/ionic-framework/commit/d44422e224374804010746a12f398d3c0d6a9f2c)), closes [#26596](https://github.com/ionic-team/ionic-framework/issues/26596) +* **datetime:** add shadow parts and CSS variables for styling wheel pickers ([#27529](https://github.com/ionic-team/ionic-framework/issues/27529)) ([f2c1845](https://github.com/ionic-team/ionic-framework/commit/f2c1845fba11d8273331c601052f0f34457b6649)), closes [#25945](https://github.com/ionic-team/ionic-framework/issues/25945) +* **input:** add experimental label slot ([#27650](https://github.com/ionic-team/ionic-framework/issues/27650)) ([a45395c](https://github.com/ionic-team/ionic-framework/commit/a45395cc02b2617b80e6c2389fa745e7c20540fc)), closes [#27061](https://github.com/ionic-team/ionic-framework/issues/27061) +* **range:** add label prop ([#27408](https://github.com/ionic-team/ionic-framework/issues/27408)) ([368add2](https://github.com/ionic-team/ionic-framework/commit/368add2a5ca3820a1f9623c96d29bcccfa693fdc)) +* return if the pop on NavController was successful ([#27404](https://github.com/ionic-team/ionic-framework/issues/27404)) ([e80f0b2](https://github.com/ionic-team/ionic-framework/commit/e80f0b240968de0d642463e95a35adf8dbffd2e1)), closes [#27403](https://github.com/ionic-team/ionic-framework/issues/27403) +* **segment, segment-button:** update segment value property to accept numbers ([#27222](https://github.com/ionic-team/ionic-framework/issues/27222)) ([ec95ae5](https://github.com/ionic-team/ionic-framework/commit/ec95ae5cd38e3d2b9ec9fdbc9e237fa1241f7a4e)), closes [#27221](https://github.com/ionic-team/ionic-framework/issues/27221) +* **segment:** display segment as a grid and add an ellipsis to overflowing text in a segment button ([#27457](https://github.com/ionic-team/ionic-framework/issues/27457)) ([448e63f](https://github.com/ionic-team/ionic-framework/commit/448e63fef0aca603214cb357dec37e1db2a0f052)), closes [#16532](https://github.com/ionic-team/ionic-framework/issues/16532) +* **select:** add label slot ([#27545](https://github.com/ionic-team/ionic-framework/issues/27545)) ([af92cb2](https://github.com/ionic-team/ionic-framework/commit/af92cb28c8819c88b40192b5dcbafedc1eb2064a)), closes [#26838](https://github.com/ionic-team/ionic-framework/issues/26838) +* **select:** add props to customize toggle icons ([#27648](https://github.com/ionic-team/ionic-framework/issues/27648)) ([95e28b6](https://github.com/ionic-team/ionic-framework/commit/95e28b6629843af7dce62f20bc8e31adfb391990)), closes [#17248](https://github.com/ionic-team/ionic-framework/issues/17248) +* **select:** expose container and label as CSS parts ([#27541](https://github.com/ionic-team/ionic-framework/issues/27541)) ([5c10f88](https://github.com/ionic-team/ionic-framework/commit/5c10f88b2eb4d869966ea9a6d1db34185cefe676)), closes [#27112](https://github.com/ionic-team/ionic-framework/issues/27112) +* **textarea:** add experimental label slot ([#27677](https://github.com/ionic-team/ionic-framework/issues/27677)) ([8bcd9e8](https://github.com/ionic-team/ionic-framework/commit/8bcd9e8b35f252a4efaec7a7be7d69a70beefa9f)), closes [#27061](https://github.com/ionic-team/ionic-framework/issues/27061) + + + + + +## [7.0.14](https://github.com/ionic-team/ionic-framework/compare/v7.0.13...v7.0.14) (2023-06-15) + + +### Bug Fixes + +* **keyboard:** keyboard events emit correctly when Capacitor is available but the Keyboard plugin is not ([#27655](https://github.com/ionic-team/ionic-framework/issues/27655)) ([7a38a00](https://github.com/ionic-team/ionic-framework/commit/7a38a006a94f1240d93102f2f42bbfc4d76a679e)), closes [#27654](https://github.com/ionic-team/ionic-framework/issues/27654) +* **toast:** allow color for translucent toast ([#27652](https://github.com/ionic-team/ionic-framework/issues/27652)) ([d555375](https://github.com/ionic-team/ionic-framework/commit/d555375c146639b32e85c57a8cdd4d52313ef4cf)), closes [#27567](https://github.com/ionic-team/ionic-framework/issues/27567) + + + + + +## [7.0.13](https://github.com/ionic-team/ionic-framework/compare/v7.0.12...v7.0.13) (2023-06-14) + + +### Bug Fixes + +* **react:** onDoubleClick fires on components ([#27611](https://github.com/ionic-team/ionic-framework/issues/27611)) ([3e191df](https://github.com/ionic-team/ionic-framework/commit/3e191df3dd43dcdd5a5f717166d4db9834340a2b)), closes [#21320](https://github.com/ionic-team/ionic-framework/issues/21320) + + + + + +## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08) + + +### Bug Fixes + +* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601) + + + + + +## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07) + + +### Bug Fixes + +* **header, footer:** resolve CSP violations with box shadow ([#27560](https://github.com/ionic-team/ionic-framework/issues/27560)) ([e75fa58](https://github.com/ionic-team/ionic-framework/commit/e75fa582c4ca507b09f62bbce649f02ca49da7a0)) +* **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578) +* **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558) +* **radio:** radio with modern syntax is keyboard navigable ([#27530](https://github.com/ionic-team/ionic-framework/issues/27530)) ([d87e692](https://github.com/ionic-team/ionic-framework/commit/d87e692c6c2c3d146514b093853d5e262137a9e5)), closes [#27268](https://github.com/ionic-team/ionic-framework/issues/27268) +* **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4)) + + + + + +## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31) + + +### Bug Fixes + +* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480)) + + +### Performance Improvements + +* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566) + + + + + +## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25) + + +### Bug Fixes + +* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503) +* **react, vue:** inline modals apply ion-page class ([#27481](https://github.com/ionic-team/ionic-framework/issues/27481)) ([02678f3](https://github.com/ionic-team/ionic-framework/commit/02678f3652be5139cf0c17d0f1260c145acd1a48)), closes [#27470](https://github.com/ionic-team/ionic-framework/issues/27470) +* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338) + + + + + +## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24) + + +### Bug Fixes + +* **many:** update form controls (radio, checkbox, toggle, input, select) to have consistent disabled opacity ([#27396](https://github.com/ionic-team/ionic-framework/issues/27396)) ([995a848](https://github.com/ionic-team/ionic-framework/commit/995a8485751bb4058a59c7e958b1200f8f6539fa)), closes [#27184](https://github.com/ionic-team/ionic-framework/issues/27184) +* **picker-column:** correct RTL direction ([#27460](https://github.com/ionic-team/ionic-framework/issues/27460)) ([d3dd72f](https://github.com/ionic-team/ionic-framework/commit/d3dd72fff67b3b437106e187e75f798653d105e2)), closes [#21205](https://github.com/ionic-team/ionic-framework/issues/21205) +* **popover:** blur translucent popover in chromium ([#27484](https://github.com/ionic-team/ionic-framework/issues/27484)) ([a59eefb](https://github.com/ionic-team/ionic-framework/commit/a59eefb6a312d338895c46d80320ebe91cccac23)), closes [#22176](https://github.com/ionic-team/ionic-framework/issues/22176) + + + + + +## [7.0.7](https://github.com/ionic-team/ionic-framework/compare/v7.0.6...v7.0.7) (2023-05-17) + + +### Bug Fixes + +* **accordion:** state updates if value changes ([#27463](https://github.com/ionic-team/ionic-framework/issues/27463)) ([3cbc592](https://github.com/ionic-team/ionic-framework/commit/3cbc592154a2b76cf63dfef67cb63de94dcec887)), closes [#27461](https://github.com/ionic-team/ionic-framework/issues/27461) +* **checkbox, radio:** update border colors to match MD2 spec ([#27357](https://github.com/ionic-team/ionic-framework/issues/27357)) ([eabc6f3](https://github.com/ionic-team/ionic-framework/commit/eabc6f357675919dd82bea29a1776c0ca1bf89fd)), closes [#27170](https://github.com/ionic-team/ionic-framework/issues/27170) +* **datetime-button:** log error if non-datetime instance is passed ([#27456](https://github.com/ionic-team/ionic-framework/issues/27456)) ([7b7e05a](https://github.com/ionic-team/ionic-framework/commit/7b7e05aa697a51ebfac42f96aa9510d4d96336de)) +* **footer, tab-bar:** wait for resize before re-showing ([#27417](https://github.com/ionic-team/ionic-framework/issues/27417)) ([70d9854](https://github.com/ionic-team/ionic-framework/commit/70d9854d8df5259ed715e282a6ca40ca3bea6192)), closes [#25990](https://github.com/ionic-team/ionic-framework/issues/25990) +* **many:** form controls labels have increased margin ([#27447](https://github.com/ionic-team/ionic-framework/issues/27447)) ([381de0b](https://github.com/ionic-team/ionic-framework/commit/381de0b3d324805161232d8556fffd7022fcd84c)), closes [#27129](https://github.com/ionic-team/ionic-framework/issues/27129) +* **picker-column:** dynamically change options ([#27359](https://github.com/ionic-team/ionic-framework/issues/27359)) ([7c7fb2b](https://github.com/ionic-team/ionic-framework/commit/7c7fb2b1a3bf35b123716b2f975231ceb01dcc07)), closes [#21763](https://github.com/ionic-team/ionic-framework/issues/21763) +* **picker-column:** prevSelected is set to the correct value ([#27458](https://github.com/ionic-team/ionic-framework/issues/27458)) ([9dc126d](https://github.com/ionic-team/ionic-framework/commit/9dc126d38727c1ca16a75cfa65daab9a630be678)), closes [#21764](https://github.com/ionic-team/ionic-framework/issues/21764) +* **select:** floating label covers placeholder when when blurred ([#27446](https://github.com/ionic-team/ionic-framework/issues/27446)) ([921bfae](https://github.com/ionic-team/ionic-framework/commit/921bfae9e68257734a9695cab9245bb335eb88fa)), closes [#27201](https://github.com/ionic-team/ionic-framework/issues/27201) +* **select:** modern syntax works with forms ([#27480](https://github.com/ionic-team/ionic-framework/issues/27480)) ([13d2d11](https://github.com/ionic-team/ionic-framework/commit/13d2d115d44f109c3ea2a47bcb518c6090126325)), closes [#27478](https://github.com/ionic-team/ionic-framework/issues/27478) +* **spinner:** allow resizing of dots, bubbles, and circles ([#27424](https://github.com/ionic-team/ionic-framework/issues/27424)) ([e5ae45d](https://github.com/ionic-team/ionic-framework/commit/e5ae45d32fde7328a704a6ffa18940106a069fa2)), closes [#18115](https://github.com/ionic-team/ionic-framework/issues/18115) +* **tab-button:** use darker text to pass a11y ([#27355](https://github.com/ionic-team/ionic-framework/issues/27355)) ([0b23814](https://github.com/ionic-team/ionic-framework/commit/0b23814e0ba167ee6b2a2e430c47823d312d8c3c)) + + + + + +## [7.0.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.5...v7.0.6) (2023-05-11) + + +### Bug Fixes + +* **content:** prevent forceUpdate in SSR ([#27440](https://github.com/ionic-team/ionic-framework/issues/27440)) ([e930988](https://github.com/ionic-team/ionic-framework/commit/e9309880d18cf03c1c139b00fe4b80794804e3de)), closes [#27411](https://github.com/ionic-team/ionic-framework/issues/27411) +* **item-sliding:** options display on rtl ([#27203](https://github.com/ionic-team/ionic-framework/issues/27203)) ([b16fd1d](https://github.com/ionic-team/ionic-framework/commit/b16fd1d6f962f8fb6a57eb8301ecd904e1ca2153)), closes [#26103](https://github.com/ionic-team/ionic-framework/issues/26103) [#25285](https://github.com/ionic-team/ionic-framework/issues/25285) +* **modal, popover:** wait for contents to mount ([#27344](https://github.com/ionic-team/ionic-framework/issues/27344)) ([c98ad6f](https://github.com/ionic-team/ionic-framework/commit/c98ad6f16ab147024fb74c179218fd8ff7f87db1)), closes [#27343](https://github.com/ionic-team/ionic-framework/issues/27343) +* **overlays:** assign incremental id to overlay host ([#27278](https://github.com/ionic-team/ionic-framework/issues/27278)) ([9313a91](https://github.com/ionic-team/ionic-framework/commit/9313a914b7802dd4327caa970906ea18e882a3ce)) +* **range:** round value to same number of decimal places as props to avoid floating point rounding errors ([#27375](https://github.com/ionic-team/ionic-framework/issues/27375)) ([6e83ba4](https://github.com/ionic-team/ionic-framework/commit/6e83ba4051922da0a179a370d5baa0c57df8b01d)), closes [#21968](https://github.com/ionic-team/ionic-framework/issues/21968) +* **react:** remove incorrect class key from IonicReactProps ([#27432](https://github.com/ionic-team/ionic-framework/issues/27432)) ([415c44c](https://github.com/ionic-team/ionic-framework/commit/415c44c0adc231367727c14f355c982afc385172)) +* **types:** export DatetimeHighlightStyle ([#27360](https://github.com/ionic-team/ionic-framework/issues/27360)) ([a37cdb1](https://github.com/ionic-team/ionic-framework/commit/a37cdb1c5ddab96e2e95369cc4e4b04a5ef0c5c7)), closes [#27353](https://github.com/ionic-team/ionic-framework/issues/27353) + + + + + +## [7.0.5](https://github.com/ionic-team/ionic-framework/compare/v7.0.4...v7.0.5) (2023-05-03) + + +### Bug Fixes + +* **many:** form components do not take up full width in slot ([#27306](https://github.com/ionic-team/ionic-framework/issues/27306)) ([bfe7b38](https://github.com/ionic-team/ionic-framework/commit/bfe7b388318aca98014a0748f678e41a0f3910ae)), closes [#27305](https://github.com/ionic-team/ionic-framework/issues/27305) +* **scroll-assist:** set correct scroll padding ([#27261](https://github.com/ionic-team/ionic-framework/issues/27261)) ([7e1f996](https://github.com/ionic-team/ionic-framework/commit/7e1f996dc63cd414b30b22aebbfc09b0b6b4f6fc)), closes [#27257](https://github.com/ionic-team/ionic-framework/issues/27257) +* **toggle:** swipe gesture applies to knob ([#27255](https://github.com/ionic-team/ionic-framework/issues/27255)) ([6524582](https://github.com/ionic-team/ionic-framework/commit/65245826e3a775bcb8a5d6cfd05230f53470fc66)), closes [#27254](https://github.com/ionic-team/ionic-framework/issues/27254) + + + + + +## [7.0.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.3...v7.0.4) (2023-04-26) + + +### Bug Fixes + +* **breadcumb:** set background when focused on md ([#27274](https://github.com/ionic-team/ionic-framework/issues/27274)) ([01e028b](https://github.com/ionic-team/ionic-framework/commit/01e028b789f84e80f20ce2be7be7f8519f925211)), closes [#27273](https://github.com/ionic-team/ionic-framework/issues/27273) +* **ios:** scroll assist sizes input correctly ([#27253](https://github.com/ionic-team/ionic-framework/issues/27253)) ([a874992](https://github.com/ionic-team/ionic-framework/commit/a8749929e01b07043631fbc8c522d39cbc3ae798)), closes [#27249](https://github.com/ionic-team/ionic-framework/issues/27249) +* **modal:** set default text color ([#27207](https://github.com/ionic-team/ionic-framework/issues/27207)) ([c267b43](https://github.com/ionic-team/ionic-framework/commit/c267b43396057d9fab344a30bd83d00523911dc1)), closes [#26060](https://github.com/ionic-team/ionic-framework/issues/26060) [/github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/popover.scss/issues/L42) +* **react:** nav will remove components from the DOM ([#25763](https://github.com/ionic-team/ionic-framework/issues/25763)) ([beb46bf](https://github.com/ionic-team/ionic-framework/commit/beb46bf9def466c4bf54aeed2b5ccdcfcf5cd579)), closes [#25753](https://github.com/ionic-team/ionic-framework/issues/25753) +* **select:** adjust label alignment when in a card ([#27202](https://github.com/ionic-team/ionic-framework/issues/27202)) ([5a2b87c](https://github.com/ionic-team/ionic-framework/commit/5a2b87cbcc5c789d02b29e776e2b9768d7ad5631)), closes [#27086](https://github.com/ionic-team/ionic-framework/issues/27086) + + + + + +## [7.0.3](https://github.com/ionic-team/ionic-framework/compare/v7.0.2...v7.0.3) (2023-04-19) + + +### Bug Fixes + +* **accordion:** inset style respects animated property ([#27173](https://github.com/ionic-team/ionic-framework/issues/27173)) ([114fe28](https://github.com/ionic-team/ionic-framework/commit/114fe28f3cc9ee52bc5eefa569353f490ab01023)), closes [#27047](https://github.com/ionic-team/ionic-framework/issues/27047) +* **datetime:** clamp date between min and max when using month picker ([#27185](https://github.com/ionic-team/ionic-framework/issues/27185)) ([0385c08](https://github.com/ionic-team/ionic-framework/commit/0385c0862c98c9387b38d3a4416d74a2cc132ddd)), closes [#27027](https://github.com/ionic-team/ionic-framework/issues/27027) +* **input:** string values are emitted ([#27226](https://github.com/ionic-team/ionic-framework/issues/27226)) ([cdb0627](https://github.com/ionic-team/ionic-framework/commit/cdb0627c87299ba36da670c81f9d4e3446bb500d)) +* **many:** dynamic label support for modern form controls ([#27156](https://github.com/ionic-team/ionic-framework/issues/27156)) ([30b548b](https://github.com/ionic-team/ionic-framework/commit/30b548b167883f0a657b0410d3bcf76dbb6895e0)), closes [#27085](https://github.com/ionic-team/ionic-framework/issues/27085) +* **menu:** export menu interfaces ([#27227](https://github.com/ionic-team/ionic-framework/issues/27227)) ([80d8c66](https://github.com/ionic-team/ionic-framework/commit/80d8c667666ffdb6b8e668ef94cc58a93045bd0e)) +* **segment-button:** update checked state on render ([#26970](https://github.com/ionic-team/ionic-framework/issues/26970)) ([16aa977](https://github.com/ionic-team/ionic-framework/commit/16aa9770bba983705d807ad363498693a0e7969b)), closes [#26830](https://github.com/ionic-team/ionic-framework/issues/26830) +* **select:** respect --border-radius with modern template ([#27213](https://github.com/ionic-team/ionic-framework/issues/27213)) ([6ffbdbb](https://github.com/ionic-team/ionic-framework/commit/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8)), closes [#27208](https://github.com/ionic-team/ionic-framework/issues/27208) +* **select:** text does not overlap icon ([#27125](https://github.com/ionic-team/ionic-framework/issues/27125)) ([6fc0024](https://github.com/ionic-team/ionic-framework/commit/6fc002458ad23b129a214fd34d3a2fdc33800373)), closes [#27081](https://github.com/ionic-team/ionic-framework/issues/27081) +* **textarea:** legacy textarea respects padding ([#27219](https://github.com/ionic-team/ionic-framework/issues/27219)) ([742d429](https://github.com/ionic-team/ionic-framework/commit/742d4295ddfe40c643d9dd21ffc6d9fb3eb6f717)), closes [#27218](https://github.com/ionic-team/ionic-framework/issues/27218) +* **toast:** screen readers announce content ([#27198](https://github.com/ionic-team/ionic-framework/issues/27198)) ([76c8b94](https://github.com/ionic-team/ionic-framework/commit/76c8b94e2a818e1b824701b788d5ed8b6e554d42)), closes [#25866](https://github.com/ionic-team/ionic-framework/issues/25866) +* **vue:** components have correct name in Vue Dev Tools ([#27180](https://github.com/ionic-team/ionic-framework/issues/27180)) ([07941a5](https://github.com/ionic-team/ionic-framework/commit/07941a59ba68a46d1345fecec6df82fb4655a0b5)), closes [#25199](https://github.com/ionic-team/ionic-framework/issues/25199) + + + + + +## [7.0.2](https://github.com/ionic-team/ionic-framework/compare/v7.0.1...v7.0.2) (2023-04-12) + + +### Bug Fixes + +* **item:** ios active state has correct contrast ([#27134](https://github.com/ionic-team/ionic-framework/issues/27134)) ([bbdb0ca](https://github.com/ionic-team/ionic-framework/commit/bbdb0ca480d7cd46c030d1947ced712653cf122b)), closes [#27130](https://github.com/ionic-team/ionic-framework/issues/27130) +* **menu:** refs are not destroyed on unmount ([#27141](https://github.com/ionic-team/ionic-framework/issues/27141)) ([b81b0d1](https://github.com/ionic-team/ionic-framework/commit/b81b0d14258d7b8caf028e6cfe81772ed2f5f119)), closes [#24907](https://github.com/ionic-team/ionic-framework/issues/24907) +* **radio:** takes up full height in item ([#27168](https://github.com/ionic-team/ionic-framework/issues/27168)) ([987c79f](https://github.com/ionic-team/ionic-framework/commit/987c79f05b6791084c4526d80c8c28a28047dd58)), closes [#27159](https://github.com/ionic-team/ionic-framework/issues/27159) +* **segment:** segment disables segment buttons created asynchronously ([#27155](https://github.com/ionic-team/ionic-framework/issues/27155)) ([ad6b130](https://github.com/ionic-team/ionic-framework/commit/ad6b1301cf8528f7c9ad3c52730f01861117b380)), closes [#25396](https://github.com/ionic-team/ionic-framework/issues/25396) + + + + + +## [7.0.1](https://github.com/ionic-team/ionic-framework/compare/v7.0.0...v7.0.1) (2023-04-05) + + +### Bug Fixes + +* **breadcrumbs:** color attribute shows on DOM for Vue ([#27068](https://github.com/ionic-team/ionic-framework/issues/27068)) ([141ced5](https://github.com/ionic-team/ionic-framework/commit/141ced50103098fd711e0088ea8be4efdaadd0a9)) +* **item-divider:** removal of unneeded margin unset ([#27042](https://github.com/ionic-team/ionic-framework/issues/27042)) ([d925237](https://github.com/ionic-team/ionic-framework/commit/d925237082cd2f55a573ddb0301afcbd84f4fda0)), closes [#17012](https://github.com/ionic-team/ionic-framework/issues/17012) [ionic-team/ionic-framework#27024](https://github.com/ionic-team/ionic-framework/issues/27024) +* **item-divider:** set padding-end for md ([#27019](https://github.com/ionic-team/ionic-framework/issues/27019)) ([426913d](https://github.com/ionic-team/ionic-framework/commit/426913d0de50e65a76b029258daa09e6567c6515)), closes [#23785](https://github.com/ionic-team/ionic-framework/issues/23785) +* **menu:** update location when dynamically changing side or doc dir ([#27079](https://github.com/ionic-team/ionic-framework/issues/27079)) ([a35886e](https://github.com/ionic-team/ionic-framework/commit/a35886e71c7c4b8abdd01ad33d92828c04249dc5)), closes [#25601](https://github.com/ionic-team/ionic-framework/issues/25601) [#19489](https://github.com/ionic-team/ionic-framework/issues/19489) +* **picker-column-internal:** hide empty picker items from screenreaders ([#27038](https://github.com/ionic-team/ionic-framework/issues/27038)) ([4e7424d](https://github.com/ionic-team/ionic-framework/commit/4e7424de035888e324b03af321c90ebbb6402746)), closes [#26809](https://github.com/ionic-team/ionic-framework/issues/26809) +* **refresher:** set overflow styles when using custom scroll target ([#27058](https://github.com/ionic-team/ionic-framework/issues/27058)) ([adbb50c](https://github.com/ionic-team/ionic-framework/commit/adbb50ca5b92793ba002e4d704b2a643b92aabc7)) +* **vue:** v-model props have correct type ([#27067](https://github.com/ionic-team/ionic-framework/issues/27067)) ([14145dc](https://github.com/ionic-team/ionic-framework/commit/14145dcaebef4dde7654317597fdee6a0cdb4bfa)), closes [#27057](https://github.com/ionic-team/ionic-framework/issues/27057) + + + + + +# [7.0.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.5...v7.0.0) (2023-03-29) + +**Note:** Version bump only for package ionic-framework + + + + + +# [7.0.0-rc.5](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.4...v7.0.0-rc.5) (2023-03-29) + + +### Bug Fixes + +* **select:** alert header defaults to label ([#27034](https://github.com/ionic-team/ionic-framework/issues/27034)) ([408457a](https://github.com/ionic-team/ionic-framework/commit/408457aa95843cbf9fae7ce52d0f9de5e3362060)), closes [#27028](https://github.com/ionic-team/ionic-framework/issues/27028) +* **select:** update iOS icon ([#27001](https://github.com/ionic-team/ionic-framework/issues/27001)) ([ee19891](https://github.com/ionic-team/ionic-framework/commit/ee198915424f1d4304283b44b526e3dcbe1f3494)) + + + + + +## [6.7.1](https://github.com/ionic-team/ionic-framework/compare/v6.7.0...v6.7.1) (2023-03-29) + + +### Bug Fixes + +* **item-sliding:** open method works with items added async ([#27035](https://github.com/ionic-team/ionic-framework/issues/27035)) ([521063b](https://github.com/ionic-team/ionic-framework/commit/521063bf241dc2c55bcd02a92ed8a418cfec6b1e)), closes [#26991](https://github.com/ionic-team/ionic-framework/issues/26991) +* **item:** use thumbnail's size when present ([#27014](https://github.com/ionic-team/ionic-framework/issues/27014)) ([6cecdf4](https://github.com/ionic-team/ionic-framework/commit/6cecdf41451a5c7aa908494dfad9fab1496a0c6c)), closes [#22935](https://github.com/ionic-team/ionic-framework/issues/22935) +* **radio-group:** radios participate in form submission ([#27018](https://github.com/ionic-team/ionic-framework/issues/27018)) ([3b99c31](https://github.com/ionic-team/ionic-framework/commit/3b99c31bab41bf7fcec340ac7159d3e8fce126c1)), closes [#27016](https://github.com/ionic-team/ionic-framework/issues/27016) +* **select:** inherit white-space in select-text to allow text wrapping ([#26973](https://github.com/ionic-team/ionic-framework/issues/26973)) ([19c1e25](https://github.com/ionic-team/ionic-framework/commit/19c1e25399ca18c8e6a8dd39c0131979c0bb01e9)), closes [#19949](https://github.com/ionic-team/ionic-framework/issues/19949) + + + + + +# [7.0.0-rc.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.3...v7.0.0-rc.4) (2023-03-27) + + +### Bug Fixes + +* **fab, tab-button:** rtl alignment in safari and firefox ([#26986](https://github.com/ionic-team/ionic-framework/issues/26986)) ([e23fd9e](https://github.com/ionic-team/ionic-framework/commit/e23fd9eceed289284eb047261c0d6bdab6ac5e8e)), closes [#22739](https://github.com/ionic-team/ionic-framework/issues/22739) +* **many:** innerHTML is disabled by default ([#27029](https://github.com/ionic-team/ionic-framework/issues/27029)) ([b7e4603](https://github.com/ionic-team/ionic-framework/commit/b7e46038e0eee611bb9f5d83772804e83b19a63d)) +* **radio-group:** radios participate in form submission ([#27018](https://github.com/ionic-team/ionic-framework/issues/27018)) ([3b99c31](https://github.com/ionic-team/ionic-framework/commit/3b99c31bab41bf7fcec340ac7159d3e8fce126c1)), closes [#27016](https://github.com/ionic-team/ionic-framework/issues/27016) +* **segment:** change event fires when clicking ([#27010](https://github.com/ionic-team/ionic-framework/issues/27010)) ([3e0a905](https://github.com/ionic-team/ionic-framework/commit/3e0a905e81b2308450dcd2dc20489b7988f0e647)), closes [#27002](https://github.com/ionic-team/ionic-framework/issues/27002) +* **select:** inherit white-space in select-text to allow text wrapping ([#26973](https://github.com/ionic-team/ionic-framework/issues/26973)) ([19c1e25](https://github.com/ionic-team/ionic-framework/commit/19c1e25399ca18c8e6a8dd39c0131979c0bb01e9)), closes [#19949](https://github.com/ionic-team/ionic-framework/issues/19949) + + +### BREAKING CHANGES + +* **many:** The `innerHTMLTemplatesEnabled` Ionic Config now defaults to `false`. Developers can set this option to `true` if they would like to continue to use custom HTML features in `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast`. + + + + + +# [6.7.0](https://github.com/ionic-team/ionic-framework/compare/v6.6.3...v6.7.0) (2023-03-23) + + +### Features + +* **config:** add option to disable custom html functionality ([#26956](https://github.com/ionic-team/ionic-framework/issues/26956)) ([3b0af7c](https://github.com/ionic-team/ionic-framework/commit/3b0af7c55d4fa039be33d6605414761494d5af8f)) + + + + + +# [7.0.0-rc.3](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.2...v7.0.0-rc.3) (2023-03-22) + +**Note:** Version bump only for package ionic-framework + + + + + +## [6.6.3](https://github.com/ionic-team/ionic-framework/compare/v6.6.2...v6.6.3) (2023-03-22) + +**Note:** Version bump only for package ionic-framework + + + + + +### Bug Fixes + +* **menu:** main content is not scrollable while swiping ([#26976](https://github.com/ionic-team/ionic-framework/issues/26976)) ([88bd8a4](https://github.com/ionic-team/ionic-framework/commit/88bd8a47c5e844d1d3a2b3b13621826faf776afb)), closes [#21193](https://github.com/ionic-team/ionic-framework/issues/21193) + + + + + +# [7.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.1...v7.0.0-rc.2) (2023-03-15) + +### Bug Fixes + +* **input, select, textarea:** border color is set on host ([#26941](https://github.com/ionic-team/ionic-framework/issues/26941)) ([4810e6f](https://github.com/ionic-team/ionic-framework/commit/4810e6f2ac075cf5cd8065a1c10ad57db119beff)) +* **input, textarea:** show error state after touch ([#26940](https://github.com/ionic-team/ionic-framework/issues/26940)) ([ef33270](https://github.com/ionic-team/ionic-framework/commit/ef33270b55122574e0fdb32187410d8d8a4fa1ae)), closes [#26939](https://github.com/ionic-team/ionic-framework/issues/26939) [#21643](https://github.com/ionic-team/ionic-framework/issues/21643) +* **many:** disabled control in item does not receive active/hover states ([#26867](https://github.com/ionic-team/ionic-framework/issues/26867)) ([f829672](https://github.com/ionic-team/ionic-framework/commit/f829672a6aa4477d1ce26f624f7316e6c5a1d514)), closes [#26706](https://github.com/ionic-team/ionic-framework/issues/26706) +* **toggle:** label is announced once on ios ([#26937](https://github.com/ionic-team/ionic-framework/issues/26937)) ([f71d9b1](https://github.com/ionic-team/ionic-framework/commit/f71d9b1101786aa39016e458ca0da3f1e871d093)) + + + + + +## [6.6.2](https://github.com/ionic-team/ionic-framework/compare/v6.6.1...v6.6.2) (2023-03-15) + + +### Bug Fixes + +* **accordion:** include margins during expand animation ([#26390](https://github.com/ionic-team/ionic-framework/issues/26390)) ([f809918](https://github.com/ionic-team/ionic-framework/commit/f80991813ae8873d8ef6038b0aeb763d727f402e)), closes [#26381](https://github.com/ionic-team/ionic-framework/issues/26381) +* **IonicSlides:** remove unnecessary autoplay option ([#26935](https://github.com/ionic-team/ionic-framework/issues/26935)) ([b8f8937](https://github.com/ionic-team/ionic-framework/commit/b8f893731471052df198824b7ece47606ffcc500)) +* **radio:** checked state is updated when value changes ([#26936](https://github.com/ionic-team/ionic-framework/issues/26936)) ([27a5356](https://github.com/ionic-team/ionic-framework/commit/27a5356fa2b72073d565e9d6f527107869faa3ee)) +* **react/vue:** properly switch ionicon based on the mode when ios/md is set ([#26924](https://github.com/ionic-team/ionic-framework/issues/26924)) ([1eb9a08](https://github.com/ionic-team/ionic-framework/commit/1eb9a085b2d69dfcfc71ff49b25d33347dd54aae)), closes [#26207](https://github.com/ionic-team/ionic-framework/issues/26207) +* **textarea:** inherit tabindex to inner textarea ([#26945](https://github.com/ionic-team/ionic-framework/issues/26945)) ([2c68d01](https://github.com/ionic-team/ionic-framework/commit/2c68d01b898a2f879445b8b64014189afe1255d7)), closes [#26944](https://github.com/ionic-team/ionic-framework/issues/26944) + + + + + +# [7.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-rc.0...v7.0.0-rc.1) (2023-03-08) + + +### Bug Fixes + +* **input, textarea:** disabled state is applied when true ([#26892](https://github.com/ionic-team/ionic-framework/issues/26892)) ([569401b](https://github.com/ionic-team/ionic-framework/commit/569401b1c8959f236ab6931e7c58063d4681402a)), closes [#26881](https://github.com/ionic-team/ionic-framework/issues/26881) +* **item:** prevent slotted form controls from taking whole width of item ([#26897](https://github.com/ionic-team/ionic-framework/issues/26897)) ([78f5d96](https://github.com/ionic-team/ionic-framework/commit/78f5d960cf4a056b52f65d4731a7ee0771031306)) +* **many:** add aria-hidden to decorative icons ([#26922](https://github.com/ionic-team/ionic-framework/issues/26922)) ([78303dc](https://github.com/ionic-team/ionic-framework/commit/78303dccaa2b3e7e6fb107a5c0f0f213d8e39a7c)) +* **select:** popover is full width when used with floating/stacked labels ([#26907](https://github.com/ionic-team/ionic-framework/issues/26907)) ([7bc22f2](https://github.com/ionic-team/ionic-framework/commit/7bc22f2bbfa1d170f05d66f44b53cd28c4038bc5)), closes [#26903](https://github.com/ionic-team/ionic-framework/issues/26903) +* **vue:** input components update refs on ionInput ([#26876](https://github.com/ionic-team/ionic-framework/issues/26876)) ([7d9ce74](https://github.com/ionic-team/ionic-framework/commit/7d9ce7420a4c041a6d21041c15680e809cd55e8d)), closes [#26700](https://github.com/ionic-team/ionic-framework/issues/26700) + + + + + +## [6.6.1](https://github.com/ionic-team/ionic-framework/compare/v6.6.0...v6.6.1) (2023-03-08) + +* **angular:** keepContentsMounted modal is sized correctly ([#26917](https://github.com/ionic-team/ionic-framework/issues/26917)) ([8d184c8](https://github.com/ionic-team/ionic-framework/commit/8d184c8c1b91dba9d6d5bbaf1b4a8480b75a3572)), closes [#26916](https://github.com/ionic-team/ionic-framework/issues/26916) +* **button:** show correct activated state for ios ([#26900](https://github.com/ionic-team/ionic-framework/issues/26900)) ([67815cc](https://github.com/ionic-team/ionic-framework/commit/67815ccbf4650ecbbc6c79d5063ab5ba50cb358c)), closes [#22468](https://github.com/ionic-team/ionic-framework/issues/22468) +* **datetime-button:** time-only values are parsed ([#26852](https://github.com/ionic-team/ionic-framework/issues/26852)) ([f54fc18](https://github.com/ionic-team/ionic-framework/commit/f54fc188843af52e723e06402e01ef92717e541f)), closes [#26851](https://github.com/ionic-team/ionic-framework/issues/26851) +* **datetime:** resolve import error in stencil apps ([#26909](https://github.com/ionic-team/ionic-framework/issues/26909)) ([48c45af](https://github.com/ionic-team/ionic-framework/commit/48c45afdb6ca7dad0a1f2a6d3ece6df8ba23eb69)), closes [#26908](https://github.com/ionic-team/ionic-framework/issues/26908) +* **menu, split-pane:** ssr does not fail on null customElements check ([#26854](https://github.com/ionic-team/ionic-framework/issues/26854)) ([451d220](https://github.com/ionic-team/ionic-framework/commit/451d2204e79a4a10c1eb829ab0bd75c137b02475)), closes [#24714](https://github.com/ionic-team/ionic-framework/issues/24714) +* **modal:** avoid chrome memory leak bug ([#26911](https://github.com/ionic-team/ionic-framework/issues/26911)) ([a3f8e28](https://github.com/ionic-team/ionic-framework/commit/a3f8e281721f6ef8c9479f5870198b7a009daabd)) +* **react:** inline overlays dismiss when parent component unmounts ([#26245](https://github.com/ionic-team/ionic-framework/issues/26245)) ([c0e1bf9](https://github.com/ionic-team/ionic-framework/commit/c0e1bf92c4487c2ec8a117957cf84a2ce00f5fd8)), closes [#25775](https://github.com/ionic-team/ionic-framework/issues/25775) [#26185](https://github.com/ionic-team/ionic-framework/issues/26185) + + + + + +# [7.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.6...v7.0.0-rc.0) (2023-03-01) + +**Note:** Version bump only for package ionic-framework + + + + + +# [7.0.0-beta.6](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.5...v7.0.0-beta.6) (2023-03-01) + + +### Bug Fixes + +* **angular:** devs can import ionic/angular styles in css ([#26875](https://github.com/ionic-team/ionic-framework/issues/26875)) ([0d2fac2](https://github.com/ionic-team/ionic-framework/commit/0d2fac2eefd610271fbbbecc36e844b6b289dfee)) +* **button:** update for ios spec ([#26864](https://github.com/ionic-team/ionic-framework/issues/26864)) ([df37357](https://github.com/ionic-team/ionic-framework/commit/df3735765a7639d200a85834d8c3d72546e29791)) +* **datetime:** aria-label for show/hide year picker ([#26848](https://github.com/ionic-team/ionic-framework/issues/26848)) ([ac66215](https://github.com/ionic-team/ionic-framework/commit/ac66215399954c972267b9d18bbd5aa5ef41a4c1)) + + +### BREAKING CHANGES + +* **button:** Button is updated to align with the design specification for iOS. + +**Design tokens** + +| Token | Previous Value | New Value | +| ---------------------------------- | -------------- | --------- | +| `$button-ios-letter-spacing` | `-0.03em` | `0` | +| `$button-ios-clear-letter-spacing` | `0` | Removed | +| `$button-ios-height` | `2.8em` | `3.1em` | +| `$button-ios-border-radius` | `10px` | `14px` | +| `$button-ios-large-height` | `2.8em` | `3.1em` | +| `$button-ios-large-border-radius` | `12px` | `16px` | + + + + +# [6.6.0](https://github.com/ionic-team/ionic-framework/compare/v6.5.7...v6.6.0) (2023-03-01) + + +### Bug Fixes + + +* **modal:** dialog styles work on old chrome versions ([#26746](https://github.com/ionic-team/ionic-framework/issues/26746)) ([00d10f5](https://github.com/ionic-team/ionic-framework/commit/00d10f5f6ad53850505bdad94b659b8801a3309d)), closes [#26745](https://github.com/ionic-team/ionic-framework/issues/26745) + +### Features + + +* **datetime:** add ability to specify custom colors for specific dates ([#26775](https://github.com/ionic-team/ionic-framework/issues/26775)) ([2a761af](https://github.com/ionic-team/ionic-framework/commit/2a761afd5a0e6d4e6f54096fdeb97b8bad1293de)) +* **picker-column:** assign custom aria-labels to column options ([#26749](https://github.com/ionic-team/ionic-framework/issues/26749)) ([daa89a2](https://github.com/ionic-team/ionic-framework/commit/daa89a26ac8fa655c56c9447a8635e7c436e4f63)) +* **toast:** add stacked buttons functionality ([#26790](https://github.com/ionic-team/ionic-framework/issues/26790)) ([fc5fcc0](https://github.com/ionic-team/ionic-framework/commit/fc5fcc064dec5256836e9622125b5e499ef00975)) + + + + + +## [6.5.7](https://github.com/ionic-team/ionic-framework/compare/v6.5.6...v6.5.7) (2023-03-01) + + +### Bug Fixes + + +* **content:** fullscreen values are recomputed on visible content ([#26847](https://github.com/ionic-team/ionic-framework/issues/26847)) ([6dcd98b](https://github.com/ionic-team/ionic-framework/commit/6dcd98b26ab8fd3bf0092416d613bf051fbdeacf)), closes [#26844](https://github.com/ionic-team/ionic-framework/issues/26844) +* **modal:** keyboard listener removed on dismiss ([#26856](https://github.com/ionic-team/ionic-framework/issues/26856)) ([b4bcba3](https://github.com/ionic-team/ionic-framework/commit/b4bcba353386b4d5d8d396e61ece421a15d42ff0)) +* **overlays:** focus trap refs cleared on dismiss ([#26855](https://github.com/ionic-team/ionic-framework/issues/26855)) ([8d1d0fa](https://github.com/ionic-team/ionic-framework/commit/8d1d0fa0c7a42a3c21a471131ba454774b26c314)) + + + + + +# [7.0.0-beta.5](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.4...v7.0.0-beta.5) (2023-02-27) + + +### Bug Fixes + + **content:** adjust transition shadow to match new iOS version ([#26839](https://github.com/ionic-team/ionic-framework/issues/26839)) ([f006e4b](https://github.com/ionic-team/ionic-framework/commit/f006e4bc09fcdcb5a34da4e17eb6037bf1e2445c)) +* **form:** shadow components using aria-labelledby do not use modern syntax ([#26836](https://github.com/ionic-team/ionic-framework/issues/26836)) ([fcfdd9e](https://github.com/ionic-team/ionic-framework/commit/fcfdd9e9ba9969947d8b9dfefbea4522d08753ed)), closes [#26829](https://github.com/ionic-team/ionic-framework/issues/26829) +* **scroll-padding:** correct padding is added ([#26810](https://github.com/ionic-team/ionic-framework/issues/26810)) ([eefd17d](https://github.com/ionic-team/ionic-framework/commit/eefd17d492f2fe24639cf20603fac04d6eb94e3f)), closes [#26803](https://github.com/ionic-team/ionic-framework/issues/26803) + +### Features + +* **angular,angular-server:** angular v14 minimum support ([#26822](https://github.com/ionic-team/ionic-framework/issues/26822)) ([1dee16f](https://github.com/ionic-team/ionic-framework/commit/1dee16f3a25dedf831afc09f9c400a42e861beea)) +* **searchbar:** ionInput now emits value payload ([#26831](https://github.com/ionic-team/ionic-framework/issues/26831)) ([865f8de](https://github.com/ionic-team/ionic-framework/commit/865f8de9dc2d533b08730846f8d76bf165e8bc1d)), closes [#26828](https://github.com/ionic-team/ionic-framework/issues/26828) + + +### BREAKING CHANGES + +* **searchbar:** The `detail` payload for the `ionInput` event now on `ion-searchbar` contains an object with the current `value` as well as the native event that triggered `ionInput`. +* **angular,angular-server:** Angular v14 is now required to use `@ionic/angular` and `@ionic/angular-server`. Upgrade your project to Angular v14 by following the [Angular v14 update guide](https://update.angular.io/?l=3&v=13.0-14.0). + +The dev-preview `environmentInjector` property has been removed from `ion-tabs` and `ion-router-outlet`. Standalone component routing is now available without additional custom configuration. Remove the `environmentInjector` property from your `ion-tabs` and `ion-router-outlet` components. + + + + + +# [7.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.3...v7.0.0-beta.4) (2023-02-22) + + +### Bug Fixes + +* **checkbox:** screen readers announce state correctly ([#26817](https://github.com/ionic-team/ionic-framework/issues/26817)) ([7312b06](https://github.com/ionic-team/ionic-framework/commit/7312b0696d6b9ceb2e4518cad2ab29d45d2eddbe)), closes [#25740](https://github.com/ionic-team/ionic-framework/issues/25740) +* **select:** emit single ionChange event for popover option selection ([#26796](https://github.com/ionic-team/ionic-framework/issues/26796)) ([7578aa3](https://github.com/ionic-team/ionic-framework/commit/7578aa3c598451b6df1cf1eca26ad288c0526121)), closes [#26789](https://github.com/ionic-team/ionic-framework/issues/26789) + + + + + +## [6.5.6](https://github.com/ionic-team/ionic-framework/compare/v6.5.5...v6.5.6) (2023-02-22) + + +### Bug Fixes + +* **card:** border radius does not overflow on paint in Safari ([#26539](https://github.com/ionic-team/ionic-framework/issues/26539)) ([df5c8e2](https://github.com/ionic-team/ionic-framework/commit/df5c8e231825b5e5b6923f322c94224a00d3b309)), closes [#26529](https://github.com/ionic-team/ionic-framework/issues/26529) + + + + + +## [6.5.5](https://github.com/ionic-team/ionic-framework/compare/v6.5.4...v6.5.5) (2023-02-20) + + +### Bug Fixes + +* **datetime:** days of week and spacing buttons are not announced by screen readers ([#26813](https://github.com/ionic-team/ionic-framework/issues/26813)) ([1a346b6](https://github.com/ionic-team/ionic-framework/commit/1a346b62068076d0b0cc6b2dea4136e0f06576b8)), closes [#26811](https://github.com/ionic-team/ionic-framework/issues/26811) +* **hide-caret:** blur listener correctly removed ([#26808](https://github.com/ionic-team/ionic-framework/issues/26808)) ([fef634f](https://github.com/ionic-team/ionic-framework/commit/fef634f7f055f1672af50b56610f84c76e626814)), closes [#26807](https://github.com/ionic-team/ionic-framework/issues/26807) +* **input:** compositionend event is removed on unmount ([#26806](https://github.com/ionic-team/ionic-framework/issues/26806)) ([caa8719](https://github.com/ionic-team/ionic-framework/commit/caa8719cea2f4b3b460551224a8c4a69bd29afeb)), closes [#26805](https://github.com/ionic-team/ionic-framework/issues/26805) +* **sanitizer:** improve reliability of sanitizer ([#26820](https://github.com/ionic-team/ionic-framework/issues/26820)) ([5e41391](https://github.com/ionic-team/ionic-framework/commit/5e41391ed2585072095f42f7a6d40497f0e129d2)) +* **swipe-back:** gesture rtl setting is reactive ([#26795](https://github.com/ionic-team/ionic-framework/issues/26795)) ([3a64de4](https://github.com/ionic-team/ionic-framework/commit/3a64de49dbf470d470cb4516df2a5226ba751051)), closes [#26794](https://github.com/ionic-team/ionic-framework/issues/26794) + + + + + +# [7.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.2..v7.0.0-beta.3) (2023-02-15) + + +### Bug Fixes + +* **checkbox, radio:** label is announced once on ios ([#26770](https://github.com/ionic-team/ionic-framework/issues/26770)) ([87bc749](https://github.com/ionic-team/ionic-framework/commit/87bc7490404b0406b511833a85b686f1db791f66)), closes [#26769](https://github.com/ionic-team/ionic-framework/issues/26769) +* **form:** legacy deprecation is logged correctly ([#26784](https://github.com/ionic-team/ionic-framework/issues/26784)) ([180ee63](https://github.com/ionic-team/ionic-framework/commit/180ee63ff7d93f8800756d732e565123a59bcd3a)) +* **many:** resolve import errors with stencil apps ([#26781](https://github.com/ionic-team/ionic-framework/issues/26781)) ([1eea054](https://github.com/ionic-team/ionic-framework/commit/1eea054c127146999302888180fd1585e1021783)), closes [#26778](https://github.com/ionic-team/ionic-framework/issues/26778) +* **range:** allow overflow on range bar container ([#26751](https://github.com/ionic-team/ionic-framework/issues/26751)) ([edf696c](https://github.com/ionic-team/ionic-framework/commit/edf696cac9e4a35545750f99bcd49a87ec504905)) + + +### Features + +* **textarea:** add legacy prop ([#26783](https://github.com/ionic-team/ionic-framework/issues/26783)) ([f7f6f1d](https://github.com/ionic-team/ionic-framework/commit/f7f6f1d9f9ffd30afbdccfb558bd73f42b112715)) + + + + + +## [6.5.4](https://github.com/ionic-team/ionic-framework/compare/v6.5.3...v6.5.4) (2023-02-15) + + +### Bug Fixes + +* **content:** fullscreen works when rotating device ([#26782](https://github.com/ionic-team/ionic-framework/issues/26782)) ([7b879fe](https://github.com/ionic-team/ionic-framework/commit/7b879fec3d30b61c00faad035698ff643afaa78e)), closes [#26743](https://github.com/ionic-team/ionic-framework/issues/26743) +* **deps:** update ionicons usage to v6.1.2 ([#26752](https://github.com/ionic-team/ionic-framework/issues/26752)) ([c07933c](https://github.com/ionic-team/ionic-framework/commit/c07933cb69b0c31d3e44263769a7a26ee81223f8)) +* **deps:** update ionicons usage to v6.1.3 ([#26772](https://github.com/ionic-team/ionic-framework/issues/26772)) ([1c71983](https://github.com/ionic-team/ionic-framework/commit/1c719833292d4cfbdecadf9838d8c783785222ad)) +* **tap-click:** instant activate does not use a setTimeout ([#26748](https://github.com/ionic-team/ionic-framework/issues/26748)) ([21c0806](https://github.com/ionic-team/ionic-framework/commit/21c0806bbd1417b1e6239bc56272e18b3ff38f2e)) + + + + + +# [7.0.0-beta.2](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.1...v7.0.0-beta.2) (2023-02-08) + + +### Bug Fixes + +* **input, textarea:** bottom content is rendered correctly ([#26739](https://github.com/ionic-team/ionic-framework/issues/26739)) ([39009ac](https://github.com/ionic-team/ionic-framework/commit/39009ac6eff0e51707efc3ef3981e1b7614eb2e3)), closes [#26737](https://github.com/ionic-team/ionic-framework/issues/26737) +* **input:** update disabled opacity of md input ([#26514](https://github.com/ionic-team/ionic-framework/issues/26514)) ([90f4995](https://github.com/ionic-team/ionic-framework/commit/90f4995aa63c730d3feb1fc88582f034153c9b9c)) +* **radio:** remove radio min-height sizing ([#26719](https://github.com/ionic-team/ionic-framework/issues/26719)) ([2a6bba0](https://github.com/ionic-team/ionic-framework/commit/2a6bba0cb60666a4a97da427fa7d179aab49f148)) +* **range:** assign auto increment id by default ([#26740](https://github.com/ionic-team/ionic-framework/issues/26740)) ([92b06f2](https://github.com/ionic-team/ionic-framework/commit/92b06f2eb6f6980561c584193cb70157bedec12b)) + + +### Performance Improvements + +* **gesture:** reduce delay with adding and removing activated states ([#26741](https://github.com/ionic-team/ionic-framework/issues/26741)) ([4cff442](https://github.com/ionic-team/ionic-framework/commit/4cff442c4f25596e76a674f18e79d0531a464fbf)), closes [#23691](https://github.com/ionic-team/ionic-framework/issues/23691) + + +### BREAKING CHANGES + +* **range:** The `name` property on `ion-range` defaults to `ion-r-${rangeIds++}` where `rangeIds` is a number that is incremented for every instance of the component. + + + + + + +## [6.5.3](https://github.com/ionic-team/ionic-framework/compare/v6.5.2...v6.5.3) (2023-02-08) + + +### Bug Fixes + +* **button:** size and strong are respected in ion-buttons ([#26726](https://github.com/ionic-team/ionic-framework/issues/26726)) ([3759125](https://github.com/ionic-team/ionic-framework/commit/37591255b4ab3dde5ece6950024a3b66e7224364)) +* **chip:** descenders are not clipped in label ([#26729](https://github.com/ionic-team/ionic-framework/issues/26729)) ([a9e000b](https://github.com/ionic-team/ionic-framework/commit/a9e000b4338f75c27e9284dbe9a6501ba3b213bc)), closes [#18313](https://github.com/ionic-team/ionic-framework/issues/18313) +* **refresher:** prevent clearing virtual scroll overflow styling ([#26613](https://github.com/ionic-team/ionic-framework/issues/26613)) ([9d6ec29](https://github.com/ionic-team/ionic-framework/commit/9d6ec2925cb2314d5379b864aef467b34afbb318)), closes [#26553](https://github.com/ionic-team/ionic-framework/issues/26553) + + + +# [7.0.0-beta.1](https://github.com/ionic-team/ionic-framework/compare/v7.0.0-beta.0...v7.0.0-beta.1) (2023-02-01) + + +### Bug Fixes + +* **input, textarea, select:** do not show highlight in item ([#26689](https://github.com/ionic-team/ionic-framework/issues/26689)) ([16b60a6](https://github.com/ionic-team/ionic-framework/commit/16b60a612c1c8053cec3509749ad9e9b185b93be)), closes [#26687](https://github.com/ionic-team/ionic-framework/issues/26687) +* **many:** legacy form control does not warn when using aria-labelledby ([#26699](https://github.com/ionic-team/ionic-framework/issues/26699)) ([63f8525](https://github.com/ionic-team/ionic-framework/commit/63f8525284abf2792305aebb27b9b439a8921bcf)), closes [#26698](https://github.com/ionic-team/ionic-framework/issues/26698) +* **textarea:** textarea wrapper inherits height ([#26707](https://github.com/ionic-team/ionic-framework/issues/26707)) ([e6c7c57](https://github.com/ionic-team/ionic-framework/commit/e6c7c574665897d8fd2184797bc4017f688a2b0e)) + + +### Reverts + +* revert base components feature ([#26692](https://github.com/ionic-team/ionic-framework/issues/26692)) ([b78b454](https://github.com/ionic-team/ionic-framework/commit/b78b454e089462afa866972b97bb06faa84bd319)) + + + + +## [6.5.2](https://github.com/ionic-team/ionic-framework/compare/v6.5.1...v6.5.2) (2023-02-01) + +### Bug Fixes + +* **item:** inherit aria attributes before render ([#26546](https://github.com/ionic-team/ionic-framework/issues/26546)) ([95a3c69](https://github.com/ionic-team/ionic-framework/commit/95a3c69bbbe415cb5f14ac8e1faed287e91b4b40)), closes [#26538](https://github.com/ionic-team/ionic-framework/issues/26538) +* **popover:** popover opens on chrome 109 ([#26672](https://github.com/ionic-team/ionic-framework/issues/26672)) ([69d89ea](https://github.com/ionic-team/ionic-framework/commit/69d89eae940ccd8b0cca379a961166c4592f34c7)), closes [#26643](https://github.com/ionic-team/ionic-framework/issues/26643) +* **popover:** resolve import warning in stencil apps ([#26705](https://github.com/ionic-team/ionic-framework/issues/26705)) ([95f65a5](https://github.com/ionic-team/ionic-framework/commit/95f65a5a390eb600de8998c8be9dfd7c023d1eeb)), closes [#26704](https://github.com/ionic-team/ionic-framework/issues/26704) +* **select:** setting options async updates rendered text ([#26667](https://github.com/ionic-team/ionic-framework/issues/26667)) ([a687457](https://github.com/ionic-team/ionic-framework/commit/a6874579361db548d961fdee83299d664dd6541b)), closes [#19324](https://github.com/ionic-team/ionic-framework/issues/19324) +* **vue:** cache attached view reference ([#26694](https://github.com/ionic-team/ionic-framework/issues/26694)) ([7c00897](https://github.com/ionic-team/ionic-framework/commit/7c0089718afbbe3e19fecee4abbea00a6e618d95)), closes [#26695](https://github.com/ionic-team/ionic-framework/issues/26695) + +# [7.0.0-beta.0](https://github.com/ionic-team/ionic-framework/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25) + + +### Bug Fixes + +* **accordion-group:** do not adjust incorrect values ([#26086](https://github.com/ionic-team/ionic-framework/issues/26086)) ([e2cbeeb](https://github.com/ionic-team/ionic-framework/commit/e2cbeeb8ace969d49e16ccdc496adc559e40b1f2)) +* **action-sheet:** container animates in correctly ([#26347](https://github.com/ionic-team/ionic-framework/issues/26347)) ([1e855e7](https://github.com/ionic-team/ionic-framework/commit/1e855e7699a0b5c3792a9ef84e863df6fe552437)), closes [#25368](https://github.com/ionic-team/ionic-framework/issues/25368) +* **angular:** null values are not converted to falsy value ([#26341](https://github.com/ionic-team/ionic-framework/issues/26341)) ([ce2e37b](https://github.com/ionic-team/ionic-framework/commit/ce2e37b1a172722630953dcb9560f334048c5b72)) +* **back-button:** update style for ios spec ([#26395](https://github.com/ionic-team/ionic-framework/issues/26395)) ([1a840c4](https://github.com/ionic-team/ionic-framework/commit/1a840c43e90a65a910877599f6a2d52ccc65db6b)), closes [#26393](https://github.com/ionic-team/ionic-framework/issues/26393) +* **breadcrumb:** add aria-label to collapsed indicator ([#26615](https://github.com/ionic-team/ionic-framework/issues/26615)) ([f8a2c79](https://github.com/ionic-team/ionic-framework/commit/f8a2c7948894e82b1bc41fa45e1716bc733b087c)) +* **card-header:** reverse order of title and subtitle on ios ([#26084](https://github.com/ionic-team/ionic-framework/issues/26084)) ([2080890](https://github.com/ionic-team/ionic-framework/commit/2080890c11539938dd96c0f2ed08785100112587)) +* **datetime:** do not report timezone in ionChange ([#26183](https://github.com/ionic-team/ionic-framework/issues/26183)) ([3fb4caf](https://github.com/ionic-team/ionic-framework/commit/3fb4caf21ffac12f765c4c80bf1850e05d211c6a)), closes [#25577](https://github.com/ionic-team/ionic-framework/issues/25577) +* **datetime:** haptics are enabled only on ios ([#26370](https://github.com/ionic-team/ionic-framework/issues/26370)) ([8eec197](https://github.com/ionic-team/ionic-framework/commit/8eec1974da3dd4820d29126f17d1e14b5132c9f4)), closes [#25508](https://github.com/ionic-team/ionic-framework/issues/25508) +* **input, searchbar, select, textarea:** placeholder has improved contrast ([#26486](https://github.com/ionic-team/ionic-framework/issues/26486)) ([6c82435](https://github.com/ionic-team/ionic-framework/commit/6c824350257fce45ce3b8c166a864efe6789c505)) +* **input, textarea:** inputs now scroll into view when tapping labels ([#25848](https://github.com/ionic-team/ionic-framework/issues/25848)) ([cb265d6](https://github.com/ionic-team/ionic-framework/commit/cb265d6cc6d4890608d2873a5726f5d7d37adae6)) +* **input, textarea:** padding is now added to content so inputs scroll above keyboard ([#25849](https://github.com/ionic-team/ionic-framework/issues/25849)) ([ba6b539](https://github.com/ionic-team/ionic-framework/commit/ba6b5396754151d884fa276a7227facd28a431df)), closes [#18532](https://github.com/ionic-team/ionic-framework/issues/18532) +* **input:** clearOnEdit clears input when user initially types ([#26005](https://github.com/ionic-team/ionic-framework/issues/26005)) ([bf5e118](https://github.com/ionic-team/ionic-framework/commit/bf5e1183135d1d56a7ba0f63723724521f9d51d0)) +* **item:** align iOS font size to spec ([#26445](https://github.com/ionic-team/ionic-framework/issues/26445)) ([eea91bb](https://github.com/ionic-team/ionic-framework/commit/eea91bbbe1a4ccc4797742ee4e2c320dba6d9517)) +* **item:** ios mode has correct padding ([#26511](https://github.com/ionic-team/ionic-framework/issues/26511)) ([96147ec](https://github.com/ionic-team/ionic-framework/commit/96147ec1b0fcfd31e48d450201fc32b58105dea7)) +* **overlays:** dismiss on keydown to avoid chrome for windows and firefox bug ([#25811](https://github.com/ionic-team/ionic-framework/issues/25811)) ([a1ec9aa](https://github.com/ionic-team/ionic-framework/commit/a1ec9aabd806964206010000294b8781c516c4f3)), closes [#25802](https://github.com/ionic-team/ionic-framework/issues/25802) +* **overlays:** triggerController warns about missing triggers ([#26651](https://github.com/ionic-team/ionic-framework/issues/26651)) ([a7c2c55](https://github.com/ionic-team/ionic-framework/commit/a7c2c555f34795a3a9349987141eef929ad88807)) +* **range:** range matches iOS design specification ([#25873](https://github.com/ionic-team/ionic-framework/issues/25873)) ([da05ffe](https://github.com/ionic-team/ionic-framework/commit/da05ffe462b36ce6fd6cdaeb25cf0f8f4b0e7ef2)), closes [#25872](https://github.com/ionic-team/ionic-framework/issues/25872) +* **segment:** click event triggers ionChange ([#26162](https://github.com/ionic-team/ionic-framework/issues/26162)) ([70781e4](https://github.com/ionic-team/ionic-framework/commit/70781e4c9f93e8e58917083da43536389ac5332e)) +* **select:** chevron icon is now an ionicon ([#26484](https://github.com/ionic-team/ionic-framework/issues/26484)) ([0823c09](https://github.com/ionic-team/ionic-framework/commit/0823c09d9c5f4f07a847fecfd3d3c1915eeb1ddf)) +* **select:** modern component takes up full line ([#26670](https://github.com/ionic-team/ionic-framework/issues/26670)) ([4d24b32](https://github.com/ionic-team/ionic-framework/commit/4d24b328e2021f0d14b278df7535c9bdb9851952)) +* **textarea:** clearOnEdit clears textarea when user initially types ([#26006](https://github.com/ionic-team/ionic-framework/issues/26006)) ([f7176bb](https://github.com/ionic-team/ionic-framework/commit/f7176bbb44c230d6f20b023942c577236e676b02)) +* **textarea:** render icon for clearing input ([3271ecf](https://github.com/ionic-team/ionic-framework/commit/3271ecf1dec4f9baf238ea94e4047f2c26835b4b)) + + +### Code Refactoring + +* **config:** remove stencil extras ([#26461](https://github.com/ionic-team/ionic-framework/issues/26461)) ([bd4027b](https://github.com/ionic-team/ionic-framework/commit/bd4027b0fa1494c58e4ab7c804acfa053c63113a)) +* **core:** remove global hidden attribute ([#25829](https://github.com/ionic-team/ionic-framework/issues/25829)) ([f5a6b5a](https://github.com/ionic-team/ionic-framework/commit/f5a6b5a4c434167cafd9060911ccbfda2a89734c)), closes [#17583](https://github.com/ionic-team/ionic-framework/issues/17583) +* **modal:** remove swipeToClose in favor of canDismiss ([#26050](https://github.com/ionic-team/ionic-framework/issues/26050)) ([1f3ddf2](https://github.com/ionic-team/ionic-framework/commit/1f3ddf2370c29f0fd2dd96aa9b3927ef96bdc5ae)) +* **picker:** remove refresh key ([#26340](https://github.com/ionic-team/ionic-framework/issues/26340)) ([0fbcc5b](https://github.com/ionic-team/ionic-framework/commit/0fbcc5b9a97861dc31742db80b187d077a0d6750)) +* **react:** only ship es modules ([#26044](https://github.com/ionic-team/ionic-framework/issues/26044)) ([c946af2](https://github.com/ionic-team/ionic-framework/commit/c946af29d3d65e4e78c03f0bbcb2376fd9d8c469)) +* **types:** remove overlay attribute interfaces ([#26181](https://github.com/ionic-team/ionic-framework/issues/26181)) ([322a1db](https://github.com/ionic-team/ionic-framework/commit/322a1dbcd00fc1f3db17fb9fb46ba91ba164acd3)) +* **vue:** only ship es modules ([#26054](https://github.com/ionic-team/ionic-framework/issues/26054)) ([86bbed0](https://github.com/ionic-team/ionic-framework/commit/86bbed07fc51fa1e3771f0198211c5064606e5bb)), closes [#25104](https://github.com/ionic-team/ionic-framework/issues/25104) + + +### Features + +* **accordion:** ionChange will only emit from user committed changes ([#25922](https://github.com/ionic-team/ionic-framework/issues/25922)) ([4eea9fa](https://github.com/ionic-team/ionic-framework/commit/4eea9fa5c07d2a48bf5d224cd9b9e63453125b77)) +* **action-sheet:** use action sheet overlay inline ([#26172](https://github.com/ionic-team/ionic-framework/issues/26172)) ([92b763a](https://github.com/ionic-team/ionic-framework/commit/92b763a538f1c935e10d90c3f4af1debf1cab2c3)), closes https://github.com/ionic-team/ionic-framework/issues/22799, https://github.com/ionic-team/ionic-framework/issues/23219 +* **alert:** add ability to use alert inline ([#26316](https://github.com/ionic-team/ionic-framework/issues/26316)) ([08c0a55](https://github.com/ionic-team/ionic-framework/commit/08c0a5520a4f9be19d88644df26f4d38587985fa)), closes https://github.com/ionic-team/ionic-framework/issues/22799, https://github.com/ionic-team/ionic-framework/issues/23219 +* **base-components:** add ability to remove ios and md theme ([#26669](https://github.com/ionic-team/ionic-framework/issues/26669)) ([18f109c](https://github.com/ionic-team/ionic-framework/commit/18f109c7dae97d4e74bee9b72a341aeafd95b222)) +* **checkbox:** component can be used outside ion-item ([#26518](https://github.com/ionic-team/ionic-framework/issues/26518)) ([9d52e70](https://github.com/ionic-team/ionic-framework/commit/9d52e703610d0211667f0152e6c2b90ec6f13198)), closes https://github.com/ionic-team/ionic-framework/issues/21513, https://github.com/ionic-team/ionic-framework/issues/23332, https://github.com/ionic-team/ionic-framework/issues/23289 +* **checkbox:** ionChange fires on user interaction ([#25923](https://github.com/ionic-team/ionic-framework/issues/25923)) ([a6b2629](https://github.com/ionic-team/ionic-framework/commit/a6b2629ede9f2b0e16343b9afabf68eb53cacc17)) +* **datetime:** ionChange will only emit from user committed changes ([#26083](https://github.com/ionic-team/ionic-framework/issues/26083)) ([cc2af20](https://github.com/ionic-team/ionic-framework/commit/cc2af202a95c049c9dd11ffd50c0dec3c84bf3c0)), closes [#20873](https://github.com/ionic-team/ionic-framework/issues/20873) [#24452](https://github.com/ionic-team/ionic-framework/issues/24452) +* **input, textarea:** change default debounce to undefined ([#26073](https://github.com/ionic-team/ionic-framework/issues/26073)) ([c45d054](https://github.com/ionic-team/ionic-framework/commit/c45d05476b34648b59dc8d407a8a1c9f8bd4f409)) +* **input, textarea:** ionInput and ionChange pass event and value ([#26176](https://github.com/ionic-team/ionic-framework/issues/26176)) ([eea6ba9](https://github.com/ionic-team/ionic-framework/commit/eea6ba996ce0f71546f5a14109d0d279400a27e5)) +* **input:** component can be used outside of ion-item ([#26283](https://github.com/ionic-team/ionic-framework/issues/26283)) ([44472ae](https://github.com/ionic-team/ionic-framework/commit/44472aeb9f12585d7b5d40b5721d4281b66b5004)), closes [#20153](https://github.com/ionic-team/ionic-framework/issues/20153) [#19084](https://github.com/ionic-team/ionic-framework/issues/19084) [#22736](https://github.com/ionic-team/ionic-framework/issues/22736), https://github.com/ionic-team/ionic-framework/issues/24312, https://github.com/ionic-team/ionic-framework/issues/24333, https://github.com/ionic-team/ionic-framework/issues/24639, https://github.com/ionic-team/ionic-framework/issues/26178, https://github.com/ionic-team/ionic-framework/issues/24966, https://github.com/ionic-team/ionic-framework/issues/23331, https://github.com/ionic-team/ionic-framework/issues/18037, https://github.com/ionic-team/ionic-framework/issues/23335 +* **input:** debounce controls the timing to delay the ionInput event ([#25969](https://github.com/ionic-team/ionic-framework/issues/25969)) ([35041b2](https://github.com/ionic-team/ionic-framework/commit/35041b2f3c99135d292500a662b889bdaaec6876)) +* **input:** ionChange will only emit from user committed changes ([#25858](https://github.com/ionic-team/ionic-framework/issues/25858)) ([8732b7b](https://github.com/ionic-team/ionic-framework/commit/8732b7bdb76320d5eeba1121ac5f5eefa343526f)), closes [#20106](https://github.com/ionic-team/ionic-framework/issues/20106) [#20061](https://github.com/ionic-team/ionic-framework/issues/20061) +* **loading:** use loading overlay inline ([#26153](https://github.com/ionic-team/ionic-framework/issues/26153)) ([34ca337](https://github.com/ionic-team/ionic-framework/commit/34ca337b8af27b144fb44428c8ed8cf07fc79bfc)), closes https://github.com/ionic-team/ionic-framework/issues/22799, https://github.com/ionic-team/ionic-framework/issues/23219 +* **picker:** add ability to use picker inline ([#26336](https://github.com/ionic-team/ionic-framework/issues/26336)) ([c0a8501](https://github.com/ionic-team/ionic-framework/commit/c0a85016572956149ed4f01109f11154d7b5cb57)), closes https://github.com/ionic-team/ionic-framework/issues/22799, https://github.com/ionic-team/ionic-framework/issues/23219 +* **radio-group:** ionChange will only emit from user committed changes ([#26223](https://github.com/ionic-team/ionic-framework/issues/26223)) ([c299d36](https://github.com/ionic-team/ionic-framework/commit/c299d3666aae96d0e67ce4d2c70efbe95bee81da)) +* **radio:** component can be used outside of ion-item ([#26582](https://github.com/ionic-team/ionic-framework/issues/26582)) ([9761b0a](https://github.com/ionic-team/ionic-framework/commit/9761b0a092e50ac4cc9176b6bcd5b9d29a5b22b3)), closes https://github.com/ionic-team/ionic-framework/issues/21513 +* **range:** component can be used outside of ion-item ([#26479](https://github.com/ionic-team/ionic-framework/issues/26479)) ([49baad8](https://github.com/ionic-team/ionic-framework/commit/49baad8ee6cfe7e26068f4c9954d4a59d343b339)) +* **range:** ionChange will only emit from user committed changes ([#26089](https://github.com/ionic-team/ionic-framework/issues/26089)) ([d1fb7b0](https://github.com/ionic-team/ionic-framework/commit/d1fb7b039b8e11e9d9ede850f90b977a46b52de8)) +* **searchbar:** ionChange will only emit from user committed changes ([#26026](https://github.com/ionic-team/ionic-framework/issues/26026)) ([b052d3b](https://github.com/ionic-team/ionic-framework/commit/b052d3b2622b795cde102591f0191338e15b14a0)) +* **segment:** ionChange will only emit from user committed changes ([#25934](https://github.com/ionic-team/ionic-framework/issues/25934)) ([a03c8af](https://github.com/ionic-team/ionic-framework/commit/a03c8afb3dc4e6672beae680c61c89477478f28b)) +* **select:** component can be used outside ion-item ([#26572](https://github.com/ionic-team/ionic-framework/issues/26572)) ([02640b5](https://github.com/ionic-team/ionic-framework/commit/02640b5795c4fb8a46f0cdc8903f2a08abfa9135)), closes https://github.com/ionic-team/ionic-framework/issues/23540, https://github.com/ionic-team/ionic-framework/issues/24322, https://github.com/ionic-team/ionic-framework/issues/25449, https://github.com/ionic-team/ionic-framework/issues/25639, https://github.com/ionic-team/ionic-framework/issues/19936 +* **select:** ionChange will only emit from user committed changes ([#26066](https://github.com/ionic-team/ionic-framework/issues/26066)) ([34c4137](https://github.com/ionic-team/ionic-framework/commit/34c41378682a202d4fab11aad171df7f55f4c243)) +* **slides:** remove ion-slide, ion-slides, and IonicSwiper module ([#25868](https://github.com/ionic-team/ionic-framework/issues/25868)) ([d478e03](https://github.com/ionic-team/ionic-framework/commit/d478e03914fed15766c893738d6386d7623d066d)) +* **textarea:** component can be used outside of ion-item ([#26674](https://github.com/ionic-team/ionic-framework/issues/26674)) ([8d3edd0](https://github.com/ionic-team/ionic-framework/commit/8d3edd049dfdb2a781d80da810a5bee3b490b7b6)), closes https://github.com/ionic-team/ionic-framework/issues/22269 +* **textarea:** ionChange will only emit from user committed changes ([#25953](https://github.com/ionic-team/ionic-framework/issues/25953)) ([68bae80](https://github.com/ionic-team/ionic-framework/commit/68bae80a51dae70c4cd7e598c1f2eabb025f173e)) +* **toast:** add ability to use toast inline ([#26215](https://github.com/ionic-team/ionic-framework/issues/26215)) ([003de44](https://github.com/ionic-team/ionic-framework/commit/003de44d9283d23ecfdf1ab5fada2b7a372a4ca9)), closes https://github.com/ionic-team/ionic-framework/issues/22799, https://github.com/ionic-team/ionic-framework/issues/23219 +* **toggle:** component can be used outside of ion-item ([#26357](https://github.com/ionic-team/ionic-framework/issues/26357)) ([c74901c](https://github.com/ionic-team/ionic-framework/commit/c74901c973c153ce1954646ef7944f7db193ea28)), closes [#25570](https://github.com/ionic-team/ionic-framework/issues/25570) [#23213](https://github.com/ionic-team/ionic-framework/issues/23213), closes https://github.com/ionic-team/ionic-framework/issues/23332, https://github.com/ionic-team/ionic-framework/issues/23213 +* **toggle:** ionChange will only emit from user committed changes ([#26078](https://github.com/ionic-team/ionic-framework/issues/26078)) ([85d3bd9](https://github.com/ionic-team/ionic-framework/commit/85d3bd99be3ae0f33a480e256381f7125f3389fd)) +* **virtual-scroll:** remove virtual scroll component ([#25808](https://github.com/ionic-team/ionic-framework/issues/25808)) ([1eb6fd0](https://github.com/ionic-team/ionic-framework/commit/1eb6fd04d7f8c7ccd7dac08d085dc90d9f6283cc)) + + +### Performance Improvements + +* **item:** remove delegatesFocus patch for iOS 13 ([#25822](https://github.com/ionic-team/ionic-framework/issues/25822)) ([ee3467c](https://github.com/ionic-team/ionic-framework/commit/ee3467c9f1aa415ff6bda19e460b5c3482b94efc)), closes https://github.com/ionic-team/ionic-framework/issues/25273 +* **many:** reduce delay when performing overlay or page transitions ([#26189](https://github.com/ionic-team/ionic-framework/issues/26189)) ([30e3a14](https://github.com/ionic-team/ionic-framework/commit/30e3a1485d9bc94b31c297bdd05fa847b4bcfb56)), closes [#24346](https://github.com/ionic-team/ionic-framework/issues/24346) + + +### BREAKING CHANGES + +* **config:** The supported version of Firefox for Ionic v7 has changed to Firefox v70+ +* **input, searchbar, select, textarea:** The default value for the `--placeholder-opacity` CSS Variable on `ion-input`, `ion-searchbar`, `ion-select`, and `ion-textarea` has been updated to `0.6`. +* **select:** The `icon` CSS Shadow Part for `ion-select` now targets an `ion-icon` component. +* **datetime:** The haptics when swiping the wheel picker are now enabled only on iOS. +* **toggle:** The `--background` and `--background-checked` variables have been renamed to `--track-background` and `--track-background-checked`, respectively. +* **angular:** Datetime: + +Passing the empty string to the `value` property will now error as it is not a valid ISO-8601 value. + +Angular: + +`null` values on form components will no longer be converted to the empty string (`''`) or `false`. This impacts `ion-checkbox`, `ion-datetime`, `ion-input`, `ion-radio`, `ion-radio-group`, ion-range`, `ion-searchbar`, `ion-segment`, `ion-select`, `ion-textarea`, and `ion-toggle`. +* **picker:** The `refresh` key has been removed from the `PickerColumn` interface. Developers should use the `columns` property to refresh the `ion-picker` view. +* **input, textarea:** The `detail` payload for the `ionInput` event on `ion-input` and `ion-textarea` now contains an object with the current `value` as well as the native event that triggered `ionInput`. +* **datetime:** Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored. +* **types:** `ActionSheetAttributes`, `AlertAttributes`, `AlertTextareaAttributes`, `AlertInputAttributes`, `LoadingAttributes`, `ModalAttributes`, `PickerAttributes`, `PopoverAttributes`, and `ToastAttributes` have been removed. Developers should use `{ [key: string]: any }` instead. +* **card-header:** - The card header has ben changed to a flex container with direction set to `column` (top to bottom). In `ios` mode the direction is set to `column-reverse` which results in the subtitle displaying on top of the title. +* **accordion-group:** Accordion Group no longer automatically adjusts the `value` property when passed an array and `multiple="false"`. Developers should update their apps to ensure they are using the API correctly. +* **select:** `ionChange` is no longer emitted when the `value` of `ion-select` is modified externally. `ionChange` is only emitted from user committed changes, such as confirming a selected option in the select's overlay. +* **react:** `@ionic/react` and `@ionic/react-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite. +* **vue:** `@ionic/vue` and `@ionic/vue-router` no longer ship a CommonJS entry point. Instead, only an ES Module entry point is provided for improved compatibility with Vite. +* **modal:** - The `swipeToClose` property has been removed in favor of `canDismiss`. +- The `canDismiss` property now defaults to `true` and can no longer be set to `undefined`. +* **checkbox:** `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox. +* **accordion:** `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header. +* **core:** The `[hidden]` attribute has been removed from Ionic's global stylesheet. The `[hidden]` attribute can continue to be used, but developers will get the [native `hidden` implementation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) instead. The main difference is that the native implementation is easier to override using `display` than Ionic's implementation. + +Developers can add the following CSS to their global stylesheet if they need the old behavior: + +```css +[hidden] { + display: none !important; +} +``` +* **overlays:** Ionic now listens on the `keydown` event instead of the `keyup` event when determining when to dismiss overlays via the "Escape" key. Any applications that were listening on `keyup` to suppress this behavior should listen on `keydown` instead. + + + + + +## [6.5.1](https://github.com/ionic-team/ionic-framework/compare/v6.5.0...v6.5.1) (2023-01-25) + + +### Bug Fixes + +* **action-sheet:** button icons are not announced by screen readers ([#26640](https://github.com/ionic-team/ionic-framework/issues/26640)) ([22e9ff8](https://github.com/ionic-team/ionic-framework/commit/22e9ff866f8bd7e2e4ca82eae70969ea4f2658df)) +* **fab-button:** icon is not announced by screen readers ([#26619](https://github.com/ionic-team/ionic-framework/issues/26619)) ([dd7cd8c](https://github.com/ionic-team/ionic-framework/commit/dd7cd8c0bfe652d293dc2c2b1bd2a36fd9cf0a0b)), closes [#22296](https://github.com/ionic-team/ionic-framework/issues/22296) +* **modal, popover:** warn if trigger element was not found ([#26650](https://github.com/ionic-team/ionic-framework/issues/26650)) ([1115203](https://github.com/ionic-team/ionic-framework/commit/11152031202a513121861486e50ea7942b9118d3)) +* **picker-column:** cssClass is set on column ([#26658](https://github.com/ionic-team/ionic-framework/issues/26658)) ([c6620c7](https://github.com/ionic-team/ionic-framework/commit/c6620c7c74abe04c3041e8b256441af72ea12131)), closes [#26653](https://github.com/ionic-team/ionic-framework/issues/26653) +* **react:** hardware back button works in dev mode ([#26614](https://github.com/ionic-team/ionic-framework/issues/26614)) ([abcfe9f](https://github.com/ionic-team/ionic-framework/commit/abcfe9fe867730f29b9379c3736f86b3d20c5b0a)), closes [#26599](https://github.com/ionic-team/ionic-framework/issues/26599) +* **select:** focusing item works in firefox ([#26668](https://github.com/ionic-team/ionic-framework/issues/26668)) ([946807d](https://github.com/ionic-team/ionic-framework/commit/946807d67b972c41b52c23c8f00feca4c705b224)) +* **toggle:** on-off icon is not announced by screen readers ([#26641](https://github.com/ionic-team/ionic-framework/issues/26641)) ([77ccac0](https://github.com/ionic-team/ionic-framework/commit/77ccac059091d5d9f7daf9c7fb01a9e855b86ce3)) +* **vue:** unmount teleported components ([#26647](https://github.com/ionic-team/ionic-framework/issues/26647)) ([6b16a0c](https://github.com/ionic-team/ionic-framework/commit/6b16a0c020fc6afb6a5a6e6fa6f0758384f026b9)), closes [#26644](https://github.com/ionic-team/ionic-framework/issues/26644) + + + + + +# [6.5.0](https://github.com/ionic-team/ionic-framework/compare/v6.4.3...v6.5.0) (2023-01-18) + + +### Features + +* **deps:** update ionicons to 6.1.0 ([#26617](https://github.com/ionic-team/ionic-framework/issues/26617)) ([ccd2a92](https://github.com/ionic-team/ionic-framework/commit/ccd2a9224e018ad0d67903d44ec312934c3b35ec)) +* **deps:** update ionicons to 6.1.1 ([#26626](https://github.com/ionic-team/ionic-framework/issues/26626)) ([90405eb](https://github.com/ionic-team/ionic-framework/commit/90405eb0af69ce04faf5855189449d0b7518288c)) +* **router:** export hook interfaces ([#26551](https://github.com/ionic-team/ionic-framework/issues/26551)) ([2752702](https://github.com/ionic-team/ionic-framework/commit/27527025e4588f43f9f79640f0929e7c7d0618ee)) -### Updating to 2.0.0-rc.3 -Update the following dependencies in your `package.json` file: -``` -"dependencies": { - "@angular/common": "2.1.1", - "@angular/compiler": "2.1.1", - "@angular/compiler-cli": "2.1.1", - "@angular/core": "2.1.1", - "@angular/forms": "2.1.1", - "@angular/http": "2.1.1", - "@angular/platform-browser": "2.1.1", - "@angular/platform-browser-dynamic": "2.1.1", - "@angular/platform-server": "2.1.1", - "@ionic/storage": "1.1.6", - "ionic-angular": "2.0.0-rc.3", - "ionic-native": "2.2.3", - "ionicons": "3.0.0", - "rxjs": "5.0.0-beta.12", - "zone.js": "0.6.26" -}, -"devDependencies": { - "@ionic/app-scripts": "0.0.45", -} -``` + + +## [6.4.3](https://github.com/ionic-team/ionic-framework/compare/v6.4.2...v6.4.3) (2023-01-18) + + +### Bug Fixes + +* **datetime:** allow header to render in all wheel picker presentations ([#26616](https://github.com/ionic-team/ionic-framework/issues/26616)) ([7b947b5](https://github.com/ionic-team/ionic-framework/commit/7b947b5d58ff51a3a6ac360fef6d4df073e1bfec)) +* **input:** clear button uses contrast when setting color on item ([#26592](https://github.com/ionic-team/ionic-framework/issues/26592)) ([a31e1e5](https://github.com/ionic-team/ionic-framework/commit/a31e1e594d4ed7bbcf690b27eee143da232f2bdc)), closes [#26337](https://github.com/ionic-team/ionic-framework/issues/26337) +* **list:** inset lists render correctly ([#26586](https://github.com/ionic-team/ionic-framework/issues/26586)) ([911b1d4](https://github.com/ionic-team/ionic-framework/commit/911b1d496efe595ddbf8e980f052e505ce9716c2)), closes [#20819](https://github.com/ionic-team/ionic-framework/issues/20819) + + + + + +## [6.4.2](https://github.com/ionic-team/ionic-framework/compare/v6.4.1...v6.4.2) (2023-01-11) + + +### Bug Fixes + +* **datetime:** time wheel input mode is dismissed on user scroll ([#26567](https://github.com/ionic-team/ionic-framework/issues/26567)) ([d13a146](https://github.com/ionic-team/ionic-framework/commit/d13a14658df2723aff908a94181cb563cb1f5b43)) +* **loading:** support custom aria-label ([#26581](https://github.com/ionic-team/ionic-framework/issues/26581)) ([2450a1e](https://github.com/ionic-team/ionic-framework/commit/2450a1e821d3901c8efb57ec256a10a951d22c8f)), closes [#24486](https://github.com/ionic-team/ionic-framework/issues/24486) +* **modal:** canDismiss type with data and role ([#26547](https://github.com/ionic-team/ionic-framework/issues/26547)) ([32c2622](https://github.com/ionic-team/ionic-framework/commit/32c2622ab04a70d00684e9a813d9bcef698d7551)), closes [#26544](https://github.com/ionic-team/ionic-framework/issues/26544) +* **picker-column-internal:** blurring picker does not throw error ([#26560](https://github.com/ionic-team/ionic-framework/issues/26560)) ([3e671b9](https://github.com/ionic-team/ionic-framework/commit/3e671b9c8ff62945a12eff431839ddae37d9d1a7)), closes [#26559](https://github.com/ionic-team/ionic-framework/issues/26559) +* **segment:** nested interactive is not rendered ([#26575](https://github.com/ionic-team/ionic-framework/issues/26575)) ([77ce9e0](https://github.com/ionic-team/ionic-framework/commit/77ce9e066e1ee71438ceac35479ea04e8df021f5)) +* **tab-button:** nested interactives are not rendered ([#26576](https://github.com/ionic-team/ionic-framework/issues/26576)) ([df4882d](https://github.com/ionic-team/ionic-framework/commit/df4882d4d1c516038badfa647db484e070fbd099)), closes [#23332](https://github.com/ionic-team/ionic-framework/issues/23332) +* **vue:** unmount teleported user component ([#26543](https://github.com/ionic-team/ionic-framework/issues/26543)) ([c996384](https://github.com/ionic-team/ionic-framework/commit/c996384786257524842cc1dca8d0fb940699719b)), closes [#26542](https://github.com/ionic-team/ionic-framework/issues/26542) + + + + + +## [6.4.1](https://github.com/ionic-team/ionic-framework/compare/v6.4.0...v6.4.1) (2022-12-14) + + +### Bug Fixes + +* **breadcrumbs:** breadcrumbs are reactive ([#26427](https://github.com/ionic-team/ionic-framework/issues/26427)) ([0d8625b](https://github.com/ionic-team/ionic-framework/commit/0d8625b95537208c188b32a1707fa66050953281)), closes [#24041](https://github.com/ionic-team/ionic-framework/issues/24041) +* **datetime:** keyboard can select hour 00 ([#26423](https://github.com/ionic-team/ionic-framework/issues/26423)) ([2fc96b7](https://github.com/ionic-team/ionic-framework/commit/2fc96b771412d2deac6d19883bfc5abc74d0bdbd)), closes [#26409](https://github.com/ionic-team/ionic-framework/issues/26409) +* **modal:** compatibility with stencil libraries/apps ([#26448](https://github.com/ionic-team/ionic-framework/issues/26448)) ([1aa1068](https://github.com/ionic-team/ionic-framework/commit/1aa1068df7867a8b8a203052635da018014f5f1c)) +* **normalize:** remove normalize styles for outdated browsers ([#26465](https://github.com/ionic-team/ionic-framework/issues/26465)) ([82d1d94](https://github.com/ionic-team/ionic-framework/commit/82d1d948ecd7725772eb1ffee495e7a5dcadb30b)), closes [#26464](https://github.com/ionic-team/ionic-framework/issues/26464) + + + + + +# [6.4.0](https://github.com/ionic-team/ionic-framework/compare/v6.3.10...v6.4.0) (2022-12-07) + + +### Features + +* **modal:** data and role are passed to canDismiss ([#26384](https://github.com/ionic-team/ionic-framework/issues/26384)) ([1b30fc9](https://github.com/ionic-team/ionic-framework/commit/1b30fc97d33e761866b4bcf7518efcdeb753032d)), closes [#26292](https://github.com/ionic-team/ionic-framework/issues/26292) +* **toast:** add global config toastDuration ([#26425](https://github.com/ionic-team/ionic-framework/issues/26425)) ([a67a827](https://github.com/ionic-team/ionic-framework/commit/a67a827fedc8adf44a35c786f615871facca60fc)) +* **toggle:** add toggleOnOffLabels global config option ([#26087](https://github.com/ionic-team/ionic-framework/issues/26087)) ([43e2b39](https://github.com/ionic-team/ionic-framework/commit/43e2b3975d003e29b8060e5f5484bfb3daf457a2)) + + + + + +## [6.3.10](https://github.com/ionic-team/ionic-framework/compare/v6.3.9...v6.3.10) (2022-12-07) + + +### Bug Fixes + +* **datetime:** add flipRTL to monthAndYear dropdown icon ([#26378](https://github.com/ionic-team/ionic-framework/issues/26378)) ([13fe669](https://github.com/ionic-team/ionic-framework/commit/13fe669dc14eb4c9feda8ee956fec42b994b0f96)) +* **datetime:** md highlight does not clip at start or end of month ([#26366](https://github.com/ionic-team/ionic-framework/issues/26366)) ([fcfbcdb](https://github.com/ionic-team/ionic-framework/commit/fcfbcdbc200b1354b9128a691fbd9b68d50d8668)), closes [#24891](https://github.com/ionic-team/ionic-framework/issues/24891) +* **segment:** scrolling button into view is more consistent ([#26369](https://github.com/ionic-team/ionic-framework/issues/26369)) ([a2d570b](https://github.com/ionic-team/ionic-framework/commit/a2d570b7ad8b799b072ba6eb79d8fe4c6dd77cf0)), closes [#26368](https://github.com/ionic-team/ionic-framework/issues/26368) + + + + + +## [6.3.9](https://github.com/ionic-team/ionic-framework/compare/v6.3.8...v6.3.9) (2022-11-30) + + +### Bug Fixes + +* **button:** fill can be set to undefined ([#26339](https://github.com/ionic-team/ionic-framework/issues/26339)) ([2fe23d9](https://github.com/ionic-team/ionic-framework/commit/2fe23d9d46c3593843c781c57340332e5a86fd64)), closes [#25886](https://github.com/ionic-team/ionic-framework/issues/25886) +* **input:** clear icon can be styled ([#26354](https://github.com/ionic-team/ionic-framework/issues/26354)) ([ccaff8d](https://github.com/ionic-team/ionic-framework/commit/ccaff8d0dc66f8adc9cde838c084629391e4200d)), closes [#19178](https://github.com/ionic-team/ionic-framework/issues/19178) [#17168](https://github.com/ionic-team/ionic-framework/issues/17168) +* **reorder:** items animate once in firefox ([#26326](https://github.com/ionic-team/ionic-framework/issues/26326)) ([7ae8117](https://github.com/ionic-team/ionic-framework/commit/7ae81172844659d7f4581956ce17e5324f73beef)), closes [#21182](https://github.com/ionic-team/ionic-framework/issues/21182) +* **segment:** segment in toolbar uses correct contrast ([#26353](https://github.com/ionic-team/ionic-framework/issues/26353)) ([5a243cc](https://github.com/ionic-team/ionic-framework/commit/5a243ccebc8e27bef6eb1ed2f797a0c1166199bf)), closes [#26350](https://github.com/ionic-team/ionic-framework/issues/26350) + + + + + +## [6.3.8](https://github.com/ionic-team/ionic-framework/compare/v6.3.7...v6.3.8) (2022-11-22) + + +### Bug Fixes + +* **modal:** status bar style defaults to app settings ([#26291](https://github.com/ionic-team/ionic-framework/issues/26291)) ([a6c9e55](https://github.com/ionic-team/ionic-framework/commit/a6c9e55adcaa963f4829d6963b9b1a7b246cef4e)), closes [#26173](https://github.com/ionic-team/ionic-framework/issues/26173) +* **normalize:** normalize css resets button padding ([#26214](https://github.com/ionic-team/ionic-framework/issues/26214)) ([e14c947](https://github.com/ionic-team/ionic-framework/commit/e14c94722c2c8ec145d680f911b708a34f095cd3)), closes [#23928](https://github.com/ionic-team/ionic-framework/issues/23928) +* **popover:** popover positions correctly on all frameworks ([#26306](https://github.com/ionic-team/ionic-framework/issues/26306)) ([be9a399](https://github.com/ionic-team/ionic-framework/commit/be9a399eeed37ae4a67add78ac1283ba0c5e4b14)), closes [#25337](https://github.com/ionic-team/ionic-framework/issues/25337) +* **react:** useIonRouter hook has stable router reference ([#25000](https://github.com/ionic-team/ionic-framework/issues/25000)) ([89e3cd6](https://github.com/ionic-team/ionic-framework/commit/89e3cd67ce6d9cfc0607d6a89362483878a1820b)), closes [#24987](https://github.com/ionic-team/ionic-framework/issues/24987) +* **reorder-group:** support custom components ([#26289](https://github.com/ionic-team/ionic-framework/issues/26289)) ([8425734](https://github.com/ionic-team/ionic-framework/commit/842573477b1b498f2280badc8c7411832c1650a5)), closes [#19447](https://github.com/ionic-team/ionic-framework/issues/19447) +* **segment:** scrollable segments center button on click ([#26285](https://github.com/ionic-team/ionic-framework/issues/26285)) ([73ea64c](https://github.com/ionic-team/ionic-framework/commit/73ea64c02fff1d63651f6c98f03b43265ba5227a)), closes [#25367](https://github.com/ionic-team/ionic-framework/issues/25367) +* **toggle:** rtl layout renders correctly in safari ([#26315](https://github.com/ionic-team/ionic-framework/issues/26315)) ([0932f89](https://github.com/ionic-team/ionic-framework/commit/0932f89f5db63a1e6149f2f45de798d7485d72ee)) + + + + + +## [6.3.7](https://github.com/ionic-team/ionic-framework/compare/v6.3.6...v6.3.7) (2022-11-16) + + +### Bug Fixes + +* **action-sheet:** icons are aligned on MD mode ([#26256](https://github.com/ionic-team/ionic-framework/issues/26256)) ([627d654](https://github.com/ionic-team/ionic-framework/commit/627d654d24f97e340e4004a03f07467619e60149)), closes [#26249](https://github.com/ionic-team/ionic-framework/issues/26249) +* **datetime:** clear button clears the selected date ([#26264](https://github.com/ionic-team/ionic-framework/issues/26264)) ([9216744](https://github.com/ionic-team/ionic-framework/commit/9216744205c1ecc0c3dd51490a25be102f27a91a)), closes [#26258](https://github.com/ionic-team/ionic-framework/issues/26258) +* **datetime:** fonts now render consistently ([#26281](https://github.com/ionic-team/ionic-framework/issues/26281)) ([f13ddca](https://github.com/ionic-team/ionic-framework/commit/f13ddcaf470fb3d070298819675812cebf5f5ceb)) +* **datetime:** max and min works with showDefaultButtons ([#26257](https://github.com/ionic-team/ionic-framework/issues/26257)) ([e5cff9e](https://github.com/ionic-team/ionic-framework/commit/e5cff9ecf39c13912cf6e062e4a084fadc59c399)), closes [#26146](https://github.com/ionic-team/ionic-framework/issues/26146) +* **popover:** inline popover positioning with fit-content or auto width ([#26230](https://github.com/ionic-team/ionic-framework/issues/26230)) ([0a8a958](https://github.com/ionic-team/ionic-framework/commit/0a8a958cba02994ea0fefa265b17edddffe62e98)), closes [#24716](https://github.com/ionic-team/ionic-framework/issues/24716) +* **popover:** popover positioning for controller and inline ([#26274](https://github.com/ionic-team/ionic-framework/issues/26274)) ([31ab10d](https://github.com/ionic-team/ionic-framework/commit/31ab10de4e1c8e38582b985f19414f73337a63c8)), closes [#24716](https://github.com/ionic-team/ionic-framework/issues/24716) +* **textarea:** scrollbars are visible with overflow ([#26284](https://github.com/ionic-team/ionic-framework/issues/26284)) ([7a990ff](https://github.com/ionic-team/ionic-framework/commit/7a990ff403d7b7b80541c5d8f9cd05463c4fb593)), closes [#26278](https://github.com/ionic-team/ionic-framework/issues/26278) + + + + + +## [6.3.6](https://github.com/ionic-team/ionic-framework/compare/v6.3.5...v6.3.6) (2022-11-10) + + +### Bug Fixes + +* **datetime:** flip chevron icons when RTL is set on component directly ([#26195](https://github.com/ionic-team/ionic-framework/issues/26195)) ([dd98677](https://github.com/ionic-team/ionic-framework/commit/dd9867708b66543f5cbe978e0fa6ef34b37f9fc3)) +* **react:** inline overlays display contents consistently ([#26255](https://github.com/ionic-team/ionic-framework/issues/26255)) ([d709ff6](https://github.com/ionic-team/ionic-framework/commit/d709ff64ae29a5197dc74cecb95cba602479683d)), closes [#26253](https://github.com/ionic-team/ionic-framework/issues/26253) + + + + + +## [6.3.5](https://github.com/ionic-team/ionic-framework/compare/v6.3.4...v6.3.5) (2022-11-09) + + +### Bug Fixes + +* **android:** account for chrome 108 resize ([#26244](https://github.com/ionic-team/ionic-framework/issues/26244)) ([1a0b9ed](https://github.com/ionic-team/ionic-framework/commit/1a0b9ed3bacffa9f602637c204f52cb3face5a3e)) +* **datetime:** min/max correctly display available day periods ([#26241](https://github.com/ionic-team/ionic-framework/issues/26241)) ([526e411](https://github.com/ionic-team/ionic-framework/commit/526e4113d82d244e2574b24d72fda632bb2aa143)), closes [#26216](https://github.com/ionic-team/ionic-framework/issues/26216) +* **overlays:** presenting an overlay does not create nested elements ([#26154](https://github.com/ionic-team/ionic-framework/issues/26154)) ([bb00595](https://github.com/ionic-team/ionic-framework/commit/bb005956eaff7401cfe1d6befcbf512424ddd283)), closes [#26117](https://github.com/ionic-team/ionic-framework/issues/26117) +* **react:** loading layout is correct with no message ([#26222](https://github.com/ionic-team/ionic-framework/issues/26222)) ([57105d5](https://github.com/ionic-team/ionic-framework/commit/57105d54ea259fc9cd1a63e3d361ec8a57dd2971)), closes [#26219](https://github.com/ionic-team/ionic-framework/issues/26219) +* **vue:** generate web-types for components ([#26205](https://github.com/ionic-team/ionic-framework/issues/26205)) ([1f7fc8f](https://github.com/ionic-team/ionic-framework/commit/1f7fc8f05c03316560e0b58c3bf58db6b189d0e1)), closes [#26198](https://github.com/ionic-team/ionic-framework/issues/26198) + + + + + +## [6.3.4](https://github.com/ionic-team/ionic-framework/compare/v6.3.3...v6.3.4) (2022-11-02) + + +### Bug Fixes + +* **datetime:** account for allowed values when setting default date ([#26093](https://github.com/ionic-team/ionic-framework/issues/26093)) ([3745083](https://github.com/ionic-team/ionic-framework/commit/3745083b7cdf8651d1c7f5f1a0214b487ea286ca)), closes [#24722](https://github.com/ionic-team/ionic-framework/issues/24722) +* **modal, popover:** remove trigger click listeners when overlay is unmounted ([#26167](https://github.com/ionic-team/ionic-framework/issues/26167)) ([1320948](https://github.com/ionic-team/ionic-framework/commit/1320948b245be3defe8610b9f049e781a4903a6e)) +* **modal:** buttons are highlighted with VoiceOver ([#26180](https://github.com/ionic-team/ionic-framework/issues/26180)) ([1504b88](https://github.com/ionic-team/ionic-framework/commit/1504b8888d6f79ea382935ed52b104b9f841d150)), closes [#26156](https://github.com/ionic-team/ionic-framework/issues/26156) + + + + + +## [6.3.3](https://github.com/ionic-team/ionic-framework/compare/v6.3.2...v6.3.3) (2022-10-26) + + +### Bug Fixes + +* **datetime:** empty string is treated as no value ([#26131](https://github.com/ionic-team/ionic-framework/issues/26131)) ([51ab5f6](https://github.com/ionic-team/ionic-framework/commit/51ab5f67b50013c0ed8ca3160d6dfc56bc269f2a)), closes [#26116](https://github.com/ionic-team/ionic-framework/issues/26116) +* **datetime:** preferWheel can now show title ([#26101](https://github.com/ionic-team/ionic-framework/issues/26101)) ([479d56b](https://github.com/ionic-team/ionic-framework/commit/479d56b3b26d45bfd03d4095458c37ed00485c54)), closes [#26095](https://github.com/ionic-team/ionic-framework/issues/26095) +* **datetime:** values are adjusted to be in bounds ([#26125](https://github.com/ionic-team/ionic-framework/issues/26125)) ([0548fe8](https://github.com/ionic-team/ionic-framework/commit/0548fe858854f0187e0dfe00efaec142cd5bb6cf)), closes [#25894](https://github.com/ionic-team/ionic-framework/issues/25894) [#25708](https://github.com/ionic-team/ionic-framework/issues/25708) +* **dependencies:** latest patch is installed ([#26148](https://github.com/ionic-team/ionic-framework/issues/26148)) ([74be79e](https://github.com/ionic-team/ionic-framework/commit/74be79e9d81fd5431ae2fc442fd6387cf37b2015)), closes [#26137](https://github.com/ionic-team/ionic-framework/issues/26137) +* **many:** haptics only fire on supported platforms ([#26130](https://github.com/ionic-team/ionic-framework/issues/26130)) ([d4d569a](https://github.com/ionic-team/ionic-framework/commit/d4d569ac09ab25ab5a490825cf1fc655fe97bb87)), closes [#26109](https://github.com/ionic-team/ionic-framework/issues/26109) +* **react:** inline overlays can be conditionally rendered ([#26111](https://github.com/ionic-team/ionic-framework/issues/26111)) ([8ec350a](https://github.com/ionic-team/ionic-framework/commit/8ec350ae652095ae29e2f02a7f105cb709a72583)), closes [#25590](https://github.com/ionic-team/ionic-framework/issues/25590) + + + + + +## [6.3.2](https://github.com/ionic-team/ionic-framework/compare/v6.3.1...v6.3.2) (2022-10-17) + + +### Bug Fixes + +* **datetime:** header renders correct date ([#26120](https://github.com/ionic-team/ionic-framework/issues/26120)) ([04df45a](https://github.com/ionic-team/ionic-framework/commit/04df45a443e4faeea644daa76dc509fea0d24ca2)), closes [#26116](https://github.com/ionic-team/ionic-framework/issues/26116) +* **datetime:** selecting days updates value ([#26121](https://github.com/ionic-team/ionic-framework/issues/26121)) ([d76a24d](https://github.com/ionic-team/ionic-framework/commit/d76a24dd9e485a2f3cc517231bbb1dab51fa1fd3)) +* **modal:** sheet modal dismisses correctly ([#26110](https://github.com/ionic-team/ionic-framework/issues/26110)) ([256b03f](https://github.com/ionic-team/ionic-framework/commit/256b03f12a57c2b5904d9017e4fa93b11eea8fc7)), closes [#26108](https://github.com/ionic-team/ionic-framework/issues/26108) +* **vue:** routing components define child components ([#26107](https://github.com/ionic-team/ionic-framework/issues/26107)) ([d60973b](https://github.com/ionic-team/ionic-framework/commit/d60973b2449b29a982b752a98b10d2b043ecff2f)) + + + + + +## [6.3.1](https://github.com/ionic-team/ionic-framework/compare/v6.3.0...v6.3.1) (2022-10-12) + + +### Bug Fixes + +* **datetime:** setting date async updates calendar grid ([#26070](https://github.com/ionic-team/ionic-framework/issues/26070)) ([0aee328](https://github.com/ionic-team/ionic-framework/commit/0aee328b4b84d5668752e5ae0792334d0173c2bb)), closes [#25776](https://github.com/ionic-team/ionic-framework/issues/25776) +* **datetime:** setting max/min does not increase number of nodes rendered ([#26065](https://github.com/ionic-team/ionic-framework/issues/26065)) ([a5d178f](https://github.com/ionic-team/ionic-framework/commit/a5d178f4c03a0ad2501095afe1f75914b0462ae1)), closes [#26059](https://github.com/ionic-team/ionic-framework/issues/26059) +* **item, card:** aria-label is reflected to the inner button ([#26028](https://github.com/ionic-team/ionic-framework/issues/26028)) ([3c89ebe](https://github.com/ionic-team/ionic-framework/commit/3c89ebe7216b2a19580a4f1ed23d5d1d4c37919d)), closes [#25885](https://github.com/ionic-team/ionic-framework/issues/25885) +* **toolbar:** MD height only applies to MD segment ([#26042](https://github.com/ionic-team/ionic-framework/issues/26042)) ([ab89679](https://github.com/ionic-team/ionic-framework/commit/ab8967936c6bef5fc0a884cb8bf8f2deb7784c13)), closes [#18617](https://github.com/ionic-team/ionic-framework/issues/18617) + + + + + +# [6.3.0](https://github.com/ionic-team/ionic-framework/compare/v6.2.9...v6.3.0) (2022-10-05) + + +### Bug Fixes + +* **list:** remove extra border in md inset list items ([#25972](https://github.com/ionic-team/ionic-framework/issues/25972)) ([3eb3dd5](https://github.com/ionic-team/ionic-framework/commit/3eb3dd5afa02f7257e2594f56efe570be83719b6)), closes [#25278](https://github.com/ionic-team/ionic-framework/issues/25278) +* **range:** indication when range knob is focused ([#25827](https://github.com/ionic-team/ionic-framework/issues/25827)) ([2c815cf](https://github.com/ionic-team/ionic-framework/commit/2c815cff139a0061883d3eef47816aea8801dcf4)) + + +### Features + +* **alert:** accept Promise for button handler ([#25702](https://github.com/ionic-team/ionic-framework/issues/25702)) ([8e4783c](https://github.com/ionic-team/ionic-framework/commit/8e4783c17298e8f7654590108430e80f22ed6a7a)), closes [#25700](https://github.com/ionic-team/ionic-framework/issues/25700) +* **angular:** use standalone components with routing ([#25589](https://github.com/ionic-team/ionic-framework/issues/25589)) ([3c84d48](https://github.com/ionic-team/ionic-framework/commit/3c84d48cfa87810896364cb7ca16efcbdd7e8b07)), closes [#25404](https://github.com/ionic-team/ionic-framework/issues/25404) +* **button:** submit from outside of form ([#25913](https://github.com/ionic-team/ionic-framework/issues/25913)) ([b139838](https://github.com/ionic-team/ionic-framework/commit/b13983848c9ea7387062953412eaae744c001ec7)), closes [#21194](https://github.com/ionic-team/ionic-framework/issues/21194) +* **datetime-button:** support multiple date selection ([#25971](https://github.com/ionic-team/ionic-framework/issues/25971)) ([a56a4a9](https://github.com/ionic-team/ionic-framework/commit/a56a4a9c0528fe77859963f5b801a3d645be0b23)) +* **datetime:** add header text to multiple selection; improve header consistency between modes ([#25817](https://github.com/ionic-team/ionic-framework/issues/25817)) ([8a1b3c5](https://github.com/ionic-team/ionic-framework/commit/8a1b3c5f300a1ec953d406b65601f84fa49aa807)) + + + + + +## [6.2.9](https://github.com/ionic-team/ionic-framework/compare/v6.2.8...v6.2.9) (2022-09-28) + + +### Bug Fixes + +* **animation:** improve compatibility with ssr ([#25992](https://github.com/ionic-team/ionic-framework/issues/25992)) ([02234f6](https://github.com/ionic-team/ionic-framework/commit/02234f69e0333266b4d500f24b3bb002c099bda2)), closes [#25987](https://github.com/ionic-team/ionic-framework/issues/25987) +* **chip:** default color has contrast on dark mode ([#25998](https://github.com/ionic-team/ionic-framework/issues/25998)) ([ef78a12](https://github.com/ionic-team/ionic-framework/commit/ef78a123e553e27d9c41c2735bf44c21cbfa7ade)), closes [#25997](https://github.com/ionic-team/ionic-framework/issues/25997) +* **datetime:** expand/collapse icon is not announced to screen readers ([#26018](https://github.com/ionic-team/ionic-framework/issues/26018)) ([649d3cf](https://github.com/ionic-team/ionic-framework/commit/649d3cf688d44226f63783bf784f747d1a61476c)) +* **datetime:** swiping wheel no longer dismisses card modal ([#25981](https://github.com/ionic-team/ionic-framework/issues/25981)) ([7543c84](https://github.com/ionic-team/ionic-framework/commit/7543c84445e6698d29cafe75b423c33115bc534c)) +* **datetime:** switching month and year accounts for day ([#25996](https://github.com/ionic-team/ionic-framework/issues/25996)) ([11f44e9](https://github.com/ionic-team/ionic-framework/commit/11f44e94f4abe81892f33a057055e5f9b5092528)), closes [#25585](https://github.com/ionic-team/ionic-framework/issues/25585) +* **datetime:** time button is easier to access with screen readers ([#26019](https://github.com/ionic-team/ionic-framework/issues/26019)) ([5846b41](https://github.com/ionic-team/ionic-framework/commit/5846b418a7e0b2f0bd025c2dac1f248ecb2d17c2)) +* **picker-internal:** fonts now render consistently ([#26020](https://github.com/ionic-team/ionic-framework/issues/26020)) ([54f99bd](https://github.com/ionic-team/ionic-framework/commit/54f99bd5b308386d43596677c9e9227dae822541)) +* **react:** overlays now define internal ionic components ([#25967](https://github.com/ionic-team/ionic-framework/issues/25967)) ([21dc893](https://github.com/ionic-team/ionic-framework/commit/21dc893f90a56d14d69330367daae6788e32652e)), closes [#25962](https://github.com/ionic-team/ionic-framework/issues/25962) +* **vue:** back button handler only fires in routing context ([#26014](https://github.com/ionic-team/ionic-framework/issues/26014)) ([19f0fb7](https://github.com/ionic-team/ionic-framework/commit/19f0fb70452c8bd003743984a3d6522369eaa3b7)) + + + + + +## [6.2.8](https://github.com/ionic-team/ionic-framework/compare/v6.2.7...v6.2.8) (2022-09-21) + + +### Bug Fixes + +* **datetime:** account for 12AM with min times and 12 hour format ([#25952](https://github.com/ionic-team/ionic-framework/issues/25952)) ([55ebd6c](https://github.com/ionic-team/ionic-framework/commit/55ebd6cdf39c01b401e876b76e755bfa04db8f65)), closes [#25183](https://github.com/ionic-team/ionic-framework/issues/25183) +* **item:** show the highlight on iOS when --highlight-height is set ([#25905](https://github.com/ionic-team/ionic-framework/issues/25905)) ([d7db133](https://github.com/ionic-team/ionic-framework/commit/d7db1333f13834ecb447b4b1da62cfffed9fb333)) +* **overlays:** focus trapping no longer includes disabled elements ([#25949](https://github.com/ionic-team/ionic-framework/issues/25949)) ([6cb5827](https://github.com/ionic-team/ionic-framework/commit/6cb5827d069c255ab0a9a8c319aba9994a4c5196)) +* **overlays:** focus trapping no longer includes hidden elements ([#25948](https://github.com/ionic-team/ionic-framework/issues/25948)) ([5c10f98](https://github.com/ionic-team/ionic-framework/commit/5c10f98ceb3ae42d3363b38ba786b9122676a59c)) + + +### Performance Improvements + +* **card:** avoid force compositing on ios ([#25942](https://github.com/ionic-team/ionic-framework/issues/25942)) ([174c3b3](https://github.com/ionic-team/ionic-framework/commit/174c3b30a0bce7e7ab13e5605348ec107af69dd6)) + + + + + +## [6.2.7](https://github.com/ionic-team/ionic-framework/compare/v6.2.6...v6.2.7) (2022-09-14) + + +### Bug Fixes + +* **angular:** nav controller can pop views after leaving tabs outlet ([#25690](https://github.com/ionic-team/ionic-framework/issues/25690)) ([725b13f](https://github.com/ionic-team/ionic-framework/commit/725b13fa60775dc9f9c3491cb545c70a5a9162eb)), closes [#18593](https://github.com/ionic-team/ionic-framework/issues/18593) +* **datetime:** correct year is set in wheel picker ([#25896](https://github.com/ionic-team/ionic-framework/issues/25896)) ([fb653eb](https://github.com/ionic-team/ionic-framework/commit/fb653ebe67458a088adf0626741d190ceb2880a6)), closes [#25895](https://github.com/ionic-team/ionic-framework/issues/25895) +* **footer:** padding is added correctly with tabs ([#25921](https://github.com/ionic-team/ionic-framework/issues/25921)) ([edbb64c](https://github.com/ionic-team/ionic-framework/commit/edbb64c4b6de7ace7043675a85fd503da18304d7)), closes [#25918](https://github.com/ionic-team/ionic-framework/issues/25918) +* **input,textarea:** data-form-type attribute is assigned to inner input ([#25927](https://github.com/ionic-team/ionic-framework/issues/25927)) ([9451b28](https://github.com/ionic-team/ionic-framework/commit/9451b283e2cb30ac9087574461f6b9f4b6cc3e0f)), closes [#25908](https://github.com/ionic-team/ionic-framework/issues/25908) +* **modal:** sheet is easier to dismiss with swipe ([#25883](https://github.com/ionic-team/ionic-framework/issues/25883)) ([fa169d2](https://github.com/ionic-team/ionic-framework/commit/fa169d2dca649107342fe365ef6c7da892ebb8fd)), closes [#24296](https://github.com/ionic-team/ionic-framework/issues/24296) +* **react:** add correct type for CreateAnimation ([#25931](https://github.com/ionic-team/ionic-framework/issues/25931)) ([89d3e3c](https://github.com/ionic-team/ionic-framework/commit/89d3e3c819b282e4d7ce716b9099eaab82ab4de2)) +* **tab-bar:** use correct import path ([#25898](https://github.com/ionic-team/ionic-framework/issues/25898)) ([ad46045](https://github.com/ionic-team/ionic-framework/commit/ad46045bcc251c9719ecf6621792f1a5b3c6afce)), closes [#25897](https://github.com/ionic-team/ionic-framework/issues/25897) +* **textarea:** auto grow textarea line wraps long contents ([#25928](https://github.com/ionic-team/ionic-framework/issues/25928)) ([777109a](https://github.com/ionic-team/ionic-framework/commit/777109a7e8625ed61a8cc09e52fc06e104b124ea)), closes [#25893](https://github.com/ionic-team/ionic-framework/issues/25893) + + + + + +## [6.2.6](https://github.com/ionic-team/ionic-framework/compare/v6.2.5...v6.2.6) (2022-09-07) + + +### Bug Fixes + +* **datetime:** calendar day and years are now localized ([#25847](https://github.com/ionic-team/ionic-framework/issues/25847)) ([cbd1268](https://github.com/ionic-team/ionic-framework/commit/cbd1268a03204f05314f2ba284ad433457a9cf33)), closes [#25843](https://github.com/ionic-team/ionic-framework/issues/25843) +* **datetime:** hourCycle formats hour correctly ([#25869](https://github.com/ionic-team/ionic-framework/issues/25869)) ([1a1491d](https://github.com/ionic-team/ionic-framework/commit/1a1491df0242da1cb3c9a7f128bbd4d5ce4dbf3e)), closes [#25862](https://github.com/ionic-team/ionic-framework/issues/25862) +* **datetime:** month grid no longer loops on ios ([#25857](https://github.com/ionic-team/ionic-framework/issues/25857)) ([c938054](https://github.com/ionic-team/ionic-framework/commit/c938054605dffb6c3002a64a3d8aaf36892c7a93)), closes [#25752](https://github.com/ionic-team/ionic-framework/issues/25752) +* **vue:** custom animation plays when replacing ([#25863](https://github.com/ionic-team/ionic-framework/issues/25863)) ([2d3661a](https://github.com/ionic-team/ionic-framework/commit/2d3661ae3894b98ac4b8b158594b8de0f0823073)), closes [#25831](https://github.com/ionic-team/ionic-framework/issues/25831) + + + + + +## [6.2.5](https://github.com/ionic-team/ionic-framework/compare/v6.2.4...v6.2.5) (2022-08-31) + + +### Bug Fixes + +* **action-sheet:** add aria-labelledby ([#25837](https://github.com/ionic-team/ionic-framework/issues/25837)) ([5270151](https://github.com/ionic-team/ionic-framework/commit/527015184e9413c1037277d3197bcaa33044c38c)) +* **angular:** router outlet has mode property ([#25816](https://github.com/ionic-team/ionic-framework/issues/25816)) ([afd0bbc](https://github.com/ionic-team/ionic-framework/commit/afd0bbc60aa8f4edc88dc311d6484ac60117fce5)), closes [#25813](https://github.com/ionic-team/ionic-framework/issues/25813) +* **datetime:** next and previous buttons have correct labels ([#25845](https://github.com/ionic-team/ionic-framework/issues/25845)) ([41e3387](https://github.com/ionic-team/ionic-framework/commit/41e338730d32837fc9dd8a15477e37dea4cc76c9)), closes [#25844](https://github.com/ionic-team/ionic-framework/issues/25844) +* **datetime:** only log out of bounds warning if value set ([#25835](https://github.com/ionic-team/ionic-framework/issues/25835)) ([85af6ce](https://github.com/ionic-team/ionic-framework/commit/85af6ce436890eb922d2ba32053fb8b8bc7fd4ff)), closes [#25833](https://github.com/ionic-team/ionic-framework/issues/25833) +* **input:** clear button is not activated on swipe ([#25825](https://github.com/ionic-team/ionic-framework/issues/25825)) ([ff71ad4](https://github.com/ionic-team/ionic-framework/commit/ff71ad492d7671f8e550da7e08dbde30cb05ebf7)), closes [#24857](https://github.com/ionic-team/ionic-framework/issues/24857) +* **modal:** handleBehavior can be used with controller ([#25821](https://github.com/ionic-team/ionic-framework/issues/25821)) ([79ef1b5](https://github.com/ionic-team/ionic-framework/commit/79ef1b57dc74fd856ed7c2904d7400d283cc081e)), closes [#25820](https://github.com/ionic-team/ionic-framework/issues/25820) +* **searchbar:** clear button has focus indicator ([#25828](https://github.com/ionic-team/ionic-framework/issues/25828)) ([373b4ff](https://github.com/ionic-team/ionic-framework/commit/373b4ffe216ba584b92014cef501f64668e1f177)) +* **searchbar:** keypress can activate clear button ([#25824](https://github.com/ionic-team/ionic-framework/issues/25824)) ([c270756](https://github.com/ionic-team/ionic-framework/commit/c270756356c7b23a1959ac5f4b8206a5cd1825c2)) + + + + + +## [6.2.4](https://github.com/ionic-team/ionic-framework/compare/v6.2.3...v6.2.4) (2022-08-24) + + +### Bug Fixes + +* **alert:** add default aria-label ([#25800](https://github.com/ionic-team/ionic-framework/issues/25800)) ([d395a73](https://github.com/ionic-team/ionic-framework/commit/d395a73cb6c419e6c0072746b8e4768cd5f78ef3)) +* **alert:** use aria-labelledby and aria-describedby instead of aria-label ([#25805](https://github.com/ionic-team/ionic-framework/issues/25805)) ([27318d7](https://github.com/ionic-team/ionic-framework/commit/27318d75df60dfce1a90f23ba31ea2b6636ba42f)) +* **breadcrumb:** separator is not announced by narrators ([#25796](https://github.com/ionic-team/ionic-framework/issues/25796)) ([71fad38](https://github.com/ionic-team/ionic-framework/commit/71fad3884bc55b266067efb346500c848b856946)) +* **datetime:** close month/year picker when hidden ([#25789](https://github.com/ionic-team/ionic-framework/issues/25789)) ([3b211b6](https://github.com/ionic-team/ionic-framework/commit/3b211b60fd9a88be6e232f839ecc4be090181530)), closes [#25787](https://github.com/ionic-team/ionic-framework/issues/25787) +* **modal:** role attribute can be customized ([#25804](https://github.com/ionic-team/ionic-framework/issues/25804)) ([037d579](https://github.com/ionic-team/ionic-framework/commit/037d579b2a3a660358f1e9c9b020c9510bb9c6b0)) +* **react:** duplicate page transitions do not happen on react 18 ([#25798](https://github.com/ionic-team/ionic-framework/issues/25798)) ([a39d776](https://github.com/ionic-team/ionic-framework/commit/a39d776f087514b7fa744f44ce8ce2a04ed8aa43)), closes [#25797](https://github.com/ionic-team/ionic-framework/issues/25797) +* **refresher:** use componentOnReady utility for CE build ([#25783](https://github.com/ionic-team/ionic-framework/issues/25783)) ([bd715a5](https://github.com/ionic-team/ionic-framework/commit/bd715a52562f1f175d4bb6ea2dbfdd67a3e91db1)), closes [#25782](https://github.com/ionic-team/ionic-framework/issues/25782) +* **select:** compareWith passes params in correct order ([#25764](https://github.com/ionic-team/ionic-framework/issues/25764)) ([d631195](https://github.com/ionic-team/ionic-framework/commit/d6311951243fd9b867ae5d4a7a08c8d341f8eb7a)), closes [#25759](https://github.com/ionic-team/ionic-framework/issues/25759) +* **vue:** lifecycles now fire on tabs pages ([#25786](https://github.com/ionic-team/ionic-framework/issues/25786)) ([3020005](https://github.com/ionic-team/ionic-framework/commit/30200051bbab6ce57fd363668dafc49287c87c56)), closes [#25784](https://github.com/ionic-team/ionic-framework/issues/25784) + + + + + +## [6.2.3](https://github.com/ionic-team/ionic-framework/compare/v6.2.2...v6.2.3) (2022-08-17) + + +### Bug Fixes + +* **css:** preserve whitespace in selectors when minifying css ([#25767](https://github.com/ionic-team/ionic-framework/issues/25767)) ([bafa759](https://github.com/ionic-team/ionic-framework/commit/bafa759655a0f3ca206255ba429f21d319c37aed)), closes [#25766](https://github.com/ionic-team/ionic-framework/issues/25766) +* **datetime:** highlights now show above content in modal ([#25756](https://github.com/ionic-team/ionic-framework/issues/25756)) ([d711658](https://github.com/ionic-team/ionic-framework/commit/d7116581c8e92716f49877abc78d93dc39c34e1d)), closes [#25755](https://github.com/ionic-team/ionic-framework/issues/25755) +* **footer:** remove toolbar bottom padding if near bottom slot tabs or keyboard is open ([#25746](https://github.com/ionic-team/ionic-framework/issues/25746)) ([bb37446](https://github.com/ionic-team/ionic-framework/commit/bb374460320b0ba2ee03a5a0ecebb3e7a9f0728e)) +* **header:** hide from screen readers when collapsed ([#25744](https://github.com/ionic-team/ionic-framework/issues/25744)) ([d0ba963](https://github.com/ionic-team/ionic-framework/commit/d0ba9635998f2157970156438c1bb74d6b9682f2)) +* **input:** exclude date inputs from scroll assist ([#25749](https://github.com/ionic-team/ionic-framework/issues/25749)) ([abb56d2](https://github.com/ionic-team/ionic-framework/commit/abb56d22b4a81d1bc34c689de4ef7218e7503b20)), closes [#25745](https://github.com/ionic-team/ionic-framework/issues/25745) +* **item:** form validation caret color renders correctly ([#25725](https://github.com/ionic-team/ionic-framework/issues/25725)) ([de20541](https://github.com/ionic-team/ionic-framework/commit/de20541486bcf6e1d15f0ae5b0c5f177cce5eb38)), closes [#25719](https://github.com/ionic-team/ionic-framework/issues/25719) +* **refresher:** refresher is visible with multiple custom scroll targets ([#25750](https://github.com/ionic-team/ionic-framework/issues/25750)) ([e750e33](https://github.com/ionic-team/ionic-framework/commit/e750e336167397ed996d9833763286f4881e79b5)), closes [#25495](https://github.com/ionic-team/ionic-framework/issues/25495) + + + + + +## [6.2.2](https://github.com/ionic-team/ionic-framework/compare/v6.2.1...v6.2.2) (2022-08-10) + + +### Bug Fixes + +* **angular:** DatetimeButton is declared on IonicModule ([#25727](https://github.com/ionic-team/ionic-framework/issues/25727)) ([76ad1d1](https://github.com/ionic-team/ionic-framework/commit/76ad1d18c81272435db1994977aa9dd5d880504a)) +* **datetime:** add correct null check when value changes ([#25716](https://github.com/ionic-team/ionic-framework/issues/25716)) ([36bea1c](https://github.com/ionic-team/ionic-framework/commit/36bea1ca2520c9eb9ee7705abb046607a52d198d)), closes [#25714](https://github.com/ionic-team/ionic-framework/issues/25714) +* **datetime:** preferWheel respects column ordering by locale ([#25726](https://github.com/ionic-team/ionic-framework/issues/25726)) ([dee0f51](https://github.com/ionic-team/ionic-framework/commit/dee0f513ee443c0c69ea8e38a292c900e9c70221)), closes [#25722](https://github.com/ionic-team/ionic-framework/issues/25722) +* **react:** outlet will not clear in react 18 with hot reload ([#25703](https://github.com/ionic-team/ionic-framework/issues/25703)) ([3878bf7](https://github.com/ionic-team/ionic-framework/commit/3878bf76523f2e1c26c147473fd7c07ee4d0e820)), closes [#25507](https://github.com/ionic-team/ionic-framework/issues/25507) +* **vue:** go back to correct view with memory history ([#25732](https://github.com/ionic-team/ionic-framework/issues/25732)) ([8327889](https://github.com/ionic-team/ionic-framework/commit/832788971a7098e52812f66563cbc0a63d3e5df7)), closes [#25705](https://github.com/ionic-team/ionic-framework/issues/25705) + + + + + +## [6.2.1](https://github.com/ionic-team/ionic-framework/compare/v6.2.0...v6.2.1) (2022-08-03) + + +### Bug Fixes + +* **datetime:** display time in user's timezone after selection ([#25694](https://github.com/ionic-team/ionic-framework/issues/25694)) ([11c69c8](https://github.com/ionic-team/ionic-framework/commit/11c69c8df50b75440c9e876b4d99d469d16e144f)), closes [#25693](https://github.com/ionic-team/ionic-framework/issues/25693) +* **datetime:** selecting today with multiple date select now works ([#25699](https://github.com/ionic-team/ionic-framework/issues/25699)) ([86b7000](https://github.com/ionic-team/ionic-framework/commit/86b7000bcd1b4519e8c20907050e15ba7c99bab0)) +* **nav:** exclude nav from custom dialog ([#25689](https://github.com/ionic-team/ionic-framework/issues/25689)) ([d1e517b](https://github.com/ionic-team/ionic-framework/commit/d1e517bfef03b822dfa7651681013277762eda08)), closes [#25677](https://github.com/ionic-team/ionic-framework/issues/25677) [#25688](https://github.com/ionic-team/ionic-framework/issues/25688) +* **react:** IonNav apply properties to page components ([#25603](https://github.com/ionic-team/ionic-framework/issues/25603)) ([61e4ffe](https://github.com/ionic-team/ionic-framework/commit/61e4ffe47f73034808b65ee37342f540ee5a6a97)), closes [#25602](https://github.com/ionic-team/ionic-framework/issues/25602) + + + + + +# [6.2.0](https://github.com/ionic-team/ionic-framework/compare/v6.1.15...v6.2.0) (2022-07-27) + + +### Bug Fixes + +* **datetime:** account for previous years with preferWheel ([#25656](https://github.com/ionic-team/ionic-framework/issues/25656)) ([3a7f5f1](https://github.com/ionic-team/ionic-framework/commit/3a7f5f166ee8d8d7e1861313e2bc6f4856e4fbe9)) +* **datetime:** switching months in wheel picker now selected nearest neighbor ([#25559](https://github.com/ionic-team/ionic-framework/issues/25559)) ([dd256e1](https://github.com/ionic-team/ionic-framework/commit/dd256e1313fa1c307f30b0dbb7fd0d1da8c555f7)) +* **datetime:** switching presentation closes month/year picker ([#25667](https://github.com/ionic-team/ionic-framework/issues/25667)) ([57a21ad](https://github.com/ionic-team/ionic-framework/commit/57a21adb38331ee5d74dacd1b0a2568f41a2d21e)) +* **nav:** pop() will unmount views within a modal ([#25638](https://github.com/ionic-team/ionic-framework/issues/25638)) ([db28794](https://github.com/ionic-team/ionic-framework/commit/db28794f0b75f2824ae26c101a8c52af70f43ffd)), closes [#25637](https://github.com/ionic-team/ionic-framework/issues/25637) [#21831](https://github.com/ionic-team/ionic-framework/issues/21831) +* **picker-column-internal:** tabbing between columns works ([#25464](https://github.com/ionic-team/ionic-framework/issues/25464)) ([db02772](https://github.com/ionic-team/ionic-framework/commit/db027721ac299e7d23c42b52b0274be06b909f89)) +* **textarea:** textarea with autogrow will size to its contents ([#24205](https://github.com/ionic-team/ionic-framework/issues/24205)) ([a9cf2ab](https://github.com/ionic-team/ionic-framework/commit/a9cf2ab87012cdb6360d10536a29213adda3f585)), closes [#24793](https://github.com/ionic-team/ionic-framework/issues/24793) [#21242](https://github.com/ionic-team/ionic-framework/issues/21242) +* **vue:** input v-model accepts numbers ([#25666](https://github.com/ionic-team/ionic-framework/issues/25666)) ([ab65e9a](https://github.com/ionic-team/ionic-framework/commit/ab65e9a7b51c3a3f8c59962d3e1faff1564ab801)), closes [#25575](https://github.com/ionic-team/ionic-framework/issues/25575) + + +### Features + +* **angular, react, vue:** add support for autoMountComponent ([#25552](https://github.com/ionic-team/ionic-framework/issues/25552)) ([805dfa0](https://github.com/ionic-team/ionic-framework/commit/805dfa05663098ef9c02b0745a383b5e7555908b)) +* **datetime-button:** add button for displaying datetime in overlays ([#25655](https://github.com/ionic-team/ionic-framework/issues/25655)) ([4997331](https://github.com/ionic-team/ionic-framework/commit/499733105e4be23405e8afeeb26fee5cd2afc25b)), closes [#24316](https://github.com/ionic-team/ionic-framework/issues/24316) +* **datetime:** add multiple date selection ([#25514](https://github.com/ionic-team/ionic-framework/issues/25514)) ([9d31608](https://github.com/ionic-team/ionic-framework/commit/9d31608f2d471f531eb253832c8558d1effaf68a)) +* **datetime:** add wheel style picker for dates and times ([#25468](https://github.com/ionic-team/ionic-framework/issues/25468)) ([3d19771](https://github.com/ionic-team/ionic-framework/commit/3d19771185301870a2eb60f1ef4afd6f1c182494)) +* **datetime:** localize am/pm labels in time picker ([#25389](https://github.com/ionic-team/ionic-framework/issues/25389)) ([6bc0acc](https://github.com/ionic-team/ionic-framework/commit/6bc0acc4279a18c3309b11eeec76676c5015419a)), closes [#16279](https://github.com/ionic-team/ionic-framework/issues/16279) +* **modal:** clicking handle advances to the next breakpoint ([#25540](https://github.com/ionic-team/ionic-framework/issues/25540)) ([7cdc388](https://github.com/ionic-team/ionic-framework/commit/7cdc388b7805cbf23c9e1e928aa977cd77ebc8c4)), closes [#24069](https://github.com/ionic-team/ionic-framework/issues/24069) +* **picker-column-internal:** add ability to disable items ([#25412](https://github.com/ionic-team/ionic-framework/issues/25412)) ([8b7c079](https://github.com/ionic-team/ionic-framework/commit/8b7c07968e1a60389a22e5af0e0cac62d31d397a)) +* **range:** add reference point for start position of range slider ([#25598](https://github.com/ionic-team/ionic-framework/issues/25598)) ([c2781cc](https://github.com/ionic-team/ionic-framework/commit/c2781cc1c3b7e56a0e6f6c03cfa04fc2c82d6e8a)), closes [#24348](https://github.com/ionic-team/ionic-framework/issues/24348) +* **toggle:** on/off icons for toggle ([#25459](https://github.com/ionic-team/ionic-framework/issues/25459)) ([bc0bdc4](https://github.com/ionic-team/ionic-framework/commit/bc0bdc438ba72c695f9d961ddf837ec45e7816dd)), closes [#20524](https://github.com/ionic-team/ionic-framework/issues/20524) + + + + + +## [6.1.15](https://github.com/ionic-team/ionic-framework/compare/v6.1.14...v6.1.15) (2022-07-20) + + +### Bug Fixes + +* **datetime:** use scroll listener to detect month changes ([#25586](https://github.com/ionic-team/ionic-framework/issues/25586)) ([b7afcb0](https://github.com/ionic-team/ionic-framework/commit/b7afcb0f0c36d84f3b4d65844df28e6293bc1ea5)), closes [#25257](https://github.com/ionic-team/ionic-framework/issues/25257) [#25608](https://github.com/ionic-team/ionic-framework/issues/25608) [#24980](https://github.com/ionic-team/ionic-framework/issues/24980) +* **fab-button:** aria attributes are inherited ([#25635](https://github.com/ionic-team/ionic-framework/issues/25635)) ([64ae3d2](https://github.com/ionic-team/ionic-framework/commit/64ae3d2b9729c5c6be8644b1df6c8b3d40584d3b)), closes [#25633](https://github.com/ionic-team/ionic-framework/issues/25633) +* **modal:** allow for custom dialog implementations ([#25630](https://github.com/ionic-team/ionic-framework/issues/25630)) ([a6f3ae6](https://github.com/ionic-team/ionic-framework/commit/a6f3ae67ab91ab95408ad425156167edc3570978)), closes [#24080](https://github.com/ionic-team/ionic-framework/issues/24080) +* **react:** swipe to go back gesture works on ios ([#25563](https://github.com/ionic-team/ionic-framework/issues/25563)) ([7ec3683](https://github.com/ionic-team/ionic-framework/commit/7ec3683e94e5397022560ce8489532ff40d3f40c)), closes [#22342](https://github.com/ionic-team/ionic-framework/issues/22342) + + +### Performance Improvements + +* **input:** passive event listener for touch start events ([#25610](https://github.com/ionic-team/ionic-framework/issues/25610)) ([2d1efdb](https://github.com/ionic-team/ionic-framework/commit/2d1efdbe6dd9436badab4684f2a484476489c166)), closes [#25599](https://github.com/ionic-team/ionic-framework/issues/25599) + + + + + +## [6.1.14](https://github.com/ionic-team/ionic-framework/compare/v6.1.13...v6.1.14) (2022-07-13) + ### Bug Fixes -* **animation:** always run before classes and functions ([d9e9ece](https://github.com/driftyco/ionic/commit/d9e9ece)), closes [#8842](https://github.com/driftyco/ionic/issues/8842) [#8769](https://github.com/driftyco/ionic/issues/8769) -* **animation:** fix regression in _willChg() ([91f5087](https://github.com/driftyco/ionic/commit/91f5087)) -* **button:** fix ios buttons in colored toolbar so they don't use the default color ([0e53ec3](https://github.com/driftyco/ionic/commit/0e53ec3)), closes [#8566](https://github.com/driftyco/ionic/issues/8566) -* **colors:** override element styling and tweak colors for card and item ([ee3decc](https://github.com/driftyco/ionic/commit/ee3decc)), closes [#9081](https://github.com/driftyco/ionic/issues/9081) -* **components:** add a mode agnostic css class ([#9133](https://github.com/driftyco/ionic/issues/9133)) ([025c5cc](https://github.com/driftyco/ionic/commit/025c5cc)), closes [#8545](https://github.com/driftyco/ionic/issues/8545) -* **datetime:** fix min/max displayFormat and pickerFormat ([c72b67d](https://github.com/driftyco/ionic/commit/c72b67d)), closes [#8729](https://github.com/driftyco/ionic/issues/8729) -* **gestures:** gesture controller handled by components ([32ab817](https://github.com/driftyco/ionic/commit/32ab817)), closes [#9046](https://github.com/driftyco/ionic/issues/9046) [#9130](https://github.com/driftyco/ionic/issues/9130) [#9052](https://github.com/driftyco/ionic/issues/9052) [#7444](https://github.com/driftyco/ionic/issues/7444) -* **item:** fix color input for item divider and list header ([5e5c33a](https://github.com/driftyco/ionic/commit/5e5c33a)), closes [#8376](https://github.com/driftyco/ionic/issues/8376) -* **nav:** controller is initialized ([beab06f](https://github.com/driftyco/ionic/commit/beab06f)) -* **nav:** fixes empty stack condition ([909293a](https://github.com/driftyco/ionic/commit/909293a)) -* **nav:** it is not allowed to pop all the views ([0ab990c](https://github.com/driftyco/ionic/commit/0ab990c)) -* **nav:** returning Promise in canLeave / canEnter works as expected ([5f1a862](https://github.com/driftyco/ionic/commit/5f1a862)) -* **nav:** transitioning state is a boolean not a timer ([63d495a](https://github.com/driftyco/ionic/commit/63d495a)) -* **nav:** willLeave is called before willEnter ([b77b2ae](https://github.com/driftyco/ionic/commit/b77b2ae)), closes [#9163](https://github.com/driftyco/ionic/issues/9163) -* **nav:** zIndex in overlays ([70f8a8e](https://github.com/driftyco/ionic/commit/70f8a8e)) -* **picker:** prevents scrolling under the picker ([2348d22](https://github.com/driftyco/ionic/commit/2348d22)) -* **sass:** change default font path ([#8811](https://github.com/driftyco/ionic/issues/8811)) ([0940d5a](https://github.com/driftyco/ionic/commit/0940d5a)) -* **sass:** remove usage of colors other than primary, improve error ([#8907](https://github.com/driftyco/ionic/issues/8907)) ([eb0b05d](https://github.com/driftyco/ionic/commit/eb0b05d)), closes [#8266](https://github.com/driftyco/ionic/issues/8266) -* **styles:** update ios and md styles closer to native ([9f7972b](https://github.com/driftyco/ionic/commit/9f7972b)) -* **typography:** Exclude ion-item on a tags selector ([#8340](https://github.com/driftyco/ionic/issues/8340)) ([b00860b](https://github.com/driftyco/ionic/commit/b00860b)) +* **datetime:** datetime works within stencil apps ([#25592](https://github.com/ionic-team/ionic-framework/issues/25592)) ([7b10fa6](https://github.com/ionic-team/ionic-framework/commit/7b10fa6476c2c2896c6810c57b3160f8c8896faa)), closes [#25591](https://github.com/ionic-team/ionic-framework/issues/25591) +* **react:** IonNav works with react ([#25565](https://github.com/ionic-team/ionic-framework/issues/25565)) ([420f9bb](https://github.com/ionic-team/ionic-framework/commit/420f9bbebd41f3eab6def795bcdd1933d5c5a47a)), closes [#24002](https://github.com/ionic-team/ionic-framework/issues/24002) -### Features -* **input:** clearOnEdit feature. Closes [#9187](https://github.com/driftyco/ionic/issues/9187) ([9469b4f](https://github.com/driftyco/ionic/commit/9469b4f)) -* **nav:** export NavControllerBase for building of components similar to ion-tab ([24b087c](https://github.com/driftyco/ionic/commit/24b087c)) -* **tappable:** auto add tappable attribute for ion-item clicks ([5c4838b](https://github.com/driftyco/ionic/commit/5c4838b)) -* **util:** custom ionic error handler provider ([6b77772](https://github.com/driftyco/ionic/commit/6b77772)) -### Performance Improvements +## [6.1.13](https://github.com/ionic-team/ionic-framework/compare/v6.1.12...v6.1.13) (2022-07-06) -* **animation:** improves _progress() hot function ([c44f6b6](https://github.com/driftyco/ionic/commit/c44f6b6)) -* **animation:** optimizing hot loops ([c78dc19](https://github.com/driftyco/ionic/commit/c78dc19)) -* **animation:** set after styles should not be recursive ([3a2ff85](https://github.com/driftyco/ionic/commit/3a2ff85)) -* **click:** increase number to find activatable elements ([c8aad56](https://github.com/driftyco/ionic/commit/c8aad56)), closes [#9190](https://github.com/driftyco/ionic/issues/9190) -* **item:** improve performance of sliding item ([#9005](https://github.com/driftyco/ionic/issues/9005)) ([759e3ea](https://github.com/driftyco/ionic/commit/759e3ea)) -* **item:** reorder is only added to the DOM if needed ([dec5a0b](https://github.com/driftyco/ionic/commit/dec5a0b)), closes [#9065](https://github.com/driftyco/ionic/issues/9065) -* **menu:** avoid change detection when it isn't needed ([#8986](https://github.com/driftyco/ionic/issues/8986)) ([d531ec2](https://github.com/driftyco/ionic/commit/d531ec2)) -* **nav:** avoid running zone when it is not needed ([be72d39](https://github.com/driftyco/ionic/commit/be72d39)) -* **picker:** improves performance of picker and datepicker ([fc2ee64](https://github.com/driftyco/ionic/commit/fc2ee64)) -* **picker:** improves picker UX feedback ([cfbc5ea](https://github.com/driftyco/ionic/commit/cfbc5ea)) +### Bug Fixes - -# [2.0.0-rc.2](https://github.com/driftyco/ionic/compare/v2.0.0-rc.1...v2.0.0-rc.2) (2016-11-03) +* **all:** long press now preserves activated state ([#25551](https://github.com/ionic-team/ionic-framework/issues/25551)) ([a8286f6](https://github.com/ionic-team/ionic-framework/commit/a8286f6e42f734a027416ac6cd659e3dce4edccb)), closes [#25544](https://github.com/ionic-team/ionic-framework/issues/25544) +* **datetime:** typing in time now updates value ([#25561](https://github.com/ionic-team/ionic-framework/issues/25561)) ([1b1b1a3](https://github.com/ionic-team/ionic-framework/commit/1b1b1a3800c4d044b4a3e7418f534e9271770ec6)), closes [#25560](https://github.com/ionic-team/ionic-framework/issues/25560) -### Updating to 2.0.0-rc.2 -Update the following dependencies in your `package.json` file: -``` -"dependencies": { - "@angular/common": "2.1.1", - "@angular/compiler": "2.1.1", - "@angular/compiler-cli": "2.1.1", - "@angular/core": "2.1.1", - "@angular/forms": "2.1.1", - "@angular/http": "2.1.1", - "@angular/platform-browser": "2.1.1", - "@angular/platform-browser-dynamic": "2.1.1", - "@angular/platform-server": "2.1.1", - "@ionic/storage": "1.1.6", - "ionic-angular": "2.0.0-rc.2" -}, -"devDependencies": { - "@ionic/app-scripts": "0.0.39" -} -``` -_Note: you should have other dependencies in this file that are not listed above, these are only the dependencies that need to be updated._ - -Remove the `node_modules` directory from your project, and then run `npm install` inside of your project. Then, you should be on the latest version! - -### Bug Fixes - -* **action-sheet:** Improve Action Sheet styles across all the platforms ([#8736](https://github.com/driftyco/ionic/issues/8736)) ([8d2c8b6](https://github.com/driftyco/ionic/commit/8d2c8b6)), closes [#8663](https://github.com/driftyco/ionic/issues/8663) -* **config:** Cannot read property 'canDisableScroll' of undefined in unit tests ([90f9b5c](https://github.com/driftyco/ionic/commit/90f9b5c)) -* **content:** _scrollPadding is not undefined ([6484c50](https://github.com/driftyco/ionic/commit/6484c50)), closes [#8844](https://github.com/driftyco/ionic/issues/8844) -* **cordova:** add Sass variables for md and wp statusbar padding ([#8788](https://github.com/driftyco/ionic/issues/8788)) ([8921cb1](https://github.com/driftyco/ionic/commit/8921cb1)), closes [#8712](https://github.com/driftyco/ionic/issues/8712) -* **directives:** add missing export ([#8999](https://github.com/driftyco/ionic/issues/8999)) ([98d474b](https://github.com/driftyco/ionic/commit/98d474b)) -* **fab:** only animate transform and opacity ([f69e981](https://github.com/driftyco/ionic/commit/f69e981)) -* **input:** wrong width of text-input for iOS ([941e2d2](https://github.com/driftyco/ionic/commit/941e2d2)), closes [#7388](https://github.com/driftyco/ionic/issues/7388) -* **navigation:** adds public willLoad lifecycle event ([033e1ea](https://github.com/driftyco/ionic/commit/033e1ea)) -* **navigation:** clickblock is disabled longer ([eb317d4](https://github.com/driftyco/ionic/commit/eb317d4)), closes [#8713](https://github.com/driftyco/ionic/issues/8713) -* **navigation:** ion-nav inside ion-content work properly ([ba557ac](https://github.com/driftyco/ionic/commit/ba557ac)) -* **navigation:** ionViewDidLoad fires before children components have been loaded ([e89f3b0](https://github.com/driftyco/ionic/commit/e89f3b0)), closes [#8449](https://github.com/driftyco/ionic/issues/8449) -* **navigation:** swipe to go back gesture ([04d61ee](https://github.com/driftyco/ionic/commit/04d61ee)), closes [#8919](https://github.com/driftyco/ionic/issues/8919) [#8958](https://github.com/driftyco/ionic/issues/8958) [#7934](https://github.com/driftyco/ionic/issues/7934) -* **navigation:** view.id is not overridden ([8b65398](https://github.com/driftyco/ionic/commit/8b65398)), closes [#8794](https://github.com/driftyco/ionic/issues/8794) -* **navigation:** willLoad() does not have to be zone wrapped ([17dbf69](https://github.com/driftyco/ionic/commit/17dbf69)) -* **navigation:** change detector exception ([8b07e6c](https://github.com/driftyco/ionic/commit/8b07e6c)) -* **picker:** fixes regression in picker but introduces new bug. ([c1ba120](https://github.com/driftyco/ionic/commit/c1ba120)) -* **range:** fixes when step size is bigger than range ([9895b86](https://github.com/driftyco/ionic/commit/9895b86)), closes [#8830](https://github.com/driftyco/ionic/issues/8830) [#8802](https://github.com/driftyco/ionic/issues/8802) -* **range:** range with long label renders correctly ([f1f44eb](https://github.com/driftyco/ionic/commit/f1f44eb)) -* **refresher:** only animate transform property ([658c4d6](https://github.com/driftyco/ionic/commit/658c4d6)) -* **sass:** rename $background-color variable in our loops ([2003ae4](https://github.com/driftyco/ionic/commit/2003ae4)), closes [#8475](https://github.com/driftyco/ionic/issues/8475) -* **scroll:** fix scroll to top on iOS ([2d165e1](https://github.com/driftyco/ionic/commit/2d165e1)) -* **searchbar:** looks good when mode is different ([0c0f32d](https://github.com/driftyco/ionic/commit/0c0f32d)) -* **searchbar:** positionElements to assign input mode fixes [#8855](https://github.com/driftyco/ionic/issues/8855) ([cd0e19a](https://github.com/driftyco/ionic/commit/cd0e19a)) -* **searchbar:** fix always hide button ([316c4f3](https://github.com/driftyco/ionic/commit/316c4f3)) -* **segment:** update broken link https://github.com/driftyco/ionic-site/issues/777 ([c66a440](https://github.com/driftyco/ionic/commit/c66a440)) -* **select:** emit the ionSelect option when selecting an option ([2eed5e2](https://github.com/driftyco/ionic/commit/2eed5e2)) -* **spinner:** working in firefox and edge ([ab93f3f](https://github.com/driftyco/ionic/commit/ab93f3f)), closes [#8714](https://github.com/driftyco/ionic/issues/8714) -* **tabs:** $tabs-md-tab-font-size is taken into account ([4be5d83](https://github.com/driftyco/ionic/commit/4be5d83)), closes [#8820](https://github.com/driftyco/ionic/issues/8820) -* **tabs:** regression in nav-controller-base ([d84d8a6](https://github.com/driftyco/ionic/commit/d84d8a6)) -* **tap-click:** several improvements ([35d12ef](https://github.com/driftyco/ionic/commit/35d12ef)) -* **templates:** suffix templates page [#8320](https://github.com/driftyco/ionic/issues/8320) ([#8368](https://github.com/driftyco/ionic/issues/8368)) ([61620f8](https://github.com/driftyco/ionic/commit/61620f8)) -* **transition:** syntax of cubic-bezier easing ([813d945](https://github.com/driftyco/ionic/commit/813d945)) -* **transition:** wrong easing ([09c08e9](https://github.com/driftyco/ionic/commit/09c08e9)) +## [6.1.12](https://github.com/ionic-team/ionic-framework/compare/v6.1.11...v6.1.12) (2022-06-29) -### Features -* **debug:** add IonicErrorHandler ([9397d6b](https://github.com/driftyco/ionic/commit/9397d6b)) -* **tabs:** tabsHideOnSubPages can be modified per tab ([4f6a9b1](https://github.com/driftyco/ionic/commit/4f6a9b1)) +### Bug Fixes +* **angular:** warn devs that standalone components are not supported ([#25516](https://github.com/ionic-team/ionic-framework/issues/25516)) ([c53785c](https://github.com/ionic-team/ionic-framework/commit/c53785c0c786113f3516c09fa512687ecb84c717)) +* **datetime:** add dev warnings when setting out of bounds value ([#25513](https://github.com/ionic-team/ionic-framework/issues/25513)) ([5dfaf63](https://github.com/ionic-team/ionic-framework/commit/5dfaf63c6582811b61339a6fa50cf551cd8724d0)) - -# [2.0.0-rc.1](https://github.com/driftyco/ionic/compare/v2.0.0-rc.0...v2.0.0-rc.1) (2016-10-13) -### Package.json Updates -`package.json` has been upated to include Angular dependencies and the latest version of app-scripts. Please update your package.json to reflect these changes and then run `npm install`. -``` - "dependencies": { - "@angular/common": "2.0.0", - "@angular/compiler": "2.0.0", - "@angular/compiler-cli": "0.6.2", - "@angular/core": "2.0.0", - "@angular/forms": "2.0.0", - "@angular/http": "2.0.0", - "@angular/platform-browser": "2.0.0", - "@angular/platform-browser-dynamic": "2.0.0", - "@angular/platform-server": "2.0.0", - "@ionic/storage": "1.0.3", - "ionic-angular": "2.0.0-rc.1", - "ionic-native": "2.2.3", - "ionicons": "3.0.0", - "rxjs": "5.0.0-beta.12", - "zone.js": "0.6.21" - }, - "devDependencies": { - "@ionic/app-scripts": "^0.0.36", - "typescript": "^2.0.3" - }, -``` +## [6.1.11](https://github.com/ionic-team/ionic-framework/compare/v6.1.10...v6.1.11) (2022-06-22) ### Bug Fixes -* **content:** move $text-ios-color to content ([#8421](https://github.com/driftyco/ionic/issues/8421)) ([91168af](https://github.com/driftyco/ionic/commit/91168af)) -* **datetime-util:** add missing date property conditions ([2aea1cb](https://github.com/driftyco/ionic/commit/2aea1cb)) -* **demos:** double quote in script tag ([424b9e0](https://github.com/driftyco/ionic/commit/424b9e0)) -* **fab:** center fab list for larger buttons ([267a77b](https://github.com/driftyco/ionic/commit/267a77b)) -* **fab:** not using change detection ([47e1e17](https://github.com/driftyco/ionic/commit/47e1e17)), closes [#8424](https://github.com/driftyco/ionic/issues/8424) -* **icon:** isActive="false" with ios mode ([bcbe03c](https://github.com/driftyco/ionic/commit/bcbe03c)), closes [#8435](https://github.com/driftyco/ionic/issues/8435) -* **input:** detect value when it is zero ([d02e14c](https://github.com/driftyco/ionic/commit/d02e14c)), closes [#8019](https://github.com/driftyco/ionic/issues/8019) -* **input:** text input width calculation ([#8063](https://github.com/driftyco/ionic/issues/8063)) ([21fa5cd](https://github.com/driftyco/ionic/commit/21fa5cd)) -* **item:** regression in expandable sliding option button ([695d25c](https://github.com/driftyco/ionic/commit/695d25c)), closes [#8460](https://github.com/driftyco/ionic/issues/8460) -* **item:** sliding item should not close when clicking an option button ([ec6615d](https://github.com/driftyco/ionic/commit/ec6615d)), closes [#8481](https://github.com/driftyco/ionic/issues/8481) -* **item-divider:** fabs have higher z-index than item-dividers ([14e668c](https://github.com/driftyco/ionic/commit/14e668c)), closes [#8489](https://github.com/driftyco/ionic/issues/8489) -* **list:** consecutive inset lists with headers ([93616c4](https://github.com/driftyco/ionic/commit/93616c4)), closes [#8412](https://github.com/driftyco/ionic/issues/8412) [#6164](https://github.com/driftyco/ionic/issues/6164) -* **menu:** backdrop click without 300ms delay ([9bbe485](https://github.com/driftyco/ionic/commit/9bbe485)), closes [#6405](https://github.com/driftyco/ionic/issues/6405) -* **menu:** console.debug statements are one line ([a06bd69](https://github.com/driftyco/ionic/commit/a06bd69)) -* **menu:** menu's content is resized properly ([db72a7d](https://github.com/driftyco/ionic/commit/db72a7d)), closes [#8504](https://github.com/driftyco/ionic/issues/8504) -* **modal:** alerts do not trigger modal lifecycle events ([e2704a4](https://github.com/driftyco/ionic/commit/e2704a4)), closes [#8616](https://github.com/driftyco/ionic/issues/8616) -* **modal:** canEnter is called in modals ([a40b42c](https://github.com/driftyco/ionic/commit/a40b42c)) -* **nav:** ionViewCanLeave does not break navigation ([c8954d8](https://github.com/driftyco/ionic/commit/c8954d8)), closes [#8408](https://github.com/driftyco/ionic/issues/8408) -* **nav:** ionViewDidLoad is called in modals ([451ffe1](https://github.com/driftyco/ionic/commit/451ffe1)), closes [#8449](https://github.com/driftyco/ionic/issues/8449) -* **nav:** push-pop pages too quickly ([9b65022](https://github.com/driftyco/ionic/commit/9b65022)), closes [#8319](https://github.com/driftyco/ionic/issues/8319) -* **nav:** remove incorrectly used removeStart as a starting index in for loop. Fixes [#8442](https://github.com/driftyco/ionic/issues/8442) ([6496c7a](https://github.com/driftyco/ionic/commit/6496c7a)) -* **navbar:** Don't fade out navbars. Fixes [#8060](https://github.com/driftyco/ionic/issues/8060) ([eab5726](https://github.com/driftyco/ionic/commit/eab5726)) -* **popover:** flipped arrow on iOS ([#8462](https://github.com/driftyco/ionic/issues/8462)) ([c996d85](https://github.com/driftyco/ionic/commit/c996d85)) -* **reorder:** not trigger click event when reordering ([9b2ae8a](https://github.com/driftyco/ionic/commit/9b2ae8a)), closes [#8362](https://github.com/driftyco/ionic/issues/8362) -* **reorder:** several reorder lists in the same view ([e75d9be](https://github.com/driftyco/ionic/commit/e75d9be)) -* **ripple:** always remove the activated class ([d893441](https://github.com/driftyco/ionic/commit/d893441)) -* **searchbar:** autocomplete, autocorrect and type works again ([7e63650](https://github.com/driftyco/ionic/commit/7e63650)), closes [#7744](https://github.com/driftyco/ionic/issues/7744) -* **searchbar:** clear button makes keyboard dismissal fail on iOS ([6aaa601](https://github.com/driftyco/ionic/commit/6aaa601)), closes [#7527](https://github.com/driftyco/ionic/issues/7527) -* **searchbar:** ENTER does not clear when it is inside a form ([2e1bb4b](https://github.com/driftyco/ionic/commit/2e1bb4b)), closes [#7010](https://github.com/driftyco/ionic/issues/7010) -* **segment:** add missing input ([0052480](https://github.com/driftyco/ionic/commit/0052480)), closes [#8371](https://github.com/driftyco/ionic/issues/8371) -* **spinner:** add input mode fix [#8598](https://github.com/driftyco/ionic/issues/8598) ([8ee895f](https://github.com/driftyco/ionic/commit/8ee895f)) -* **spinner:** works in iOS8 ([a2ffa63](https://github.com/driftyco/ionic/commit/a2ffa63)), closes [#8145](https://github.com/driftyco/ionic/issues/8145) -* **tabs:** add TabHighlight to IONIC_DIRECTIVES ([ac88547](https://github.com/driftyco/ionic/commit/ac88547)), closes [#8294](https://github.com/driftyco/ionic/issues/8294) -* **tabs:** remove from parent nav when destroyed ([5156917](https://github.com/driftyco/ionic/commit/5156917)) -* **tap-click:** null is not an object when scrolling after focusing an input on iOS ([21eae2e](https://github.com/driftyco/ionic/commit/21eae2e)), closes [#7964](https://github.com/driftyco/ionic/issues/7964) -* **transition:** ios-transition can be used in MD/WP ([fcc515f](https://github.com/driftyco/ionic/commit/fcc515f)), closes [#7171](https://github.com/driftyco/ionic/issues/7171) -* **view-controller:** dismiss does not crash when called more than once ([d5f71a4](https://github.com/driftyco/ionic/commit/d5f71a4)), closes [#8395](https://github.com/driftyco/ionic/issues/8395) -* **view-controller:** avoid deep copy in dismiss() that can turn into an infinite loop ([9227310](https://github.com/driftyco/ionic/commit/9227310)) -* **virtual-scroll:** set this.approxItemHeight before update(true) is called first ([#8350](https://github.com/driftyco/ionic/issues/8350)) ([b16228b](https://github.com/driftyco/ionic/commit/b16228b)) +* **datetime:** closing time picker no longer changes month ([#25478](https://github.com/ionic-team/ionic-framework/issues/25478)) ([f9ab9b5](https://github.com/ionic-team/ionic-framework/commit/f9ab9b54ddb5a3004673e4aaa9cb62fd8e97ba07)), closes [#25438](https://github.com/ionic-team/ionic-framework/issues/25438) +* **item:** multiple input appearance when using datetime ([#25498](https://github.com/ionic-team/ionic-framework/issues/25498)) ([1a8d23d](https://github.com/ionic-team/ionic-framework/commit/1a8d23da8125d54c3119eacb51206f7541c9f410)), closes [#25484](https://github.com/ionic-team/ionic-framework/issues/25484) [#25483](https://github.com/ionic-team/ionic-framework/issues/25483) +* **overlays:** focus is not moved if active element is in overlay ([#25481](https://github.com/ionic-team/ionic-framework/issues/25481)) ([dcc2da2](https://github.com/ionic-team/ionic-framework/commit/dcc2da2800e69d938b4a62db436d9f07d9663dce)), closes [#24127](https://github.com/ionic-team/ionic-framework/issues/24127) [#24820](https://github.com/ionic-team/ionic-framework/issues/24820) +* **refresher:** quickly swiping down no longer causes duplicate refresh ([#25476](https://github.com/ionic-team/ionic-framework/issues/25476)) ([3abfa78](https://github.com/ionic-team/ionic-framework/commit/3abfa780ccb32484b4d9f1b509e7ab910dfb901a)), closes [#25418](https://github.com/ionic-team/ionic-framework/issues/25418) +* **vue:** adding class to IonPage no longer hides component ([#25490](https://github.com/ionic-team/ionic-framework/issues/25490)) ([cbaa971](https://github.com/ionic-team/ionic-framework/commit/cbaa9711f094975569e2fcb28060f8e456804073)) +* **vue:** components have correct type definitions ([#25499](https://github.com/ionic-team/ionic-framework/issues/25499)) ([b1821e9](https://github.com/ionic-team/ionic-framework/commit/b1821e9d0a55f20f74696f119de724ab70647977)), closes [#25485](https://github.com/ionic-team/ionic-framework/issues/25485) -### Features -* **events:** handler argument is optional in unsubscribe() ([8878e70](https://github.com/driftyco/ionic/commit/8878e70)), closes [#8235](https://github.com/driftyco/ionic/issues/8235) -* **haptic:** add haptic/taptic support to toggle/range/picker ([713e2a1](https://github.com/driftyco/ionic/commit/713e2a1)) -* **infinite-scroll:** it can be enabled/disabled from a ng input ([#8385](https://github.com/driftyco/ionic/issues/8385)) ([fd5cdf0](https://github.com/driftyco/ionic/commit/fd5cdf0)), closes [#8380](https://github.com/driftyco/ionic/issues/8380) -### Performance Improvements +## [6.1.10](https://github.com/ionic-team/ionic-framework/compare/v6.1.9...v6.1.10) (2022-06-15) -* **searchbar:** searchbar animation is disabled by default ([d03182e](https://github.com/driftyco/ionic/commit/d03182e)), closes [#6023](https://github.com/driftyco/ionic/issues/6023) +### Bug Fixes +* **angular:** router compatibility with Angular 12/13 ([#25456](https://github.com/ionic-team/ionic-framework/issues/25456)) ([7b105a3](https://github.com/ionic-team/ionic-framework/commit/7b105a3471e5bc588ba63f820b707e131c878b6f)), closes [#25448](https://github.com/ionic-team/ionic-framework/issues/25448) +* **fab-button:** improve ripple effect behavior on click ([#25413](https://github.com/ionic-team/ionic-framework/issues/25413)) ([efdaf90](https://github.com/ionic-team/ionic-framework/commit/efdaf90c5a767211e0034bab7cce5bd463ff5aa0)), closes [#21772](https://github.com/ionic-team/ionic-framework/issues/21772) +* **modal:** backdrop animation when backdropBreakpoint is 1 ([#25430](https://github.com/ionic-team/ionic-framework/issues/25430)) ([c10df52](https://github.com/ionic-team/ionic-framework/commit/c10df52f39c527dd7e03176c56a2e6cb0ebe455f)), closes [#25402](https://github.com/ionic-team/ionic-framework/issues/25402) +* **modal:** status bar color now correct with sheet modal ([#25424](https://github.com/ionic-team/ionic-framework/issues/25424)) ([377c4f5](https://github.com/ionic-team/ionic-framework/commit/377c4f597b972818d90132017d50c33074ddadab)), closes [#20501](https://github.com/ionic-team/ionic-framework/issues/20501) +* **picker-column-internal:** switching off an input mode column preserves scroll ([#25467](https://github.com/ionic-team/ionic-framework/issues/25467)) ([989429d](https://github.com/ionic-team/ionic-framework/commit/989429d65cf57ef8fb69854639f8eac1a12369bc)) +* **popover:** ensure popover does not go offscreen when adjusting top position ([#25350](https://github.com/ionic-team/ionic-framework/issues/25350)) ([6926538](https://github.com/ionic-team/ionic-framework/commit/692653842b43b5e36c51163f8261fde3b5bea40d)), closes [#25349](https://github.com/ionic-team/ionic-framework/issues/25349) - -# [2.0.0-rc.0](https://github.com/driftyco/ionic/compare/v2.0.0-beta.11...v2.0.0-rc.0) (2016-09-28) -RC0 requires changes to the structure of your app. To get started updating your app see the [Steps to Upgrade](#steps-to-upgrade-to-rc0) below. -* Ionic 2 API finalized for `2.0.0` release -* Angular `2.0.0` final! -* `ionViewCanEnter` / `ionViewCanLeave` lifecycle events -* Floating Action Button (FAB) lists -* Ahead of Time (AoT) compiler ready -* Components can now individually set a mode, which means an app can mix and match iOS / Material Design / Windows Platform modes if that’s desired -* Typescript 2.0 -* `@types` support for third-party libraries -* Move away from `gulp` ([ionic-gulp-tasks](https://github.com/driftyco/ionic-gulp-tasks)) to `npm scripts` ([ionic-app-scripts](https://github.com/driftyco/ionic-app-scripts)) -* Use [Rollup](http://rollupjs.org) for bundling instead of `browserify` or `webpack` -### BREAKING CHANGES +## [6.1.9](https://github.com/ionic-team/ionic-framework/compare/v6.1.8...v6.1.9) (2022-06-08) -* Angular upgrade to [2.0.0](https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html) -* [Renamed Lifecycle events](#lifecycle-events-renamed). -* Storage has been removed from `ionic-angular` and placed into a separate module, `@ionic/storage`. Starters have been updated to add this, make sure to add it to your `package.json` if you’re using the storage system. See more [details here](#storage). -* Nav transitions are queued. For more info on what this means for you see [this section](#nav-transitions). -* Removed Tabs `preloadTabs` ability. This is no longer needed with the Ahead of Time (AoT) compiler. -* Icons in buttons require an attribute on the parent button in order to style them. -* Platform and mode CSS classes have been moved from the `` element to the `` element. -* Select’s `alertOptions` input has been renamed to `selectOptions`. See more [details here](#select-changes). -* Colors should be passed in the `color` input on components, not added individually as an attribute on the component. See more [details here](#component-colors). -* buttons: ` - ``` +* **core:** @axe-core/playwright should be a devDependency ([#25244](https://github.com/ionic-team/ionic-framework/issues/25244)) ([617ec48](https://github.com/ionic-team/ionic-framework/commit/617ec48265157d1502c443395472c21ebdb2989e)), closes [#25242](https://github.com/ionic-team/ionic-framework/issues/25242) +* **item:** counter has appropriate contrast ([#25266](https://github.com/ionic-team/ionic-framework/issues/25266)) ([750be33](https://github.com/ionic-team/ionic-framework/commit/750be33772e9ba71a3cda35709d17b7912aa68e2)), closes [#25262](https://github.com/ionic-team/ionic-framework/issues/25262) +* **modal:** add canDismiss input binding for angular ([#25240](https://github.com/ionic-team/ionic-framework/issues/25240)) ([bdf0383](https://github.com/ionic-team/ionic-framework/commit/bdf0383b0c9ec4595129a2633760fd4f4788df90)), closes [#25239](https://github.com/ionic-team/ionic-framework/issues/25239) +* **spinner:** alignment is now correct in rtl ([#25260](https://github.com/ionic-team/ionic-framework/issues/25260)) ([e3c996d](https://github.com/ionic-team/ionic-framework/commit/e3c996dea878a8dd276a0ca99f59b330125f9b75)) - becomes - ``` - - ``` -2. Icon left of text in a button - ``` - - ``` - becomes +## [6.1.4](https://github.com/ionic-team/ionic-framework/compare/v6.1.3...v6.1.4) (2022-05-04) - ``` - - ``` -3. Icon right of text in a button +### Bug Fixes - ``` - - ``` +* **datetime:** arrow navigation respects min/max values ([#25182](https://github.com/ionic-team/ionic-framework/issues/25182)) ([6946e09](https://github.com/ionic-team/ionic-framework/commit/6946e09815da605e37ff8e4d613a14288ea35fb0)), closes [#25073](https://github.com/ionic-team/ionic-framework/issues/25073) +* **datetime:** hide footer when month-year picker is open ([#25205](https://github.com/ionic-team/ionic-framework/issues/25205)) ([aa5e1b9](https://github.com/ionic-team/ionic-framework/commit/aa5e1b962150b9ed9629812ec566873784526c83)) +* **modal:** card modal can now be swiped to close on the content ([#25185](https://github.com/ionic-team/ionic-framework/issues/25185)) ([7633ddb](https://github.com/ionic-team/ionic-framework/commit/7633ddbc845745dfe36b5c8025c54c22c083c2f4)), closes [#22046](https://github.com/ionic-team/ionic-framework/issues/22046) +* **modal:** card modal no longer dismisses from content with refresher ([#25227](https://github.com/ionic-team/ionic-framework/issues/25227)) ([c4f811f](https://github.com/ionic-team/ionic-framework/commit/c4f811f1dde0dcbcdaebaa3a4f5ef87e192b5cc5)) +* **react:** useIonModal/useIonPopover dismiss accepts data and role ([#25209](https://github.com/ionic-team/ionic-framework/issues/25209)) ([68b2f8b](https://github.com/ionic-team/ionic-framework/commit/68b2f8bfe10946580b996e48c4ec1e2df94b8d49)), closes [#25208](https://github.com/ionic-team/ionic-framework/issues/25208) +* **vue:** switching between tabs and going back resolves to correct route ([#25206](https://github.com/ionic-team/ionic-framework/issues/25206)) ([b4ba70e](https://github.com/ionic-team/ionic-framework/commit/b4ba70ea148d4f8fc7475d3de798b485238470c8)), closes [#24303](https://github.com/ionic-team/ionic-framework/issues/24303) - becomes - ``` - - ``` -4. Item option buttons - the `icon-left` attribute should still be added to the `` container and not the button itself. -5. `menuToggle` buttons should not get the `icon-only` attribute -**Reason for this change:** -There was a noticeable performance decrease from us reading in each button to determine where icons were placed and how to style them. This change improves performance. This adds styling so that the buttons and icons will be padded a certain amount, but the user is free to leave these attributes off and style the components themselves. +## [6.1.3](https://github.com/ionic-team/ionic-framework/compare/v6.1.2...v6.1.3) (2022-04-27) -#### Update CSS Link Tags -Ionic stylesheets are no longer dynamically loaded per platform. Instead there will be one CSS file to import. Note that future build processes will slim down the CSS file even further to only include component CSS actually used. +### Bug Fixes -In the head of your `index.html` file, replace: +* **core:** inherit aria attributes on host elements ([#25156](https://github.com/ionic-team/ionic-framework/issues/25156)) ([611832b](https://github.com/ionic-team/ionic-framework/commit/611832b0d51da295c1bf2897972c4e8baf6e23a3)), closes [#20127](https://github.com/ionic-team/ionic-framework/issues/20127) +* **datetime:** if no default value, don't highlight active day until one is selected ([#25151](https://github.com/ionic-team/ionic-framework/issues/25151)) ([9896939](https://github.com/ionic-team/ionic-framework/commit/98969395abd400cc44d2d3825581a63eb64a56e0)) +* **picker-column-internal:** center active item when rapidly opened ([#25155](https://github.com/ionic-team/ionic-framework/issues/25155)) ([8e17fa9](https://github.com/ionic-team/ionic-framework/commit/8e17fa9d5f9b00139693e34bc93b1f9c718ea3cf)), closes [#25154](https://github.com/ionic-team/ionic-framework/issues/25154) +* **select:** avoid duplicate dialogs and backdrops when clicking ([#25175](https://github.com/ionic-team/ionic-framework/issues/25175)) ([70d2784](https://github.com/ionic-team/ionic-framework/commit/70d278414eb5124d17c5ffaba5231c6bfd285656)), closes [#25126](https://github.com/ionic-team/ionic-framework/issues/25126) +* **vue:** canDismiss definition is now exposed ([#25195](https://github.com/ionic-team/ionic-framework/issues/25195)) ([e5e0e24](https://github.com/ionic-team/ionic-framework/commit/e5e0e24f76c15c1a49f759b1a140e337f5393edd)) +* **vue:** replacing routes across nested outlets preserves previous route info ([#25171](https://github.com/ionic-team/ionic-framework/issues/25171)) ([7b71607](https://github.com/ionic-team/ionic-framework/commit/7b716076b66fbb5bd4620ea8ba74318bbbc1b7e8)), closes [#25017](https://github.com/ionic-team/ionic-framework/issues/25017) -``` - - - - -``` -With: -``` - -``` -#### Sass Import +## [6.1.2](https://github.com/ionic-team/ionic-framework/compare/v6.1.1...v6.1.2) (2022-04-20) -The default configuration will be updated, but if your existing app is using Sass and importing Ionic Sass files directly you’ll need to update the `includePaths` of Node Sass. -``` -node_modules/ionic-angular/themes -``` +### Bug Fixes -Next, to include Ionic into your custom Sass file you’ll need to update the Ionic import to this: +* **datetime:** time picker display matches dynamically set value ([#25010](https://github.com/ionic-team/ionic-framework/issues/25010)) ([11493a0](https://github.com/ionic-team/ionic-framework/commit/11493a086a4e3f2a4e9d3acdf5a9d49e810a5ef0)), closes [#24967](https://github.com/ionic-team/ionic-framework/issues/24967) +* **modal:** add canDismiss option to modal options ([#25144](https://github.com/ionic-team/ionic-framework/issues/25144)) ([2984ddf](https://github.com/ionic-team/ionic-framework/commit/2984ddf111b6acbd9e47ed90830b6522179b6cee)), closes [#25143](https://github.com/ionic-team/ionic-framework/issues/25143) -``` -@import "ionic.theme.default"; -``` -#### Typings -Any type definitions for third party libraries that are included via the `typings` tool and are included in the the `typings.json` file should be updated to use `npm @types`. An example of how this looks is: -``` -npm install @types/lodash --save-dev --save-exact -``` +## [6.1.1](https://github.com/ionic-team/ionic-framework/compare/v6.1.0...v6.1.1) (2022-04-15) -Delete the `typings.json` file, and the `typings` directory. +### Bug Fixes -#### Storage +* **all:** import path is now correct when using ionic in a stencil app ([#25123](https://github.com/ionic-team/ionic-framework/issues/25123)) ([1b407ab](https://github.com/ionic-team/ionic-framework/commit/1b407abdf5d8a2a18b6a2b9daca2d58b7b0f782b)), closes [#25122](https://github.com/ionic-team/ionic-framework/issues/25122) +* **datetime:** account for 30 and 45 minute timezones when getting current date ([#25120](https://github.com/ionic-team/ionic-framework/issues/25120)) ([96b2003](https://github.com/ionic-team/ionic-framework/commit/96b2003b2bd5089d1faafe262e96c7445c5c3349)), closes [#25112](https://github.com/ionic-team/ionic-framework/issues/25112) +* **modal, popover:** do not dismiss when ionDismiss is emitted from select ([#25125](https://github.com/ionic-team/ionic-framework/issues/25125)) ([90115db](https://github.com/ionic-team/ionic-framework/commit/90115db98540a5fc67b611ac2742d1221b8e96ff)), closes [#25124](https://github.com/ionic-team/ionic-framework/issues/25124) -The storage utilities have been moved outside of the framework to a separate library called `@ionic/storage`. -This library can be installed by executing the following command: -``` -npm install @ionic/storage --save --save-exact -``` -It must be included in the app's `NgModule` list of `providers`: -``` -import { Storage } from '@ionic/storage'; +# [6.1.0 Vanadium](https://github.com/ionic-team/ionic-framework/compare/v6.0.16...v6.1.0) (2022-04-13) -... -@NgModule({ - ... - providers: [Storage] -}) +### Bug Fixes -``` +* **accordion-group:** only allow keyboard interaction if header is focused ([#25091](https://github.com/ionic-team/ionic-framework/issues/25091)) ([e1b555f](https://github.com/ionic-team/ionic-framework/commit/e1b555f286956574876924068304fc44a78c027c)) +* **datetime:** resolve warnings when importing into Stencil app ([#25106](https://github.com/ionic-team/ionic-framework/issues/25106)) ([a61c004](https://github.com/ionic-team/ionic-framework/commit/a61c004fb0c10d9fb0eca0987edf798386251ec2)) +* **menu:** preserve scroll position when focusing on open ([#25044](https://github.com/ionic-team/ionic-framework/issues/25044)) ([da89684](https://github.com/ionic-team/ionic-framework/commit/da896848776105ba1f7035c4412495786199bade)) +* **popover:** only focus trap ion-item children ([#24990](https://github.com/ionic-team/ionic-framework/issues/24990)) ([0cd06a6](https://github.com/ionic-team/ionic-framework/commit/0cd06a675474e1893b4c0801fab8ab79813537c8)), closes [#24633](https://github.com/ionic-team/ionic-framework/issues/24633) +* **ripple-effect:** ripple displays on click or touch ([#25102](https://github.com/ionic-team/ionic-framework/issues/25102)) ([2a313e9](https://github.com/ionic-team/ionic-framework/commit/2a313e91179e19660a758470ed2218bbcf03e0bb)), closes [#25094](https://github.com/ionic-team/ionic-framework/issues/25094) +* **vue:** ensure that only tab pages get added to the tab navigation stack ([#25045](https://github.com/ionic-team/ionic-framework/issues/25045)) ([a0054a7](https://github.com/ionic-team/ionic-framework/commit/a0054a7cbd52def24c18fd2dadfd2e49a42b8980)), closes [#24859](https://github.com/ionic-team/ionic-framework/issues/24859) -It can then be injected into any class that needs access to it: -``` -import { Storage } from '@ionic/storage'; +### Features -... +* **content, reorder-group, header, footer, infinite-scroll, refresher:** add custom scroll target to improve compatibility with virtual scroll ([#24883](https://github.com/ionic-team/ionic-framework/issues/24883)) ([2a438da](https://github.com/ionic-team/ionic-framework/commit/2a438da010ddd4d4211e1879e27d7b28409daaa2)), closes [#23437](https://github.com/ionic-team/ionic-framework/issues/23437) +* **datetime:** isDateEnabled to enable/disable specific days ([#24898](https://github.com/ionic-team/ionic-framework/issues/24898)) ([e932a04](https://github.com/ionic-team/ionic-framework/commit/e932a042237e6f44bf278bcbd895d8569fc17348)), closes [#24209](https://github.com/ionic-team/ionic-framework/issues/24209) +* **item:** counter formatter to customize counter text display ([#24336](https://github.com/ionic-team/ionic-framework/issues/24336)) ([171020e](https://github.com/ionic-team/ionic-framework/commit/171020e9d200ccfdef0f01c427b295bb50dd1fef)), closes [#24327](https://github.com/ionic-team/ionic-framework/issues/24327) +* **modal:** ability to programmatically set current sheet breakpoint ([#24648](https://github.com/ionic-team/ionic-framework/issues/24648)) ([3145c76](https://github.com/ionic-team/ionic-framework/commit/3145c76934ac711038f9dcba98a385dfbe754953)), closes [#23917](https://github.com/ionic-team/ionic-framework/issues/23917) +* **modal:** add canDismiss property to manage modal dismissing ([#24928](https://github.com/ionic-team/ionic-framework/issues/24928)) ([4b21958](https://github.com/ionic-team/ionic-framework/commit/4b21958ec57019afcde786598880e1f8edada2b1)), closes [#22297](https://github.com/ionic-team/ionic-framework/issues/22297) +* **range:** add knobMoveStart and knobMoveEnd events ([#25011](https://github.com/ionic-team/ionic-framework/issues/25011)) ([f5cb1f8](https://github.com/ionic-team/ionic-framework/commit/f5cb1f8444ba050042e788f9f9ec7b6309bf1b60)) +* **select:** add event for when overlay is dismissed ([#24400](https://github.com/ionic-team/ionic-framework/issues/24400)) ([b835b7c](https://github.com/ionic-team/ionic-framework/commit/b835b7c0c7840f41c54f96743cc0a779ff474ab6)) -export class MyAwesomePage { - constructor(public storage: Storage) { - } - ionViewDidEnter() { - this.storage.get('myKey').then( (value:any) => { - console.log('My value is:', value); - }); - } -} -``` -#### Deployment Changes +## [6.0.16](https://github.com/ionic-team/ionic-framework/compare/v6.0.15...v6.0.16) (2022-04-08) + + +### Bug Fixes + +* **angular:** button components now route correctly without reload ([#25071](https://github.com/ionic-team/ionic-framework/issues/25071)) ([fb994fa](https://github.com/ionic-team/ionic-framework/commit/fb994fa9a7721a3575fb8d123be34aea4bf076a4)) -`ionic-angular` package includes es5 code with es2015 module import/exports, `umd` modules, and pure `es2015` code. The `package.json` is set up using the `main` and `module` options to make this work seamlessly. -### Steps to Upgrade to RC0 -We are providing 2 ways to update your app with this release: [Copying your Project to a New Project](#copying-your-project-to-a-new-project) and [Modifying your Existing Project](#modifying-your-existing-project). The first way will guide you through creating a new Ionic 2 project and copying your project files to it. This is the easiest way to update your app in our opinion. The second way will step through how to update your existing project. There are a lot of steps involved with this way, and we recommend viewing our conference app for any clarification if you choose this way. This is it! We don’t plan on making any more major API changes after this version. -Note: For details on NgModules you can read the Angular docs on them [here](https://angular.io/docs/ts/latest/guide/ngmodule.html) +## [6.0.15](https://github.com/ionic-team/ionic-framework/compare/v6.0.14...v6.0.15) (2022-04-06) -#### Copying your Project to a New Project -1. Ensure that you're using npm version 3.x by running: +### Bug Fixes - ``` - npm --version - ``` +* **angular:** item styling when control has value ([#24932](https://github.com/ionic-team/ionic-framework/issues/24932)) ([eea25d0](https://github.com/ionic-team/ionic-framework/commit/eea25d091d7eb319d6ec1de8b793881d3a10949b)), closes [#23809](https://github.com/ionic-team/ionic-framework/issues/23809) +* **angular:** routerLink allows opening in a new tab for link elements ([#25014](https://github.com/ionic-team/ionic-framework/issues/25014)) ([b010f07](https://github.com/ionic-team/ionic-framework/commit/b010f077fe51992dd9dd8ced69769a8eb91ac055)), closes [#24413](https://github.com/ionic-team/ionic-framework/issues/24413) +* **datetime:** warn when parsing an invalid date value ([#25049](https://github.com/ionic-team/ionic-framework/issues/25049)) ([982dc85](https://github.com/ionic-team/ionic-framework/commit/982dc853befe8ccf54163a0b145e563da06f5dc1)) +* **picker-column:** column renders correctly with selected value ([#24988](https://github.com/ionic-team/ionic-framework/issues/24988)) ([8318659](https://github.com/ionic-team/ionic-framework/commit/83186598ed6cf08b0f0421076c4afb3ab53e1e57)), closes [#17664](https://github.com/ionic-team/ionic-framework/issues/17664) +* **popover:** allow arrow on desktop ([#25056](https://github.com/ionic-team/ionic-framework/issues/25056)) ([bcd00c7](https://github.com/ionic-team/ionic-framework/commit/bcd00c7a6ebb6a00193f04458976ff8b86395215)) - If you are not running 3.x, the easiest way to update is to install the [latest version of Node.js](https://nodejs.org/en/). - You can also update `npm` by following [these instructions](https://docs.npmjs.com/getting-started/installing-node#updating-npm). -2. Install the latest Ionic CLI: - **Important:** if you have installed the `beta` cli you should run `npm uninstall -g ionic` first. You need version `2.1.0` for this release. Check your `cli` version by running `ionic -v` in the command line. - ``` - npm install -g ionic - ``` +## [6.0.14](https://github.com/ionic-team/ionic-framework/compare/v6.0.13...v6.0.14) (2022-03-30) -3. Create a new Ionic 2 RC0 app: - ``` - ionic start --v2 myApp - ``` +### Bug Fixes -4. Copy/paste all of your pages from `app/pages/` of your `beta.11` app to `src/pages/`, providers from `app/providers` to `src/providers`, pipes from `app/pipes` to `src/pipes` and any custom components to `src/components` in the new RC0 app. +* **react:** treeshake ionic/core bundle ([#24989](https://github.com/ionic-team/ionic-framework/issues/24989)) ([a296ca8](https://github.com/ionic-team/ionic-framework/commit/a296ca875c18ec01bfc57972571e95a6d79f5678)), closes [#24497](https://github.com/ionic-team/ionic-framework/issues/24497) -5. Modify all `templateUrl`'s to be relative to the `.ts` file. For example in `app.component.ts` the url should change from `build/app.html` to `app.html` and in a page referencing `about.html` from `build/pages/about/about.html` to `about.html`. -6. Import and add each of your pages to the `declarations` array and the `entryComponents` array in `src/app/app.module.ts`. -7. Import and add each of your custom components and pipes to the `declarations` array in `src/app/app.module.ts`. -8. Import and add each of your providers to the `providers` array in `src/app/app.module.ts`. -9. Remove any use of the `providers`, `pipes` and `directives` arrays in `@Component`. +## [6.0.13](https://github.com/ionic-team/ionic-framework/compare/v6.0.12...v6.0.13) (2022-03-23) -10. Change any uses of the `private` TypeScript keyword to `public` ONLY for component variables that are needed in the associated template. - Note: For details as to why this change has to be made, there is a discussion about it [here](https://forum.ionicframework.com/t/rc0-typescript-private-vs-public-keyword/64863/4?u=mhartington). +### Bug Fixes -11. Change `