Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0b34c174b0 |
2
.github/actions/publish-npm/action.yml
vendored
@@ -22,7 +22,7 @@ runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- name: 🟢 Configure Node for Publish
|
||||
uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: ${{ inputs.node-version }}
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
|
||||
3
.github/ionic-issue-bot.yml
vendored
@@ -40,7 +40,7 @@ comment:
|
||||
|
||||
|
||||
If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (`+1`). If you would like to provide an additional use case for the feature, please post a comment.
|
||||
|
||||
|
||||
|
||||
The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.
|
||||
|
||||
@@ -83,7 +83,6 @@ stale:
|
||||
exemptLabels:
|
||||
- "good first issue"
|
||||
- "triage"
|
||||
- "bug: external"
|
||||
- "type: bug"
|
||||
- "type: feature request"
|
||||
- "needs: investigation"
|
||||
|
||||
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
|
||||
@@ -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,8 +8,8 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.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/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/package.json
|
||||
paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
|
||||
|
||||
@@ -8,8 +8,8 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- name: 🕸️ Install Dependencies
|
||||
|
||||
@@ -3,7 +3,7 @@ description: 'Build Ionic React Router'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
|
||||
@@ -3,7 +3,7 @@ description: 'Build Ionic React'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
@@ -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
|
||||
|
||||
@@ -3,7 +3,7 @@ description: 'Builds Ionic Vue Router'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
|
||||
@@ -3,7 +3,7 @@ description: 'Build Ionic Vue'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
@@ -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
|
||||
|
||||
@@ -10,7 +10,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/download-artifact@v7
|
||||
- uses: actions/download-artifact@v6
|
||||
with:
|
||||
name: ${{ inputs.name }}
|
||||
path: ${{ inputs.path }}
|
||||
|
||||
@@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
@@ -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:
|
||||
|
||||
@@ -3,7 +3,7 @@ description: 'Test Core Clean Build'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
|
||||
@@ -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 || {
|
||||
|
||||
@@ -3,17 +3,13 @@ description: 'Test Core Lint'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- name: 🕸️ Install Dependencies
|
||||
run: npm ci
|
||||
working-directory: ./core
|
||||
shell: bash
|
||||
- name: Clean core package.json
|
||||
run: git checkout ./package.json
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
- name: 🖌️ Lint
|
||||
run: npm run lint
|
||||
shell: bash
|
||||
|
||||
@@ -13,7 +13,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
@@ -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'
|
||||
@@ -66,7 +62,7 @@ runs:
|
||||
working-directory: ./core
|
||||
- name: 📦 Archive Updated Screenshots
|
||||
if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
|
||||
uses: actions/upload-artifact@v6
|
||||
uses: actions/upload-artifact@v5
|
||||
with:
|
||||
name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
|
||||
path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
|
||||
|
||||
@@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- name: 🕸️ Install Dependencies
|
||||
|
||||
@@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
|
||||
@@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
|
||||
@@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
|
||||
@@ -7,10 +7,10 @@ on:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
|
||||
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
|
||||
with:
|
||||
node-version: 24.x
|
||||
- uses: actions/download-artifact@v7
|
||||
- uses: actions/download-artifact@v6
|
||||
with:
|
||||
path: ./artifacts
|
||||
- name: 🔎 Extract Archives
|
||||
@@ -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
|
||||
|
||||
@@ -13,7 +13,7 @@ runs:
|
||||
- name: 🗄️ Create Archive
|
||||
run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }}
|
||||
shell: bash
|
||||
- uses: actions/upload-artifact@v6
|
||||
- uses: actions/upload-artifact@v5
|
||||
with:
|
||||
name: ${{ inputs.name }}
|
||||
path: ${{ inputs.output }}
|
||||
|
||||
30
.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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- uses: ./.github/workflows/actions/test-angular-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -162,14 +162,14 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- uses: ./.github/workflows/actions/build-react-router
|
||||
|
||||
test-react-router-e2e:
|
||||
@@ -180,7 +180,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- uses: ./.github/workflows/actions/test-react-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
|
||||
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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- uses: github/codeql-action/init@v4
|
||||
with:
|
||||
languages: javascript
|
||||
|
||||
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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
# 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
@@ -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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
# 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
@@ -23,7 +23,7 @@ jobs:
|
||||
release-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
|
||||
2
.github/workflows/release-orchestrator.yml
vendored
@@ -71,7 +71,7 @@ jobs:
|
||||
run-production:
|
||||
if: ${{ github.event_name == 'workflow_dispatch' && inputs.release-type == 'production' }}
|
||||
permissions:
|
||||
contents: write
|
||||
contents: read
|
||||
id-token: write
|
||||
uses: ./.github/workflows/release.yml
|
||||
secrets: inherit
|
||||
|
||||
10
.github/workflows/release.yml
vendored
@@ -54,11 +54,8 @@ jobs:
|
||||
finalize-release:
|
||||
needs: [release-ionic]
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
id-token: write
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
with:
|
||||
token: ${{ secrets.IONITRON_TOKEN }}
|
||||
fetch-depth: 0
|
||||
@@ -85,11 +82,8 @@ jobs:
|
||||
# possible for them to push at the same time.
|
||||
needs: [finalize-release]
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
id-token: write
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
# Pull the latest version of the reference
|
||||
# branch instead of the revision that triggered
|
||||
# the workflow otherwise we won't get the commit
|
||||
|
||||
30
.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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- uses: ./.github/workflows/actions/test-angular-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@@ -172,14 +172,14 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- uses: ./.github/workflows/actions/build-react-router
|
||||
|
||||
test-react-router-e2e:
|
||||
@@ -190,7 +190,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
||||
- uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- uses: ./.github/workflows/actions/test-react-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
|
||||
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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
- 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@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0
|
||||
# Normally, we could just push with the
|
||||
# default GITHUB_TOKEN, but that will
|
||||
# not cause the build workflow
|
||||
|
||||
74
BREAKING.md
@@ -18,11 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
||||
- [Button](#version-9x-button)
|
||||
- [Card](#version-9x-card)
|
||||
- [Chip](#version-9x-chip)
|
||||
- [Datetime](#version-9x-datetime)
|
||||
- [Grid](#version-9x-grid)
|
||||
- [Input Otp](#version-9x-input-otp)
|
||||
- [Radio Group](#version-9x-radio-group)
|
||||
- [Textarea](#version-9x-textarea)
|
||||
|
||||
<h2 id="version-9x-components">Components</h2>
|
||||
|
||||
@@ -32,44 +28,12 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
||||
|
||||
<h4 id="version-9x-card">Card</h4>
|
||||
|
||||
- **ion-card**: The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
|
||||
|
||||
- **ion-card-content**: The `ion-card-content` component has been updated to Shadow DOM. With this update, all card-related components now use Shadow DOM for style encapsulation. The default styles for heading elements inside `ion-card-content` have been removed. If you need custom styling for headings, you can add your own CSS targeting these elements. For example:
|
||||
|
||||
```css
|
||||
ion-card-content h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2px;
|
||||
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
ion-card-content h2 {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
ion-card-content h3,
|
||||
ion-card-content h4,
|
||||
ion-card-content h5,
|
||||
ion-card-content h6 {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
```
|
||||
- The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
|
||||
|
||||
<h4 id="version-9x-chip">Chip</h4>
|
||||
|
||||
- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
|
||||
|
||||
<h4 id="version-9x-datetime">Datetime</h4>
|
||||
|
||||
- The `ion-buttons` component has been removed from the internal implementation of `ion-datetime` and is no longer required when passing custom buttons to the `slot="buttons"`. When providing custom buttons, use a `div` element instead of `ion-buttons`. While existing code using `ion-buttons` may continue to work visually, future updates to the `ion-buttons` component may cause any styles you rely on to break.
|
||||
|
||||
<h4 id="version-9x-grid">Grid</h4>
|
||||
|
||||
- The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
|
||||
@@ -77,7 +41,6 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
||||
<h5>Example 1: Swap two columns</h5>
|
||||
|
||||
**Version up to 8.x**
|
||||
|
||||
```html
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
@@ -87,9 +50,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
```
|
||||
|
||||
**Version 9.x+**
|
||||
|
||||
```html
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
@@ -101,11 +62,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver
|
||||
```
|
||||
|
||||
<h5>Example 2: Reorder columns with specific sizes</h5>
|
||||
|
||||
To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
|
||||
|
||||
**Version up to 8.x**
|
||||
|
||||
```html
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
@@ -114,9 +73,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
```
|
||||
|
||||
**Version 9.x+**
|
||||
|
||||
```html
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
@@ -125,9 +82,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
```
|
||||
|
||||
<h5>Example 3: Push</h5>
|
||||
|
||||
```html
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
@@ -140,9 +95,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
```
|
||||
|
||||
**Version 9.x+**
|
||||
|
||||
```html
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
@@ -157,7 +110,6 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
|
||||
```
|
||||
|
||||
<h5>Example 4: Push and Pull</h5>
|
||||
|
||||
```html
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
@@ -170,9 +122,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
```
|
||||
|
||||
**Version 9.x+**
|
||||
|
||||
```html
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
@@ -184,24 +134,4 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
```
|
||||
|
||||
<h4 id="version-9x-input-otp">Input Otp</h4>
|
||||
|
||||
Converted `ion-input-otp` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
|
||||
|
||||
If you were targeting the internals of `ion-input-otp` in your CSS, you will need to target the `group`, `container`, `native`, `separator` or `description` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.
|
||||
|
||||
<h4 id="version-9x-radio-group">Radio Group</h4>
|
||||
|
||||
Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
|
||||
|
||||
If you were targeting the internals of `ion-radio-group` in your CSS, you will need to target the `supporting-text`, `helper-text` or `error-text` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.
|
||||
|
||||
Additionally, the `radio-group-wrapper` div element has been removed, causing slotted elements to be direct children of the `ion-radio-group`.
|
||||
|
||||
<h4 id="version-9x-textarea">Textarea</h4>
|
||||
|
||||
Converted `ion-textarea` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
|
||||
|
||||
If you were targeting the internals of `ion-textarea` in your CSS, you will need to target the `wrapper`, `container`, `label`, `native`, `supporting-text`, `helper-text`, `error-text`, `counter`, or `bottom` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.
|
||||
```
|
||||
113
CHANGELOG.md
@@ -3,119 +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)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
|
||||
* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
|
||||
* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** use Capacitor safe-area CSS variables on older WebViews ([#30865](https://github.com/ionic-team/ionic-framework/issues/30865)) ([8573bf8](https://github.com/ionic-team/ionic-framework/commit/8573bf8083f75eda13c954a56731a6aac8ca5724))
|
||||
* **header:** show iOS condense header when app is in MD mode ([#30690](https://github.com/ionic-team/ionic-framework/issues/30690)) ([f83b000](https://github.com/ionic-team/ionic-framework/commit/f83b0005309400d674e43c497bdffbcb9d2c4d94)), closes [#29929](https://github.com/ionic-team/ionic-framework/issues/29929)
|
||||
* **input-password-toggle:** improve screen reader announcements ([#30885](https://github.com/ionic-team/ionic-framework/issues/30885)) ([12ede4b](https://github.com/ionic-team/ionic-framework/commit/12ede4b79c8d5cffc2b014c7c8a0d2ef1d3bf90d))
|
||||
* **modal:** dismiss top-most overlay when multiple IDs match ([#30883](https://github.com/ionic-team/ionic-framework/issues/30883)) ([3b60a1d](https://github.com/ionic-team/ionic-framework/commit/3b60a1d68a1df1606ffee0bde7db7a206bac404a)), closes [#30030](https://github.com/ionic-team/ionic-framework/issues/30030)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **tabs:** select correct tab when routes have similar prefixes ([#30863](https://github.com/ionic-team/ionic-framework/issues/30863)) ([03fb422](https://github.com/ionic-team/ionic-framework/commit/03fb422bfa775e3e9dd695ea1857fa88d4245ecd)), closes [#30448](https://github.com/ionic-team/ionic-framework/issues/30448)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
|
||||
|
||||
**Note:** Version bump only for package ionic-framework
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** allow interaction with parent content through sheet modals in child routes ([#30839](https://github.com/ionic-team/ionic-framework/issues/30839)) ([b9e3cf0](https://github.com/ionic-team/ionic-framework/commit/b9e3cf0f5aae79a1f27a07b102c77e51f24825f4)), closes [#30700](https://github.com/ionic-team/ionic-framework/issues/30700)
|
||||
* **modal:** prevent browser hang when using ModalController in Angular ([#30845](https://github.com/ionic-team/ionic-framework/issues/30845)) ([b164516](https://github.com/ionic-team/ionic-framework/commit/b1645168a7fb9378dc39a081c207b2de0e180089))
|
||||
* **popover:** recalculate the content dimensions after the header has fully loaded ([#30853](https://github.com/ionic-team/ionic-framework/issues/30853)) ([99dcf38](https://github.com/ionic-team/ionic-framework/commit/99dcf3810a0c32416996d1e992ddf63359965cfc))
|
||||
* **select, action-sheet:** use radio role for options ([#30769](https://github.com/ionic-team/ionic-framework/issues/30769)) ([1c89cf0](https://github.com/ionic-team/ionic-framework/commit/1c89cf06ac959f9c9a35a66f811227c244d3198b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26)
|
||||
|
||||
|
||||
|
||||
@@ -3,114 +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)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
|
||||
* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
|
||||
* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **core:** use Capacitor safe-area CSS variables on older WebViews ([#30865](https://github.com/ionic-team/ionic-framework/issues/30865)) ([8573bf8](https://github.com/ionic-team/ionic-framework/commit/8573bf8083f75eda13c954a56731a6aac8ca5724))
|
||||
* **header:** show iOS condense header when app is in MD mode ([#30690](https://github.com/ionic-team/ionic-framework/issues/30690)) ([f83b000](https://github.com/ionic-team/ionic-framework/commit/f83b0005309400d674e43c497bdffbcb9d2c4d94)), closes [#29929](https://github.com/ionic-team/ionic-framework/issues/29929)
|
||||
* **input-password-toggle:** improve screen reader announcements ([#30885](https://github.com/ionic-team/ionic-framework/issues/30885)) ([12ede4b](https://github.com/ionic-team/ionic-framework/commit/12ede4b79c8d5cffc2b014c7c8a0d2ef1d3bf90d))
|
||||
* **modal:** dismiss top-most overlay when multiple IDs match ([#30883](https://github.com/ionic-team/ionic-framework/issues/30883)) ([3b60a1d](https://github.com/ionic-team/ionic-framework/commit/3b60a1d68a1df1606ffee0bde7db7a206bac404a)), closes [#30030](https://github.com/ionic-team/ionic-framework/issues/30030)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
|
||||
|
||||
**Note:** Version bump only for package @ionic/core
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
|
||||
|
||||
**Note:** Version bump only for package @ionic/core
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** allow interaction with parent content through sheet modals in child routes ([#30839](https://github.com/ionic-team/ionic-framework/issues/30839)) ([b9e3cf0](https://github.com/ionic-team/ionic-framework/commit/b9e3cf0f5aae79a1f27a07b102c77e51f24825f4)), closes [#30700](https://github.com/ionic-team/ionic-framework/issues/30700)
|
||||
* **modal:** prevent browser hang when using ModalController in Angular ([#30845](https://github.com/ionic-team/ionic-framework/issues/30845)) ([b164516](https://github.com/ionic-team/ionic-framework/commit/b1645168a7fb9378dc39a081c207b2de0e180089))
|
||||
* **popover:** recalculate the content dimensions after the header has fully loaded ([#30853](https://github.com/ionic-team/ionic-framework/issues/30853)) ([99dcf38](https://github.com/ionic-team/ionic-framework/commit/99dcf3810a0c32416996d1e992ddf63359965cfc))
|
||||
* **select, action-sheet:** use radio role for options ([#30769](https://github.com/ionic-team/ionic-framework/issues/30769)) ([1c89cf0](https://github.com/ionic-team/ionic-framework/commit/1c89cf06ac959f9c9a35a66f811227c244d3198b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [8.7.11](https://github.com/ionic-team/ionic-framework/compare/v8.7.10...v8.7.11) (2025-11-26)
|
||||
|
||||
|
||||
|
||||
88
core/api.txt
@@ -504,7 +504,7 @@ ion-card,css-prop,--color,ios
|
||||
ion-card,css-prop,--color,md
|
||||
ion-card,part,native
|
||||
|
||||
ion-card-content,shadow
|
||||
ion-card-content,none
|
||||
ion-card-content,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
|
||||
|
||||
@@ -746,18 +746,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
|
||||
|
||||
@@ -949,7 +940,7 @@ ion-infinite-scroll-content,prop,theme,"ios" | "md" | "ionic",undefined,false,fa
|
||||
|
||||
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" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "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" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "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
|
||||
@@ -1044,20 +1035,18 @@ ion-input,css-prop,--placeholder-opacity,ionic
|
||||
ion-input,css-prop,--placeholder-opacity,ios
|
||||
ion-input,css-prop,--placeholder-opacity,md
|
||||
|
||||
ion-input-otp,shadow
|
||||
ion-input-otp,scoped
|
||||
ion-input-otp,prop,autocapitalize,string,'off',false,false
|
||||
ion-input-otp,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-input-otp,prop,disabled,boolean,false,false,true
|
||||
ion-input-otp,prop,fill,"outline" | "solid" | undefined,'outline',false,false
|
||||
ion-input-otp,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
|
||||
ion-input-otp,prop,length,number,4,false,false
|
||||
ion-input-otp,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-input-otp,prop,pattern,string | undefined,undefined,false,false
|
||||
ion-input-otp,prop,readonly,boolean,false,false,true
|
||||
ion-input-otp,prop,separators,number[] | string | undefined,undefined,false,false
|
||||
ion-input-otp,prop,shape,"rectangular" | "round" | "soft",'round',false,false
|
||||
ion-input-otp,prop,size,"large" | "medium" | "small",'medium',false,false
|
||||
ion-input-otp,prop,theme,"ios" | "md" | "ionic",undefined,false,false
|
||||
ion-input-otp,prop,type,"number" | "text",'number',false,false
|
||||
ion-input-otp,prop,value,null | number | string | undefined,'',false,false
|
||||
ion-input-otp,method,setFocus,setFocus(index?: number) => Promise<void>
|
||||
@@ -1138,11 +1127,6 @@ ion-input-otp,css-prop,--separator-width,md
|
||||
ion-input-otp,css-prop,--width,ionic
|
||||
ion-input-otp,css-prop,--width,ios
|
||||
ion-input-otp,css-prop,--width,md
|
||||
ion-input-otp,part,container
|
||||
ion-input-otp,part,description
|
||||
ion-input-otp,part,group
|
||||
ion-input-otp,part,native
|
||||
ion-input-otp,part,separator
|
||||
|
||||
ion-input-password-toggle,shadow
|
||||
ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
@@ -1259,9 +1243,7 @@ ion-item,css-prop,--ripple-color,md
|
||||
ion-item,css-prop,--transition,ionic
|
||||
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
|
||||
@@ -1299,8 +1281,6 @@ ion-item-divider,css-prop,--padding-start,md
|
||||
ion-item-divider,css-prop,--padding-top,ionic
|
||||
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
|
||||
ion-item-group,prop,mode,"ios" | "md",undefined,false,false
|
||||
@@ -1325,8 +1305,6 @@ ion-item-option,css-prop,--background,md
|
||||
ion-item-option,css-prop,--color,ionic
|
||||
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
|
||||
@@ -1386,7 +1364,6 @@ ion-list-header,css-prop,--color,md
|
||||
ion-list-header,css-prop,--inner-border-width,ionic
|
||||
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
|
||||
@@ -1577,9 +1554,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
|
||||
@@ -1631,7 +1605,7 @@ ion-nav,prop,animated,boolean,true,false,false
|
||||
ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||
ion-nav,prop,mode,"ios" | "md",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,prop,theme,"ios" | "md" | "ionic",undefined,false,false
|
||||
ion-nav,method,canGoBack,canGoBack(view?: ViewController) => Promise<boolean>
|
||||
@@ -1653,7 +1627,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,mode,"ios" | "md",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
|
||||
@@ -1758,7 +1732,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
|
||||
@@ -1871,7 +1845,7 @@ ion-radio,part,container
|
||||
ion-radio,part,label
|
||||
ion-radio,part,mark
|
||||
|
||||
ion-radio-group,shadow
|
||||
ion-radio-group,none
|
||||
ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
|
||||
ion-radio-group,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
|
||||
ion-radio-group,prop,errorText,string | undefined,undefined,false,false
|
||||
@@ -1881,9 +1855,6 @@ ion-radio-group,prop,name,string,this.inputId,false,false
|
||||
ion-radio-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
|
||||
ion-radio-group,prop,value,any,undefined,false,false
|
||||
ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
|
||||
ion-radio-group,part,error-text
|
||||
ion-radio-group,part,helper-text
|
||||
ion-radio-group,part,supporting-text
|
||||
|
||||
ion-range,shadow
|
||||
ion-range,prop,activeBarStart,number | undefined,undefined,false,false
|
||||
@@ -1943,28 +1914,11 @@ ion-range,css-prop,--pin-background,md
|
||||
ion-range,css-prop,--pin-color,ionic
|
||||
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
|
||||
|
||||
@@ -1981,8 +1935,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
|
||||
|
||||
@@ -2066,7 +2018,7 @@ ion-row,css-prop,--ion-grid-gap
|
||||
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" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "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" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
|
||||
ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
|
||||
ion-searchbar,prop,cancelButtonIcon,string | undefined,undefined,false,false
|
||||
ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
|
||||
@@ -2243,7 +2195,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
|
||||
@@ -2326,20 +2277,16 @@ ion-select,css-prop,--placeholder-opacity,md
|
||||
ion-select,css-prop,--ripple-color,ionic
|
||||
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
|
||||
@@ -2476,7 +2423,7 @@ ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
|
||||
ion-text,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-text,prop,theme,"ios" | "md" | "ionic",undefined,false,false
|
||||
|
||||
ion-textarea,shadow
|
||||
ion-textarea,scoped
|
||||
ion-textarea,prop,autoGrow,boolean,false,false,true
|
||||
ion-textarea,prop,autocapitalize,string,'none',false,false
|
||||
ion-textarea,prop,autofocus,boolean,false,false,false
|
||||
@@ -2486,7 +2433,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
|
||||
@@ -2499,8 +2446,8 @@ 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,required,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,"rectangular" | "round" | "soft" | undefined,undefined,false,false
|
||||
ion-textarea,prop,size,"large" | "medium" | "small" | undefined,'medium',false,false
|
||||
@@ -2568,15 +2515,6 @@ ion-textarea,css-prop,--placeholder-font-weight,md
|
||||
ion-textarea,css-prop,--placeholder-opacity,ionic
|
||||
ion-textarea,css-prop,--placeholder-opacity,ios
|
||||
ion-textarea,css-prop,--placeholder-opacity,md
|
||||
ion-textarea,part,bottom
|
||||
ion-textarea,part,container
|
||||
ion-textarea,part,counter
|
||||
ion-textarea,part,error-text
|
||||
ion-textarea,part,helper-text
|
||||
ion-textarea,part,label
|
||||
ion-textarea,part,native
|
||||
ion-textarea,part,supporting-text
|
||||
ion-textarea,part,wrapper
|
||||
|
||||
ion-thumbnail,shadow
|
||||
ion-thumbnail,prop,mode,"ios" | "md",undefined,false,false
|
||||
@@ -2683,11 +2621,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
|
||||
|
||||
2994
core/package-lock.json
generated
@@ -1,10 +1,7 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.8.0",
|
||||
"version": "8.7.11",
|
||||
"description": "Base components for Ionic",
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
},
|
||||
"keywords": [
|
||||
"ionic",
|
||||
"framework",
|
||||
@@ -35,16 +32,17 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@phosphor-icons/core": "^2.1.1",
|
||||
"@stencil/core": "4.43.0",
|
||||
"@stencil/core": "4.38.0",
|
||||
"ionicons": "^8.0.13",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.11.0",
|
||||
"@capacitor/core": "^8.0.0",
|
||||
"@capacitor/haptics": "^8.0.0",
|
||||
"@capacitor/keyboard": "^8.0.0",
|
||||
"@capacitor/status-bar": "^8.0.0",
|
||||
"@capacitor/core": "^7.0.0",
|
||||
"@capacitor/haptics": "^7.0.0",
|
||||
"@capacitor/keyboard": "^7.0.0",
|
||||
"@capacitor/status-bar": "^7.0.0",
|
||||
"@clack/prompts": "^0.11.0",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.56.1",
|
||||
@@ -69,7 +67,6 @@
|
||||
"jest": "^29.7.0",
|
||||
"jest-cli": "^29.7.0",
|
||||
"outsystems-design-tokens": "^1.3.4",
|
||||
"playwright-core": "^1.56.1",
|
||||
"prettier": "^2.8.8",
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.33.0",
|
||||
@@ -107,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
@@ -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);
|
||||
@@ -14,7 +14,7 @@
|
||||
* The following URL parameters are supported:
|
||||
* - `rtl`: Set to `true` to enable right-to-left directionality.
|
||||
* - `ionic:_testing`: Set to `true` to identify testing environments.
|
||||
* - `ionic:theme`: Set to `ios` or `md` to load a specific theme.
|
||||
* - `ionic:mode`: Set to `ios` or `md` to load a specific mode.
|
||||
* Defaults to `md`.
|
||||
* - `palette`: Set to `light`, `dark`, `high-contrast`, or
|
||||
* `high-contrast-dark` to load a specific palette. Defaults to `light`.
|
||||
@@ -57,19 +57,11 @@
|
||||
* Values can be `light`, `dark`, `high-contrast`,
|
||||
* or `high-contrast-dark`. Default to `light` for tests.
|
||||
*/
|
||||
const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
|
||||
const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
|
||||
const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
|
||||
const paletteQuery = window.location.search.match(/palette=([a-z]+)/);
|
||||
const paletteHash = window.location.hash.match(/palette=([a-z]+)/);
|
||||
const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
|
||||
const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
|
||||
const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
|
||||
|
||||
let paletteName = paletteQuery?.[1] || paletteHash?.[1] || highContrastDarkClass || darkClass || highContrastClass || 'light';
|
||||
|
||||
if (!validPalettes.includes(paletteName)) {
|
||||
console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
|
||||
paletteName = 'light';
|
||||
}
|
||||
const paletteName = paletteQuery?.[1] || paletteHash?.[1] || darkClass || 'light';
|
||||
|
||||
if (paletteName !== 'light') {
|
||||
const linkTag = document.createElement('link');
|
||||
|
||||
@@ -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}"`;
|
||||
|
||||
1266
core/src/components.d.ts
vendored
@@ -533,7 +533,6 @@ export class Accordion implements ComponentInterface {
|
||||
|
||||
'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
|
||||
}}
|
||||
tabindex={disabled ? '-1' : undefined}
|
||||
>
|
||||
<div
|
||||
onClick={() => this.toggleExpanded()}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Watch, Component, Element, Event, Host, Listen, Method, Prop, State, h, readTask } from '@stencil/core';
|
||||
import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core';
|
||||
import type { Gesture } from '@utils/gesture';
|
||||
import { createButtonActiveGesture } from '@utils/gesture/button-active';
|
||||
import { raf } from '@utils/helpers';
|
||||
@@ -48,18 +48,11 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
private wrapperEl?: HTMLElement;
|
||||
private groupEl?: HTMLElement;
|
||||
private gesture?: Gesture;
|
||||
private hasRadioButtons = false;
|
||||
|
||||
presented = false;
|
||||
lastFocus?: HTMLElement;
|
||||
animation?: any;
|
||||
|
||||
/**
|
||||
* The ID of the currently active/selected radio button.
|
||||
* Used for keyboard navigation and ARIA attributes.
|
||||
*/
|
||||
@State() activeRadioId?: string;
|
||||
|
||||
@Element() el!: HTMLIonActionSheetElement;
|
||||
|
||||
/** @internal */
|
||||
@@ -90,22 +83,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
* An array of buttons for the action sheet.
|
||||
*/
|
||||
@Prop() buttons: (ActionSheetButton | string)[] = [];
|
||||
@Watch('buttons')
|
||||
buttonsChanged() {
|
||||
const radioButtons = this.getRadioButtons();
|
||||
this.hasRadioButtons = radioButtons.length > 0;
|
||||
|
||||
// Initialize activeRadioId when buttons change
|
||||
if (this.hasRadioButtons) {
|
||||
const checkedButton = radioButtons.find((b) => b.htmlAttributes?.['aria-checked'] === 'true');
|
||||
|
||||
if (checkedButton) {
|
||||
const allButtons = this.getButtons();
|
||||
const checkedIndex = allButtons.indexOf(checkedButton);
|
||||
this.activeRadioId = this.getButtonId(checkedButton, checkedIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Additional classes to apply for custom CSS. If multiple classes are
|
||||
@@ -302,53 +279,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all buttons regardless of role.
|
||||
*/
|
||||
private getButtons(): ActionSheetButton[] {
|
||||
return this.buttons.map((b) => {
|
||||
return typeof b === 'string' ? { text: b } : b;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all radio buttons (buttons with role="radio").
|
||||
*/
|
||||
private getRadioButtons(): ActionSheetButton[] {
|
||||
return this.getButtons().filter((b) => {
|
||||
const role = b.htmlAttributes?.role;
|
||||
return role === 'radio' && !isCancel(role);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle radio button selection and update aria-checked state.
|
||||
*
|
||||
* @param button The radio button that was selected.
|
||||
*/
|
||||
private selectRadioButton(button: ActionSheetButton) {
|
||||
const buttonId = this.getButtonId(button);
|
||||
|
||||
// Set the active radio ID (this will trigger a re-render and update aria-checked)
|
||||
this.activeRadioId = buttonId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get or generate an ID for a button.
|
||||
*
|
||||
* @param button The button for which to get the ID.
|
||||
* @param index Optional index of the button in the buttons array.
|
||||
* @returns The ID of the button.
|
||||
*/
|
||||
private getButtonId(button: ActionSheetButton, index?: number): string {
|
||||
if (button.id) {
|
||||
return button.id;
|
||||
}
|
||||
const allButtons = this.getButtons();
|
||||
const buttonIndex = index !== undefined ? index : allButtons.indexOf(button);
|
||||
return `action-sheet-button-${this.overlayIndex}-${buttonIndex}`;
|
||||
}
|
||||
|
||||
private onBackdropTap = () => {
|
||||
this.dismiss(undefined, BACKDROP);
|
||||
};
|
||||
@@ -361,96 +297,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* When the action sheet has radio buttons, we want to follow the
|
||||
* keyboard navigation pattern for radio groups:
|
||||
* - Arrow Down/Right: Move to the next radio button (wrap to first if at end)
|
||||
* - Arrow Up/Left: Move to the previous radio button (wrap to last if at start)
|
||||
* - Space/Enter: Select the focused radio button and trigger its handler
|
||||
*/
|
||||
@Listen('keydown')
|
||||
onKeydown(ev: KeyboardEvent) {
|
||||
// Only handle keyboard navigation if we have radio buttons
|
||||
if (!this.hasRadioButtons || !this.presented) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = ev.target as HTMLElement;
|
||||
|
||||
// Ignore if the target element is not within the action sheet or not a radio button
|
||||
if (
|
||||
!this.el.contains(target) ||
|
||||
!target.classList.contains('action-sheet-button') ||
|
||||
target.getAttribute('role') !== 'radio'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get all radio button elements and filter out disabled ones
|
||||
const radios = Array.from(this.el.querySelectorAll('.action-sheet-button[role="radio"]')).filter(
|
||||
(el) => !(el as HTMLButtonElement).disabled
|
||||
) as HTMLButtonElement[];
|
||||
const currentIndex = radios.findIndex((radio) => radio.id === target.id);
|
||||
|
||||
if (currentIndex === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const allButtons = this.getButtons();
|
||||
const radioButtons = this.getRadioButtons();
|
||||
/**
|
||||
* Build a map of button element IDs to their ActionSheetButton
|
||||
* config objects.
|
||||
* This allows us to quickly look up which button config corresponds
|
||||
* to a DOM element when handling keyboard navigation
|
||||
* (e.g., whenuser presses Space/Enter or arrow keys).
|
||||
* The key is the ID that was set on the DOM element during render,
|
||||
* and the value is the ActionSheetButton config that contains the
|
||||
* handler and other properties.
|
||||
*/
|
||||
const buttonIdMap = new Map<string, ActionSheetButton>();
|
||||
|
||||
radioButtons.forEach((b) => {
|
||||
const allIndex = allButtons.indexOf(b);
|
||||
const buttonId = this.getButtonId(b, allIndex);
|
||||
buttonIdMap.set(buttonId, b);
|
||||
});
|
||||
|
||||
let nextEl: HTMLButtonElement | undefined;
|
||||
|
||||
if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
nextEl = currentIndex === radios.length - 1 ? radios[0] : radios[currentIndex + 1];
|
||||
} else if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
nextEl = currentIndex === 0 ? radios[radios.length - 1] : radios[currentIndex - 1];
|
||||
} else if (ev.key === ' ' || ev.key === 'Enter') {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
const button = buttonIdMap.get(target.id);
|
||||
if (button) {
|
||||
this.selectRadioButton(button);
|
||||
this.buttonClick(button);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Focus the next radio button
|
||||
if (nextEl) {
|
||||
const button = buttonIdMap.get(nextEl.id);
|
||||
if (button) {
|
||||
this.selectRadioButton(button);
|
||||
nextEl.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
prepareOverlay(this.el);
|
||||
this.triggerChanged();
|
||||
@@ -468,8 +314,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
if (!this.htmlAttributes?.id) {
|
||||
setOverlayId(this.el);
|
||||
}
|
||||
// Initialize activeRadioId for radio buttons
|
||||
this.buttonsChanged();
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
@@ -514,82 +358,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
this.triggerChanged();
|
||||
}
|
||||
|
||||
private renderActionSheetButtons(filteredButtons: ActionSheetButton[]) {
|
||||
const theme = getIonTheme(this);
|
||||
const { activeRadioId } = this;
|
||||
|
||||
return filteredButtons.map((b, index) => {
|
||||
const isRadio = b.htmlAttributes?.role === 'radio';
|
||||
const buttonId = this.getButtonId(b, index);
|
||||
const radioButtons = this.getRadioButtons();
|
||||
const isActiveRadio = isRadio && buttonId === activeRadioId;
|
||||
const isFirstRadio = isRadio && b === radioButtons[0];
|
||||
|
||||
// For radio buttons, set tabindex: 0 for the active one, -1 for others
|
||||
// For non-radio buttons, use default tabindex (undefined, which means 0)
|
||||
|
||||
/**
|
||||
* For radio buttons, set tabindex based on activeRadioId
|
||||
* - If the button is the active radio, tabindex is 0
|
||||
* - If no radio is active, the first radio button should have tabindex 0
|
||||
* - All other radio buttons have tabindex -1
|
||||
* For non-radio buttons, use default tabindex (undefined, which means 0)
|
||||
*/
|
||||
let tabIndex: number | undefined;
|
||||
|
||||
if (isRadio) {
|
||||
// Focus on the active radio button
|
||||
if (isActiveRadio) {
|
||||
tabIndex = 0;
|
||||
} else if (!activeRadioId && isFirstRadio) {
|
||||
// No active radio, first radio gets focus
|
||||
tabIndex = 0;
|
||||
} else {
|
||||
// All other radios are not focusable
|
||||
tabIndex = -1;
|
||||
}
|
||||
} else {
|
||||
tabIndex = undefined;
|
||||
}
|
||||
|
||||
// For radio buttons, set aria-checked based on activeRadioId
|
||||
// Otherwise, use the value from htmlAttributes if provided
|
||||
const htmlAttrs = { ...b.htmlAttributes };
|
||||
if (isRadio) {
|
||||
htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
{...htmlAttrs}
|
||||
role={isRadio ? 'radio' : undefined}
|
||||
type="button"
|
||||
id={buttonId}
|
||||
class={{
|
||||
...buttonClass(b),
|
||||
'action-sheet-selected': isActiveRadio,
|
||||
}}
|
||||
onClick={() => {
|
||||
if (isRadio) {
|
||||
this.selectRadioButton(b);
|
||||
}
|
||||
this.buttonClick(b);
|
||||
}}
|
||||
disabled={b.disabled}
|
||||
tabIndex={tabIndex}
|
||||
>
|
||||
<span class="action-sheet-button-inner">
|
||||
{b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
|
||||
{b.text}
|
||||
</span>
|
||||
{theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
|
||||
</button>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
|
||||
const { header, htmlAttributes, overlayIndex } = this;
|
||||
const theme = getIonTheme(this);
|
||||
const allButtons = this.getButtons();
|
||||
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
||||
@@ -621,11 +391,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
|
||||
<div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
|
||||
<div class="action-sheet-container">
|
||||
<div
|
||||
class="action-sheet-group"
|
||||
ref={(el) => (this.groupEl = el)}
|
||||
role={hasRadioButtons ? 'radiogroup' : undefined}
|
||||
>
|
||||
<div class="action-sheet-group" ref={(el) => (this.groupEl = el)}>
|
||||
{header !== undefined && (
|
||||
<div
|
||||
id={headerID}
|
||||
@@ -638,7 +404,22 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
{this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>}
|
||||
</div>
|
||||
)}
|
||||
{this.renderActionSheetButtons(buttons)}
|
||||
{buttons.map((b) => (
|
||||
<button
|
||||
{...b.htmlAttributes}
|
||||
type="button"
|
||||
id={b.id}
|
||||
class={buttonClass(b)}
|
||||
onClick={() => this.buttonClick(b)}
|
||||
disabled={b.disabled}
|
||||
>
|
||||
<span class="action-sheet-button-inner">
|
||||
{b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
|
||||
{b.text}
|
||||
</span>
|
||||
{theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{cancelButton && (
|
||||
|
||||
@@ -134,58 +134,3 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* This behavior does not vary across modes/directions.
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('action-sheet: radio buttons'), () => {
|
||||
test('should render action sheet with radio buttons correctly', async ({ page }) => {
|
||||
await page.goto(`/src/components/action-sheet/test/a11y`, config);
|
||||
|
||||
const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
|
||||
const button = page.locator('#radioButtons');
|
||||
|
||||
await button.click();
|
||||
await ionActionSheetDidPresent.next();
|
||||
|
||||
const actionSheet = page.locator('ion-action-sheet');
|
||||
|
||||
const radioButtons = actionSheet.locator('.action-sheet-button[role="radio"]');
|
||||
await expect(radioButtons).toHaveCount(2);
|
||||
});
|
||||
|
||||
test('should navigate radio buttons with keyboard', async ({ page, pageUtils }) => {
|
||||
await page.goto(`/src/components/action-sheet/test/a11y`, config);
|
||||
|
||||
const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
|
||||
const button = page.locator('#radioButtons');
|
||||
|
||||
await button.click();
|
||||
await ionActionSheetDidPresent.next();
|
||||
|
||||
// Focus on the radios
|
||||
await pageUtils.pressKeys('Tab');
|
||||
|
||||
// Verify the first focusable radio button is focused
|
||||
let focusedElement = await page.evaluate(() => document.activeElement?.textContent?.trim());
|
||||
expect(focusedElement).toBe('Option 2');
|
||||
|
||||
// Navigate to the next radio button
|
||||
await page.keyboard.press('ArrowDown');
|
||||
|
||||
// Verify the first radio button is focused again (wrap around)
|
||||
focusedElement = await page.evaluate(() => document.activeElement?.textContent?.trim());
|
||||
expect(focusedElement).toBe('Option 1');
|
||||
|
||||
// Navigate to the next radio button
|
||||
await page.keyboard.press('ArrowDown');
|
||||
|
||||
// Navigate to the cancel button
|
||||
await pageUtils.pressKeys('Tab');
|
||||
|
||||
focusedElement = await page.evaluate(() => document.activeElement?.textContent?.trim());
|
||||
expect(focusedElement).toBe('Cancel');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -27,7 +27,6 @@
|
||||
<button class="expand" id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()">
|
||||
Aria Label Cancel Button
|
||||
</button>
|
||||
<button class="expand" id="radioButtons" onclick="presentRadioButtons()">Radio Buttons</button>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
@@ -101,32 +100,6 @@
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function presentRadioButtons() {
|
||||
openActionSheet({
|
||||
header: 'Select an option',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Option 1',
|
||||
htmlAttributes: {
|
||||
role: 'radio',
|
||||
'aria-checked': 'false',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Option 2',
|
||||
htmlAttributes: {
|
||||
role: 'radio',
|
||||
'aria-checked': 'true',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,7 +5,7 @@ import type { E2EPage } from '@utils/test/playwright';
|
||||
/**
|
||||
* Safe area tests only check top and bottom edges. RTL checks are not required here.
|
||||
*/
|
||||
configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ config, title, screenshot }) => {
|
||||
configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
|
||||
test.describe(title('app: safe-area'), () => {
|
||||
const testOverlay = async (page: E2EPage, trigger: string, event: string, screenshotModifier: string) => {
|
||||
const presentEvent = await page.spyOnEvent(event);
|
||||
@@ -18,66 +18,20 @@ configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ co
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`));
|
||||
};
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(`/src/components/app/test/safe-area`, config);
|
||||
});
|
||||
|
||||
test.describe(title('Ionic safe area variables'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
const htmlTag = page.locator('html');
|
||||
const hasSafeAreaClass = await htmlTag.evaluate((el) => el.classList.contains('safe-area'));
|
||||
|
||||
expect(hasSafeAreaClass).toBe(true);
|
||||
});
|
||||
|
||||
test('should not have visual regressions with action sheet', async ({ page }) => {
|
||||
await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
|
||||
});
|
||||
test('should not have visual regressions with menu', async ({ page }) => {
|
||||
await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
|
||||
});
|
||||
test('should not have visual regressions with picker', async ({ page }) => {
|
||||
await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
|
||||
});
|
||||
test('should not have visual regressions with toast', async ({ page }) => {
|
||||
await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
|
||||
});
|
||||
test('should not have visual regressions with action sheet', async ({ page }) => {
|
||||
await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
|
||||
});
|
||||
|
||||
test.describe(title('Capacitor safe area variables'), () => {
|
||||
test('should use safe-area-inset vars when safe-area class is not defined', async ({ page }) => {
|
||||
await page.evaluate(() => {
|
||||
const html = document.documentElement;
|
||||
|
||||
// Remove the safe area class
|
||||
html.classList.remove('safe-area');
|
||||
|
||||
// Set the safe area inset variables
|
||||
html.style.setProperty('--safe-area-inset-top', '10px');
|
||||
html.style.setProperty('--safe-area-inset-bottom', '20px');
|
||||
html.style.setProperty('--safe-area-inset-left', '30px');
|
||||
html.style.setProperty('--safe-area-inset-right', '40px');
|
||||
});
|
||||
|
||||
const top = await page.evaluate(() =>
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-top').trim()
|
||||
);
|
||||
const bottom = await page.evaluate(() =>
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-bottom').trim()
|
||||
);
|
||||
const left = await page.evaluate(() =>
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-left').trim()
|
||||
);
|
||||
const right = await page.evaluate(() =>
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-right').trim()
|
||||
);
|
||||
|
||||
expect(top).toBe('10px');
|
||||
expect(bottom).toBe('20px');
|
||||
expect(left).toBe('30px');
|
||||
expect(right).toBe('40px');
|
||||
});
|
||||
test('should not have visual regressions with menu', async ({ page }) => {
|
||||
await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
|
||||
});
|
||||
test('should not have visual regressions with picker', async ({ page }) => {
|
||||
await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
|
||||
});
|
||||
test('should not have visual regressions with toast', async ({ page }) => {
|
||||
await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 27 KiB |
@@ -244,7 +244,7 @@
|
||||
|
||||
// Avatar Disabled
|
||||
// --------------------------------------------------
|
||||
:host(.avatar-disabled)::after {
|
||||
:host(.avatar-disabled)::before {
|
||||
@include globals.border-radius(var(--border-radius));
|
||||
@include globals.disabled-state();
|
||||
}
|
||||
|
||||
@@ -12,9 +12,6 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
|
||||
`
|
||||
<div id="container">
|
||||
<ion-avatar disabled> AV </ion-avatar>
|
||||
<ion-avatar disabled>
|
||||
<ion-icon name="person-outline"></ion-icon>
|
||||
</ion-avatar>
|
||||
<ion-avatar disabled>
|
||||
<img src="/src/components/avatar/test/avatar.svg" />
|
||||
</ion-avatar>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 2.1 KiB |
@@ -25,9 +25,6 @@
|
||||
<ion-content>
|
||||
<h3>Disabled</h3>
|
||||
<ion-avatar disabled>AV</ion-avatar>
|
||||
<ion-avatar disabled>
|
||||
<ion-icon name="person-outline"></ion-icon>
|
||||
</ion-avatar>
|
||||
<ion-avatar disabled>
|
||||
<img src="/src/components/avatar/test/avatar.svg" />
|
||||
</ion-avatar>
|
||||
|
||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
@@ -19,7 +19,7 @@
|
||||
position: absolute;
|
||||
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
min-height: globals.$ion-scale-1200;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
@@ -334,12 +334,3 @@
|
||||
@include globals.position(null, globals.$ion-space-200, globals.$ion-space-200, null);
|
||||
}
|
||||
}
|
||||
|
||||
// Button in Datetime
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.in-datetime) {
|
||||
@include globals.typography(globals.$ion-body-action-md);
|
||||
|
||||
min-height: globals.$ion-space-1200;
|
||||
}
|
||||
|
||||
@@ -293,16 +293,3 @@
|
||||
background: var(--ion-toolbar-color, var(--color));
|
||||
color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
|
||||
}
|
||||
|
||||
// Button in Datetime
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.in-datetime) {
|
||||
--padding-top: 3px;
|
||||
--padding-bottom: 3px;
|
||||
--padding-start: 5px;
|
||||
--padding-end: 5px;
|
||||
|
||||
font-size: dynamic-font-clamp(1, 17px, 1.24);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -243,20 +243,3 @@
|
||||
background: var(--ion-toolbar-background, var(--color));
|
||||
color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
|
||||
}
|
||||
|
||||
// Button in Datetime
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.in-datetime) {
|
||||
--padding-top: 3px;
|
||||
--padding-bottom: 3px;
|
||||
--padding-start: 8px;
|
||||
--padding-end: 8px;
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
:host(.in-datetime.button-clear) {
|
||||
--background-activated: transparent;
|
||||
--background-focused: currentColor;
|
||||
--background-hover: currentColor;
|
||||
}
|
||||
|
||||
@@ -59,12 +59,3 @@
|
||||
:host ::slotted(ion-badge[vertical]:not(:empty)) {
|
||||
@include globals.padding(2px);
|
||||
}
|
||||
|
||||
// Button in Datetime
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.in-datetime) {
|
||||
@include globals.margin(0px, 2px, 0px, 2px);
|
||||
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
@@ -31,10 +31,9 @@ import type { RouterDirection } from '../router/utils/interface';
|
||||
shadow: true,
|
||||
})
|
||||
export class Button implements ComponentInterface, AnchorInterface, ButtonInterface {
|
||||
private inDatetime = false;
|
||||
private inItem = false;
|
||||
private inListHeader = false;
|
||||
private inButtons = false;
|
||||
private inToolbar = false;
|
||||
private formButtonEl: HTMLButtonElement | null = null;
|
||||
private formEl: HTMLFormElement | null = null;
|
||||
private inheritedAttributes: Attributes = {};
|
||||
@@ -79,8 +78,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
/**
|
||||
* Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
|
||||
* for a transparent button with a border, or to `"solid"` for a button with a filled background.
|
||||
* The default fill is `"solid"` except when inside of a buttons or datetime component, where
|
||||
* the default fill is `"clear"`.
|
||||
* The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
|
||||
*/
|
||||
@Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
|
||||
|
||||
@@ -176,7 +174,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
*/
|
||||
@Watch('aria-checked')
|
||||
@Watch('aria-label')
|
||||
@Watch('aria-pressed')
|
||||
onAriaChanged(newValue: string, _oldValue: string, propName: string) {
|
||||
this.inheritedAttributes = {
|
||||
...this.inheritedAttributes,
|
||||
@@ -219,10 +216,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
this.inDatetime = hostContext('ion-datetime', this.el);
|
||||
this.inButtons = hostContext('ion-buttons', this.el);
|
||||
this.inListHeader = hostContext('ion-list-header', this.el);
|
||||
this.inItem = hostContext('ion-item', this.el) || hostContext('ion-item-divider', this.el);
|
||||
this.inToolbar = !!this.el.closest('ion-buttons');
|
||||
this.inListHeader = !!this.el.closest('ion-list-header');
|
||||
this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
|
||||
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
||||
}
|
||||
|
||||
@@ -237,11 +233,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
private get rippleType() {
|
||||
const hasClearFill = this.fill === undefined || this.fill === 'clear';
|
||||
|
||||
// Use the unbounded "circular" ripple effect if it:
|
||||
// - Has a clear fill (the default)
|
||||
// - Only has an icon and
|
||||
// - Is inside of buttons (used in a toolbar) or a datetime
|
||||
if (hasClearFill && this.hasIconOnly && (this.inButtons || this.inDatetime)) {
|
||||
// If the button is in a toolbar, has a clear fill (which is the default)
|
||||
// and only has an icon we use the unbounded "circular" ripple effect
|
||||
if (hasClearFill && this.hasIconOnly && this.inToolbar) {
|
||||
return 'unbounded';
|
||||
}
|
||||
|
||||
@@ -406,7 +400,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
};
|
||||
let fill = this.fill;
|
||||
if (fill === undefined) {
|
||||
fill = this.inDatetime || this.inButtons || this.inListHeader ? 'clear' : 'solid';
|
||||
fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -432,10 +426,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
[`${buttonType}-${shape}`]: true,
|
||||
[`${buttonType}-${fill}`]: true,
|
||||
[`${buttonType}-strong`]: strong,
|
||||
'in-datetime': this.inDatetime,
|
||||
'in-toolbar': hostContext('ion-toolbar', this.el),
|
||||
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
||||
'in-buttons': this.inButtons,
|
||||
'in-buttons': hostContext('ion-buttons', this.el),
|
||||
'button-has-icon-only': hasIconOnly,
|
||||
'button-has-badge': hasBadge,
|
||||
'button-disabled': disabled,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Card Content
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
ion-card-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// Ionic Card Content
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
.card-content-ionic {
|
||||
@include globals.padding(globals.$ion-space-400);
|
||||
@include globals.typography(globals.$ion-body-md-regular);
|
||||
|
||||
@@ -13,8 +13,12 @@
|
||||
flex-direction: column;
|
||||
|
||||
gap: globals.$ion-space-400;
|
||||
|
||||
img {
|
||||
@include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(img) {
|
||||
@include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
|
||||
ion-card-header + .card-content-ionic {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@@ -4,16 +4,44 @@
|
||||
// iOS Card Header
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
.card-content-ios {
|
||||
@include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start);
|
||||
|
||||
font-size: $card-ios-font-size;
|
||||
|
||||
line-height: 1.4;
|
||||
|
||||
h1 {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: dynamic-font(24px);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: dynamic-font(16px);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: dynamic-font(14px);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: dynamic-font(14px);
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(p) {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: dynamic-font(14px);
|
||||
ion-card-header + .card-content-ios {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@@ -4,19 +4,47 @@
|
||||
// Material Design Card Content
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
.card-content-md {
|
||||
@include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start);
|
||||
|
||||
font-size: $card-md-font-size;
|
||||
|
||||
line-height: $card-md-line-height;
|
||||
|
||||
h1 {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: dynamic-font(24px);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: dynamic-font(16px);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: dynamic-font(14px);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: dynamic-font(14px);
|
||||
font-weight: normal;
|
||||
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(p) {
|
||||
@include margin(0, 0, 2px);
|
||||
|
||||
font-size: dynamic-font(14px);
|
||||
font-weight: normal;
|
||||
|
||||
line-height: 1.5;
|
||||
ion-card-header + .card-content-md {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
// Card Content
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
ion-card-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -14,7 +14,6 @@ import { getIonTheme } from '../../global/ionic-global';
|
||||
md: 'card-content.md.scss',
|
||||
ionic: 'card-content.ionic.scss',
|
||||
},
|
||||
shadow: true,
|
||||
})
|
||||
export class CardContent implements ComponentInterface {
|
||||
render() {
|
||||
@@ -23,10 +22,11 @@ export class CardContent implements ComponentInterface {
|
||||
<Host
|
||||
class={{
|
||||
[theme]: true,
|
||||
|
||||
// Used internally for styling
|
||||
[`card-content-${theme}`]: true,
|
||||
}}
|
||||
>
|
||||
<slot></slot>
|
||||
</Host>
|
||||
></Host>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,6 +91,27 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
const card = page.locator('ion-card');
|
||||
await expect(card).toHaveScreenshot(screenshot(`card-color`));
|
||||
});
|
||||
test('headings should have correct size in card', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-card>
|
||||
<ion-card-content>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<p>Paragraph</p>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const card = page.locator('ion-card');
|
||||
await expect(card).toHaveScreenshot(screenshot(`card-headings`));
|
||||
});
|
||||
test('should render even without header or content elements', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
@@ -113,11 +113,11 @@ input {
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
.checkbox-bottom {
|
||||
@include globals.typography(globals.$ion-body-sm-medium);
|
||||
@include globals.typography(globals.$ion-body-md-regular);
|
||||
}
|
||||
|
||||
.checkbox-bottom .error-text {
|
||||
color: globals.$ion-text-danger;
|
||||
color: globals.$ion-semantics-danger-800;
|
||||
}
|
||||
|
||||
.checkbox-bottom .helper-text {
|
||||
@@ -198,7 +198,7 @@ input {
|
||||
// Ionic Design Checkbox Invalid
|
||||
// --------------------------------------------------
|
||||
:host(.ion-invalid) {
|
||||
--focus-ring-color: #{globals.$ion-border-danger-default};
|
||||
--focus-ring-color: #{globals.$ion-border-focus-error};
|
||||
}
|
||||
|
||||
:host(.ion-invalid:not(.checkbox-checked)),
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |