Compare commits
40 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d9d11ede0a | ||
|
|
c569761c89 | ||
|
|
e501ac001c | ||
|
|
01e028b789 | ||
|
|
0ac451998c | ||
|
|
c267b43396 | ||
|
|
d425e6d4f3 | ||
|
|
ad02058ef3 | ||
|
|
5a2b87cbcc | ||
|
|
a8749929e0 | ||
|
|
550e166d9c | ||
|
|
beb46bf9de | ||
|
|
6f910576e2 | ||
|
|
678da3db36 | ||
|
|
29bef31e0f | ||
|
|
3dc319e6e9 | ||
|
|
02e9902781 | ||
|
|
c0aea33576 | ||
|
|
80d8c66766 | ||
|
|
0385c0862c | ||
|
|
76c8b94e2a | ||
|
|
742d4295dd | ||
|
|
cdb0627c87 | ||
|
|
c9bddbdb4c | ||
|
|
30b548b167 | ||
|
|
6ffbdbb3b2 | ||
|
|
f6ec23774b | ||
|
|
c3c8c8e5ab | ||
|
|
dca31f5940 | ||
|
|
c896e7fde4 | ||
|
|
bc981f252b | ||
|
|
7ad84cbbc5 | ||
|
|
e0b2bc5ece | ||
|
|
67eb272cf2 | ||
|
|
114fe28f3c | ||
|
|
9f51bdc145 | ||
|
|
07941a59ba | ||
|
|
6fc002458a | ||
|
|
56a39ff9c8 | ||
|
|
16aa9770bb |
167
.github/CONTRIBUTING.md
vendored
@@ -37,7 +37,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:
|
||||
|
||||
## Contributing Etiquette
|
||||
|
||||
Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/main/CODE_OF_CONDUCT.md) for information on our rules of conduct.
|
||||
Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic-framework/blob/main/CODE_OF_CONDUCT.md) for information on our rules of conduct.
|
||||
|
||||
|
||||
## Creating an Issue
|
||||
@@ -50,9 +50,9 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic
|
||||
|
||||
* Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs: reply" and receives no further replies from the author of the issue for more than 14 days, it will be closed.
|
||||
|
||||
* 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/ionic-team/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.
|
||||
* 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/ionic-team/ionic-framework/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/ionic-team/ionic/issues/new/choose) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
|
||||
* Next, [create a new issue](https://github.com/ionic-team/ionic-framework/issues/new/choose) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
|
||||
|
||||
|
||||
## Creating a Good Code Reproduction
|
||||
@@ -63,7 +63,7 @@ A code reproduction is a small application that is built to demonstrate a partic
|
||||
|
||||
### Why Should You Create a Reproduction?
|
||||
|
||||
A code reproduction of the issue you are experiencing helps us better isolate the cause of the problem. This is an important first step to getting any bug fixed!
|
||||
A code reproduction of the issue you are experiencing helps us better isolate the cause of the problem. This is an important first step to getting any bug fixed!
|
||||
|
||||
Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed. In other words, creating a code reproduction of the issue helps us help you.
|
||||
|
||||
@@ -84,7 +84,7 @@ Without a reliable code reproduction, it is unlikely we will be able to resolve
|
||||
|
||||
## Creating a Pull Request
|
||||
|
||||
Before creating a pull request, please read our requirements that explains the minimal details to have your PR considered and merged into the codebase.
|
||||
Before creating a pull request, please read our requirements that explains the minimal details to have your PR considered and merged into the codebase.
|
||||
|
||||
### Requirements
|
||||
1. PRs must reference an existing issue that describes the issue or feature being submitted.
|
||||
@@ -93,7 +93,7 @@ Before creating a pull request, please read our requirements that explains the m
|
||||
|
||||
> Note: We appreciate you taking the time to contribute! Before submitting a pull request, please take the time to comment on the issue you are wanting to resolve. This helps us prevent duplicate effort or advise if the team is already addressing the issue.
|
||||
|
||||
* Looking for an issue to fix? Look through our issues with the [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
|
||||
* Looking for an issue to fix? Look through our issues with the [help wanted](https://github.com/ionic-team/ionic-framework/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
|
||||
|
||||
### Setup
|
||||
|
||||
@@ -123,12 +123,126 @@ Before creating a pull request, please read our requirements that explains the m
|
||||
|
||||
#### Preview Changes
|
||||
|
||||
##### Previewing in this repository
|
||||
|
||||
1. Run `npm start` from within the `core` directory.
|
||||
2. A browser should open at `http://localhost:3333/`.
|
||||
3. From here, navigate to one of the component's tests to preview your changes.
|
||||
4. If a test showing your change doesn't exist, [add a new test or update an existing one](#modifying-tests).
|
||||
5. To test in RTL mode, once you are in the desired component's test, add `?rtl=true` at the end of the url; for example: `http://localhost:3333/src/components/alert/test/basic?rtl=true`.
|
||||
|
||||
##### Previewing in an external app
|
||||
|
||||
We can use `npm pack` to test Ionic Framework changes in an external app outside of this repository. Follow the below steps based on your framework.
|
||||
|
||||
###### JavaScript
|
||||
|
||||
Run the following commands to build the core directory and pack the changes:
|
||||
|
||||
```bash
|
||||
cd core
|
||||
npm i
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
```
|
||||
|
||||
Then, in your Ionic Framework JavaScript app, run the following command to use the built package with the `.tgz` file that was created:
|
||||
|
||||
```bash
|
||||
npm install file:/~/ionic-core-7.0.1.tgz
|
||||
```
|
||||
|
||||
|
||||
###### Angular
|
||||
|
||||
Run the following commands to build the core & angular directories and pack the changes:
|
||||
|
||||
```bash
|
||||
cd core
|
||||
npm i
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
|
||||
cd ../angular
|
||||
npm i
|
||||
npm run sync
|
||||
npm run build
|
||||
cd dist/
|
||||
npm pack --pack-destination ~
|
||||
```
|
||||
|
||||
Then, in your Ionic Framework Angular app, run the following commands to use the built packages with the `.tgz` files that were created:
|
||||
|
||||
```bash
|
||||
rm -rf .angular/
|
||||
npm install file:/~/ionic-core-7.0.1.tgz
|
||||
npm install file:/~/ionic-angular-7.0.1.tgz
|
||||
```
|
||||
|
||||
|
||||
###### React
|
||||
|
||||
Run the following commands to build the core & react directories and pack the changes:
|
||||
|
||||
```bash
|
||||
cd core
|
||||
npm i
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
|
||||
cd ../packages/react
|
||||
npm i
|
||||
npm run sync
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
|
||||
cd ../react-router
|
||||
npm i
|
||||
npm run sync
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
```
|
||||
|
||||
Then, in your Ionic Framework React app, run the following commands to use the built packages with the `.tgz` files that were created:
|
||||
|
||||
```bash
|
||||
npm install file:/~/ionic-core-7.0.1.tgz
|
||||
npm install file:/~/ionic-react-7.0.1.tgz
|
||||
npm install file:/~/ionic-react-router-7.0.1.tgz
|
||||
```
|
||||
|
||||
|
||||
##### Vue
|
||||
|
||||
Run the following commands to build the core & vue directories and pack the changes:
|
||||
|
||||
```bash
|
||||
cd core
|
||||
npm i
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
|
||||
cd ../packages/vue
|
||||
npm i
|
||||
npm run sync
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
|
||||
cd ../vue-router
|
||||
npm i
|
||||
npm run sync
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
```
|
||||
|
||||
Then, in your Ionic Framework Vue app, run the following commands to use the built packages with the `.tgz` files that were created:
|
||||
|
||||
```bash
|
||||
npm install file:/~/ionic-core-7.0.1.tgz
|
||||
npm install file:/~/ionic-vue-7.0.1.tgz
|
||||
npm install file:/~/ionic-vue-router-7.0.1.tgz
|
||||
```
|
||||
|
||||
|
||||
#### Lint Changes
|
||||
|
||||
@@ -179,9 +293,9 @@ Before creating a pull request, please read our requirements that explains the m
|
||||
#### Modifying Files
|
||||
|
||||
1. Locate the files inside the relevant root directory:
|
||||
- Angular: `/angular/src`
|
||||
- React: `/packages/react/src`
|
||||
- Vue: `/packages/vue/src`
|
||||
- Angular: [`/angular/src`](/angular/src)
|
||||
- React: [`/packages/react/src`](/packages/react/src)
|
||||
- Vue: [`/packages/vue/src`](/packages/vue/src)
|
||||
2. Make your changes to the files. If the change is overly complex or out of the ordinary, add comments so we can understand the changes.
|
||||
3. Run lint on the directory and make sure there are no errors.
|
||||
4. Build the project.
|
||||
@@ -192,42 +306,45 @@ Before creating a pull request, please read our requirements that explains the m
|
||||
|
||||
#### Preview Changes
|
||||
|
||||
1. Run `npm run start` inside of the relevant test app directory. This will sync your previously built changes into a test Ionic app:
|
||||
- Angular: `/angular/test-app`
|
||||
- React: `/packages/react/test-app`
|
||||
- Vue: `/packages/vue/test-app`
|
||||
2. In a browser, navigate to the page you wish to test.
|
||||
3. Alternatively, create a new page if you need to test something that is not already there.
|
||||
##### Previewing in this repository
|
||||
|
||||
Follow the steps in the test directory for each framework:
|
||||
- Angular: [`/angular/test`](/angular/test/README.md)
|
||||
- React: [`/packages/react/test`](/packages/react/test/README.md)
|
||||
- Vue: [`/packages/vue/test`](/packages/vue/test/README.md)
|
||||
|
||||
##### Previewing in an external app
|
||||
|
||||
Follow the steps to [preview changes in core](#preview-changes).
|
||||
|
||||
#### Lint Changes
|
||||
|
||||
1. Run `npm run lint` to lint the TypeScript in the relevant directory:
|
||||
- Angular: `/angular/src`
|
||||
- React: `/packages/react/src`
|
||||
- Vue: `/packages/vue/src`
|
||||
- Angular: [`/angular/src`](/angular/src)
|
||||
- React: [`/packages/react/src`](/packages/react/src)
|
||||
- Vue: [`/packages/vue/src`](/packages/vue/src)
|
||||
2. If there are lint errors, run `npm run lint.fix` to automatically fix any errors. Repeat step 1 to ensure the errors have been fixed, and manually fix them if not.
|
||||
|
||||
#### Modifying Tests
|
||||
|
||||
1. Locate the test to modify inside the relevant test app directory:
|
||||
- Angular: `/angular/test-app/e2e/src`
|
||||
- React: `/packages/react/test-app/cypress/integration`
|
||||
- Vue: `/packages/vue/test-app/tests/e2e`
|
||||
1. Locate the e2e test to modify inside the relevant test app directory:
|
||||
- Angular: [`/angular/test/base/e2e/src`](/angular/test/base/e2e/src)
|
||||
- React: [`/packages/react/test/base/tests/e2e/specs`](/packages/react/test/base/tests/e2e/specs)
|
||||
- Vue: [`/packages/vue/test/base/tests/e2e/specs`](/packages/vue/test/base/tests/e2e/specs)
|
||||
2. If a test exists, modify the test by adding an example to reproduce the problem fixed or feature added.
|
||||
3. If a new test is needed, copy an existing test, rename it, and edit the content in the test file.
|
||||
4. Run `npm run test` to run your tests.
|
||||
|
||||
#### Building Changes
|
||||
|
||||
1. Once all changes have been made, run `npm run build` inside of the root directory. This will add your changes to any auto-generated files, if necessary.
|
||||
1. Once all changes have been made, run `npm run build` inside of the package's root directory. This will add your changes to any auto-generated files, if necessary.
|
||||
2. Review the changes and, if everything looks correct, [commit](#commit-message-format) the changes.
|
||||
3. Make sure the build has finished before committing. If you made changes to the documentation, properties, methods, or anything else that requires an update to a generate file, this needs to be committed.
|
||||
4. After the changes have been pushed, publish the branch and [create a pull request](#creating-a-pull-request).
|
||||
|
||||
### Submit Pull Request
|
||||
|
||||
1. [Create a new pull request](https://github.com/ionic-team/ionic/compare) with the `main` branch as the `base`. You may need to click on `compare across forks` to find your changes.
|
||||
1. [Create a new pull request](https://github.com/ionic-team/ionic-framework/compare) with the `main` branch as the `base`. You may need to click on `compare across forks` to find your changes.
|
||||
2. See the [Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) GitHub help article for more information.
|
||||
3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.
|
||||
|
||||
@@ -240,7 +357,7 @@ To expedite the process, please ensure that all feature PRs have an associated i
|
||||
|
||||
## Commit Message Guidelines
|
||||
|
||||
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/ionic-team/ionic/blob/main/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit).
|
||||
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/ionic-team/ionic-framework/blob/main/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit).
|
||||
|
||||
### Commit Message Format
|
||||
|
||||
|
||||
9
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -1,3 +1,7 @@
|
||||
Issue number: #
|
||||
|
||||
---------
|
||||
|
||||
<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing -->
|
||||
|
||||
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. -->
|
||||
@@ -9,11 +13,6 @@
|
||||
## What is the current behavior?
|
||||
<!-- Please describe the current behavior that you are modifying. -->
|
||||
|
||||
|
||||
<!-- Issues are required for both bug fixes and features. -->
|
||||
Issue URL:
|
||||
|
||||
|
||||
## What is the new behavior?
|
||||
<!-- Please describe the behavior or changes that are being added by this PR. -->
|
||||
|
||||
|
||||
@@ -22,6 +22,9 @@ runs:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16.x
|
||||
- name: Install latest npm
|
||||
run: npm install -g npm@latest
|
||||
shell: bash
|
||||
- name: Install Dependencies
|
||||
run: lerna bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
|
||||
shell: bash
|
||||
@@ -41,6 +44,6 @@ runs:
|
||||
env:
|
||||
NPM_TOKEN: ${{ inputs.token }}
|
||||
- name: Publish to NPM
|
||||
run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }}
|
||||
run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance
|
||||
shell: bash
|
||||
working-directory: ${{ inputs.working-directory }}
|
||||
|
||||
@@ -29,7 +29,7 @@ runs:
|
||||
shell: bash
|
||||
working-directory: ./angular/test
|
||||
- name: Install Dependencies
|
||||
run: npm install
|
||||
run: npm install --legacy-peer-deps
|
||||
shell: bash
|
||||
working-directory: ./angular/test/build/${{ inputs.app }}
|
||||
- name: Sync Built Changes
|
||||
|
||||
2
.github/workflows/build.yml
vendored
@@ -135,7 +135,7 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [ng14, ng15]
|
||||
apps: [ng14, ng15, ng16]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
4
.github/workflows/dev-build.yml
vendored
@@ -14,7 +14,7 @@ jobs:
|
||||
# as lerna will fail when there is a leading 0
|
||||
# See https://github.com/lerna/lerna/issues/2840
|
||||
- name: Install Dependencies
|
||||
run: npm ci --no-package-lock
|
||||
run: npm ci
|
||||
shell: bash
|
||||
- id: create-dev-hash
|
||||
name: Create Dev Hash
|
||||
@@ -24,6 +24,8 @@ jobs:
|
||||
|
||||
release-ionic:
|
||||
needs: [create-dev-hash]
|
||||
permissions:
|
||||
id-token: write
|
||||
uses: ./.github/workflows/release-ionic.yml
|
||||
with:
|
||||
tag: dev
|
||||
|
||||
4
.github/workflows/nightly.yml
vendored
@@ -17,7 +17,7 @@ jobs:
|
||||
# as lerna will fail when there is a leading 0
|
||||
# See https://github.com/lerna/lerna/issues/2840
|
||||
- name: Install Dependencies
|
||||
run: npm ci --no-package-lock
|
||||
run: npm ci
|
||||
shell: bash
|
||||
- id: create-nightly-hash
|
||||
name: Create Nightly Hash
|
||||
@@ -29,6 +29,8 @@ jobs:
|
||||
|
||||
release-ionic:
|
||||
needs: [create-nightly-hash]
|
||||
permissions:
|
||||
id-token: write
|
||||
uses: ./.github/workflows/release-ionic.yml
|
||||
with:
|
||||
tag: nightly
|
||||
|
||||
2
.github/workflows/release.yml
vendored
@@ -36,6 +36,8 @@ on:
|
||||
|
||||
jobs:
|
||||
release-ionic:
|
||||
permissions:
|
||||
id-token: write
|
||||
uses: ./.github/workflows/release-ionic.yml
|
||||
with:
|
||||
tag: ${{ inputs.tag }}
|
||||
|
||||
36
CHANGELOG.md
@@ -3,6 +3,42 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [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)
|
||||
|
||||
|
||||
|
||||
@@ -3,6 +3,22 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.0.4](https://github.com/ionic-team/ionic-framework/compare/v7.0.3...v7.0.4) (2023-04-26)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.3](https://github.com/ionic-team/ionic/compare/v7.0.2...v7.0.3) (2023-04-19)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.2](https://github.com/ionic-team/ionic/compare/v7.0.1...v7.0.2) (2023-04-12)
|
||||
|
||||
**Note:** Version bump only for package @ionic/angular
|
||||
|
||||
18
angular/package-lock.json
generated
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "@ionic/angular",
|
||||
"version": "7.0.2",
|
||||
"version": "7.0.4",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/angular",
|
||||
"version": "7.0.2",
|
||||
"version": "7.0.4",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ionic/core": "^7.0.2",
|
||||
"@ionic/core": "^7.0.4",
|
||||
"ionicons": "^7.0.0",
|
||||
"jsonc-parser": "^3.0.0",
|
||||
"tslib": "^2.3.0"
|
||||
@@ -1227,9 +1227,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@ionic/core": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.2.tgz",
|
||||
"integrity": "sha512-GxQsMmsyBGeK9khIPNR3zw3WvDZj3I0inKtPcd/s9hEnfndAlFFI9gckB7/zrp55xoknCRwqAYT8sGWze3sn2w==",
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.3.tgz",
|
||||
"integrity": "sha512-h2UpU3onHvI2e7HvHuCH4hXvXkG7gHImi5fwZYmTDt4MJbICEOH+lqznwcxbAIRaWZnVe+KDQrS1TyXSzri22g==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^3.2.1",
|
||||
"ionicons": "^7.1.0",
|
||||
@@ -8104,9 +8104,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@ionic/core": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.2.tgz",
|
||||
"integrity": "sha512-GxQsMmsyBGeK9khIPNR3zw3WvDZj3I0inKtPcd/s9hEnfndAlFFI9gckB7/zrp55xoknCRwqAYT8sGWze3sn2w==",
|
||||
"version": "7.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.3.tgz",
|
||||
"integrity": "sha512-h2UpU3onHvI2e7HvHuCH4hXvXkG7gHImi5fwZYmTDt4MJbICEOH+lqznwcxbAIRaWZnVe+KDQrS1TyXSzri22g==",
|
||||
"requires": {
|
||||
"@stencil/core": "^3.2.1",
|
||||
"ionicons": "^7.1.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/angular",
|
||||
"version": "7.0.2",
|
||||
"version": "7.0.4",
|
||||
"description": "Angular specific wrappers for @ionic/core",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -17,7 +17,7 @@
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/ionic-team/ionic.git"
|
||||
"url": "git+https://github.com/ionic-team/ionic-framework.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/ionic-team/ionic/issues"
|
||||
@@ -47,7 +47,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/core": "^7.0.2",
|
||||
"@ionic/core": "^7.0.4",
|
||||
"ionicons": "^7.0.0",
|
||||
"jsonc-parser": "^3.0.0",
|
||||
"tslib": "^2.3.0"
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"keywords": [],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/ionic-team/ionic.git"
|
||||
"url": "git+https://github.com/ionic-team/ionic-framework.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "umd/index.js",
|
||||
|
||||
@@ -6,7 +6,7 @@ Ionic Framework supports multiple versions of Angular. As a result, we need to v
|
||||
|
||||
The Angular test app supports syncing your locally built changes for validation.
|
||||
|
||||
1. Build the `core` and `packages/angular` projects using `npm run build`.
|
||||
1. Build the `core` and `packages/angular` directories using `npm run build`.
|
||||
2. [Build the Angular test app](#test-app-build-structure).
|
||||
3. Navigate to the built test app.
|
||||
4. Install dependencies using `npm install`.
|
||||
|
||||
5
angular/test/apps/ng14/e2e/src/angular-version.spec.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
it("should be on Angular 14", () => {
|
||||
cy.visit('/');
|
||||
|
||||
cy.get('ion-title').contains('Angular 14');
|
||||
});
|
||||
@@ -1,3 +0,0 @@
|
||||
<ion-app>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-app>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent { }
|
||||
5
angular/test/apps/ng15/e2e/src/angular-version.spec.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
it("should be on Angular 15", () => {
|
||||
cy.visit('/');
|
||||
|
||||
cy.get('ion-title').contains('Angular 15');
|
||||
});
|
||||
@@ -1,3 +0,0 @@
|
||||
<ion-app>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-app>
|
||||
@@ -1,8 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent { }
|
||||
0
angular/test/apps/ng16/e2e/src/.gitkeep
Normal file
5
angular/test/apps/ng16/e2e/src/angular-version.spec.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
it("should be on Angular 16", () => {
|
||||
cy.visit('/');
|
||||
|
||||
cy.get('ion-title').contains('Angular 16');
|
||||
});
|
||||
28260
angular/test/apps/ng16/package-lock.json
generated
Normal file
70
angular/test/apps/ng16/package.json
Normal file
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"name": "ionic-angular-test-app",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"sync:build": "sh scripts/build-ionic.sh",
|
||||
"sync": "sh scripts/sync.sh",
|
||||
"build": "ng build --configuration production --no-progress",
|
||||
"lint": "ng lint",
|
||||
"serve:ssr": "node dist/test-app/server/main.js",
|
||||
"build:ssr": "ng build --prod && ng run test-app:server:production",
|
||||
"dev:ssr": "ng run test-app:serve-ssr",
|
||||
"prerender": "ng run test-app:prerender",
|
||||
"cy.open": "cypress open",
|
||||
"cy.run": "cypress run",
|
||||
"test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
|
||||
"test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0-rc.0",
|
||||
"@angular/common": "^16.0.0-rc.0",
|
||||
"@angular/compiler": "^16.0.0-rc.0",
|
||||
"@angular/core": "^16.0.0-rc.0",
|
||||
"@angular/forms": "^16.0.0-rc.0",
|
||||
"@angular/platform-browser": "^16.0.0-rc.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0-rc.0",
|
||||
"@angular/platform-server": "^16.0.0-rc.0",
|
||||
"@angular/router": "^16.0.0-rc.0",
|
||||
"@ionic/angular": "^7.0.0",
|
||||
"@ionic/angular-server": "^7.0.0",
|
||||
"@nguniversal/express-engine": "^15.0.0",
|
||||
"core-js": "^2.6.11",
|
||||
"express": "^4.15.2",
|
||||
"ionicons": "^6.0.4",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript-eslint-language-service": "^4.1.5",
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.0.0-rc.0",
|
||||
"@angular-eslint/builder": "^15.0.0",
|
||||
"@angular-eslint/eslint-plugin": "^15.0.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^15.0.0",
|
||||
"@angular-eslint/schematics": "^15.0.0",
|
||||
"@angular-eslint/template-parser": "^15.0.0",
|
||||
"@angular/cli": "^16.0.0-rc.0",
|
||||
"@angular/compiler-cli": "^16.0.0-rc.0",
|
||||
"@angular/language-service": "^16.0.0-rc.0",
|
||||
"@nguniversal/builders": "^15.0.0",
|
||||
"@types/express": "^4.17.7",
|
||||
"@types/node": "^12.12.54",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.2",
|
||||
"@typescript-eslint/parser": "4.28.2",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^10.2.0",
|
||||
"eslint": "^7.26.0",
|
||||
"ts-loader": "^6.2.2",
|
||||
"ts-node": "^8.3.0",
|
||||
"typescript": "~5.0.2",
|
||||
"wait-on": "^5.2.1",
|
||||
"webpack": "^5.61.0",
|
||||
"webpack-cli": "^4.9.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class VersionTestRoutingModule { }
|
||||
35
angular/test/apps/ng16/tsconfig.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": false,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"emitDecoratorMetadata": true,
|
||||
"typeRoots": ["node_modules/@types"],
|
||||
"lib": ["ES2022", "dom"],
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-eslint-language-service"
|
||||
}
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,6 @@
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"aot": true,
|
||||
"outputPath": "dist/test-app/browser",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
@@ -64,8 +63,17 @@
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
]
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
@@ -75,8 +83,12 @@
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "test-app:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "test-app:build:development"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
@@ -136,9 +148,7 @@
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"schematicCollections": [
|
||||
"@angular-eslint/schematics"
|
||||
],
|
||||
"schematicCollections": ["@angular-eslint/schematics"],
|
||||
"cache": {
|
||||
"enabled": false
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ npm pack ../../../dist
|
||||
npm pack ../../../../packages/angular-server/dist
|
||||
|
||||
# Install Dependencies
|
||||
npm install *.tgz --no-save
|
||||
npm install *.tgz --no-save --legacy-peer-deps
|
||||
|
||||
# Delete Angular cache directory
|
||||
rm -rf .angular/
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>
|
||||
Test App
|
||||
Test App - Angular {{ angularVersion.major }}
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, VERSION } from '@angular/core';
|
||||
import { AnimationBuilder, AnimationController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
@@ -6,6 +6,9 @@ import { AnimationBuilder, AnimationController } from '@ionic/angular';
|
||||
templateUrl: './home-page.component.html',
|
||||
})
|
||||
export class HomePageComponent {
|
||||
|
||||
angularVersion = VERSION;
|
||||
|
||||
routerAnimation: AnimationBuilder = (_, opts) => {
|
||||
const { direction, enteringEl, leavingEl } = opts;
|
||||
const animation = this.animationCtrl.create().duration(500).easing('ease-out');
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags.ts';
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
@@ -42,7 +42,7 @@
|
||||
*
|
||||
*/
|
||||
|
||||
import './zone-flags.ts';
|
||||
import './zone-flags';
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
|
||||
@@ -3,6 +3,45 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.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)
|
||||
* **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/compare/v7.0.1...v7.0.3) (2023-04-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion:** inset style respects animated property ([#27173](https://github.com/ionic-team/ionic/issues/27173)) ([114fe28](https://github.com/ionic-team/ionic/commit/114fe28f3cc9ee52bc5eefa569353f490ab01023)), closes [#27047](https://github.com/ionic-team/ionic/issues/27047)
|
||||
* **datetime:** clamp date between min and max when using month picker ([#27185](https://github.com/ionic-team/ionic/issues/27185)) ([0385c08](https://github.com/ionic-team/ionic/commit/0385c0862c98c9387b38d3a4416d74a2cc132ddd)), closes [#27027](https://github.com/ionic-team/ionic/issues/27027)
|
||||
* **input:** string values are emitted ([#27226](https://github.com/ionic-team/ionic/issues/27226)) ([cdb0627](https://github.com/ionic-team/ionic/commit/cdb0627c87299ba36da670c81f9d4e3446bb500d))
|
||||
* **item:** ios active state has correct contrast ([#27134](https://github.com/ionic-team/ionic/issues/27134)) ([bbdb0ca](https://github.com/ionic-team/ionic/commit/bbdb0ca480d7cd46c030d1947ced712653cf122b)), closes [#000](https://github.com/ionic-team/ionic/issues/000) [#000](https://github.com/ionic-team/ionic/issues/000)
|
||||
* **many:** dynamic label support for modern form controls ([#27156](https://github.com/ionic-team/ionic/issues/27156)) ([30b548b](https://github.com/ionic-team/ionic/commit/30b548b167883f0a657b0410d3bcf76dbb6895e0)), closes [#27085](https://github.com/ionic-team/ionic/issues/27085)
|
||||
* **menu:** export menu interfaces ([#27227](https://github.com/ionic-team/ionic/issues/27227)) ([80d8c66](https://github.com/ionic-team/ionic/commit/80d8c667666ffdb6b8e668ef94cc58a93045bd0e))
|
||||
* **menu:** refs are not destroyed on unmount ([#27141](https://github.com/ionic-team/ionic/issues/27141)) ([b81b0d1](https://github.com/ionic-team/ionic/commit/b81b0d14258d7b8caf028e6cfe81772ed2f5f119)), closes [/github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx#L136-L137](https://github.com//github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx/issues/L136-L137)
|
||||
* **radio:** takes up full height in item ([#27168](https://github.com/ionic-team/ionic/issues/27168)) ([987c79f](https://github.com/ionic-team/ionic/commit/987c79f05b6791084c4526d80c8c28a28047dd58)), closes [/github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/checkbox/checkbox.scss#L42](https://github.com//github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/checkbox/checkbox.scss/issues/L42) [/github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/toggle/toggle.scss#L43](https://github.com//github.com/ionic-team/ionic-framework/blob/cb8f07c5530ffc222580a3e3bae8dc85f62c73e5/core/src/components/toggle/toggle.scss/issues/L43)
|
||||
* **segment-button:** update checked state on render ([#26970](https://github.com/ionic-team/ionic/issues/26970)) ([16aa977](https://github.com/ionic-team/ionic/commit/16aa9770bba983705d807ad363498693a0e7969b)), closes [#26830](https://github.com/ionic-team/ionic/issues/26830)
|
||||
* **segment:** segment disables segment buttons created asyncronously ([#27155](https://github.com/ionic-team/ionic/issues/27155)) ([ad6b130](https://github.com/ionic-team/ionic/commit/ad6b1301cf8528f7c9ad3c52730f01861117b380))
|
||||
* **select:** respect --border-radius with modern template ([#27213](https://github.com/ionic-team/ionic/issues/27213)) ([6ffbdbb](https://github.com/ionic-team/ionic/commit/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8)), closes [#27208](https://github.com/ionic-team/ionic/issues/27208)
|
||||
* **select:** text does not overlap icon ([#27125](https://github.com/ionic-team/ionic/issues/27125)) ([6fc0024](https://github.com/ionic-team/ionic/commit/6fc002458ad23b129a214fd34d3a2fdc33800373)), closes [#27081](https://github.com/ionic-team/ionic/issues/27081)
|
||||
* **textarea:** legacy textarea respects padding ([#27219](https://github.com/ionic-team/ionic/issues/27219)) ([742d429](https://github.com/ionic-team/ionic/commit/742d4295ddfe40c643d9dd21ffc6d9fb3eb6f717)), closes [#27218](https://github.com/ionic-team/ionic/issues/27218)
|
||||
* **toast:** screen readers announce content ([#27198](https://github.com/ionic-team/ionic/issues/27198)) ([76c8b94](https://github.com/ionic-team/ionic/commit/76c8b94e2a818e1b824701b788d5ed8b6e554d42)), closes [#25866](https://github.com/ionic-team/ionic/issues/25866)
|
||||
* **vue:** components have correct name in Vue Dev Tools ([#27180](https://github.com/ionic-team/ionic/issues/27180)) ([07941a5](https://github.com/ionic-team/ionic/commit/07941a59ba68a46d1345fecec6df82fb4655a0b5)), closes [#25199](https://github.com/ionic-team/ionic/issues/25199)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.0.2](https://github.com/ionic-team/ionic/compare/v7.0.1...v7.0.2) (2023-04-12)
|
||||
|
||||
|
||||
|
||||
14
core/api.txt
@@ -1252,13 +1252,13 @@ ion-select,event,ionChange,SelectChangeEventDetail<any>,true
|
||||
ion-select,event,ionDismiss,void,true
|
||||
ion-select,event,ionFocus,void,true
|
||||
ion-select,css-prop,--background
|
||||
ion-select,css-prop,--border-color Color of the select border
|
||||
ion-select,css-prop,--border-radius Radius of the select border
|
||||
ion-select,css-prop,--border-style Style of the select border
|
||||
ion-select,css-prop,--border-width Width of the select border
|
||||
ion-select,css-prop,--highlight-color-focused The color of the highlight on the select when focused
|
||||
ion-select,css-prop,--highlight-color-invalid The color of the highlight on the select when invalid
|
||||
ion-select,css-prop,--highlight-color-valid The color of the highlight on the select when valid
|
||||
ion-select,css-prop,--border-color
|
||||
ion-select,css-prop,--border-radius
|
||||
ion-select,css-prop,--border-style
|
||||
ion-select,css-prop,--border-width
|
||||
ion-select,css-prop,--highlight-color-focused
|
||||
ion-select,css-prop,--highlight-color-invalid
|
||||
ion-select,css-prop,--highlight-color-valid
|
||||
ion-select,css-prop,--padding-bottom
|
||||
ion-select,css-prop,--padding-end
|
||||
ion-select,css-prop,--padding-start
|
||||
|
||||
18
core/package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.0.2",
|
||||
"version": "7.0.4",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/core",
|
||||
"version": "7.0.2",
|
||||
"version": "7.0.4",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^3.2.1",
|
||||
@@ -24,7 +24,7 @@
|
||||
"@stencil/angular-output-target": "^0.6.0",
|
||||
"@stencil/react-output-target": "^0.5.0",
|
||||
"@stencil/sass": "^3.0.0",
|
||||
"@stencil/vue-output-target": "^0.8.1",
|
||||
"@stencil/vue-output-target": "^0.8.2",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.17.0",
|
||||
@@ -1624,9 +1624,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/vue-output-target": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.1.tgz",
|
||||
"integrity": "sha512-nSpwTvDa+i1Du8wxzX8OWp0QTS5DQmiwVNjdzQWBzeI77fCvS5mTMBsXwXbtURkR7emkm/ktMU05wXX8mnbWiQ==",
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz",
|
||||
"integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@stencil/core": "^2.9.0 || ^3.0.0"
|
||||
@@ -11486,9 +11486,9 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@stencil/vue-output-target": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.1.tgz",
|
||||
"integrity": "sha512-nSpwTvDa+i1Du8wxzX8OWp0QTS5DQmiwVNjdzQWBzeI77fCvS5mTMBsXwXbtURkR7emkm/ktMU05wXX8mnbWiQ==",
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.2.tgz",
|
||||
"integrity": "sha512-Z+igq/pz7z9bSRH0tVxHvD/m13B6MPM+i2DZRboGt3uyTKeD1vLZQz3BLCfPeBtEXp2Xlz4d18Z8d7c4abFKbg==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.0.2",
|
||||
"version": "7.0.4",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -46,7 +46,7 @@
|
||||
"@stencil/angular-output-target": "^0.6.0",
|
||||
"@stencil/react-output-target": "^0.5.0",
|
||||
"@stencil/sass": "^3.0.0",
|
||||
"@stencil/vue-output-target": "^0.8.1",
|
||||
"@stencil/vue-output-target": "^0.8.2",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.17.0",
|
||||
@@ -99,7 +99,7 @@
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/ionic-team/ionic.git"
|
||||
"url": "git+https://github.com/ionic-team/ionic-framework.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/ionic-team/ionic/issues"
|
||||
|
||||
@@ -417,7 +417,7 @@ export class Accordion implements ComponentInterface {
|
||||
'accordion-disabled': disabled,
|
||||
'accordion-readonly': readonly,
|
||||
|
||||
'accordion-animated': config.getBoolean('animated', true),
|
||||
'accordion-animated': this.shouldAnimate(),
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
||||
@@ -163,3 +163,24 @@ it('should set default values if not provided', async () => {
|
||||
|
||||
expect(accordion.classList.contains('accordion-collapsed')).toEqual(false);
|
||||
});
|
||||
|
||||
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047
|
||||
it('should not have animated class when animated="false"', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Item, Accordion, AccordionGroup],
|
||||
html: `
|
||||
<ion-accordion-group animated="false">
|
||||
<ion-accordion>
|
||||
<ion-item slot="header">Label</ion-item>
|
||||
<div slot="content">Content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordion = accordionGroup.querySelector('ion-accordion')!;
|
||||
|
||||
expect(accordionGroup.animated).toEqual(false);
|
||||
expect(accordion.classList.contains('accordion-animated')).toEqual(false);
|
||||
});
|
||||
|
||||
@@ -85,7 +85,7 @@ test.describe('action sheet: basic', () => {
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
await actionSheetFixture.open('#alertFromActionSheet');
|
||||
|
||||
await page.locator('#open-alert').click();
|
||||
await page.click('#open-alert');
|
||||
|
||||
await ionAlertDidPresent.next();
|
||||
});
|
||||
|
||||
@@ -5,7 +5,7 @@ test.describe('action sheet: isOpen', () => {
|
||||
test.beforeEach(async ({ page, skip }) => {
|
||||
skip.rtl('isOpen does not behave differently in RTL');
|
||||
skip.mode('md', 'isOpen does not behave differently in MD');
|
||||
await page.goto('/src/components/action-sheet/test/isOpen');
|
||||
await page.goto('/src/components/action-sheet/test/is-open');
|
||||
});
|
||||
|
||||
test('should open the action sheet', async ({ page }) => {
|
||||
@@ -5,7 +5,7 @@ test.describe('alert: isOpen', () => {
|
||||
test.beforeEach(async ({ page, skip }) => {
|
||||
skip.rtl('isOpen does not behave differently in RTL');
|
||||
skip.mode('md', 'isOpen does not behave differently in MD');
|
||||
await page.goto('/src/components/alert/test/isOpen');
|
||||
await page.goto('/src/components/alert/test/is-open');
|
||||
});
|
||||
|
||||
test('should open the alert', async ({ page }) => {
|
||||
@@ -9,7 +9,7 @@
|
||||
--color-active: #{$breadcrumb-md-color-active};
|
||||
--color-hover: #{$breadcrumb-md-color-active};
|
||||
--color-focused: #{$breadcrumb-md-color-focused};
|
||||
--background-focused: $breadcrumb-md-background-focused;
|
||||
--background-focused: #{$breadcrumb-md-background-focused};
|
||||
}
|
||||
|
||||
:host(.breadcrumb-active) {
|
||||
|
||||
@@ -16,7 +16,7 @@ test.describe('datetime-button: switching to correct view', () => {
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveJSProperty('presentation', 'date-time');
|
||||
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(datetime).toHaveJSProperty('presentation', 'date');
|
||||
@@ -25,7 +25,7 @@ test.describe('datetime-button: switching to correct view', () => {
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveJSProperty('presentation', 'date-time');
|
||||
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(datetime).toHaveJSProperty('presentation', 'time');
|
||||
|
||||
@@ -65,40 +65,40 @@ test.describe('datetime-button: popover', () => {
|
||||
ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
|
||||
});
|
||||
test('should open the date popover', async ({ page }) => {
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
|
||||
await ionPopoverDidPresent.next();
|
||||
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
test('should open the time popover', async ({ page }) => {
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
|
||||
await ionPopoverDidPresent.next();
|
||||
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
test('should open the date popover then the time popover', async ({ page }) => {
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
await ionPopoverDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
|
||||
await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
|
||||
await ionPopoverDidDismiss.next();
|
||||
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
await ionPopoverDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
test('should open the time popover then the date popover', async ({ page }) => {
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
await ionPopoverDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
|
||||
await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
|
||||
await ionPopoverDidDismiss.next();
|
||||
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
await ionPopoverDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
@@ -127,40 +127,40 @@ test.describe('datetime-button: modal', () => {
|
||||
ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
|
||||
});
|
||||
test('should open the date modal', async ({ page }) => {
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
test('should open the time modal', async ({ page }) => {
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
test('should open the date modal then the time modal', async ({ page }) => {
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
await ionModalDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
|
||||
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
|
||||
await ionModalDidDismiss.next();
|
||||
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
await ionModalDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
test('should open the time modal then the date modal', async ({ page }) => {
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
await ionModalDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
|
||||
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
|
||||
await ionModalDidDismiss.next();
|
||||
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
await ionModalDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
|
||||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@@ -240,6 +240,7 @@ test.describe('datetime: minmax', () => {
|
||||
skip.rtl();
|
||||
skip.mode('ios', 'This implementation is the same across modes.');
|
||||
});
|
||||
|
||||
test('should reset to min time if out of bounds', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-datetime
|
||||
@@ -259,6 +260,7 @@ test.describe('datetime: minmax', () => {
|
||||
|
||||
await expect(datetime).toHaveJSProperty('value', '2022-10-10T08:00:00');
|
||||
});
|
||||
|
||||
test('should reset to max time if out of bounds', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-datetime
|
||||
@@ -278,6 +280,28 @@ test.describe('datetime: minmax', () => {
|
||||
|
||||
await expect(datetime).toHaveJSProperty('value', '2022-10-10T08:00:00');
|
||||
});
|
||||
|
||||
test('should adjust to in-bounds when using month picker', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-datetime
|
||||
min="2022-01-15"
|
||||
value="2022-02-01"
|
||||
presentation="date"
|
||||
></ion-datetime>
|
||||
`);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const monthYearToggle = page.locator('ion-datetime .calendar-month-year');
|
||||
const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
|
||||
|
||||
await monthYearToggle.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await monthColumnItems.nth(0).click(); // switch to January
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(datetime).toHaveJSProperty('value', '2022-01-15T00:00:00');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('datetime: confirm button', () => {
|
||||
|
||||
@@ -15,21 +15,24 @@ test.describe('datetime: prefer wheel', () => {
|
||||
* if the datetime is too small.
|
||||
*/
|
||||
test.describe('datetime: wheel rendering', () => {
|
||||
test('should not have visual regressions for date wheel', async ({ page }) => {
|
||||
// TODO FW-4110
|
||||
test.skip('should not have visual regressions for date wheel', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-datetime size="cover" presentation="date" prefer-wheel="true" value="2019-05-30" max="2022"></ion-datetime>
|
||||
`);
|
||||
|
||||
await expect(page).toHaveScreenshot(`datetime-wheel-date-diff-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
test('should not have visual regressions for date-time wheel', async ({ page }) => {
|
||||
// TODO FW-4110
|
||||
test.skip('should not have visual regressions for date-time wheel', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-datetime size="cover" presentation="date-time" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
|
||||
`);
|
||||
|
||||
await expect(page).toHaveScreenshot(`datetime-wheel-date-time-diff-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
test('should not have visual regressions for time-date wheel', async ({ page }) => {
|
||||
// TODO FW-4110
|
||||
test.skip('should not have visual regressions for time-date wheel', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
|
||||
`);
|
||||
|
||||
@@ -2,7 +2,7 @@ import type { DatetimeParts } from '../datetime-interface';
|
||||
|
||||
import { isSameDay } from './comparison';
|
||||
import { getNumDaysInMonth } from './helpers';
|
||||
import { parseAmPm } from './parse';
|
||||
import { clampDate, parseAmPm } from './parse';
|
||||
|
||||
const twoDigit = (val: number | undefined): string => {
|
||||
return ('0' + (val !== undefined ? Math.abs(val) : '0')).slice(-2);
|
||||
@@ -333,7 +333,8 @@ export const calculateHourFromAMPM = (currentParts: DatetimeParts, newAMPM: 'am'
|
||||
/**
|
||||
* Updates parts to ensure that month and day
|
||||
* values are valid. For days that do not exist,
|
||||
* the closest valid day is used.
|
||||
* or are outside the min/max bounds, the closest
|
||||
* valid day is used.
|
||||
*/
|
||||
export const validateParts = (
|
||||
parts: DatetimeParts,
|
||||
@@ -341,7 +342,7 @@ export const validateParts = (
|
||||
maxParts?: DatetimeParts
|
||||
): DatetimeParts => {
|
||||
const { month, day, year } = parts;
|
||||
const partsCopy = { ...parts };
|
||||
const partsCopy = clampDate({ ...parts }, minParts, maxParts);
|
||||
|
||||
const numDays = getNumDaysInMonth(month, year);
|
||||
|
||||
|
||||
@@ -40,7 +40,7 @@ test.describe('img: basic', () => {
|
||||
ionImgDidLoad = await page.spyOnEvent('ionImgDidLoad');
|
||||
ionImgWillLoad = await page.spyOnEvent('ionImgWillLoad');
|
||||
|
||||
const ionImg = await page.locator('ion-img');
|
||||
const ionImg = page.locator('ion-img');
|
||||
await ionImg.evaluate((el: HTMLIonImgElement) => {
|
||||
el.src = 'https://via.placeholder.com/150';
|
||||
return el;
|
||||
@@ -79,7 +79,7 @@ test.describe('img: basic', () => {
|
||||
|
||||
ionError = await page.spyOnEvent('ionError');
|
||||
|
||||
const ionImg = await page.locator('ion-img');
|
||||
const ionImg = page.locator('ion-img');
|
||||
await ionImg.evaluate((el: HTMLIonImgElement) => {
|
||||
el.src = 'https://via.placeholder.com/150';
|
||||
return el;
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
/**
|
||||
* Values are converted to strings when emitted which is
|
||||
* why we do not have a `number` type here even though the
|
||||
* `value` prop accepts a `number` type.
|
||||
*/
|
||||
export interface InputChangeEventDetail {
|
||||
value?: string | number | null;
|
||||
value?: string | null;
|
||||
event?: Event;
|
||||
}
|
||||
|
||||
// We recognize that InputInput is not an ideal naming pattern for this type.
|
||||
// TODO (FW-2199): Explore renaming this type to something more appropriate.
|
||||
export interface InputInputEventDetail {
|
||||
value?: string | number | null;
|
||||
value?: string | null;
|
||||
event?: Event;
|
||||
}
|
||||
|
||||
|
||||
@@ -177,7 +177,7 @@
|
||||
// otherwise the .input-cover will not be rendered at all
|
||||
// The input cover is not clickable when the input is disabled
|
||||
.cloned-input {
|
||||
@include position(0, null, null, 0);
|
||||
@include position(0, null, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
@@ -299,6 +299,8 @@
|
||||
transition: background-color 15ms linear;
|
||||
|
||||
background: var(--background);
|
||||
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// Input Native Wrapper
|
||||
@@ -307,6 +309,8 @@
|
||||
.native-wrapper {
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
width: 100%;
|
||||
|
||||
@@ -367,13 +367,6 @@ export class Input implements ComponentInterface {
|
||||
|
||||
componentDidLoad() {
|
||||
this.originalIonInput = this.ionInput;
|
||||
const nativeInput = this.nativeInput;
|
||||
if (nativeInput) {
|
||||
// TODO: FW-729 Update to JSX bindings when Stencil resolves bug with:
|
||||
// https://github.com/ionic-team/stencil/issues/3235
|
||||
nativeInput.addEventListener('compositionstart', this.onCompositionStart);
|
||||
nativeInput.addEventListener('compositionend', this.onCompositionEnd);
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
@@ -384,11 +377,6 @@ export class Input implements ComponentInterface {
|
||||
})
|
||||
);
|
||||
}
|
||||
const nativeInput = this.nativeInput;
|
||||
if (nativeInput) {
|
||||
nativeInput.removeEventListener('compositionstart', this.onCompositionStart);
|
||||
nativeInput.removeEventListener('compositionend', this.onCompositionEnd);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -436,7 +424,11 @@ export class Input implements ComponentInterface {
|
||||
*/
|
||||
private emitInputChange(event?: Event) {
|
||||
const { value } = this;
|
||||
this.ionInput.emit({ value, event });
|
||||
|
||||
// Checks for both null and undefined values
|
||||
const newValue = value == null ? value : value.toString();
|
||||
|
||||
this.ionInput.emit({ value: newValue, event });
|
||||
}
|
||||
|
||||
private shouldClearOnEdit() {
|
||||
@@ -690,6 +682,8 @@ export class Input implements ComponentInterface {
|
||||
onBlur={this.onBlur}
|
||||
onFocus={this.onFocus}
|
||||
onKeyDown={this.onKeydown}
|
||||
onCompositionstart={this.onCompositionStart}
|
||||
onCompositionend={this.onCompositionEnd}
|
||||
{...this.inheritedAttributes}
|
||||
/>
|
||||
{this.clearInput && !readonly && !disabled && (
|
||||
|
||||
@@ -5,7 +5,7 @@ test.describe('input: basic', () => {
|
||||
test.describe('input with overflow', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
|
||||
<ion-input aria-label="Long Input" value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
|
||||
`);
|
||||
const input = page.locator('ion-input');
|
||||
// Validates the display of an input where text extends off the edge of the component.
|
||||
@@ -15,7 +15,7 @@ test.describe('input: basic', () => {
|
||||
test.describe('input with placeholder', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-input placeholder="Placeholder"></ion-input>
|
||||
<ion-input aria-label="Input with Placeholder" placeholder="Placeholder"></ion-input>
|
||||
`);
|
||||
const input = page.locator('ion-input');
|
||||
// Validates the display of an input with a placeholder.
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.6 KiB |
22
core/src/components/input/test/card/input.e2e.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('input: card', () => {
|
||||
test('should render correctly in card', async ({ page, skip }) => {
|
||||
skip.rtl();
|
||||
skip.mode('ios');
|
||||
|
||||
await page.setContent(`
|
||||
<ion-card>
|
||||
<ion-card-content>
|
||||
<ion-item style="border: 1px solid grey" lines="none">
|
||||
<ion-input label="input" label-placement="stacked"></ion-input>
|
||||
</ion-item>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
`);
|
||||
|
||||
const card = page.locator('ion-card');
|
||||
expect(await card.screenshot()).toMatchSnapshot(`input-card-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |