Compare commits
68 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
bf1ae7b6fe | ||
|
|
84ea30db4e | ||
|
|
f7aa4a7e6b | ||
|
|
ffd1bf5139 | ||
|
|
73af759906 | ||
|
|
4f68044f84 | ||
|
|
cde84983b2 | ||
|
|
3f3f196a24 | ||
|
|
ffce443585 | ||
|
|
4698d22413 | ||
|
|
bfaf528e61 | ||
|
|
9b59138011 | ||
|
|
4efdc88a29 | ||
|
|
7b90025d31 | ||
|
|
176bb43262 | ||
|
|
c9916ff4b5 | ||
|
|
9738228bc0 | ||
|
|
f0da2c1727 | ||
|
|
368fb2fc70 | ||
|
|
8259cd0cd9 | ||
|
|
638ad30b59 | ||
|
|
ea8e220861 | ||
|
|
8ee5790d1f | ||
|
|
2562392a62 | ||
|
|
d8599b3282 | ||
|
|
1388014b65 | ||
|
|
1073d22b56 | ||
|
|
cea0b493fc | ||
|
|
adf220b681 | ||
|
|
e64015a609 | ||
|
|
3d9871a77f | ||
|
|
e91fee4f2d | ||
|
|
b315b0cb29 | ||
|
|
7b6c330f17 | ||
|
|
b3cd49bf22 | ||
|
|
6c36cef241 | ||
|
|
4d6edee89c | ||
|
|
4b79bbef7d | ||
|
|
ac7631a324 | ||
|
|
b5cb828861 | ||
|
|
101ad5402f | ||
|
|
de35fa8b94 | ||
|
|
c766528a17 | ||
|
|
9b3cf9fbc2 | ||
|
|
ee5da7a747 | ||
|
|
c4bfc783e0 | ||
|
|
0137e732ce | ||
|
|
88ecb29e39 | ||
|
|
f726c35868 | ||
|
|
4a9d84ecbd | ||
|
|
f08759c2b8 | ||
|
|
2053bc77a6 | ||
|
|
02e05bd7cb | ||
|
|
fa387cb2a2 | ||
|
|
8ab116150c | ||
|
|
8c9182c52f | ||
|
|
c0a8e7a95d | ||
|
|
0c5a2967d8 | ||
|
|
6ebb3c4e38 | ||
|
|
cdcb6decbd | ||
|
|
652ea169b7 | ||
|
|
42c09a7ea1 | ||
|
|
c23be1befd | ||
|
|
a2923aaeb3 | ||
|
|
eeab96de55 | ||
|
|
ca0923812a | ||
|
|
1be956bd18 | ||
|
|
8ad66c03d7 |
66
.github/CODEOWNERS
vendored
@@ -13,73 +13,7 @@
|
||||
|
||||
* @ionic-team/framework
|
||||
|
||||
# Frameworks
|
||||
|
||||
## Angular
|
||||
|
||||
/packages/angular/ @sean-perkins @thetaPC
|
||||
/packages/angular-server @sean-perkins @thetaPC
|
||||
/packages/angular/test @thetaPC
|
||||
|
||||
## React
|
||||
|
||||
/packages/react/ @amandaejohnston
|
||||
/packages/react-router @amandaejohnston
|
||||
/packages/react/test-app/
|
||||
/packages/react-router/test-app/
|
||||
|
||||
## Vue
|
||||
|
||||
/packages/vue/ @liamdebeasi @thetaPC
|
||||
/packages/vue-router/ @liamdebeasi @thetaPC
|
||||
/packages/vue/test/ @thetaPC
|
||||
/packages/vue-router/__tests__ @thetaPC
|
||||
|
||||
# Components
|
||||
|
||||
/core/src/components/accordion/ @liamdebeasi
|
||||
/core/src/components/accordion-group/ @liamdebeasi
|
||||
|
||||
/core/src/components/checkbox/ @amandaejohnston
|
||||
|
||||
/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
|
||||
/core/src/components/datetime-button/ @liamdebeasi
|
||||
|
||||
/core/src/components/item/ @brandyscarney
|
||||
|
||||
/core/src/components/menu/ @amandaejohnston
|
||||
/core/src/components/menu-toggle/ @amandaejohnston
|
||||
|
||||
/core/src/components/nav/ @sean-perkins
|
||||
/core/src/components/nav-link/ @sean-perkins
|
||||
|
||||
/core/src/components/picker/ @liamdebeasi
|
||||
/core/src/components/picker-column/ @liamdebeasi
|
||||
|
||||
/core/src/components/radio/ @amandaejohnston
|
||||
/core/src/components/radio-group/ @amandaejohnston
|
||||
|
||||
/core/src/components/refresher/ @liamdebeasi
|
||||
/core/src/components/refresher-content/ @liamdebeasi
|
||||
|
||||
/core/src/components/searchbar/ @brandyscarney
|
||||
|
||||
/core/src/components/segment/ @brandyscarney
|
||||
/core/src/components/segment-button/ @brandyscarney
|
||||
|
||||
/core/src/components/skeleton-text/ @brandyscarney
|
||||
|
||||
# Utilities
|
||||
|
||||
/core/src/utils/animation/ @liamdebeasi
|
||||
/core/src/utils/content/ @sean-perkins
|
||||
/core/src/utils/gesture/ @liamdebeasi
|
||||
/core/src/utils/input-shims/ @liamdebeasi
|
||||
/core/src/utils/keyboard/ @liamdebeasi
|
||||
/core/src/utils/logging/ @amandaejohnston
|
||||
/core/src/utils/sanitization/ @liamdebeasi
|
||||
/core/src/utils/tap-click/ @liamdebeasi
|
||||
/core/src/utils/transition/ @liamdebeasi
|
||||
|
||||
/core/src/css/ @brandyscarney
|
||||
/core/src/themes/ @brandyscarney
|
||||
|
||||
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -25,7 +25,7 @@ Issue number: resolves #
|
||||
If this introduces a breaking change:
|
||||
1. Describe the impact and migration path for existing applications below.
|
||||
2. Update the BREAKING.md file with the breaking change.
|
||||
3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information.
|
||||
3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information.
|
||||
-->
|
||||
|
||||
|
||||
|
||||
4
.github/workflows/assign-issues.yml
vendored
@@ -11,8 +11,8 @@ jobs:
|
||||
issues: write
|
||||
steps:
|
||||
- name: 'Auto-assign issue'
|
||||
uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
|
||||
uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
|
||||
with:
|
||||
assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
|
||||
assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
|
||||
numOfAssignee: 1
|
||||
allowSelfAssign: false
|
||||
|
||||
8
.github/workflows/release-ionic.yml
vendored
@@ -41,8 +41,8 @@ jobs:
|
||||
uses: ./.github/workflows/actions/upload-archive
|
||||
with:
|
||||
name: ionic-docs
|
||||
output: docs/DocsBuild.zip
|
||||
paths: docs/core.json docs/core.d.ts
|
||||
output: packages/docs/DocsBuild.zip
|
||||
paths: packages/docs/core.json packages/docs/core.d.ts
|
||||
|
||||
release-docs:
|
||||
needs: [release-core]
|
||||
@@ -53,7 +53,7 @@ jobs:
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-docs
|
||||
path: ./docs
|
||||
path: ./packages/docs
|
||||
filename: DocsBuild.zip
|
||||
- uses: ./.github/workflows/actions/publish-npm
|
||||
with:
|
||||
@@ -61,7 +61,7 @@ jobs:
|
||||
tag: ${{ inputs.tag }}
|
||||
version: ${{ inputs.version }}
|
||||
preid: ${{ inputs.preid }}
|
||||
working-directory: 'docs'
|
||||
working-directory: 'packages/docs'
|
||||
token: ${{ secrets.NPM_TOKEN }}
|
||||
|
||||
release-angular:
|
||||
|
||||
1
.vercelignore
Normal file
@@ -0,0 +1 @@
|
||||
core/src/components/**/*/*.png
|
||||
113
CHANGELOG.md
@@ -3,6 +3,119 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [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)
|
||||
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
|
||||
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
|
||||
</a>
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
|
||||
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
||||
</a>
|
||||
<a href="https://twitter.com/Ionicframework">
|
||||
@@ -38,7 +38,7 @@
|
||||
Documentation
|
||||
</a>
|
||||
<span> · </span>
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">Contribute</a>
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
|
||||
<span> · </span>
|
||||
<a href="https://blog.ionicframework.com/">Blog</a>
|
||||
<br />
|
||||
@@ -88,7 +88,7 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin
|
||||
### Contributing
|
||||
|
||||
Thanks for your interest in contributing! Read up on our guidelines for
|
||||
[contributing](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md)
|
||||
[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md)
|
||||
and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
|
||||
label.
|
||||
|
||||
|
||||
@@ -3,6 +3,115 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [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/core
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [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/core
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [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)
|
||||
|
||||
|
||||
### 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/v7.8.1...v8.0.0-beta.3) (2024-03-20)
|
||||
|
||||
|
||||
|
||||
755
core/package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.0.0-beta.3",
|
||||
"version": "8.0.0",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -54,12 +54,13 @@
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
"@typescript-eslint/parser": "^6.7.2",
|
||||
"chalk": "^5.3.0",
|
||||
"clean-css-cli": "^5.6.1",
|
||||
"domino": "^2.1.6",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-custom-rules": "file:custom-rules",
|
||||
"execa": "^5.0.0",
|
||||
"execa": "^8.0.1",
|
||||
"fs-extra": "^9.0.1",
|
||||
"jest": "^29.7.0",
|
||||
"jest-cli": "^29.7.0",
|
||||
@@ -77,7 +78,7 @@
|
||||
"build.docs.json": "stencil build --docs-json dist/docs.json",
|
||||
"clean": "node scripts/clean.js",
|
||||
"css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
|
||||
"css.sass": "sass --embed-sources src/css:./css",
|
||||
"css.sass": "sass --embed-sources --style compressed src/css:./css",
|
||||
"eslint": "eslint src",
|
||||
"lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache",
|
||||
"lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache",
|
||||
@@ -96,10 +97,9 @@
|
||||
"test.treeshake": "node scripts/treeshaking.js dist/index.js",
|
||||
"validate": "npm run lint && npm run test && npm run build && npm run test.treeshake",
|
||||
"docker.build": "docker build -t ionic-playwright .",
|
||||
"test.e2e.docker": "npm run docker.build && docker run -it --rm -e DISPLAY=$(cat docker-display.txt) -v $(cat docker-display-volume.txt) --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
|
||||
"test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
|
||||
"test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
|
||||
"test.e2e.docker.ci": "npm run docker.build && docker run -e CI='true' --rm --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
|
||||
"test.report": "npx playwright show-report"
|
||||
"test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
|
||||
},
|
||||
"author": "Ionic Team",
|
||||
"license": "MIT",
|
||||
|
||||
56
core/scripts/docker.mjs
Normal file
@@ -0,0 +1,56 @@
|
||||
import { execa } from 'execa';
|
||||
import * as fs from 'fs';
|
||||
import { resolve } from 'path';
|
||||
import chalk from 'chalk';
|
||||
|
||||
const removeNewline = (string) => {
|
||||
return string.replace(/(\r\n|\n|\r)/gm, "");
|
||||
}
|
||||
|
||||
const readConfigFile = (file) => {
|
||||
if (fs.existsSync(file)) {
|
||||
return fs.readFileSync(file, { encoding: 'utf-8' });
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
// These files are optional, so we don't want to error if they don't exist
|
||||
const display = removeNewline(readConfigFile('docker-display.txt'));
|
||||
const displayVolume = removeNewline(readConfigFile('docker-display-volume.txt'));
|
||||
|
||||
// Using --mount requires an absolute path which is what this gives us.
|
||||
const pwd = resolve('./');
|
||||
|
||||
/**
|
||||
* -it will let the user gracefully kill the process using Ctrl+C (or equivalent)
|
||||
* -e DISPLAY and -v handle configuration for headed mode
|
||||
* --ipc=host is recommended when using Chromium to avoid out of memory crashes: https://playwright.dev/docs/ci#docker
|
||||
* --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
|
||||
* --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
|
||||
*/
|
||||
const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
|
||||
|
||||
// Set the CI env variable so Playwright uses the CI config
|
||||
if (process.env.CI) {
|
||||
args.splice(1, 0, '-e CI=true');
|
||||
/**
|
||||
* Otherwise, we should let the session be interactive locally. This will
|
||||
* not work on CI which is why we do not apply it there.
|
||||
*/
|
||||
} else {
|
||||
args.splice(1, 0, '-it');
|
||||
}
|
||||
|
||||
/**
|
||||
* While these config files are optional to run the tests, they are required to run
|
||||
* the tests in headed mode. Add a warning if dev tries to run headed tests without
|
||||
* the correct config files.
|
||||
*/
|
||||
const requestHeaded = process.argv.find(arg => arg.includes('headed'));
|
||||
const hasHeadedConfigFiles = display && displayVolume;
|
||||
if (requestHeaded && !hasHeadedConfigFiles) {
|
||||
console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
|
||||
}
|
||||
|
||||
execa('docker', args, { shell: true, stdio: 'inherit' });
|
||||
@@ -1,44 +1,4 @@
|
||||
|
||||
## Build
|
||||
# Core Scripts
|
||||
|
||||
### 1. Clone ionic
|
||||
|
||||
git@github.com:ionic-team/ionic.git
|
||||
cd ionic
|
||||
|
||||
### 2. Run `npm install`
|
||||
|
||||
cd core
|
||||
npm install
|
||||
|
||||
|
||||
Notice that `@ionic/core` lives in `core`.
|
||||
|
||||
### 3. Run `npm start`
|
||||
|
||||
Make sure you are inside the `core` directory.
|
||||
|
||||
npm start
|
||||
|
||||
With the `dev` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser.
|
||||
|
||||
### 4. Preview
|
||||
|
||||
Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the `test` directory, for example: http://localhost:3333/src/components/button/test/basic
|
||||
|
||||
As changes are made in an editor to source files, the e2e app will live-reload.
|
||||
|
||||
## How to contribute
|
||||
|
||||
1. `npm start` allows you to modify the components and have live reloading, just like another ionic app.
|
||||
|
||||
2. When everything looks good, run `npm run validate` to verify the tests linter and production build passes.
|
||||
|
||||
|
||||
# Deploy
|
||||
|
||||
1. `npm run prepare.deploy`
|
||||
2. Review/update changelog
|
||||
3. Commit updates using the package name and version number as the commit message.
|
||||
4. `npm run deploy`
|
||||
5. :tada:
|
||||
This file has been moved to [/docs/core/testing/preview-changes.md](/docs/core/testing/preview-changes.md).
|
||||
|
||||
@@ -149,7 +149,20 @@
|
||||
}
|
||||
|
||||
::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.125em;
|
||||
/**
|
||||
* The values were provided through a native iOS app.
|
||||
* min font size: 15px, default font size: 18px, max font size: 43px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 16px
|
||||
* (derived from rem), then the base size can use the default font
|
||||
* size of the icon.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.84, 18px, 2.39, 1em);
|
||||
}
|
||||
|
||||
:host(.button-small.button-has-icon-only) {
|
||||
@@ -157,11 +170,23 @@
|
||||
min-width: clamp(23px, 2.16em, 54px);
|
||||
// TODO(FW-6053): replace em value with the min-height variable.
|
||||
min-height: clamp(23px, 2.16em, 54px);
|
||||
|
||||
}
|
||||
|
||||
:host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.4em;
|
||||
/**
|
||||
* The values were provided through a native iOS app.
|
||||
* min font size: 12px, default font size: 17px, max font size: 40px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 13px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 17px, then the base size would need to be increased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.58, 20.93px, 1.92, 1em);
|
||||
}
|
||||
|
||||
:host(.button-large.button-has-icon-only) {
|
||||
@@ -172,7 +197,20 @@
|
||||
}
|
||||
|
||||
:host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1em;
|
||||
/**
|
||||
* The values were provided through a native iOS app.
|
||||
* min font size: 15px, default font size: 18px, max font size: 43px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 20px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 18px, then the base size would need to be decreased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(1.05, 14.4px, 2.99, 1em);
|
||||
}
|
||||
|
||||
// iOS Button Focused
|
||||
@@ -247,3 +285,12 @@
|
||||
:host(.button-solid.ion-color.ion-activated) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
}
|
||||
|
||||
|
||||
// Activated Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
|
||||
background: var(--ion-toolbar-color, var(--color));
|
||||
color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
|
||||
}
|
||||
|
||||
@@ -142,7 +142,21 @@
|
||||
}
|
||||
|
||||
::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.6em;
|
||||
/**
|
||||
* The values were provided through MD design,
|
||||
* large and small are based on the iOS sizes.
|
||||
* min font size: 15px, default font size: 22.4px, max font size: 43px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 14px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 22.4px, then the base size would need to be increased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.59, 25.6px, 1.68, 1em);
|
||||
}
|
||||
|
||||
:host(.button-small.button-has-icon-only) {
|
||||
@@ -153,7 +167,21 @@
|
||||
}
|
||||
|
||||
:host(.button-small) ::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.23em;
|
||||
/**
|
||||
* The values were provided through MD design,
|
||||
* large and small are based on the iOS sizes.
|
||||
* min font size: 12px, default font size: 16px, max font size: 40px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 13px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 16px, then the base size would need to be increased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.66, 19.7px, 2.05, 1em);
|
||||
}
|
||||
|
||||
:host(.button-large.button-has-icon-only) {
|
||||
@@ -164,7 +192,21 @@
|
||||
}
|
||||
|
||||
:host(.button-large) ::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1.4em;
|
||||
/**
|
||||
* The values were provided through MD design,
|
||||
* large and small are based on the iOS sizes.
|
||||
* min font size: 15px, default font size: 28px, max font size: 43px
|
||||
*
|
||||
* Since the `ion-button` uses `rem` for the font size, we can't
|
||||
* just pass the desired icon font size in `em` to the `
|
||||
* dynamic-font-clamp`. Instead, we need to adjust the base size
|
||||
* to account for the ion-button` font size.
|
||||
*
|
||||
* For example, if the default font size of `ion-button` is 20px
|
||||
* (derived from rem) and the default font size of the icon is
|
||||
* 28px, then the base size would need to be increased.
|
||||
*/
|
||||
font-size: dynamic-font-clamp(0.67, 22.4px, 1.92, 1em);
|
||||
}
|
||||
|
||||
// Material Design Button: Hover
|
||||
@@ -196,3 +238,12 @@
|
||||
background: #{current-color(base)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Activated Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
|
||||
background: var(--ion-toolbar-background, var(--color));
|
||||
color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
|
||||
}
|
||||
|
||||
@@ -325,11 +325,3 @@ ion-ripple-effect {
|
||||
background: #{var(--ion-toolbar-color, var(--background))};
|
||||
color: #{var(--ion-toolbar-background, var(--color))};
|
||||
}
|
||||
|
||||
// Activated Button in Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
|
||||
background: var(--ion-toolbar-color, var(--color));
|
||||
color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@@ -38,6 +38,8 @@
|
||||
}
|
||||
|
||||
:host(.in-item) {
|
||||
flex: 1 1 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 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: 21 KiB After Width: | Height: | Size: 21 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 |
@@ -1,5 +1,6 @@
|
||||
import { isIonContent, findClosestIonContent } from '@utils/content';
|
||||
import { createGesture } from '@utils/gesture';
|
||||
import { clamp, raf } from '@utils/helpers';
|
||||
import { clamp, raf, getElementRoot } from '@utils/helpers';
|
||||
|
||||
import type { Animation } from '../../../interface';
|
||||
import type { GestureDetail } from '../../../utils/gesture';
|
||||
@@ -142,22 +143,35 @@ export const createSheetGesture = (
|
||||
|
||||
const canStart = (detail: GestureDetail) => {
|
||||
/**
|
||||
* If the sheet is fully expanded and
|
||||
* the user is swiping on the content,
|
||||
* the gesture should not start to
|
||||
* allow for scrolling on the content.
|
||||
* If we are swiping on the content, swiping should only be possible if the content
|
||||
* is scrolled all the way to the top so that we do not interfere with scrolling.
|
||||
*
|
||||
* We cannot assume that the `ion-content` target will remain consistent between swipes.
|
||||
* For example, when using ion-nav within a modal it is possible to swipe, push a view,
|
||||
* and then swipe again. The target content will not be the same between swipes.
|
||||
*/
|
||||
const content = (detail.event.target! as HTMLElement).closest('ion-content');
|
||||
const contentEl = findClosestIonContent(detail.event.target! as HTMLElement);
|
||||
currentBreakpoint = getCurrentBreakpoint();
|
||||
|
||||
if (currentBreakpoint === 1 && content) {
|
||||
return false;
|
||||
if (currentBreakpoint === 1 && contentEl) {
|
||||
/**
|
||||
* The modal should never swipe to close on the content with a refresher.
|
||||
* Note 1: We cannot solve this by making this gesture have a higher priority than
|
||||
* the refresher gesture as the iOS native refresh gesture uses a scroll listener in
|
||||
* addition to a gesture.
|
||||
*
|
||||
* Note 2: Do not use getScrollElement here because we need this to be a synchronous
|
||||
* operation, and getScrollElement is asynchronous.
|
||||
*/
|
||||
const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
|
||||
const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
|
||||
return !hasRefresherInContent && scrollEl!.scrollTop === 0;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const onStart = () => {
|
||||
const onStart = (detail: GestureDetail) => {
|
||||
/**
|
||||
* If canDismiss is anything other than `true`
|
||||
* then users should be able to swipe down
|
||||
@@ -173,11 +187,10 @@ export const createSheetGesture = (
|
||||
canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
|
||||
|
||||
/**
|
||||
* If swiping on the content
|
||||
* we should disable scrolling otherwise
|
||||
* the sheet will expand and the content will scroll.
|
||||
* If we are pulling down, then it is possible we are pulling on the content.
|
||||
* We do not want scrolling to happen at the same time as the gesture.
|
||||
*/
|
||||
if (contentEl) {
|
||||
if (detail.deltaY > 0 && contentEl) {
|
||||
contentEl.scrollY = false;
|
||||
}
|
||||
|
||||
@@ -193,6 +206,16 @@ export const createSheetGesture = (
|
||||
};
|
||||
|
||||
const onMove = (detail: GestureDetail) => {
|
||||
/**
|
||||
* If we are pulling down, then it is possible we are pulling on the content.
|
||||
* We do not want scrolling to happen at the same time as the gesture.
|
||||
* This accounts for when the user scrolls down, scrolls all the way up, and then
|
||||
* pulls down again such that the modal should start to move.
|
||||
*/
|
||||
if (detail.deltaY > 0 && contentEl) {
|
||||
contentEl.scrollY = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Given the change in gesture position on the Y axis,
|
||||
* compute where the offset of the animation should be
|
||||
@@ -314,6 +337,17 @@ export const createSheetGesture = (
|
||||
onDismiss();
|
||||
}
|
||||
|
||||
/**
|
||||
* If the sheet is going to be fully expanded then we should enable
|
||||
* scrolling immediately. The sheet modal animation takes ~500ms to finish
|
||||
* so if we wait until then there is a visible delay for when scrolling is
|
||||
* re-enabled. Native iOS allows for scrolling on the sheet modal as soon
|
||||
* as the gesture is released, so we align with that.
|
||||
*/
|
||||
if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
|
||||
contentEl.scrollY = true;
|
||||
}
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
animation
|
||||
.onFinish(
|
||||
@@ -334,14 +368,6 @@ export const createSheetGesture = (
|
||||
currentBreakpoint = snapToBreakpoint;
|
||||
onBreakpointChange(currentBreakpoint);
|
||||
|
||||
/**
|
||||
* If the sheet is fully expanded, we can safely
|
||||
* enable scrolling again.
|
||||
*/
|
||||
if (contentEl && currentBreakpoint === breakpoints[breakpoints.length - 1]) {
|
||||
contentEl.scrollY = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Backdrop should become enabled
|
||||
* after the backdropBreakpoint value
|
||||
|
||||
@@ -101,8 +101,6 @@
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Nested Popovers
|
||||
|
||||
@@ -48,6 +48,98 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
* Translucent popovers are only available on iOS
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('popover: scrolling'), async () => {
|
||||
test.beforeEach(({ skip }) => {
|
||||
test.info().annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/29211',
|
||||
});
|
||||
// We are testing if Ionic sets overflow is set correctly on elements,
|
||||
// so we do not need to test across browsers
|
||||
skip.browser('webkit', 'Behavior does not vary across browsers');
|
||||
skip.browser('firefox', 'Behavior does not vary across browsers');
|
||||
});
|
||||
test('should scroll to bottom without IonContent', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-popover {
|
||||
--height: 150px;
|
||||
}
|
||||
</style>
|
||||
<ion-popover>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
</ion-popover>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const popover = page.locator('ion-popover');
|
||||
const viewport = popover.locator('.popover-viewport');
|
||||
const p = popover.locator('p');
|
||||
const lastP = await p.last();
|
||||
|
||||
await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
|
||||
|
||||
await expect(lastP).not.toBeInViewport();
|
||||
|
||||
// hover over viewport and scroll to bottom
|
||||
await viewport.hover();
|
||||
await page.mouse.wheel(0, 500);
|
||||
|
||||
await expect(lastP).toBeInViewport();
|
||||
});
|
||||
test('should scroll to bottom with IonContent', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-popover {
|
||||
--height: 150px;
|
||||
}
|
||||
</style>
|
||||
<ion-popover>
|
||||
<ion-content>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
<p>Text</p>
|
||||
</ion-content>
|
||||
</ion-popover>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const popover = page.locator('ion-popover');
|
||||
const content = popover.locator('ion-content');
|
||||
const p = popover.locator('p');
|
||||
const lastP = await p.last();
|
||||
|
||||
await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
|
||||
|
||||
await expect(lastP).not.toBeInViewport();
|
||||
|
||||
// hover over viewport and scroll to bottom
|
||||
await content.hover();
|
||||
await page.mouse.wheel(0, 500);
|
||||
|
||||
await expect(lastP).toBeInViewport();
|
||||
});
|
||||
});
|
||||
test.describe(title('popover: translucent variants'), async () => {
|
||||
let popoverFixture!: PopoverFixture;
|
||||
test.beforeEach(async ({ page }) => {
|
||||
|
||||
@@ -58,6 +58,8 @@ input {
|
||||
}
|
||||
|
||||
:host(.in-item) {
|
||||
flex: 1 1 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -606,7 +606,7 @@ export class Searchbar implements ComponentInterface {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { cancelButtonText } = this;
|
||||
const { cancelButtonText, autocapitalize } = this;
|
||||
const animated = this.animated && config.getBoolean('animated', true);
|
||||
const mode = getIonMode(this);
|
||||
const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
||||
@@ -668,7 +668,7 @@ export class Searchbar implements ComponentInterface {
|
||||
placeholder={this.placeholder}
|
||||
type={this.type}
|
||||
value={this.getValue()}
|
||||
autoCapitalize={this.autocapitalize}
|
||||
autoCapitalize={autocapitalize === 'default' ? undefined : autocapitalize}
|
||||
autoComplete={this.autocomplete}
|
||||
autoCorrect={this.autocorrect}
|
||||
spellcheck={this.spellcheck}
|
||||
|
||||
@@ -39,6 +39,8 @@
|
||||
}
|
||||
|
||||
:host(.in-item) {
|
||||
flex: 1 1 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,160 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs().forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('toolbar: basic'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/toolbar/test/basic`, config);
|
||||
configs({ palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('toolbar: basic (LTR only)'), () => {
|
||||
test('should not have visual regressions with text only', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
// capture both header toolbars at once, but don't include all the white space in the ion-content
|
||||
const header = page.locator('ion-header');
|
||||
await expect(header).toHaveScreenshot(screenshot(`toolbar-basic`));
|
||||
await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('toolbar: basic'), () => {
|
||||
test('should truncate long title with ellipsis', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const header = page.locator('ion-header');
|
||||
await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-long-text`));
|
||||
});
|
||||
|
||||
test('should not have visual regressions with icon-only buttons', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button class="ion-activated">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" class="ion-activated">
|
||||
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Activated Buttons</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const header = page.locator('ion-header');
|
||||
await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-icon-buttons`));
|
||||
});
|
||||
|
||||
test('should not have visual regressions with buttons with icons and text', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="start" name="person-circle"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" color="secondary">
|
||||
Help
|
||||
<ion-icon slot="end" name="help-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="solid" class="ion-activated">
|
||||
<ion-icon slot="start" name="person-circle"></ion-icon>
|
||||
Solid
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Solid Activated</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" color="secondary" class="ion-activated">
|
||||
Help
|
||||
<ion-icon slot="end" name="help-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline">
|
||||
Info
|
||||
<ion-icon slot="end" name="information-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button fill="outline" class="ion-activated">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Outline Activated</ion-title>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button color="secondary" fill="outline" class="ion-activated">
|
||||
Info
|
||||
<ion-icon slot="end" name="information-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const header = page.locator('ion-header');
|
||||
await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 8.6 KiB |