mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
2 Commits
sk/react-r
...
chip-tests
| Author | SHA1 | Date | |
|---|---|---|---|
|
80e9ee2314 | ||
|
|
25a7adf7cc |
@@ -27,10 +27,6 @@ runs:
|
||||
run: npm run build
|
||||
shell: bash
|
||||
working-directory: ./packages/angular
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🔍 Check Diff
|
||||
run: git diff --exit-code
|
||||
shell: bash
|
||||
|
||||
@@ -8,7 +8,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
@@ -29,4 +29,4 @@ runs:
|
||||
with:
|
||||
name: ionic-core
|
||||
output: core/CoreBuild.zip
|
||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/package.json
|
||||
paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
|
||||
|
||||
@@ -8,7 +8,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
|
||||
@@ -31,10 +31,6 @@ runs:
|
||||
run: npm run test.spec
|
||||
shell: bash
|
||||
working-directory: ./packages/react
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🔍 Check Diff
|
||||
run: git diff --exit-code
|
||||
shell: bash
|
||||
|
||||
@@ -27,10 +27,6 @@ runs:
|
||||
run: npm run build
|
||||
shell: bash
|
||||
working-directory: ./packages/vue
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🔍 Check Diff
|
||||
run: git diff --exit-code
|
||||
shell: bash
|
||||
|
||||
@@ -17,7 +17,7 @@ runs:
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-angular
|
||||
path: ./packages/angular
|
||||
path: ./angular
|
||||
filename: AngularBuild.zip
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
|
||||
@@ -12,10 +12,6 @@ runs:
|
||||
name: ionic-core
|
||||
path: ./core
|
||||
filename: CoreBuild.zip
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🔍 Check Diff
|
||||
run: |
|
||||
git diff --exit-code || {
|
||||
|
||||
@@ -10,10 +10,6 @@ runs:
|
||||
run: npm ci
|
||||
working-directory: ./core
|
||||
shell: bash
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🖌️ Lint
|
||||
run: npm run lint
|
||||
shell: bash
|
||||
|
||||
@@ -30,10 +30,6 @@ runs:
|
||||
run: npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: Test and Update
|
||||
id: test-and-update
|
||||
if: inputs.update == 'true'
|
||||
|
||||
@@ -21,10 +21,6 @@ runs:
|
||||
find . -type f -name 'UpdatedScreenshots-*.zip' -exec unzip -q -o -d ../ {} \;
|
||||
shell: bash
|
||||
working-directory: ./artifacts
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 📸 Push Screenshots
|
||||
# Configure user as Ionitron
|
||||
# and push only the changed .png snapshots
|
||||
|
||||
32
.github/workflows/build.yml
vendored
32
.github/workflows/build.yml
vendored
@@ -22,7 +22,7 @@ jobs:
|
||||
build-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-core
|
||||
with:
|
||||
ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
|
||||
@@ -31,21 +31,21 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-core-clean-build
|
||||
|
||||
test-core-lint:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-core-lint
|
||||
|
||||
test-core-spec:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-core-spec
|
||||
|
||||
test-core-screenshot:
|
||||
@@ -62,7 +62,7 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
@@ -90,14 +90,14 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-vue
|
||||
|
||||
build-vue-router:
|
||||
needs: [build-vue]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-vue-router
|
||||
|
||||
test-vue-e2e:
|
||||
@@ -108,7 +108,7 @@ jobs:
|
||||
needs: [build-vue, build-vue-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-vue-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -126,14 +126,14 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-angular
|
||||
|
||||
build-angular-server:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-angular-server
|
||||
|
||||
test-angular-e2e:
|
||||
@@ -144,7 +144,7 @@ jobs:
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-angular-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -162,25 +162,25 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-react
|
||||
|
||||
build-react-router:
|
||||
needs: [build-react]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-react-router
|
||||
|
||||
test-react-router-e2e:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [reactrouter6]
|
||||
apps: [reactrouter5]
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-react-router-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -202,7 +202,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-react-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
|
||||
2
.github/workflows/codeql-analysis.yml
vendored
2
.github/workflows/codeql-analysis.yml
vendored
@@ -14,7 +14,7 @@ jobs:
|
||||
permissions:
|
||||
security-events: write
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: github/codeql-action/init@v4
|
||||
with:
|
||||
languages: javascript
|
||||
|
||||
2
.github/workflows/dev-build.yml
vendored
2
.github/workflows/dev-build.yml
vendored
@@ -13,7 +13,7 @@ jobs:
|
||||
outputs:
|
||||
dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
# A 1 is required before the timestamp
|
||||
# as lerna will fail when there is a leading 0
|
||||
# See https://github.com/lerna/lerna/issues/2840
|
||||
|
||||
2
.github/workflows/nightly.yml
vendored
2
.github/workflows/nightly.yml
vendored
@@ -13,7 +13,7 @@ jobs:
|
||||
outputs:
|
||||
nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
# A 1 is required before the timestamp
|
||||
# as lerna will fail when there is a leading 0
|
||||
# See https://github.com/lerna/lerna/issues/2840
|
||||
|
||||
16
.github/workflows/release-ionic.yml
vendored
16
.github/workflows/release-ionic.yml
vendored
@@ -23,7 +23,7 @@ jobs:
|
||||
release-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/actions/publish-npm
|
||||
with:
|
||||
scope: '@ionic/core'
|
||||
@@ -48,7 +48,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- name: Restore @ionic/docs built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -67,7 +67,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -93,7 +93,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -118,7 +118,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -143,7 +143,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -163,7 +163,7 @@ jobs:
|
||||
needs: [release-react]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -188,7 +188,7 @@ jobs:
|
||||
needs: [release-vue]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
|
||||
4
.github/workflows/release.yml
vendored
4
.github/workflows/release.yml
vendored
@@ -58,7 +58,7 @@ jobs:
|
||||
contents: write
|
||||
id-token: write
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
with:
|
||||
token: ${{ secrets.IONITRON_TOKEN }}
|
||||
fetch-depth: 0
|
||||
@@ -89,7 +89,7 @@ jobs:
|
||||
contents: write
|
||||
id-token: write
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
# Pull the latest version of the reference
|
||||
# branch instead of the revision that triggered
|
||||
# the workflow otherwise we won't get the commit
|
||||
|
||||
32
.github/workflows/stencil-nightly.yml
vendored
32
.github/workflows/stencil-nightly.yml
vendored
@@ -26,7 +26,7 @@ jobs:
|
||||
build-core-with-stencil-nightly:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-core-stencil-prerelease
|
||||
with:
|
||||
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
|
||||
@@ -35,21 +35,21 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-core-clean-build
|
||||
|
||||
test-core-lint:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-core-lint
|
||||
|
||||
test-core-spec:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-core-spec
|
||||
with:
|
||||
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
|
||||
@@ -72,7 +72,7 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
@@ -100,14 +100,14 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-vue
|
||||
|
||||
build-vue-router:
|
||||
needs: [build-vue]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-vue-router
|
||||
|
||||
test-vue-e2e:
|
||||
@@ -118,7 +118,7 @@ jobs:
|
||||
needs: [build-vue, build-vue-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-vue-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -136,14 +136,14 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-angular
|
||||
|
||||
build-angular-server:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-angular-server
|
||||
|
||||
test-angular-e2e:
|
||||
@@ -154,7 +154,7 @@ jobs:
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-angular-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -172,25 +172,25 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-react
|
||||
|
||||
build-react-router:
|
||||
needs: [build-react]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-react-router
|
||||
|
||||
test-react-router-e2e:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [reactrouter6]
|
||||
apps: [reactrouter5]
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-react-router-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -212,7 +212,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-react-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
|
||||
6
.github/workflows/update-screenshots.yml
vendored
6
.github/workflows/update-screenshots.yml
vendored
@@ -26,7 +26,7 @@ jobs:
|
||||
build-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/build-core
|
||||
|
||||
test-core-screenshot:
|
||||
@@ -47,7 +47,7 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
@@ -59,7 +59,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: [test-core-screenshot]
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
|
||||
# Normally, we could just push with the
|
||||
# default GITHUB_TOKEN, but that will
|
||||
# not cause the build workflow
|
||||
|
||||
356
BREAKING.md
356
BREAKING.md
@@ -4,196 +4,290 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
||||
|
||||
## Versions
|
||||
|
||||
- [Version 9.x](#version-9x)
|
||||
- [Version 8.x](./BREAKING_ARCHIVE/v8.md)
|
||||
- [Version 8.x](#version-8x)
|
||||
- [Version 7.x](./BREAKING_ARCHIVE/v7.md)
|
||||
- [Version 6.x](./BREAKING_ARCHIVE/v6.md)
|
||||
- [Version 5.x](./BREAKING_ARCHIVE/v5.md)
|
||||
- [Version 4.x](./BREAKING_ARCHIVE/v4.md)
|
||||
- [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md)
|
||||
|
||||
## Version 9.x
|
||||
## Version 8.x
|
||||
|
||||
- [Framework Specific](#version-9x-framework-specific)
|
||||
- [React](#version-9x-react)
|
||||
- [Browser and Platform Support](#version-8x-browser-platform-support)
|
||||
- [Dark Mode](#version-8x-dark-mode)
|
||||
- [Global Styles](#version-8x-global-styles)
|
||||
- [Haptics](#version-8x-haptics)
|
||||
- [Components](#version-8x-components)
|
||||
- [Button](#version-8x-button)
|
||||
- [Checkbox](#version-8x-checkbox)
|
||||
- [Content](#version-8x-content)
|
||||
- [Datetime](#version-8x-datetime)
|
||||
- [Input](#version-8x-input)
|
||||
- [Item](#version-8x-item)
|
||||
- [Modal](#version-8x-modal)
|
||||
- [Nav](#version-8x-nav)
|
||||
- [Picker](#version-8x-picker)
|
||||
- [Progress bar](#version-8x-progress-bar)
|
||||
- [Radio](#version-8x-radio)
|
||||
- [Range](#version-8x-range)
|
||||
- [Searchbar](#version-8x-searchbar)
|
||||
- [Select](#version-8x-select)
|
||||
- [Textarea](#version-8x-textarea)
|
||||
- [Toggle](#version-8x-toggle)
|
||||
- [Framework Specific](#version-8x-framework-specific)
|
||||
- [Angular](#version-8x-angular)
|
||||
|
||||
<h2 id="version-9x-framework-specific">Framework Specific</h2>
|
||||
<h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
|
||||
|
||||
<h4 id="version-9x-react">React</h4>
|
||||
This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 8.
|
||||
|
||||
The `@ionic/react-router` package now requires React Router v6. React Router v5 is no longer supported.
|
||||
**Minimum Browser Versions**
|
||||
| Desktop Browser | Supported Versions |
|
||||
| --------------- | ----------------- |
|
||||
| Chrome | 89+ |
|
||||
| Safari | 15+ |
|
||||
| Firefox | 75+ |
|
||||
| Edge | 89+ |
|
||||
|
||||
**Minimum Version Requirements**
|
||||
| Package | Supported Version |
|
||||
| ---------------- | ----------------- |
|
||||
| react-router | 6.0.0+ |
|
||||
| react-router-dom | 6.0.0+ |
|
||||
**Minimum JavaScript Framework Versions**
|
||||
| Framework | Supported Version |
|
||||
| --------- | --------------------- |
|
||||
| Angular | 16+ |
|
||||
| React | 17+ |
|
||||
| Vue | 3.0.6+ |
|
||||
|
||||
React Router v6 introduces several API changes that will require updates to your application's routing configuration:
|
||||
**Minimum Mobile Platform Versions**
|
||||
| Platform | Supported Version |
|
||||
| -------- | ---------------------- |
|
||||
| iOS | 15+ |
|
||||
| Android | 5.1+ with Chromium 89+ |
|
||||
|
||||
**Route Definition Changes**
|
||||
Ionic Framework v8 removes backwards support for CSS Animations in favor of the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). All minimum browser versions listed above support the Web Animations API.
|
||||
|
||||
The `component` prop has been replaced with the `element` prop, which accepts JSX:
|
||||
<h2 id="version-8x-dark-mode">Dark Mode</h2>
|
||||
|
||||
```diff
|
||||
- <Route path="/home" component={Home} exact />
|
||||
+ <Route path="/home" element={<Home />} />
|
||||
|
||||
In previous versions, it was recommended to define the dark palette in the following way:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
/* global app variables */
|
||||
}
|
||||
|
||||
.ios body {
|
||||
/* global ios app variables */
|
||||
}
|
||||
|
||||
.md body {
|
||||
/* global md app variables */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Redirect Changes**
|
||||
In Ionic Framework version 8, the dark palette is being distributed via css files that can be imported. Below is an example of importing a dark palette file in Angular:
|
||||
|
||||
The `<Redirect>` component has been replaced with `<Navigate>`:
|
||||
|
||||
```diff
|
||||
- import { Redirect } from 'react-router-dom';
|
||||
+ import { Navigate } from 'react-router-dom';
|
||||
|
||||
- <Redirect to="/home" />
|
||||
+ <Navigate to="/home" replace />
|
||||
```css
|
||||
/* @import '@ionic/angular/css/palettes/dark.always.css'; */
|
||||
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
|
||||
@import "@ionic/angular/css/palettes/dark.system.css";
|
||||
```
|
||||
|
||||
**Nested Route Paths**
|
||||
By importing the `dark.system.css` file, the dark palette variables will be defined like the following:
|
||||
|
||||
Routes that contain nested routes or child `IonRouterOutlet` components need a `/*` suffix to match sub-paths:
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* global app variables */
|
||||
}
|
||||
|
||||
```diff
|
||||
- <Route path="/tabs" element={<Tabs />} />
|
||||
+ <Route path="/tabs/*" element={<Tabs />} />
|
||||
:root.ios {
|
||||
/* global ios app variables */
|
||||
}
|
||||
|
||||
:root.md {
|
||||
/* global md app variables */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Accessing Route Parameters**
|
||||
Notice that the dark palette is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.
|
||||
|
||||
Route parameters are now accessed via the `useParams` hook instead of props:
|
||||
While migrating to include the new dark palette files is unlikely to cause breaking changes, these new selectors can lead to unexpected overrides if custom CSS variables are being set on the `body` element. We recommend updating any instances where global application variables are set to target the `:root` selector instead.
|
||||
|
||||
For more information on the new dark palette files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
|
||||
|
||||
<h2 id="version-8x-global-styles">Global Styles</h2>
|
||||
|
||||
<h4 id="version-8x-text-color">Text Color</h4>
|
||||
|
||||
The `core.css` file has been updated to set the text color on the `body` element:
|
||||
|
||||
```diff
|
||||
- import { RouteComponentProps } from 'react-router-dom';
|
||||
+ import { useParams } from 'react-router-dom';
|
||||
|
||||
- const MyComponent: React.FC<RouteComponentProps<{ id: string }>> = ({ match }) => {
|
||||
- const id = match.params.id;
|
||||
+ const MyComponent: React.FC = () => {
|
||||
+ const { id } = useParams<{ id: string }>();
|
||||
body {
|
||||
+ color: var(--ion-text-color);
|
||||
}
|
||||
```
|
||||
|
||||
**RouteComponentProps Removed**
|
||||
This allows components to inherit the color properly when used outside of Ionic Framework and is required for custom themes to work properly. However, it may have unintentional side effects in apps if the color was not expected to inherit.
|
||||
|
||||
The `RouteComponentProps` type and its `history`, `location`, and `match` props are no longer available in React Router v6. Use the equivalent hooks instead:
|
||||
<h4 id="version-8x-dynamic-font">Dynamic Font</h4>
|
||||
|
||||
- `history` -> `useNavigate` (see below) or `useIonRouter`
|
||||
- `match.params` -> `useParams` (covered above)
|
||||
- `location` -> `useLocation`
|
||||
The `core.css` file has been updated to enable dynamic font scaling by default.
|
||||
|
||||
```diff
|
||||
- import { RouteComponentProps } from 'react-router-dom';
|
||||
+ import { useNavigate, useLocation } from 'react-router-dom';
|
||||
+ import { useIonRouter } from '@ionic/react';
|
||||
The `--ion-default-dynamic-font` variable has been removed and replaced with `--ion-dynamic-font`.
|
||||
|
||||
- const MyComponent: React.FC<RouteComponentProps> = ({ history, location }) => {
|
||||
- history.push('/path');
|
||||
- history.replace('/path');
|
||||
- history.goBack();
|
||||
- console.log(location.pathname);
|
||||
+ const MyComponent: React.FC = () => {
|
||||
+ const navigate = useNavigate();
|
||||
+ const router = useIonRouter();
|
||||
+ const location = useLocation();
|
||||
+ // In an event handler or useEffect:
|
||||
+ navigate('/path');
|
||||
+ navigate('/path', { replace: true });
|
||||
+ router.goBack();
|
||||
+ console.log(location.pathname);
|
||||
Developers who had previously chosen dynamic font scaling by activating it in their global stylesheets can revert to the default setting by removing their custom CSS. In doing so, their application will seamlessly continue utilizing dynamic font scaling as it did before. It's essential to note that altering the font-size of the html element should be avoided, as it may disrupt the proper functioning of dynamic font scaling.
|
||||
|
||||
Developers who want to disable dynamic font scaling can set `--ion-dynamic-font: initial;` in their global stylesheets. However, this is not recommended because it may introduce accessibility challenges for users who depend on enlarged font sizes.
|
||||
|
||||
For more information on the dynamic font, refer to the [Dynamic Font Scaling documentation](https://ionicframework.com/docs/layout/dynamic-font-scaling).
|
||||
|
||||
<h2 id="version-8x-haptics">Haptics</h2>
|
||||
|
||||
- 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.
|
||||
|
||||
<h2 id="version-8x-components">Components</h2>
|
||||
|
||||
<h4 id="version-8x-button">Button</h4>
|
||||
|
||||
- Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).
|
||||
|
||||
<h4 id="version-8x-checkbox">Checkbox</h4>
|
||||
|
||||
The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
|
||||
|
||||
<h4 id="version-8x-content">Content</h4>
|
||||
|
||||
- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
|
||||
|
||||
<h4 id="version-8x-datetime">Datetime</h4>
|
||||
|
||||
- The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.
|
||||
- Developers using the CSS variables available on `ion-item` will need to migrate their CSS to use CSS properties. For example:
|
||||
```diff
|
||||
ion-datetime::part(month-year-button) {
|
||||
- --background: red;
|
||||
|
||||
+ background: red;
|
||||
}
|
||||
```
|
||||
|
||||
<h4 id="version-8x-input">Input</h4>
|
||||
|
||||
- `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input.
|
||||
- `accept` has been removed from the `ion-input` component. This was previously used in conjunction with the `type="file"`. However, the `file` value for `type` is not a valid value in Ionic Framework.
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-input` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy input syntax, refer to the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax).
|
||||
|
||||
<h4 id="version-8x-item">Item</h4>
|
||||
|
||||
- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`.
|
||||
- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`.
|
||||
- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`.
|
||||
- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
|
||||
- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
|
||||
- Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected.
|
||||
|
||||
<h5>CSS variables</h4>
|
||||
|
||||
The following deprecated CSS variables have been removed: `--highlight-height`, `--highlight-color-focused`, `--highlight-color-valid`, and `--highlight-color-invalid`. These variables were used on the bottom border highlight of an item when the form control inside of that item was focused. The form control syntax was [simplified in v7](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax) so that inputs, selects, and textareas would no longer be required to be used inside of an item.
|
||||
|
||||
If you have not yet migrated to the modern form control syntax, migration guides for each of the form controls that added a highlight to item can be found below:
|
||||
- [Input migration documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax)
|
||||
- [Select migration documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax)
|
||||
- [Textarea migration documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax)
|
||||
|
||||
Once all form controls are using the modern syntax, the same variables can be used to customize them from the form control itself:
|
||||
|
||||
| Name | Description |
|
||||
| ----------------------------| ----------------------------------------|
|
||||
| `--highlight-color-focused` | The color of the highlight when focused |
|
||||
| `--highlight-color-invalid` | The color of the highlight when invalid |
|
||||
| `--highlight-color-valid` | The color of the highlight when valid |
|
||||
| `--highlight-height` | The height of the highlight indicator |
|
||||
|
||||
The following styles for item:
|
||||
|
||||
```css
|
||||
ion-item {
|
||||
--highlight-color-focused: purple;
|
||||
--highlight-color-valid: blue;
|
||||
--highlight-color-invalid: orange;
|
||||
--highlight-height: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
**Exact Prop Removed**
|
||||
will instead be applied on the form controls:
|
||||
|
||||
The `exact` prop is no longer needed. React Router v6 routes match exactly by default. To match sub-paths, use a `/*` suffix on the path:
|
||||
|
||||
```diff
|
||||
- <Route path="/home" exact />
|
||||
+ <Route path="/home" />
|
||||
```css
|
||||
ion-input,
|
||||
ion-textarea,
|
||||
ion-select {
|
||||
--highlight-color-focused: purple;
|
||||
--highlight-color-valid: blue;
|
||||
--highlight-color-invalid: orange;
|
||||
--highlight-height: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
**Render Prop Removed**
|
||||
> [!NOTE]
|
||||
> The input and textarea components are scoped, which means they will automatically scope their CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` or `ion-textarea` for customization will not work; therefore we recommend adding a class and customizing it that way.
|
||||
|
||||
The `render` prop has been replaced with the `element` prop:
|
||||
<h4 id="version-8x-modal">Modal</h4>
|
||||
|
||||
```diff
|
||||
- <Route path="/foo" render={(props) => <Foo {...props} />} />
|
||||
+ <Route path="/foo" element={<Foo />} />
|
||||
```
|
||||
- Detection for Capacitor <= 2 with applying status bar styles has been removed. Developers should ensure they are using Capacitor 3 or later when using the card modal presentation.
|
||||
|
||||
**Programmatic Navigation**
|
||||
<h4 id="version-8x-nav">Nav</h4>
|
||||
|
||||
The `useHistory` hook has been replaced with `useNavigate`:
|
||||
- `getLength` returns `Promise<number>` instead of `<number>`. This method was not previously available in Nav's TypeScript interface, but developers could still access it by casting Nav as `any`. Developers should ensure they `await` their `getLength` call before accessing the returned value.
|
||||
|
||||
```diff
|
||||
- import { useHistory } from 'react-router-dom';
|
||||
+ import { useNavigate } from 'react-router-dom';
|
||||
+ import { useIonRouter } from '@ionic/react';
|
||||
<h4 id="version-8x-picker">Picker</h4>
|
||||
|
||||
- const history = useHistory();
|
||||
+ const navigate = useNavigate();
|
||||
+ const router = useIonRouter();
|
||||
- `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
|
||||
- Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
|
||||
- Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
|
||||
|
||||
- history.push('/path');
|
||||
+ navigate('/path');
|
||||
<h4 id="version-8x-progress-bar">Progress bar</h4>
|
||||
|
||||
- history.replace('/path');
|
||||
+ navigate('/path', { replace: true });
|
||||
- The `--buffer-background` CSS variable has been removed. Use `--background` instead.
|
||||
|
||||
- history.goBack();
|
||||
+ router.goBack();
|
||||
```
|
||||
<h4 id="version-8x-toast">Toast</h4>
|
||||
|
||||
**Custom History Prop Removed**
|
||||
- `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons.
|
||||
|
||||
The `history` prop has been removed from `IonReactRouter`, `IonReactHashRouter`, and `IonReactMemoryRouter`. React Router v6's `BrowserRouter`, `HashRouter`, and `MemoryRouter` no longer accept custom `history` objects.
|
||||
For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).
|
||||
|
||||
```diff
|
||||
- import { createBrowserHistory } from 'history';
|
||||
- const history = createBrowserHistory();
|
||||
- <IonReactRouter history={history}>
|
||||
+ <IonReactRouter>
|
||||
```
|
||||
<h4 id="version-8x-radio">Radio</h4>
|
||||
|
||||
For `IonReactMemoryRouter` (commonly used in tests), use `initialEntries` instead:
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
|
||||
|
||||
```diff
|
||||
- import { createMemoryHistory } from 'history';
|
||||
- const history = createMemoryHistory({ initialEntries: ['/start'] });
|
||||
- <IonReactMemoryRouter history={history}>
|
||||
+ <IonReactMemoryRouter initialEntries={['/start']}>
|
||||
```
|
||||
<h4 id="version-8x-range">Range</h4>
|
||||
|
||||
**IonRedirect Removed**
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
|
||||
|
||||
The `IonRedirect` component has been removed. Use React Router's `<Navigate>` component instead:
|
||||
<h4 id="version-8x-searchbar">Searchbar</h4>
|
||||
|
||||
```diff
|
||||
- import { IonRedirect } from '@ionic/react';
|
||||
- <IonRedirect path="/old" to="/new" exact />
|
||||
+ import { Navigate } from 'react-router-dom';
|
||||
+ <Route path="/old" element={<Navigate to="/new" replace />} />
|
||||
```
|
||||
- The `autocapitalize` property now defaults to `'off'`.
|
||||
|
||||
**Path Regex Constraints Removed**
|
||||
<h4 id="version-8x-select">Select</h4>
|
||||
|
||||
React Router v6 no longer supports regex constraints in path parameters (e.g., `/:tab(sessions)`). Use literal paths instead:
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
|
||||
|
||||
```diff
|
||||
- <Route path="/:tab(sessions)" component={SessionsPage} />
|
||||
- <Route path="/:tab(sessions)/:id" component={SessionDetail} />
|
||||
+ <Route path="/sessions" element={<SessionsPage />} />
|
||||
+ <Route path="/sessions/:id" element={<SessionDetail />} />
|
||||
```
|
||||
<h4 id="version-8x-textarea">Textarea</h4>
|
||||
|
||||
**IonRoute API Changes**
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax).
|
||||
|
||||
The `IonRoute` component follows the same API changes as React Router's `<Route>`. The `render` prop has been replaced with `element`, and the `exact` prop has been removed:
|
||||
<h4 id="version-8x-toggle">Toggle</h4>
|
||||
|
||||
```diff
|
||||
- <IonRoute path="/foo" exact render={(props) => <Foo {...props} />} />
|
||||
+ <IonRoute path="/foo" element={<Foo />} />
|
||||
```
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax).
|
||||
|
||||
For more information on migrating from React Router v5 to v6, refer to the [React Router v6 Upgrade Guide](https://reactrouter.com/6.28.0/upgrading/v5).
|
||||
<h2 id="version-8x-framework-specific">Framework Specific</h2>
|
||||
|
||||
<h4 id="version-8x-angular">Angular</h4>
|
||||
|
||||
- The `IonBackButtonDelegate` class has been removed in favor of `IonBackButton`.
|
||||
|
||||
```diff
|
||||
- import { IonBackButtonDelegate } from '@ionic/angular';
|
||||
+ import { IonBackButton } from '@ionic/angular';
|
||||
```
|
||||
|
||||
@@ -1,282 +0,0 @@
|
||||
# Breaking Changes
|
||||
|
||||
## Version 8.x
|
||||
|
||||
- [Browser and Platform Support](#version-8x-browser-platform-support)
|
||||
- [Dark Mode](#version-8x-dark-mode)
|
||||
- [Global Styles](#version-8x-global-styles)
|
||||
- [Haptics](#version-8x-haptics)
|
||||
- [Components](#version-8x-components)
|
||||
- [Button](#version-8x-button)
|
||||
- [Checkbox](#version-8x-checkbox)
|
||||
- [Content](#version-8x-content)
|
||||
- [Datetime](#version-8x-datetime)
|
||||
- [Input](#version-8x-input)
|
||||
- [Item](#version-8x-item)
|
||||
- [Modal](#version-8x-modal)
|
||||
- [Nav](#version-8x-nav)
|
||||
- [Picker](#version-8x-picker)
|
||||
- [Progress bar](#version-8x-progress-bar)
|
||||
- [Radio](#version-8x-radio)
|
||||
- [Range](#version-8x-range)
|
||||
- [Searchbar](#version-8x-searchbar)
|
||||
- [Select](#version-8x-select)
|
||||
- [Textarea](#version-8x-textarea)
|
||||
- [Toggle](#version-8x-toggle)
|
||||
- [Framework Specific](#version-8x-framework-specific)
|
||||
- [Angular](#version-8x-angular)
|
||||
|
||||
<h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
|
||||
|
||||
This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 8.
|
||||
|
||||
**Minimum Browser Versions**
|
||||
| Desktop Browser | Supported Versions |
|
||||
| --------------- | ----------------- |
|
||||
| Chrome | 89+ |
|
||||
| Safari | 15+ |
|
||||
| Firefox | 75+ |
|
||||
| Edge | 89+ |
|
||||
|
||||
**Minimum JavaScript Framework Versions**
|
||||
| Framework | Supported Version |
|
||||
| --------- | --------------------- |
|
||||
| Angular | 16+ |
|
||||
| React | 17+ |
|
||||
| Vue | 3.0.6+ |
|
||||
|
||||
**Minimum Mobile Platform Versions**
|
||||
| Platform | Supported Version |
|
||||
| -------- | ---------------------- |
|
||||
| iOS | 15+ |
|
||||
| Android | 5.1+ with Chromium 89+ |
|
||||
|
||||
Ionic Framework v8 removes backwards support for CSS Animations in favor of the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). All minimum browser versions listed above support the Web Animations API.
|
||||
|
||||
<h2 id="version-8x-dark-mode">Dark Mode</h2>
|
||||
|
||||
|
||||
In previous versions, it was recommended to define the dark palette in the following way:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
/* global app variables */
|
||||
}
|
||||
|
||||
.ios body {
|
||||
/* global ios app variables */
|
||||
}
|
||||
|
||||
.md body {
|
||||
/* global md app variables */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In Ionic Framework version 8, the dark palette is being distributed via css files that can be imported. Below is an example of importing a dark palette file in Angular:
|
||||
|
||||
```css
|
||||
/* @import '@ionic/angular/css/palettes/dark.always.css'; */
|
||||
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
|
||||
@import "@ionic/angular/css/palettes/dark.system.css";
|
||||
```
|
||||
|
||||
By importing the `dark.system.css` file, the dark palette variables will be defined like the following:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* global app variables */
|
||||
}
|
||||
|
||||
:root.ios {
|
||||
/* global ios app variables */
|
||||
}
|
||||
|
||||
:root.md {
|
||||
/* global md app variables */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Notice that the dark palette is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.
|
||||
|
||||
While migrating to include the new dark palette files is unlikely to cause breaking changes, these new selectors can lead to unexpected overrides if custom CSS variables are being set on the `body` element. We recommend updating any instances where global application variables are set to target the `:root` selector instead.
|
||||
|
||||
For more information on the new dark palette files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
|
||||
|
||||
<h2 id="version-8x-global-styles">Global Styles</h2>
|
||||
|
||||
<h4 id="version-8x-text-color">Text Color</h4>
|
||||
|
||||
The `core.css` file has been updated to set the text color on the `body` element:
|
||||
|
||||
```diff
|
||||
body {
|
||||
+ color: var(--ion-text-color);
|
||||
}
|
||||
```
|
||||
|
||||
This allows components to inherit the color properly when used outside of Ionic Framework and is required for custom themes to work properly. However, it may have unintentional side effects in apps if the color was not expected to inherit.
|
||||
|
||||
<h4 id="version-8x-dynamic-font">Dynamic Font</h4>
|
||||
|
||||
The `core.css` file has been updated to enable dynamic font scaling by default.
|
||||
|
||||
The `--ion-default-dynamic-font` variable has been removed and replaced with `--ion-dynamic-font`.
|
||||
|
||||
Developers who had previously chosen dynamic font scaling by activating it in their global stylesheets can revert to the default setting by removing their custom CSS. In doing so, their application will seamlessly continue utilizing dynamic font scaling as it did before. It's essential to note that altering the font-size of the html element should be avoided, as it may disrupt the proper functioning of dynamic font scaling.
|
||||
|
||||
Developers who want to disable dynamic font scaling can set `--ion-dynamic-font: initial;` in their global stylesheets. However, this is not recommended because it may introduce accessibility challenges for users who depend on enlarged font sizes.
|
||||
|
||||
For more information on the dynamic font, refer to the [Dynamic Font Scaling documentation](https://ionicframework.com/docs/layout/dynamic-font-scaling).
|
||||
|
||||
<h2 id="version-8x-haptics">Haptics</h2>
|
||||
|
||||
- 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.
|
||||
|
||||
<h2 id="version-8x-components">Components</h2>
|
||||
|
||||
<h4 id="version-8x-button">Button</h4>
|
||||
|
||||
- Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).
|
||||
|
||||
<h4 id="version-8x-checkbox">Checkbox</h4>
|
||||
|
||||
The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
|
||||
|
||||
<h4 id="version-8x-content">Content</h4>
|
||||
|
||||
- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
|
||||
|
||||
<h4 id="version-8x-datetime">Datetime</h4>
|
||||
|
||||
- The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.
|
||||
- Developers using the CSS variables available on `ion-item` will need to migrate their CSS to use CSS properties. For example:
|
||||
```diff
|
||||
ion-datetime::part(month-year-button) {
|
||||
- --background: red;
|
||||
|
||||
+ background: red;
|
||||
}
|
||||
```
|
||||
|
||||
<h4 id="version-8x-input">Input</h4>
|
||||
|
||||
- `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input.
|
||||
- `accept` has been removed from the `ion-input` component. This was previously used in conjunction with the `type="file"`. However, the `file` value for `type` is not a valid value in Ionic Framework.
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-input` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy input syntax, refer to the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax).
|
||||
|
||||
<h4 id="version-8x-item">Item</h4>
|
||||
|
||||
- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`.
|
||||
- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`.
|
||||
- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`.
|
||||
- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
|
||||
- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
|
||||
- Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected.
|
||||
|
||||
<h5>CSS variables</h4>
|
||||
|
||||
The following deprecated CSS variables have been removed: `--highlight-height`, `--highlight-color-focused`, `--highlight-color-valid`, and `--highlight-color-invalid`. These variables were used on the bottom border highlight of an item when the form control inside of that item was focused. The form control syntax was [simplified in v7](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax) so that inputs, selects, and textareas would no longer be required to be used inside of an item.
|
||||
|
||||
If you have not yet migrated to the modern form control syntax, migration guides for each of the form controls that added a highlight to item can be found below:
|
||||
- [Input migration documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax)
|
||||
- [Select migration documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax)
|
||||
- [Textarea migration documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax)
|
||||
|
||||
Once all form controls are using the modern syntax, the same variables can be used to customize them from the form control itself:
|
||||
|
||||
| Name | Description |
|
||||
| ----------------------------| ----------------------------------------|
|
||||
| `--highlight-color-focused` | The color of the highlight when focused |
|
||||
| `--highlight-color-invalid` | The color of the highlight when invalid |
|
||||
| `--highlight-color-valid` | The color of the highlight when valid |
|
||||
| `--highlight-height` | The height of the highlight indicator |
|
||||
|
||||
The following styles for item:
|
||||
|
||||
```css
|
||||
ion-item {
|
||||
--highlight-color-focused: purple;
|
||||
--highlight-color-valid: blue;
|
||||
--highlight-color-invalid: orange;
|
||||
--highlight-height: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
will instead be applied on the form controls:
|
||||
|
||||
```css
|
||||
ion-input,
|
||||
ion-textarea,
|
||||
ion-select {
|
||||
--highlight-color-focused: purple;
|
||||
--highlight-color-valid: blue;
|
||||
--highlight-color-invalid: orange;
|
||||
--highlight-height: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> The input and textarea components are scoped, which means they will automatically scope their CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` or `ion-textarea` for customization will not work; therefore we recommend adding a class and customizing it that way.
|
||||
|
||||
<h4 id="version-8x-modal">Modal</h4>
|
||||
|
||||
- Detection for Capacitor <= 2 with applying status bar styles has been removed. Developers should ensure they are using Capacitor 3 or later when using the card modal presentation.
|
||||
|
||||
<h4 id="version-8x-nav">Nav</h4>
|
||||
|
||||
- `getLength` returns `Promise<number>` instead of `<number>`. This method was not previously available in Nav's TypeScript interface, but developers could still access it by casting Nav as `any`. Developers should ensure they `await` their `getLength` call before accessing the returned value.
|
||||
|
||||
<h4 id="version-8x-picker">Picker</h4>
|
||||
|
||||
- `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
|
||||
- Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
|
||||
- Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
|
||||
|
||||
<h4 id="version-8x-progress-bar">Progress bar</h4>
|
||||
|
||||
- The `--buffer-background` CSS variable has been removed. Use `--background` instead.
|
||||
|
||||
<h4 id="version-8x-toast">Toast</h4>
|
||||
|
||||
- `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons.
|
||||
|
||||
For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).
|
||||
|
||||
<h4 id="version-8x-radio">Radio</h4>
|
||||
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
|
||||
|
||||
<h4 id="version-8x-range">Range</h4>
|
||||
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
|
||||
|
||||
<h4 id="version-8x-searchbar">Searchbar</h4>
|
||||
|
||||
- The `autocapitalize` property now defaults to `'off'`.
|
||||
|
||||
<h4 id="version-8x-select">Select</h4>
|
||||
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
|
||||
|
||||
<h4 id="version-8x-textarea">Textarea</h4>
|
||||
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax).
|
||||
|
||||
<h4 id="version-8x-toggle">Toggle</h4>
|
||||
|
||||
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-toggle` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy toggle syntax, refer to the [Toggle documentation](https://ionicframework.com/docs/api/toggle#migrating-from-legacy-toggle-syntax).
|
||||
|
||||
<h2 id="version-8x-framework-specific">Framework Specific</h2>
|
||||
|
||||
<h4 id="version-8x-angular">Angular</h4>
|
||||
|
||||
- The `IonBackButtonDelegate` class has been removed in favor of `IonBackButton`.
|
||||
|
||||
```diff
|
||||
- import { IonBackButtonDelegate } from '@ionic/angular';
|
||||
+ import { IonBackButton } from '@ionic/angular';
|
||||
```
|
||||
42
CHANGELOG.md
42
CHANGELOG.md
@@ -3,48 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **angular:** add custom injector support for modal and popover controllers ([#30899](https://github.com/ionic-team/ionic-framework/issues/30899)) ([822da42](https://github.com/ionic-team/ionic-framework/commit/822da428af86cd9b036b81515272321eb8fa586c)), closes [#30638](https://github.com/ionic-team/ionic-framework/issues/30638)
|
||||
* **content:** add content-fullscreen class when fullscreen is true ([#30926](https://github.com/ionic-team/ionic-framework/issues/30926)) ([d74b11b](https://github.com/ionic-team/ionic-framework/commit/d74b11bc19d6268b256daf23ba6f107483c00320))
|
||||
* **datetime:** add header parts ([#30945](https://github.com/ionic-team/ionic-framework/issues/30945)) ([6ea186d](https://github.com/ionic-team/ionic-framework/commit/6ea186d96d80a94b774d4d0a51d536e0e5599935))
|
||||
* **datetime:** add wheel part to ion-picker-column ([#30934](https://github.com/ionic-team/ionic-framework/issues/30934)) ([0cf4c03](https://github.com/ionic-team/ionic-framework/commit/0cf4c03e298bb4f7eea71c966a1473765ebd6d7a))
|
||||
* **item-divider:** add inner and container parts ([#30928](https://github.com/ionic-team/ionic-framework/issues/30928)) ([5cdeb7f](https://github.com/ionic-team/ionic-framework/commit/5cdeb7fd357298f15e7ae29b14412d97bdc7c656))
|
||||
* **item-option:** add inner and container parts ([#30929](https://github.com/ionic-team/ionic-framework/issues/30929)) ([f8f7ffd](https://github.com/ionic-team/ionic-framework/commit/f8f7ffda318c0143d9bb5c79fe55b4ecb88e6ce3))
|
||||
* **item:** add inner and container parts ([#30927](https://github.com/ionic-team/ionic-framework/issues/30927)) ([a2c6559](https://github.com/ionic-team/ionic-framework/commit/a2c655923bb1cff51864949575e19028623c695d))
|
||||
* **list-header:** add inner part ([#30930](https://github.com/ionic-team/ionic-framework/issues/30930)) ([ef73476](https://github.com/ionic-team/ionic-framework/commit/ef73476e08670630907e775a38f9ed30a84e3f1f))
|
||||
* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4))
|
||||
* **range:** add classes and expose parts to allow individual styling of dual knobs ([#30941](https://github.com/ionic-team/ionic-framework/issues/30941)) ([5bcf921](https://github.com/ionic-team/ionic-framework/commit/5bcf92184118055483bf306ab9e319b8e3e61870)), closes [#29862](https://github.com/ionic-team/ionic-framework/issues/29862)
|
||||
* **range:** add classes to the range when the value is at the min or max ([#30932](https://github.com/ionic-team/ionic-framework/issues/30932)) ([fac1a66](https://github.com/ionic-team/ionic-framework/commit/fac1a6673c88a531f1d79656be4eb544f235f819))
|
||||
* **refresher:** add ionPullStart and ionPullEnd events ([#30946](https://github.com/ionic-team/ionic-framework/issues/30946)) ([814c2e5](https://github.com/ionic-team/ionic-framework/commit/814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b)), closes [#24524](https://github.com/ionic-team/ionic-framework/issues/24524)
|
||||
* **segment-view:** add swipeGesture property to disable swiping ([#30948](https://github.com/ionic-team/ionic-framework/issues/30948)) ([46806bd](https://github.com/ionic-team/ionic-framework/commit/46806bd6e2af90a0b31fca68f508c06d3d281ec0)), closes [#30290](https://github.com/ionic-team/ionic-framework/issues/30290)
|
||||
* **select:** add wrapper and bottom shadow parts ([#30951](https://github.com/ionic-team/ionic-framework/issues/30951)) ([5cea5ae](https://github.com/ionic-team/ionic-framework/commit/5cea5aeb44393edab7064e5980a1eb7e607d1b8d))
|
||||
* **select:** pass cancelText property to modal interface ([#30282](https://github.com/ionic-team/ionic-framework/issues/30282)) ([6e4f60a](https://github.com/ionic-team/ionic-framework/commit/6e4f60af4c188ae04028b444aa21118ae27c2ca7))
|
||||
* **textarea:** reflect disabled and readonly props ([#30910](https://github.com/ionic-team/ionic-framework/issues/30910)) ([55735df](https://github.com/ionic-team/ionic-framework/commit/55735df3fa62c8e259c56db3169f3d5459e71c0c))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **datetime:** stretch ion-buttons to fill space for ios ([#30963](https://github.com/ionic-team/ionic-framework/issues/30963)) ([d46b0b1](https://github.com/ionic-team/ionic-framework/commit/d46b0b15f6a652da6f863cf303e7ce06cfc820a8))
|
||||
* **many:** clear timeouts ([#30851](https://github.com/ionic-team/ionic-framework/issues/30851)) ([70b1237](https://github.com/ionic-team/ionic-framework/commit/70b1237823dd0cdab852486a6b2cbbfe0d0aaae9)), closes [#30860](https://github.com/ionic-team/ionic-framework/issues/30860)
|
||||
* **modal, popover:** respect safe area insets on popovers and modals ([#30949](https://github.com/ionic-team/ionic-framework/issues/30949)) ([6490797](https://github.com/ionic-team/ionic-framework/commit/6490797851cede3bfda893a19b10f165259ec988)), closes [#28411](https://github.com/ionic-team/ionic-framework/issues/28411)
|
||||
* **nav-controller:** reset direction state when navigation is canceled ([#30955](https://github.com/ionic-team/ionic-framework/issues/30955)) ([53172d1](https://github.com/ionic-team/ionic-framework/commit/53172d1a4035d5b510c230553aabd53dc1389e4b))
|
||||
* **radio-group:** prevent DOMException and NotFoundError when filtering radios ([#30958](https://github.com/ionic-team/ionic-framework/issues/30958)) ([682a17e](https://github.com/ionic-team/ionic-framework/commit/682a17ebb754da7714989623cf84b75e715e20e1)), closes [#30279](https://github.com/ionic-team/ionic-framework/issues/30279) [#30359](https://github.com/ionic-team/ionic-framework/issues/30359)
|
||||
* **toast:** keep icon on the same line as long message in stacked layout ([#30923](https://github.com/ionic-team/ionic-framework/issues/30923)) ([442e3e9](https://github.com/ionic-team/ionic-framework/commit/442e3e983107a69cea4fb5587fb33da718eee8a3)), closes [#30908](https://github.com/ionic-team/ionic-framework/issues/30908)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
|
||||
|
||||
|
||||
|
||||
@@ -3,46 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [8.8.0](https://github.com/ionic-team/ionic-framework/compare/v8.7.18...v8.8.0) (2026-03-04)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **content:** add content-fullscreen class when fullscreen is true ([#30926](https://github.com/ionic-team/ionic-framework/issues/30926)) ([d74b11b](https://github.com/ionic-team/ionic-framework/commit/d74b11bc19d6268b256daf23ba6f107483c00320))
|
||||
* **datetime:** add header parts ([#30945](https://github.com/ionic-team/ionic-framework/issues/30945)) ([6ea186d](https://github.com/ionic-team/ionic-framework/commit/6ea186d96d80a94b774d4d0a51d536e0e5599935))
|
||||
* **datetime:** add wheel part to ion-picker-column ([#30934](https://github.com/ionic-team/ionic-framework/issues/30934)) ([0cf4c03](https://github.com/ionic-team/ionic-framework/commit/0cf4c03e298bb4f7eea71c966a1473765ebd6d7a))
|
||||
* **item-divider:** add inner and container parts ([#30928](https://github.com/ionic-team/ionic-framework/issues/30928)) ([5cdeb7f](https://github.com/ionic-team/ionic-framework/commit/5cdeb7fd357298f15e7ae29b14412d97bdc7c656))
|
||||
* **item-option:** add inner and container parts ([#30929](https://github.com/ionic-team/ionic-framework/issues/30929)) ([f8f7ffd](https://github.com/ionic-team/ionic-framework/commit/f8f7ffda318c0143d9bb5c79fe55b4ecb88e6ce3))
|
||||
* **item:** add inner and container parts ([#30927](https://github.com/ionic-team/ionic-framework/issues/30927)) ([a2c6559](https://github.com/ionic-team/ionic-framework/commit/a2c655923bb1cff51864949575e19028623c695d))
|
||||
* **list-header:** add inner part ([#30930](https://github.com/ionic-team/ionic-framework/issues/30930)) ([ef73476](https://github.com/ionic-team/ionic-framework/commit/ef73476e08670630907e775a38f9ed30a84e3f1f))
|
||||
* **modal:** add drag events for sheet and card modals ([#30962](https://github.com/ionic-team/ionic-framework/issues/30962)) ([d29ac71](https://github.com/ionic-team/ionic-framework/commit/d29ac713fad604c256fb385eb0c26eb9717e1ff4))
|
||||
* **range:** add classes and expose parts to allow individual styling of dual knobs ([#30941](https://github.com/ionic-team/ionic-framework/issues/30941)) ([5bcf921](https://github.com/ionic-team/ionic-framework/commit/5bcf92184118055483bf306ab9e319b8e3e61870)), closes [#29862](https://github.com/ionic-team/ionic-framework/issues/29862)
|
||||
* **range:** add classes to the range when the value is at the min or max ([#30932](https://github.com/ionic-team/ionic-framework/issues/30932)) ([fac1a66](https://github.com/ionic-team/ionic-framework/commit/fac1a6673c88a531f1d79656be4eb544f235f819))
|
||||
* **refresher:** add ionPullStart and ionPullEnd events ([#30946](https://github.com/ionic-team/ionic-framework/issues/30946)) ([814c2e5](https://github.com/ionic-team/ionic-framework/commit/814c2e5ccd6d5bfda12bdf13a566cd66ff830d5b)), closes [#24524](https://github.com/ionic-team/ionic-framework/issues/24524)
|
||||
* **segment-view:** add swipeGesture property to disable swiping ([#30948](https://github.com/ionic-team/ionic-framework/issues/30948)) ([46806bd](https://github.com/ionic-team/ionic-framework/commit/46806bd6e2af90a0b31fca68f508c06d3d281ec0)), closes [#30290](https://github.com/ionic-team/ionic-framework/issues/30290)
|
||||
* **select:** add wrapper and bottom shadow parts ([#30951](https://github.com/ionic-team/ionic-framework/issues/30951)) ([5cea5ae](https://github.com/ionic-team/ionic-framework/commit/5cea5aeb44393edab7064e5980a1eb7e607d1b8d))
|
||||
* **select:** pass cancelText property to modal interface ([#30282](https://github.com/ionic-team/ionic-framework/issues/30282)) ([6e4f60a](https://github.com/ionic-team/ionic-framework/commit/6e4f60af4c188ae04028b444aa21118ae27c2ca7))
|
||||
* **textarea:** reflect disabled and readonly props ([#30910](https://github.com/ionic-team/ionic-framework/issues/30910)) ([55735df](https://github.com/ionic-team/ionic-framework/commit/55735df3fa62c8e259c56db3169f3d5459e71c0c))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.18](https://github.com/ionic-team/ionic-framework/compare/v8.7.17...v8.7.18) (2026-02-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **datetime:** stretch ion-buttons to fill space for ios ([#30963](https://github.com/ionic-team/ionic-framework/issues/30963)) ([d46b0b1](https://github.com/ionic-team/ionic-framework/commit/d46b0b15f6a652da6f863cf303e7ce06cfc820a8))
|
||||
* **many:** clear timeouts ([#30851](https://github.com/ionic-team/ionic-framework/issues/30851)) ([70b1237](https://github.com/ionic-team/ionic-framework/commit/70b1237823dd0cdab852486a6b2cbbfe0d0aaae9)), closes [#30860](https://github.com/ionic-team/ionic-framework/issues/30860)
|
||||
* **modal, popover:** respect safe area insets on popovers and modals ([#30949](https://github.com/ionic-team/ionic-framework/issues/30949)) ([6490797](https://github.com/ionic-team/ionic-framework/commit/6490797851cede3bfda893a19b10f165259ec988)), closes [#28411](https://github.com/ionic-team/ionic-framework/issues/28411)
|
||||
* **radio-group:** prevent DOMException and NotFoundError when filtering radios ([#30958](https://github.com/ionic-team/ionic-framework/issues/30958)) ([682a17e](https://github.com/ionic-team/ionic-framework/commit/682a17ebb754da7714989623cf84b75e715e20e1)), closes [#30279](https://github.com/ionic-team/ionic-framework/issues/30279) [#30359](https://github.com/ionic-team/ionic-framework/issues/30359)
|
||||
* **toast:** keep icon on the same line as long message in stacked layout ([#30923](https://github.com/ionic-team/ionic-framework/issues/30923)) ([442e3e9](https://github.com/ionic-team/ionic-framework/commit/442e3e983107a69cea4fb5587fb33da718eee8a3)), closes [#30908](https://github.com/ionic-team/ionic-framework/issues/30908)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
|
||||
|
||||
|
||||
|
||||
59
core/api.txt
59
core/api.txt
@@ -566,18 +566,9 @@ ion-datetime,part,calendar-day
|
||||
ion-datetime,part,calendar-day active
|
||||
ion-datetime,part,calendar-day disabled
|
||||
ion-datetime,part,calendar-day today
|
||||
ion-datetime,part,calendar-days-of-week
|
||||
ion-datetime,part,calendar-header
|
||||
ion-datetime,part,datetime-header
|
||||
ion-datetime,part,datetime-selected-date
|
||||
ion-datetime,part,datetime-title
|
||||
ion-datetime,part,month-year-button
|
||||
ion-datetime,part,navigation-button
|
||||
ion-datetime,part,next-button
|
||||
ion-datetime,part,previous-button
|
||||
ion-datetime,part,time-button
|
||||
ion-datetime,part,time-button active
|
||||
ion-datetime,part,wheel
|
||||
ion-datetime,part,wheel-item
|
||||
ion-datetime,part,wheel-item active
|
||||
|
||||
@@ -712,7 +703,7 @@ ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefine
|
||||
|
||||
ion-input,scoped
|
||||
ion-input,prop,autocapitalize,string,'off',false,false
|
||||
ion-input,prop,autocomplete,"additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "name" | "new-password" | "nickname" | "off" | "on" | "one-time-code" | "organization" | "organization-title" | "photo" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "url" | "username",'off',false,false
|
||||
ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
|
||||
ion-input,prop,autocorrect,"off" | "on",'off',false,false
|
||||
ion-input,prop,autofocus,boolean,false,false,false
|
||||
ion-input,prop,clearInput,boolean,false,false,false
|
||||
@@ -939,9 +930,7 @@ ion-item,css-prop,--ripple-color,ios
|
||||
ion-item,css-prop,--ripple-color,md
|
||||
ion-item,css-prop,--transition,ios
|
||||
ion-item,css-prop,--transition,md
|
||||
ion-item,part,container
|
||||
ion-item,part,detail-icon
|
||||
ion-item,part,inner
|
||||
ion-item,part,native
|
||||
|
||||
ion-item-divider,shadow
|
||||
@@ -968,8 +957,6 @@ ion-item-divider,css-prop,--padding-start,ios
|
||||
ion-item-divider,css-prop,--padding-start,md
|
||||
ion-item-divider,css-prop,--padding-top,ios
|
||||
ion-item-divider,css-prop,--padding-top,md
|
||||
ion-item-divider,part,container
|
||||
ion-item-divider,part,inner
|
||||
|
||||
ion-item-group,none
|
||||
|
||||
@@ -987,8 +974,6 @@ ion-item-option,css-prop,--background,ios
|
||||
ion-item-option,css-prop,--background,md
|
||||
ion-item-option,css-prop,--color,ios
|
||||
ion-item-option,css-prop,--color,md
|
||||
ion-item-option,part,container
|
||||
ion-item-option,part,inner
|
||||
ion-item-option,part,native
|
||||
|
||||
ion-item-options,none
|
||||
@@ -1033,7 +1018,6 @@ ion-list-header,css-prop,--color,ios
|
||||
ion-list-header,css-prop,--color,md
|
||||
ion-list-header,css-prop,--inner-border-width,ios
|
||||
ion-list-header,css-prop,--inner-border-width,md
|
||||
ion-list-header,part,inner
|
||||
|
||||
ion-loading,scoped
|
||||
ion-loading,prop,animated,boolean,true,false,false
|
||||
@@ -1187,9 +1171,6 @@ ion-modal,method,setCurrentBreakpoint,setCurrentBreakpoint(breakpoint: number) =
|
||||
ion-modal,event,didDismiss,OverlayEventDetail<any>,true
|
||||
ion-modal,event,didPresent,void,true
|
||||
ion-modal,event,ionBreakpointDidChange,ModalBreakpointChangeEventDetail,true
|
||||
ion-modal,event,ionDragEnd,ModalDragEventDetail,true
|
||||
ion-modal,event,ionDragMove,ModalDragEventDetail,true
|
||||
ion-modal,event,ionDragStart,void,true
|
||||
ion-modal,event,ionModalDidDismiss,OverlayEventDetail<any>,true
|
||||
ion-modal,event,ionModalDidPresent,void,true
|
||||
ion-modal,event,ionModalWillDismiss,OverlayEventDetail<any>,true
|
||||
@@ -1228,7 +1209,7 @@ ion-nav,shadow
|
||||
ion-nav,prop,animated,boolean,true,false,false
|
||||
ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-nav,prop,root,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
|
||||
ion-nav,prop,rootParams,T | undefined,undefined,false,false
|
||||
ion-nav,prop,rootParams,undefined | { [key: string]: any; },undefined,false,false
|
||||
ion-nav,prop,swipeGesture,boolean | undefined,undefined,false,false
|
||||
ion-nav,method,canGoBack,canGoBack(view?: ViewController) => Promise<boolean>
|
||||
ion-nav,method,getActive,getActive() => Promise<ViewController | undefined>
|
||||
@@ -1249,7 +1230,7 @@ ion-nav,event,ionNavWillChange,void,false
|
||||
|
||||
ion-nav-link,none
|
||||
ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
|
||||
ion-nav-link,prop,componentProps,T | undefined,undefined,false,false
|
||||
ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
|
||||
ion-nav-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
|
||||
|
||||
@@ -1342,7 +1323,7 @@ ion-popover,prop,animated,boolean,true,false,false
|
||||
ion-popover,prop,arrow,boolean,true,false,false
|
||||
ion-popover,prop,backdropDismiss,boolean,true,false,false
|
||||
ion-popover,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
|
||||
ion-popover,prop,componentProps,T | undefined,undefined,false,false
|
||||
ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
|
||||
ion-popover,prop,dismissOnSelect,boolean,false,false,false
|
||||
ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-popover,prop,event,any,undefined,false,false
|
||||
@@ -1491,28 +1472,11 @@ ion-range,css-prop,--pin-background,ios
|
||||
ion-range,css-prop,--pin-background,md
|
||||
ion-range,css-prop,--pin-color,ios
|
||||
ion-range,css-prop,--pin-color,md
|
||||
ion-range,part,activated
|
||||
ion-range,part,bar
|
||||
ion-range,part,bar-active
|
||||
ion-range,part,focused
|
||||
ion-range,part,hover
|
||||
ion-range,part,knob
|
||||
ion-range,part,knob-a
|
||||
ion-range,part,knob-b
|
||||
ion-range,part,knob-handle
|
||||
ion-range,part,knob-handle-a
|
||||
ion-range,part,knob-handle-b
|
||||
ion-range,part,knob-handle-lower
|
||||
ion-range,part,knob-handle-upper
|
||||
ion-range,part,knob-lower
|
||||
ion-range,part,knob-upper
|
||||
ion-range,part,label
|
||||
ion-range,part,pin
|
||||
ion-range,part,pin-a
|
||||
ion-range,part,pin-b
|
||||
ion-range,part,pin-lower
|
||||
ion-range,part,pin-upper
|
||||
ion-range,part,pressed
|
||||
ion-range,part,tick
|
||||
ion-range,part,tick-active
|
||||
|
||||
@@ -1528,8 +1492,6 @@ ion-refresher,method,cancel,cancel() => Promise<void>
|
||||
ion-refresher,method,complete,complete() => Promise<void>
|
||||
ion-refresher,method,getProgress,getProgress() => Promise<number>
|
||||
ion-refresher,event,ionPull,void,true
|
||||
ion-refresher,event,ionPullEnd,RefresherPullEndEventDetail,true
|
||||
ion-refresher,event,ionPullStart,void,true
|
||||
ion-refresher,event,ionRefresh,RefresherEventDetail,true
|
||||
ion-refresher,event,ionStart,void,true
|
||||
|
||||
@@ -1595,7 +1557,7 @@ ion-row,shadow
|
||||
ion-searchbar,scoped
|
||||
ion-searchbar,prop,animated,boolean,false,false,false
|
||||
ion-searchbar,prop,autocapitalize,string,'off',false,false
|
||||
ion-searchbar,prop,autocomplete,"additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "name" | "new-password" | "nickname" | "off" | "on" | "one-time-code" | "organization" | "organization-title" | "photo" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "url" | "username",'off',false,false
|
||||
ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
|
||||
ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
|
||||
ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
|
||||
ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
|
||||
@@ -1730,7 +1692,6 @@ ion-segment-content,shadow
|
||||
|
||||
ion-segment-view,shadow
|
||||
ion-segment-view,prop,disabled,boolean,false,false,false
|
||||
ion-segment-view,prop,swipeGesture,boolean,true,false,false
|
||||
ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
|
||||
|
||||
ion-select,shadow
|
||||
@@ -1795,20 +1756,16 @@ ion-select,css-prop,--placeholder-opacity,ios
|
||||
ion-select,css-prop,--placeholder-opacity,md
|
||||
ion-select,css-prop,--ripple-color,ios
|
||||
ion-select,css-prop,--ripple-color,md
|
||||
ion-select,part,bottom
|
||||
ion-select,part,container
|
||||
ion-select,part,error-text
|
||||
ion-select,part,helper-text
|
||||
ion-select,part,icon
|
||||
ion-select,part,inner
|
||||
ion-select,part,label
|
||||
ion-select,part,placeholder
|
||||
ion-select,part,supporting-text
|
||||
ion-select,part,text
|
||||
ion-select,part,wrapper
|
||||
|
||||
ion-select-modal,scoped
|
||||
ion-select-modal,prop,cancelText,string,'Close',false,false
|
||||
ion-select-modal,prop,header,string | undefined,undefined,false,false
|
||||
ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
|
||||
ion-select-modal,prop,options,SelectModalOption[],[],false,false
|
||||
@@ -1916,7 +1873,7 @@ ion-textarea,prop,cols,number | undefined,undefined,false,true
|
||||
ion-textarea,prop,counter,boolean,false,false,false
|
||||
ion-textarea,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
|
||||
ion-textarea,prop,debounce,number | undefined,undefined,false,false
|
||||
ion-textarea,prop,disabled,boolean,false,false,true
|
||||
ion-textarea,prop,disabled,boolean,false,false,false
|
||||
ion-textarea,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
|
||||
ion-textarea,prop,errorText,string | undefined,undefined,false,false
|
||||
ion-textarea,prop,fill,"outline" | "solid" | undefined,undefined,false,false
|
||||
@@ -1929,7 +1886,7 @@ ion-textarea,prop,minlength,number | undefined,undefined,false,false
|
||||
ion-textarea,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-textarea,prop,name,string,this.inputId,false,false
|
||||
ion-textarea,prop,placeholder,string | undefined,undefined,false,false
|
||||
ion-textarea,prop,readonly,boolean,false,false,true
|
||||
ion-textarea,prop,readonly,boolean,false,false,false
|
||||
ion-textarea,prop,required,boolean,false,false,false
|
||||
ion-textarea,prop,rows,number | undefined,undefined,false,false
|
||||
ion-textarea,prop,shape,"round" | undefined,undefined,false,false
|
||||
@@ -2059,11 +2016,9 @@ ion-toast,css-prop,--width,md
|
||||
ion-toast,part,button
|
||||
ion-toast,part,button cancel
|
||||
ion-toast,part,container
|
||||
ion-toast,part,content
|
||||
ion-toast,part,header
|
||||
ion-toast,part,icon
|
||||
ion-toast,part,message
|
||||
ion-toast,part,wrapper
|
||||
|
||||
ion-toggle,shadow
|
||||
ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,false,false
|
||||
|
||||
91
core/package-lock.json
generated
91
core/package-lock.json
generated
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.8.0",
|
||||
"version": "8.7.17",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/core",
|
||||
"version": "8.8.0",
|
||||
"version": "8.7.17",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/core": "4.43.0",
|
||||
"@stencil/core": "4.38.0",
|
||||
"ionicons": "^8.0.13",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
@@ -19,6 +19,7 @@
|
||||
"@capacitor/haptics": "^8.0.0",
|
||||
"@capacitor/keyboard": "^8.0.0",
|
||||
"@capacitor/status-bar": "^8.0.0",
|
||||
"@clack/prompts": "^0.11.0",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.56.1",
|
||||
@@ -93,6 +94,7 @@
|
||||
"version": "7.16.12",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.16.7",
|
||||
"@babel/generator": "^7.16.8",
|
||||
@@ -627,19 +629,20 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@capacitor/core": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.1.0.tgz",
|
||||
"integrity": "sha512-UfMBMWc1v7J+14AhH03QmeNwV3HZx3qnOWhpwnHfzALEwAwlV/itQOQqcasMQYhOHWL0tiymc5ByaLTn7KKQxw==",
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.0.1.tgz",
|
||||
"integrity": "sha512-5UqSWxGMp/B8KhYu7rAijqNtYslhcLh+TrbfU48PfdMDsPfaU/VY48sMNzC22xL8BmoFoql/3SKyP+pavTOvOA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/haptics": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-8.0.1.tgz",
|
||||
"integrity": "sha512-8v8rowLBMeb3CryqoQvXndwyUsoi4pPXf0qFw7IGA4D32Uk7+K6juN2SjRowqunoovkvvbFmU9TD7JIAz2zmFw==",
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-8.0.0.tgz",
|
||||
"integrity": "sha512-DY1IUOjke1T4ITl7mFHQIKCaJJyHYAYRYHG9bVApU7PDOZiMVGMp48Yjzdqjya+wv/AHS5mDabSTUmhJ5uDvBA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
@@ -647,9 +650,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/keyboard": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-8.0.1.tgz",
|
||||
"integrity": "sha512-HDf4qrvvhLRMsgBoqeqIld6hP8JMK/WPbCYMvz8ajhY6TaibYt6B+NQyky4oIPCOfHTz5OcVsuHkbb8fQvGDAg==",
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-8.0.0.tgz",
|
||||
"integrity": "sha512-ycPW6iQyFwzDK95jihesj5EGiyyGSfbBqNek11iNp9tBOB7zDeYkUA2S/vPpOETt3dhP6pWr7a9gNVGuEfj11g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
@@ -657,15 +660,34 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/status-bar": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.1.tgz",
|
||||
"integrity": "sha512-OR59dlbwvmrV5dKsC9lvwv48QaGbqcbSTBpk+9/WXWxXYSdXXdzJZU9p8oyNPAkuJhCdnSa3XmU43fZRPBJJ5w==",
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.0.tgz",
|
||||
"integrity": "sha512-aIj3bc7z8lfPgOen8HlrBrkfnxpFnh21OCx6jCUx4Mvv+B6eEkUQ49b32DOddgVfr+igRHLX2SYi7duqIsNDXg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@clack/core": {
|
||||
"version": "0.5.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"picocolors": "^1.0.0",
|
||||
"sisteransi": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@clack/prompts": {
|
||||
"version": "0.11.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@clack/core": "0.5.0",
|
||||
"picocolors": "^1.0.0",
|
||||
"sisteransi": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@eslint-community/eslint-utils": {
|
||||
"version": "4.4.0",
|
||||
"dev": true,
|
||||
@@ -850,6 +872,7 @@
|
||||
"version": "4.33.0",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "4.33.0",
|
||||
"@typescript-eslint/types": "4.33.0",
|
||||
@@ -1785,10 +1808,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/core": {
|
||||
"version": "4.43.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
|
||||
"integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
|
||||
"version": "4.38.0",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"stencil": "bin/stencil"
|
||||
},
|
||||
@@ -2213,6 +2235,7 @@
|
||||
"version": "6.7.2",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "6.7.2",
|
||||
"@typescript-eslint/types": "6.7.2",
|
||||
@@ -2438,7 +2461,6 @@
|
||||
"integrity": "sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.28.5",
|
||||
"@vue/shared": "3.5.25",
|
||||
@@ -2453,7 +2475,6 @@
|
||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
@@ -2466,8 +2487,7 @@
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/compiler-dom": {
|
||||
"version": "3.5.25",
|
||||
@@ -2475,7 +2495,6 @@
|
||||
"integrity": "sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-core": "3.5.25",
|
||||
"@vue/shared": "3.5.25"
|
||||
@@ -2487,7 +2506,6 @@
|
||||
"integrity": "sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.28.5",
|
||||
"@vue/compiler-core": "3.5.25",
|
||||
@@ -2505,8 +2523,7 @@
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/compiler-sfc/node_modules/postcss": {
|
||||
"version": "8.5.6",
|
||||
@@ -2528,7 +2545,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -2544,7 +2560,6 @@
|
||||
"integrity": "sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.5.25",
|
||||
"@vue/shared": "3.5.25"
|
||||
@@ -2556,7 +2571,6 @@
|
||||
"integrity": "sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/shared": "3.5.25"
|
||||
}
|
||||
@@ -2567,7 +2581,6 @@
|
||||
"integrity": "sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/reactivity": "3.5.25",
|
||||
"@vue/shared": "3.5.25"
|
||||
@@ -2579,7 +2592,6 @@
|
||||
"integrity": "sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/reactivity": "3.5.25",
|
||||
"@vue/runtime-core": "3.5.25",
|
||||
@@ -2593,7 +2605,6 @@
|
||||
"integrity": "sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-ssr": "3.5.25",
|
||||
"@vue/shared": "3.5.25"
|
||||
@@ -2607,8 +2618,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.25.tgz",
|
||||
"integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@zeit/schemas": {
|
||||
"version": "2.21.0",
|
||||
@@ -2631,6 +2641,7 @@
|
||||
"version": "7.4.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -3791,8 +3802,7 @@
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "2.6.9",
|
||||
@@ -4086,6 +4096,7 @@
|
||||
"version": "7.32.0",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "7.12.11",
|
||||
"@eslint/eslintrc": "^0.4.3",
|
||||
@@ -7281,7 +7292,6 @@
|
||||
"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||
}
|
||||
@@ -7603,7 +7613,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
@@ -7958,6 +7967,7 @@
|
||||
"integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
@@ -7969,6 +7979,7 @@
|
||||
"version": "7.0.35",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"chalk": "^2.4.2",
|
||||
"source-map": "^0.6.1",
|
||||
@@ -8074,6 +8085,7 @@
|
||||
"version": "0.36.2",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"postcss": ">=5.0.0"
|
||||
}
|
||||
@@ -8122,6 +8134,7 @@
|
||||
"version": "2.6.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"prettier": "bin-prettier.js"
|
||||
},
|
||||
@@ -8479,6 +8492,7 @@
|
||||
"version": "2.35.1",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
},
|
||||
@@ -8700,7 +8714,6 @@
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.8.0",
|
||||
"version": "8.7.17",
|
||||
"description": "Base components for Ionic",
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
@@ -34,7 +34,7 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "4.43.0",
|
||||
"@stencil/core": "4.38.0",
|
||||
"ionicons": "^8.0.13",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
@@ -44,6 +44,7 @@
|
||||
"@capacitor/haptics": "^8.0.0",
|
||||
"@capacitor/keyboard": "^8.0.0",
|
||||
"@capacitor/status-bar": "^8.0.0",
|
||||
"@clack/prompts": "^0.11.0",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.56.1",
|
||||
@@ -103,7 +104,8 @@
|
||||
"docker.build": "docker build -t ionic-playwright .",
|
||||
"test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
|
||||
"test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots='changed'",
|
||||
"test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
|
||||
"test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs",
|
||||
"test.e2e.script": "node scripts/testing/e2e-script.mjs"
|
||||
},
|
||||
"author": "Ionic Team",
|
||||
"license": "MIT",
|
||||
|
||||
260
core/scripts/testing/e2e-script.mjs
Normal file
260
core/scripts/testing/e2e-script.mjs
Normal file
@@ -0,0 +1,260 @@
|
||||
// The purpose of this script is to provide a way run the E2E tests
|
||||
// without having the developer to manually run multiple commands based
|
||||
// on the desired end result.
|
||||
// E.g. update the local ground truths for a specific component or
|
||||
// open the Playwright report after running the E2E tests.
|
||||
|
||||
import {
|
||||
intro,
|
||||
outro,
|
||||
confirm,
|
||||
spinner,
|
||||
isCancel,
|
||||
cancel,
|
||||
text,
|
||||
log,
|
||||
} from '@clack/prompts';
|
||||
import { exec, spawn } from 'child_process';
|
||||
import fs from 'node:fs';
|
||||
import { setTimeout as sleep } from 'node:timers/promises';
|
||||
import util from 'node:util';
|
||||
import color from 'picocolors';
|
||||
|
||||
async function main() {
|
||||
const execAsync = util.promisify(exec);
|
||||
const cleanUpFiles = async () => {
|
||||
// Clean up the local ground truths.
|
||||
const cleanUp = spinner();
|
||||
|
||||
// Inform the user that the local ground truths are being cleaned up.
|
||||
cleanUp.start('Restoring local ground truths');
|
||||
|
||||
// Reset the local ground truths.
|
||||
await execAsync('git reset -- src/**/*-linux.png').catch((error) => {
|
||||
cleanUp.stop('Failed to reset local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
// Restore the local ground truths.
|
||||
await execAsync('git restore -- src/**/*-linux.png').catch((error) => {
|
||||
cleanUp.stop('Failed to restore local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
// Inform the user that the local ground truths have been cleaned up.
|
||||
cleanUp.stop('Local ground truths have been restored to their original state in order to avoid committing them.');
|
||||
};
|
||||
|
||||
intro(color.inverse(' Update Local Ground Truths'));
|
||||
|
||||
// Ask user for the component name they want to test.
|
||||
const componentValue = await text({
|
||||
message: 'Enter the component or path you want to test (e.g. chip, src/components/chip)',
|
||||
placeholder: 'Empty for all components',
|
||||
});
|
||||
|
||||
// User cancelled the operation with `Ctrl+C` or `CMD+C`.
|
||||
if (isCancel(componentValue)) {
|
||||
cancel('Operation cancelled');
|
||||
return process.exit(0);
|
||||
}
|
||||
|
||||
// Ask user if they want to update their local ground truths.
|
||||
const shouldUpdateTruths = await confirm({
|
||||
message: 'Do you want to update your local ground truths?',
|
||||
});
|
||||
|
||||
// User cancelled the operation with `Ctrl+C` or `CMD+C`.
|
||||
if (isCancel(shouldUpdateTruths)) {
|
||||
cancel('Operation cancelled');
|
||||
return process.exit(0);
|
||||
}
|
||||
|
||||
if (shouldUpdateTruths) {
|
||||
const defaultBaseBranch = 'main';
|
||||
|
||||
// Ask user for the base branch.
|
||||
let baseBranch = await text({
|
||||
message: 'Enter the base branch name:',
|
||||
placeholder: `default: ${defaultBaseBranch}`,
|
||||
})
|
||||
|
||||
// User cancelled the operation with `Ctrl+C` or `CMD+C`.
|
||||
if (isCancel(baseBranch)) {
|
||||
cancel('Operation cancelled');
|
||||
return process.exit(0);
|
||||
}
|
||||
|
||||
// User didn't provide a base branch.
|
||||
if (!baseBranch) {
|
||||
baseBranch = defaultBaseBranch;
|
||||
}
|
||||
|
||||
/**
|
||||
* The provided base branch needs to be fetched.
|
||||
* This ensures that the local base branch is up-to-date with the
|
||||
* remote base branch. Otherwise, there might be errors stating that
|
||||
* certain files don't exist in the local base branch.
|
||||
*/
|
||||
const fetchBaseBranch = spinner();
|
||||
|
||||
// Inform the user that the base branch is being fetched.
|
||||
fetchBaseBranch.start(`Fetching "${baseBranch}" to have the latest changes`);
|
||||
|
||||
// Fetch the base branch.
|
||||
await execAsync(`git fetch origin ${baseBranch}`).catch((error) => {
|
||||
fetchBaseBranch.stop(`Failed to fetch "${baseBranch}"`);
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
// Inform the user that the base branch has been fetched.
|
||||
fetchBaseBranch.stop(`Fetched "${baseBranch}"`);
|
||||
|
||||
|
||||
const updateGroundTruth = spinner();
|
||||
|
||||
// Inform the user that the local ground truths are being updated.
|
||||
updateGroundTruth.start('Updating local ground truths');
|
||||
|
||||
// Check if user provided an existing file or directory.
|
||||
const isValidLocation = fs.existsSync(componentValue);
|
||||
|
||||
// User provided an existing file or directory.
|
||||
if (isValidLocation) {
|
||||
const stats = fs.statSync(componentValue);
|
||||
|
||||
// User provided a file as the component.
|
||||
// ex: `componentValue` = `src/components/chip/test/basic/chip.e2e.ts`
|
||||
if (stats.isFile()) {
|
||||
// Update the local ground truths for the provided path.
|
||||
await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}-snapshots/*-linux.png`).catch((error) => {
|
||||
updateGroundTruth.stop('Failed to update local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
|
||||
// User provided a directory as the component.
|
||||
// ex: `componentValue` = `src/components/chip`
|
||||
if (stats.isDirectory()) {
|
||||
// Update the local ground truths for the provided directory.
|
||||
await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
|
||||
updateGroundTruth.stop('Failed to update local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
}
|
||||
// User provided a component name as the component.
|
||||
// ex: `componentValue` = `chip`
|
||||
else if (componentValue) {
|
||||
// Update the local ground truths for the provided component.
|
||||
await execAsync(`git checkout origin/${baseBranch} -- src/components/${componentValue}/test/*/${componentValue}.e2e.ts-snapshots/*-linux.png`).catch((error) => {
|
||||
updateGroundTruth.stop('Failed to update local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
// User provided an empty string.
|
||||
else {
|
||||
// Update the local ground truths for all components.
|
||||
await execAsync(`git checkout origin/${baseBranch} -- src/components/*/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
|
||||
updateGroundTruth.stop('Failed to update local ground truths');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
|
||||
// Inform the user that the local ground truths have been updated.
|
||||
updateGroundTruth.stop('Updated local ground truths');
|
||||
}
|
||||
|
||||
const buildCore = spinner();
|
||||
|
||||
// Inform the user that the core is being built.
|
||||
buildCore.start('Building core');
|
||||
|
||||
/**
|
||||
* Build core
|
||||
* Otherwise, the uncommitted changes will not be reflected in the tests because:
|
||||
* - popping the stash doesn't trigger a re-render even if `npm start` is running
|
||||
* - app is not running the `npm start` command
|
||||
*/
|
||||
await execAsync('npm run build').catch((error) => {
|
||||
// Clean up the local ground truths.
|
||||
cleanUpFiles();
|
||||
|
||||
buildCore.stop('Failed to build core');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
|
||||
buildCore.stop('Built core');
|
||||
|
||||
const runE2ETests = spinner();
|
||||
|
||||
// Inform the user that the E2E tests are being run.
|
||||
runE2ETests.start('Running E2E tests');
|
||||
|
||||
// User provided a component value.
|
||||
if (componentValue) {
|
||||
await execAsync(`npm run test.e2e.docker.ci ${componentValue}`).catch((error) => {
|
||||
// Clean up the local ground truths.
|
||||
cleanUpFiles();
|
||||
|
||||
runE2ETests.stop('Failed to run E2E tests');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
} else {
|
||||
await execAsync('npm run test.e2e.docker.ci').catch((error) => {
|
||||
// Clean up the local ground truths.
|
||||
cleanUpFiles();
|
||||
|
||||
runE2ETests.stop('Failed to run E2E tests');
|
||||
console.error(error);
|
||||
return process.exit(0);
|
||||
});
|
||||
}
|
||||
|
||||
runE2ETests.stop('Ran E2E tests');
|
||||
|
||||
// Clean up the local ground truths.
|
||||
await cleanUpFiles();
|
||||
|
||||
// Ask user if they want to open the Playwright report.
|
||||
const shouldOpenReport = await confirm({
|
||||
message: 'Do you want to open the Playwright report?',
|
||||
});
|
||||
|
||||
// User cancelled the operation with `Ctrl+C` or `CMD+C`.
|
||||
if (isCancel(shouldOpenReport)) {
|
||||
cancel('Operation cancelled');
|
||||
return process.exit(0);
|
||||
}
|
||||
|
||||
// User chose to open the Playwright report.
|
||||
if (shouldOpenReport) {
|
||||
// Use spawn to display the server information and the key to quit the server.
|
||||
spawn('npx', ['playwright', 'show-report'], {
|
||||
stdio: 'inherit',
|
||||
});
|
||||
} else {
|
||||
// Inform the user that the Playwright report can be opened by running the following command.
|
||||
log.info('If you change your mind, you can open the Playwright report by running the following command:');
|
||||
log.info(color.bold('npx playwright show-report'));
|
||||
}
|
||||
|
||||
if (shouldOpenReport) {
|
||||
outro("You're all set! Don't forget to quit serving the Playwright report when you're done.");
|
||||
} else {
|
||||
outro("You're all set!");
|
||||
}
|
||||
|
||||
await sleep(1000);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
@@ -8,9 +8,7 @@ expect.extend({
|
||||
throw new Error('expected toHaveShadowPart to be called on an element with a shadow root');
|
||||
}
|
||||
|
||||
// Use attribute selector with ~= to match space-separated part values
|
||||
// e.g., [part~="knob"] matches elements with part="knob" or part="knob knob-a"
|
||||
const shadowPart = received.shadowRoot.querySelector(`[part~="${part}"]`);
|
||||
const shadowPart = received.shadowRoot.querySelector(`[part="${part}"]`);
|
||||
const pass = shadowPart !== null;
|
||||
|
||||
const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;
|
||||
|
||||
1179
core/src/components.d.ts
vendored
1179
core/src/components.d.ts
vendored
File diff suppressed because it is too large
Load Diff
@@ -514,7 +514,6 @@ export class Accordion implements ComponentInterface {
|
||||
|
||||
'accordion-animated': this.shouldAnimate(),
|
||||
}}
|
||||
tabindex={disabled ? '-1' : undefined}
|
||||
>
|
||||
<div
|
||||
onClick={() => this.toggleExpanded()}
|
||||
|
||||
@@ -14,13 +14,12 @@ import { getIonMode } from '../../global/ionic-global';
|
||||
})
|
||||
export class App implements ComponentInterface {
|
||||
private focusVisible?: FocusVisibleUtility;
|
||||
private loadTimeout?: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
componentDidLoad() {
|
||||
if (Build.isBrowser) {
|
||||
this.rIC(async () => {
|
||||
rIC(async () => {
|
||||
const isHybrid = isPlatform(window, 'hybrid');
|
||||
if (!config.getBoolean('_testing')) {
|
||||
import('../../utils/tap-click').then((module) => module.startTapClick(config));
|
||||
@@ -61,12 +60,6 @@ export class App implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this.loadTimeout) {
|
||||
clearTimeout(this.loadTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Used to set focus on an element that uses `ion-focusable`.
|
||||
* Do not use this if focusing the element as a result of a keyboard
|
||||
@@ -85,14 +78,6 @@ export class App implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
private rIC(callback: () => void) {
|
||||
if ('requestIdleCallback' in window) {
|
||||
(window as any).requestIdleCallback(callback);
|
||||
} else {
|
||||
this.loadTimeout = setTimeout(callback, 32);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const mode = getIonMode(this);
|
||||
return (
|
||||
@@ -128,3 +113,11 @@ const needInputShims = () => {
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const rIC = (callback: () => void) => {
|
||||
if ('requestIdleCallback' in window) {
|
||||
(window as any).requestIdleCallback(callback);
|
||||
} else {
|
||||
setTimeout(callback, 32);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,23 +1,27 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* This behavior does not vary across modes/directions
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
/**
|
||||
* This behavior does not vary across modes/directions.
|
||||
*/
|
||||
test.describe(title('chip: states'), () => {
|
||||
test('should render disabled state', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`<ion-chip disabled="true">
|
||||
<ion-label>Disabled</ion-label>
|
||||
</ion-chip>`,
|
||||
config
|
||||
);
|
||||
await page.goto(`/src/components/chip/test/states`, config);
|
||||
|
||||
const chip = page.locator('ion-chip');
|
||||
const container = page.locator('#disabled');
|
||||
|
||||
await expect(chip).toHaveScreenshot(screenshot(`chip-disabled`));
|
||||
await expect(container).toHaveScreenshot(screenshot(`chip-disabled`));
|
||||
});
|
||||
|
||||
test('should render activated state', async ({ page }) => {
|
||||
await page.goto(`/src/components/chip/test/states`, config);
|
||||
|
||||
const container = page.locator('#activated');
|
||||
|
||||
await expect(container).toHaveScreenshot(screenshot(`chip-activated`));
|
||||
});
|
||||
|
||||
test('should custom chip', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 27 KiB |
@@ -19,211 +19,285 @@
|
||||
<ion-content>
|
||||
<h3>Default</h3>
|
||||
|
||||
<p>
|
||||
<ion-chip>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip style="border-radius: 4px">
|
||||
<ion-label>Border Radius</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>With Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip style="border-radius: 4px" class="ion-focused">
|
||||
<ion-label>Border Radius</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>With Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip class="ion-focused">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>With Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<div id="default">
|
||||
<p>
|
||||
<ion-chip>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<h3>Colors</h3>
|
||||
<p>
|
||||
<ion-chip color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Tertiary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>Success with Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning">
|
||||
<ion-label>Warning with Icon</ion-label>
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip color="primary" class="ion-focused">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="ion-focused">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary" class="ion-focused">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Tertiary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success" class="ion-focused">
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
<ion-label>Success with Avatar</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning" class="ion-focused">
|
||||
<ion-label>Warning with Icon</ion-label>
|
||||
<ion-icon name="calendar"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger" class="ion-focused">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light" class="ion-focused">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium" class="ion-focused">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark" class="ion-focused">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<h3>Outline</h3>
|
||||
|
||||
<p>
|
||||
<ion-chip outline>
|
||||
<ion-label>Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger">
|
||||
<ion-label>Danger Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Secondary Outline with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary">
|
||||
<ion-label>Primary Outline with Avatar</ion-label>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
<ion-chip outline>
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip outline class="ion-focused">
|
||||
<ion-label>Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" class="ion-focused">
|
||||
<ion-label>Danger Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary" class="ion-focused">
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Secondary Outline with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary" class="ion-focused">
|
||||
<ion-label>Primary Outline with Avatar</ion-label>
|
||||
<ion-avatar>
|
||||
<img
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
|
||||
/>
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
<ion-chip outline class="ion-focused">
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
<p>
|
||||
<ion-chip outline>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="tertiary">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="success">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="warning">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="light">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="medium">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="dark">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<div id="disabled">
|
||||
<p>
|
||||
<ion-chip disabled>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary" disabled>
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" disabled>
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary" disabled>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success" disabled>
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning" disabled>
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger" disabled>
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light" disabled>
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium" disabled>
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark" disabled>
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-chip outline disabled>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary" disabled>
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary" disabled>
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="tertiary" disabled>
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="success" disabled>
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="warning" disabled>
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" disabled>
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="light" disabled>
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="medium" disabled>
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="dark" disabled>
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Activated</h3>
|
||||
<div id="activated">
|
||||
<p>
|
||||
<ion-chip class="ion-activated">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary" class="ion-activated">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="ion-activated">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary" class="ion-activated">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success" class="ion-activated">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning" class="ion-activated">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger" class="ion-activated">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light" class="ion-activated">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium" class="ion-activated">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark" class="ion-activated">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-chip outline class="ion-activated">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary" class="ion-activated">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary" class="ion-activated">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="tertiary" class="ion-activated">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="success" class="ion-activated">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="warning" class="ion-activated">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" class="ion-activated">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="light" class="ion-activated">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="medium" class="ion-activated">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="dark" class="ion-activated">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Focused</h3>
|
||||
<p>
|
||||
<ion-chip disabled>
|
||||
<ion-label>Disabled</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" class="ion-focused" disabled>
|
||||
<ion-label>Disabled Outline</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="ion-focused" disabled>
|
||||
<ion-icon name="checkmark-circle"></ion-icon>
|
||||
<ion-label>Disabled Secondary with Icon</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline class="ion-focused" disabled>
|
||||
<ion-icon name="git-pull-request"></ion-icon>
|
||||
<ion-label>Disabled Outline with Icon and Avatar</ion-label>
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip>
|
||||
`ion-chip` is not focusable by default, meaning it doesn't use `ion-focusable`. But it does have focus styles
|
||||
that target the `:focus` pseudo-class. In order to see the focus styles, you need to add tabindex="0" and tab
|
||||
into the chip.
|
||||
</p>
|
||||
<div id="focused">
|
||||
<p>
|
||||
<ion-chip tabindex="0">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="primary" tabindex="0">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" tabindex="0">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="tertiary" tabindex="0">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="success" tabindex="0">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="warning" tabindex="0">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="danger" tabindex="0">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="light" tabindex="0">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="medium" tabindex="0">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip color="dark" tabindex="0">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-chip outline tabindex="0">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="primary" tabindex="0">
|
||||
<ion-label>Primary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="secondary" tabindex="0">
|
||||
<ion-label>Secondary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="tertiary" tabindex="0">
|
||||
<ion-label>Tertiary</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="success" tabindex="0">
|
||||
<ion-label>Success</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="warning" tabindex="0">
|
||||
<ion-label>Warning</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="danger" tabindex="0">
|
||||
<ion-label>Danger</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="light" tabindex="0">
|
||||
<ion-label>Light</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="medium" tabindex="0">
|
||||
<ion-label>Medium</ion-label>
|
||||
</ion-chip>
|
||||
<ion-chip outline color="dark" tabindex="0">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Custom</h3>
|
||||
|
||||
@@ -232,9 +306,6 @@
|
||||
<ion-chip class="wide" text="wide">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip class="wide ion-focused" text="wide">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
|
||||
<!-- Custom Colors -->
|
||||
@@ -245,25 +316,19 @@
|
||||
<ion-chip color="secondary" class="custom">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip class="custom ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
<ion-chip color="secondary" class="custom ion-focused">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-chip>
|
||||
</p>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
var buttons = document.querySelectorAll('ion-chip');
|
||||
var chips = document.querySelectorAll('ion-chip');
|
||||
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener('click', (event) => onClick(event));
|
||||
for (var i = 0; i < chips.length; i++) {
|
||||
chips[i].addEventListener('click', (event) => onClick(event));
|
||||
}
|
||||
|
||||
function onClick(ev) {
|
||||
console.log('clicked the button', ev.target.innerText);
|
||||
console.log('clicked the chip', ev.target.innerText);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -188,11 +188,6 @@ export class Content implements ComponentInterface {
|
||||
this.tabsElement = null;
|
||||
this.tabsLoadCallback = undefined;
|
||||
}
|
||||
|
||||
if (this.resizeTimeout) {
|
||||
clearTimeout(this.resizeTimeout);
|
||||
this.resizeTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -467,7 +462,6 @@ export class Content implements ComponentInterface {
|
||||
role={isMainContent ? 'main' : undefined}
|
||||
class={createColorClasses(this.color, {
|
||||
[mode]: true,
|
||||
'content-fullscreen': this.fullscreen,
|
||||
'content-sizing': hostContext('ion-popover', this.el),
|
||||
overscroll: forceOverscroll,
|
||||
[`content-${rtl}`]: true,
|
||||
|
||||
@@ -13,38 +13,5 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`content-fullscreen`));
|
||||
});
|
||||
|
||||
/**
|
||||
* The content-fullscreen class is added when fullscreen is true. The
|
||||
* fullscreen attribute is not reflected in Angular, Vue, or React, so
|
||||
* the class is needed for users to create custom themes.
|
||||
*/
|
||||
test('should have content-fullscreen class when fullscreen is true', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-content fullscreen>
|
||||
<p>Hello</p>
|
||||
</ion-content>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const content = page.locator('ion-content');
|
||||
await expect(content).toHaveClass(/content-fullscreen/);
|
||||
});
|
||||
|
||||
test('should not have content-fullscreen class when fullscreen is false', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-content>
|
||||
<p>Hello</p>
|
||||
</ion-content>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const content = page.locator('ion-content');
|
||||
await expect(content).not.toHaveClass(/content-fullscreen/);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
@@ -57,9 +57,7 @@
|
||||
}
|
||||
|
||||
:host .calendar-action-buttons ion-buttons {
|
||||
align-items: stretch;
|
||||
|
||||
height: 100%;
|
||||
@include padding($datetime-ios-padding * 0.5, 0, 0, 0);
|
||||
}
|
||||
|
||||
:host .calendar-action-buttons ion-buttons ion-button {
|
||||
|
||||
@@ -79,7 +79,6 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
|
||||
* @slot buttons - The buttons in the datetime.
|
||||
* @slot time-label - The label for the time selector in the datetime.
|
||||
*
|
||||
* @part wheel - The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
|
||||
* @part wheel-item - The individual items when using a wheel style layout, or in the
|
||||
* month/year picker when using a grid style layout.
|
||||
* @part wheel-item active - The currently selected wheel-item.
|
||||
@@ -88,23 +87,14 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
|
||||
* layout with `presentation="date-time"` or `"time-date"`.
|
||||
* @part time-button active - The time picker button when the picker is open.
|
||||
*
|
||||
* @part calendar-header - The calendar header manages the date navigation controls (month/year picker and previous/next buttons) and the days of the week when using a grid style layout.
|
||||
* @part month-year-button - The button that opens the month/year picker when
|
||||
* using a grid style layout.
|
||||
* @part navigation-button - The buttons used to navigate to the next or previous month when using a grid style layout.
|
||||
* @part previous-button - The button used to navigate to the previous month when using a grid style layout.
|
||||
* @part next-button - The button used to navigate to the next month when using a grid style layout.
|
||||
* @part calendar-days-of-week - The container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout.
|
||||
*
|
||||
* @part calendar-day - The individual buttons that display a day inside of the datetime
|
||||
* calendar.
|
||||
* @part calendar-day active - The currently selected calendar day.
|
||||
* @part calendar-day today - The calendar day that contains the current day.
|
||||
* @part calendar-day disabled - The calendar day that is disabled.
|
||||
*
|
||||
* @part datetime-header - The datetime header contains the content for the `title` slot and the selected date.
|
||||
* @part datetime-title - The element that contains the `title` slot content.
|
||||
* @part datetime-selected-date - The element that contains the selected date.
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-datetime',
|
||||
@@ -134,7 +124,6 @@ export class Datetime implements ComponentInterface {
|
||||
private maxParts?: any;
|
||||
private todayParts!: DatetimeParts;
|
||||
private defaultParts!: DatetimeParts;
|
||||
private loadTimeout: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
private prevPresentation: string | null = null;
|
||||
|
||||
@@ -1088,9 +1077,6 @@ export class Datetime implements ComponentInterface {
|
||||
this.clearFocusVisible();
|
||||
this.clearFocusVisible = undefined;
|
||||
}
|
||||
if (this.loadTimeout) {
|
||||
clearTimeout(this.loadTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1189,7 +1175,7 @@ export class Datetime implements ComponentInterface {
|
||||
*
|
||||
* We schedule this after everything has had a chance to run.
|
||||
*/
|
||||
this.loadTimeout = setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
this.ensureReadyIfVisible();
|
||||
}, 100);
|
||||
|
||||
@@ -1738,7 +1724,6 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
part={WHEEL_PART}
|
||||
aria-label="Select a date"
|
||||
class="date-column"
|
||||
color={this.color}
|
||||
@@ -1859,7 +1844,6 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
part={WHEEL_PART}
|
||||
aria-label="Select a day"
|
||||
class="day-column"
|
||||
color={this.color}
|
||||
@@ -1904,7 +1888,6 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
part={WHEEL_PART}
|
||||
aria-label="Select a month"
|
||||
class="month-column"
|
||||
color={this.color}
|
||||
@@ -1948,7 +1931,6 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
part={WHEEL_PART}
|
||||
aria-label="Select a year"
|
||||
class="year-column"
|
||||
color={this.color}
|
||||
@@ -2023,7 +2005,6 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
part={WHEEL_PART}
|
||||
aria-label="Select an hour"
|
||||
color={this.color}
|
||||
disabled={disabled}
|
||||
@@ -2064,7 +2045,6 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
part={WHEEL_PART}
|
||||
aria-label="Select a minute"
|
||||
color={this.color}
|
||||
disabled={disabled}
|
||||
@@ -2108,7 +2088,6 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<ion-picker-column
|
||||
part={WHEEL_PART}
|
||||
aria-label="Select a day period"
|
||||
style={isDayPeriodRTL ? { order: '-1' } : {}}
|
||||
color={this.color}
|
||||
@@ -2179,7 +2158,7 @@ export class Datetime implements ComponentInterface {
|
||||
const hostDir = this.el.getAttribute('dir') || undefined;
|
||||
|
||||
return (
|
||||
<div class="calendar-header" part="calendar-header">
|
||||
<div class="calendar-header">
|
||||
<div class="calendar-action-buttons">
|
||||
<div class="calendar-month-year">
|
||||
<button
|
||||
@@ -2208,12 +2187,7 @@ export class Datetime implements ComponentInterface {
|
||||
|
||||
<div class="calendar-next-prev">
|
||||
<ion-buttons>
|
||||
<ion-button
|
||||
aria-label="Previous month"
|
||||
disabled={prevMonthDisabled}
|
||||
onClick={() => this.prevMonth()}
|
||||
part="navigation-button previous-button"
|
||||
>
|
||||
<ion-button aria-label="Previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
|
||||
<ion-icon
|
||||
dir={hostDir}
|
||||
aria-hidden="true"
|
||||
@@ -2223,12 +2197,7 @@ export class Datetime implements ComponentInterface {
|
||||
flipRtl
|
||||
></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button
|
||||
aria-label="Next month"
|
||||
disabled={nextMonthDisabled}
|
||||
onClick={() => this.nextMonth()}
|
||||
part="navigation-button next-button"
|
||||
>
|
||||
<ion-button aria-label="Next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
|
||||
<ion-icon
|
||||
dir={hostDir}
|
||||
aria-hidden="true"
|
||||
@@ -2241,7 +2210,7 @@ export class Datetime implements ComponentInterface {
|
||||
</ion-buttons>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-days-of-week" aria-hidden="true" part="calendar-days-of-week">
|
||||
<div class="calendar-days-of-week" aria-hidden="true">
|
||||
{getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
|
||||
return <div class="day-of-week">{d}</div>;
|
||||
})}
|
||||
@@ -2594,15 +2563,11 @@ export class Datetime implements ComponentInterface {
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="datetime-header" part="datetime-header">
|
||||
<div class="datetime-title" part="datetime-title">
|
||||
<div class="datetime-header">
|
||||
<div class="datetime-title">
|
||||
<slot name="title">Select Date</slot>
|
||||
</div>
|
||||
{showExpandedHeader && (
|
||||
<div class="datetime-selected-date" part="datetime-selected-date">
|
||||
{this.getHeaderSelectedDateText()}
|
||||
</div>
|
||||
)}
|
||||
{showExpandedHeader && <div class="datetime-selected-date">{this.getHeaderSelectedDateText()}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2751,6 +2716,5 @@ export class Datetime implements ComponentInterface {
|
||||
let datetimeIds = 0;
|
||||
const CANCEL_ROLE = 'datetime-cancel';
|
||||
const CONFIRM_ROLE = 'datetime-confirm';
|
||||
const WHEEL_PART = 'wheel';
|
||||
const WHEEL_ITEM_PART = 'wheel-item';
|
||||
const WHEEL_ITEM_ACTIVE_PART = `active`;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
@@ -42,324 +42,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
|
||||
});
|
||||
});
|
||||
|
||||
test.describe(title('CSS shadow parts'), () => {
|
||||
test('should be able to customize wheel part within the wheel style', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
|
||||
});
|
||||
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-datetime::part(wheel) {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<ion-datetime
|
||||
prefer-wheel="true"
|
||||
value="2020-03-14T14:23:00.000Z"
|
||||
></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const pickerColumn = datetime.locator('ion-picker-column').first();
|
||||
|
||||
const backgroundColor = await pickerColumn.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
expect(backgroundColor).toBe('rgb(255, 0, 0)');
|
||||
});
|
||||
|
||||
test('should be able to customize wheel part within the month/year picker', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
|
||||
});
|
||||
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-datetime::part(wheel) {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<ion-datetime
|
||||
value="2020-03-14T14:23:00.000Z"
|
||||
></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const monthYearButton = datetime.locator('.calendar-month-year-toggle');
|
||||
|
||||
await monthYearButton.click();
|
||||
|
||||
const pickerColumn = datetime.locator('ion-picker-column').first();
|
||||
|
||||
const backgroundColor = await pickerColumn.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
expect(backgroundColor).toBe('rgb(255, 165, 0)');
|
||||
});
|
||||
|
||||
test('should be able to customize wheel part within the time picker', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
|
||||
});
|
||||
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-picker-column {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<ion-datetime
|
||||
value="2020-03-14T14:23:00.000Z"
|
||||
></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const timeButton = datetime.locator('.time-body');
|
||||
|
||||
await timeButton.click();
|
||||
|
||||
const pickerColumn = page.locator('ion-picker-column').first();
|
||||
|
||||
const backgroundColor = await pickerColumn.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
expect(backgroundColor).toBe('rgb(0, 128, 0)');
|
||||
});
|
||||
|
||||
test('should be able to customize wheel part when focused', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
|
||||
});
|
||||
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-datetime::part(wheel):focus {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<ion-datetime
|
||||
prefer-wheel="true"
|
||||
value="2020-03-14T14:23:00.000Z"
|
||||
></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const pickerColumn = datetime.locator('ion-picker-column').first();
|
||||
|
||||
await pickerColumn.click({ position: { x: 10, y: 10 } });
|
||||
|
||||
const backgroundColor = await pickerColumn.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
expect(backgroundColor).toBe('rgb(0, 0, 255)');
|
||||
});
|
||||
|
||||
test('should be able to customize datetime header parts', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/30083',
|
||||
});
|
||||
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-datetime::part(datetime-header) {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
ion-datetime::part(datetime-title) {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
ion-datetime::part(datetime-selected-date) {
|
||||
background-color: violet;
|
||||
}
|
||||
</style>
|
||||
<ion-datetime value="2020-03-14T14:23:00.000Z">
|
||||
<span slot="title">Select Date</span>
|
||||
</ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const header = datetime.locator('.datetime-header');
|
||||
const title = datetime.locator('.datetime-title');
|
||||
const selectedDate = datetime.locator('.datetime-selected-date');
|
||||
|
||||
const headerBackgroundColor = await header.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
const titleBackgroundColor = await title.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
const selectedDateBackgroundColor = await selectedDate.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
expect(headerBackgroundColor).toBe('rgb(255, 165, 0)');
|
||||
expect(titleBackgroundColor).toBe('rgb(255, 192, 203)');
|
||||
expect(selectedDateBackgroundColor).toBe('rgb(238, 130, 238)');
|
||||
});
|
||||
|
||||
test('should be able to customize calendar header part', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-datetime::part(calendar-header) {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const header = datetime.locator('.calendar-header');
|
||||
|
||||
const backgroundColor = await header.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
expect(backgroundColor).toBe('rgb(255, 165, 0)');
|
||||
});
|
||||
|
||||
test('should be able to customize month/year picker part', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/26596',
|
||||
});
|
||||
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-datetime::part(month-year-button) {
|
||||
background-color: lightblue;
|
||||
}
|
||||
</style>
|
||||
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const monthYearButton = datetime.locator('.calendar-month-year-toggle');
|
||||
|
||||
const backgroundColor = await monthYearButton.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
expect(backgroundColor).toBe('rgb(173, 216, 230)');
|
||||
});
|
||||
|
||||
test('should be able to customize navigation button parts', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
|
||||
});
|
||||
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-datetime::part(navigation-button) {
|
||||
background-color: firebrick;
|
||||
}
|
||||
|
||||
ion-datetime::part(previous-button) {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
ion-datetime::part(next-button) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const prevButton = datetime.locator('.calendar-next-prev ion-button').first();
|
||||
const nextButton = datetime.locator('.calendar-next-prev ion-button').last();
|
||||
|
||||
const prevBackgroundColor = await prevButton.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
const prevColor = await prevButton.evaluate((el) => {
|
||||
return window.getComputedStyle(el).color;
|
||||
});
|
||||
|
||||
const nextBackgroundColor = await nextButton.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
const nextColor = await nextButton.evaluate((el) => {
|
||||
return window.getComputedStyle(el).color;
|
||||
});
|
||||
|
||||
// Verify the navigation-button part applies the styles
|
||||
expect(prevBackgroundColor).toBe('rgb(178, 34, 34)');
|
||||
expect(nextBackgroundColor).toBe('rgb(178, 34, 34)');
|
||||
// Verify the previous-button part applies the styles
|
||||
expect(prevColor).toBe('rgb(0, 0, 255)');
|
||||
// Verify the next-button part applies the styles
|
||||
expect(nextColor).toBe('rgb(0, 128, 0)');
|
||||
});
|
||||
|
||||
test('should be able to customize days of the week part', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/30830',
|
||||
});
|
||||
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
ion-datetime::part(calendar-days-of-week) {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<ion-datetime value="2020-03-14T14:23:00.000Z"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const daysOfWeek = datetime.locator('.calendar-days-of-week');
|
||||
|
||||
const backgroundColor = await daysOfWeek.evaluate((el) => {
|
||||
return window.getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
|
||||
expect(backgroundColor).toBe('rgb(0, 128, 0)');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
@@ -74,13 +74,6 @@
|
||||
color: rgb(128, 30, 171);
|
||||
}
|
||||
|
||||
/* Targets the month/year picker and the wheel style datetime */
|
||||
.custom-grid-wheel::part(wheel):focus,
|
||||
/* Targets the time picker */
|
||||
ion-picker-column:focus {
|
||||
background-color: rgba(138, 238, 69, 0.37);
|
||||
}
|
||||
|
||||
/*
|
||||
* Custom Datetime Day Parts
|
||||
* -------------------------------------------
|
||||
@@ -134,46 +127,6 @@
|
||||
background-color: rgb(154 209 98 / 0.2);
|
||||
color: #9ad162;
|
||||
}
|
||||
|
||||
/*
|
||||
* Custom Datetime Header Parts
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
#custom-grid::part(calendar-header),
|
||||
#custom-title::part(datetime-header) {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
#custom-grid::part(month-year-button) {
|
||||
background-color: lightblue;
|
||||
color: rgb(128, 30, 171);
|
||||
}
|
||||
|
||||
#custom-grid::part(navigation-button) {
|
||||
background-color: firebrick;
|
||||
}
|
||||
|
||||
#custom-grid::part(previous-button) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#custom-grid::part(next-button) {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#custom-grid::part(calendar-days-of-week) {
|
||||
background-color: #9ad162;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#custom-title::part(datetime-title) {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
#custom-title::part(datetime-selected-date) {
|
||||
background-color: violet;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -203,11 +156,6 @@
|
||||
<h2>Grid Style</h2>
|
||||
<ion-datetime id="custom-calendar-days" value="2023-06-15" presentation="date"></ion-datetime>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<ion-datetime id="custom-title" presentation="date">
|
||||
<span slot="title">Select Date</span>
|
||||
</ion-datetime>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user