mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
1 Commits
vue-test
...
sp/refacto
| Author | SHA1 | Date | |
|---|---|---|---|
|
5f56f069e5 |
33
.github/CODEOWNERS
vendored
33
.github/CODEOWNERS
vendored
@@ -11,15 +11,13 @@
|
||||
# In each subsection folders are ordered first by depth, then alphabetically.
|
||||
# This should make it easy to add new rules without breaking existing ones.
|
||||
|
||||
* @ionic-team/framework
|
||||
|
||||
# Frameworks
|
||||
|
||||
## Angular
|
||||
|
||||
/packages/angular/ @sean-perkins @thetaPC
|
||||
/packages/angular-server @sean-perkins @thetaPC
|
||||
/packages/angular/test @thetaPC
|
||||
/packages/angular/ @sean-perkins
|
||||
/packages/angular-server @sean-perkins
|
||||
/packages/angular/test
|
||||
|
||||
## React
|
||||
|
||||
@@ -30,23 +28,19 @@
|
||||
|
||||
## Vue
|
||||
|
||||
/packages/vue/ @liamdebeasi @thetaPC
|
||||
/packages/vue-router/ @liamdebeasi @thetaPC
|
||||
/packages/vue/test/ @thetaPC
|
||||
/packages/vue-router/__tests__ @thetaPC
|
||||
/packages/vue/ @liamdebeasi
|
||||
/packages/vue-router/ @liamdebeasi
|
||||
/packages/vue/test/
|
||||
/packages/vue-router/__tests__
|
||||
|
||||
# Components
|
||||
|
||||
/core/src/components/accordion/ @liamdebeasi
|
||||
/core/src/components/accordion-group/ @liamdebeasi
|
||||
|
||||
/core/src/components/checkbox/ @amandaejohnston
|
||||
|
||||
/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
|
||||
/core/src/components/datetime-button/ @liamdebeasi
|
||||
|
||||
/core/src/components/item/ @brandyscarney
|
||||
|
||||
/core/src/components/menu/ @amandaejohnston
|
||||
/core/src/components/menu-toggle/ @amandaejohnston
|
||||
|
||||
@@ -56,19 +50,9 @@
|
||||
/core/src/components/picker-internal/ @liamdebeasi
|
||||
/core/src/components/picker-column-internal/ @liamdebeasi
|
||||
|
||||
/core/src/components/radio/ @amandaejohnston
|
||||
/core/src/components/radio-group/ @amandaejohnston
|
||||
|
||||
/core/src/components/refresher/ @liamdebeasi
|
||||
/core/src/components/refresher-content/ @liamdebeasi
|
||||
|
||||
/core/src/components/searchbar/ @brandyscarney
|
||||
|
||||
/core/src/components/segment/ @brandyscarney
|
||||
/core/src/components/segment-button/ @brandyscarney
|
||||
|
||||
/core/src/components/skeleton-text/ @brandyscarney
|
||||
|
||||
# Utilities
|
||||
|
||||
/core/src/utils/animation/ @liamdebeasi
|
||||
@@ -80,6 +64,3 @@
|
||||
/core/src/utils/sanitization/ @liamdebeasi
|
||||
/core/src/utils/tap-click/ @liamdebeasi
|
||||
/core/src/utils/transition/ @liamdebeasi
|
||||
|
||||
/core/src/css/ @brandyscarney
|
||||
/core/src/themes/ @brandyscarney
|
||||
|
||||
2
.github/CONTRIBUTING.md
vendored
2
.github/CONTRIBUTING.md
vendored
@@ -163,7 +163,7 @@ npm i
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
|
||||
cd ../packages/angular
|
||||
cd ../angular
|
||||
npm i
|
||||
npm run sync
|
||||
npm run build
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
|
||||
- name: Install Angular Server Dependencies
|
||||
run: npm ci
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -11,7 +11,7 @@ runs:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
|
||||
- name: Install Dependencies
|
||||
run: npm ci
|
||||
|
||||
14
.github/workflows/actions/build-core/action.yml
vendored
14
.github/workflows/actions/build-core/action.yml
vendored
@@ -1,28 +1,16 @@
|
||||
name: 'Build Ionic Core'
|
||||
description: 'Build Ionic Core'
|
||||
inputs:
|
||||
ionicons-version:
|
||||
description: 'The NPM tag of ionicons to install.'
|
||||
type: string
|
||||
required: false
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- name: Install Dependencies
|
||||
run: npm install
|
||||
working-directory: ./core
|
||||
shell: bash
|
||||
# If an Ionicons version was specified install that.
|
||||
# Otherwise just use the version defined in the package.json.
|
||||
- name: Install Ionicons Version
|
||||
if: inputs.ionicons-version != ''
|
||||
run: npm install ionicons@${{ inputs.ionicons-version }}
|
||||
working-directory: ./core
|
||||
shell: bash
|
||||
- name: Build Core
|
||||
run: npm run build -- --ci
|
||||
working-directory: ./core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -14,6 +14,6 @@ runs:
|
||||
with:
|
||||
name: ${{ inputs.name }}
|
||||
path: ${{ inputs.path }}
|
||||
- name: Extract Archive
|
||||
- name: Exract Archive
|
||||
run: unzip -q -o ${{ inputs.path }}/${{ inputs.filename }}
|
||||
shell: bash
|
||||
|
||||
@@ -21,7 +21,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
# Provenance requires npm 9.5.0+
|
||||
- name: Install latest npm
|
||||
run: npm install -g npm@latest
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18
|
||||
node-version: 16
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@@ -13,15 +13,6 @@ runs:
|
||||
path: ./core
|
||||
filename: CoreBuild.zip
|
||||
- name: Check Diff
|
||||
run: |
|
||||
git diff --exit-code || {
|
||||
echo -e "\033[1;31m⚠️ Error: Differences Detected ⚠️\033[0m"
|
||||
echo -e "\033[1;31mThere are uncommitted changes between the build outputs from CI and your branch.\033[0m"
|
||||
echo -e "\033[1;31mPlease ensure you have followed these steps:\033[0m"
|
||||
echo -e "\033[1;31m1. Run 'npm run build' locally to generate the latest build output.\033[0m"
|
||||
echo -e "\033[1;31m2. Commit and push all necessary changes to your branch.\033[0m"
|
||||
echo -e "\033[1;31m3. Compare and validate the differences before proceeding.\033[0m"
|
||||
exit 1
|
||||
}
|
||||
run: git diff --exit-code
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
|
||||
@@ -5,7 +5,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- name: Install Dependencies
|
||||
run: npm ci
|
||||
working-directory: ./core
|
||||
|
||||
@@ -13,7 +13,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -1,23 +1,15 @@
|
||||
name: 'Test Core Spec'
|
||||
description: 'Test Core Spec'
|
||||
inputs:
|
||||
stencil-version:
|
||||
description: 'The NPM tag of @stencil/core to install.'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- name: Install Dependencies
|
||||
run: npm ci
|
||||
run: npm install
|
||||
working-directory: ./core
|
||||
shell: bash
|
||||
- name: Install Stencil ${{ inputs.stencil-version }}
|
||||
run: npm install @stencil/core@${{ inputs.stencil-version }}
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
if: ${{ inputs.stencil-version != '' }}
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
@@ -9,7 +9,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18.x
|
||||
node-version: 16.x
|
||||
- uses: actions/download-artifact@v3
|
||||
with:
|
||||
path: ./artifacts
|
||||
@@ -34,24 +34,8 @@ runs:
|
||||
run: |
|
||||
git config user.name ionitron
|
||||
git config user.email hi@ionicframework.com
|
||||
|
||||
# This adds an empty entry for new
|
||||
# screenshot files so we can track them with
|
||||
# git diff
|
||||
git add src/\*.png --force -N
|
||||
|
||||
if git diff --exit-code; then
|
||||
echo -e "\033[1;31m⚠️ Error: No new screenshots generated ⚠️\033[0m"
|
||||
echo -e "\033[1;31mThis means that there were zero visual diffs when running screenshot tests.\033[0m"
|
||||
echo -e "\033[1;31mMake sure you have pushed any code changes that would result in visual diffs.\033[0m"
|
||||
exit 1
|
||||
else
|
||||
# This actually adds the contents
|
||||
# of the screenshots (including new ones)
|
||||
git add src/\*.png --force
|
||||
git commit -m "chore(): add updated snapshots"
|
||||
git push
|
||||
fi
|
||||
|
||||
git add src/\*.png --force
|
||||
git commit -m "chore(): add updated snapshots"
|
||||
git push
|
||||
shell: bash
|
||||
working-directory: ./core
|
||||
|
||||
10
.github/workflows/build.yml
vendored
10
.github/workflows/build.yml
vendored
@@ -4,12 +4,6 @@ on:
|
||||
pull_request:
|
||||
branches: [ '**' ]
|
||||
merge_group:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
ionicons_npm_release_tag:
|
||||
required: false
|
||||
type: string
|
||||
description: What version of ionicons should be pulled from NPM? Use this if you want to test a custom version of Ionicons with Ionic.
|
||||
|
||||
# When pushing a new commit we should
|
||||
# cancel the previous test run to not
|
||||
@@ -24,8 +18,6 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: ./.github/workflows/actions/build-core
|
||||
with:
|
||||
ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
|
||||
|
||||
test-core-clean-build:
|
||||
needs: [build-core]
|
||||
@@ -140,7 +132,7 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [ng14, ng15, ng16, ng17]
|
||||
apps: [ng14, ng15, ng16]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
11
.github/workflows/stencil-nightly.yml
vendored
11
.github/workflows/stencil-nightly.yml
vendored
@@ -8,12 +8,7 @@ on:
|
||||
# at 6:00 UTC (6:00 am UTC)
|
||||
- cron: '00 06 * * 1-5'
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
npm_release_tag:
|
||||
required: true
|
||||
type: string
|
||||
description: What version should be pulled from NPM?
|
||||
default: nightly
|
||||
# allows for manual invocations in the GitHub UI
|
||||
|
||||
# When pushing a new commit we should
|
||||
# cancel the previous test run to not
|
||||
@@ -29,7 +24,7 @@ jobs:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: ./.github/workflows/actions/build-core-stencil-prerelease
|
||||
with:
|
||||
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
|
||||
stencil-version: nightly
|
||||
|
||||
test-core-clean-build:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
@@ -51,8 +46,6 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: ./.github/workflows/actions/test-core-spec
|
||||
with:
|
||||
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
|
||||
|
||||
test-core-screenshot:
|
||||
strategy:
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"enabled": false
|
||||
},
|
||||
"pullRequests": {
|
||||
"enabled": false
|
||||
"enabled": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
320
CHANGELOG.md
320
CHANGELOG.md
@@ -3,326 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
|
||||
* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** match MD spec on tablet ([#28501](https://github.com/ionic-team/ionic-framework/issues/28501)) ([6a2be9f](https://github.com/ionic-team/ionic-framework/commit/6a2be9fa3c12a893d98dc139a1575a6e7e3c7c26)), closes [#23977](https://github.com/ionic-team/ionic-framework/issues/23977)
|
||||
* **angular:** ng add @ionic/angular in standalone projects ([#28523](https://github.com/ionic-team/ionic-framework/issues/28523)) ([c07312e](https://github.com/ionic-team/ionic-framework/commit/c07312e5ed931f6f825ccf083c9dead9fa815843)), closes [#28514](https://github.com/ionic-team/ionic-framework/issues/28514)
|
||||
* **angular:** overlays are defined when using standalone controllers ([#28560](https://github.com/ionic-team/ionic-framework/issues/28560)) ([9453132](https://github.com/ionic-team/ionic-framework/commit/9453132aa8952b4adfa1326e61138b329e254f76)), closes [#28385](https://github.com/ionic-team/ionic-framework/issues/28385)
|
||||
* **datetime:** updating value with min scrolls to new value ([#28549](https://github.com/ionic-team/ionic-framework/issues/28549)) ([388d19e](https://github.com/ionic-team/ionic-framework/commit/388d19e04f83f85abd4602adb04cc71ac575764a)), closes [#28548](https://github.com/ionic-team/ionic-framework/issues/28548)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
|
||||
* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
|
||||
* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
|
||||
* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
|
||||
* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
|
||||
* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
|
||||
* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
|
||||
* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406)
|
||||
* **angular:** inputs on standalone form controls are reactive ([#28434](https://github.com/ionic-team/ionic-framework/issues/28434)) ([3b6e631](https://github.com/ionic-team/ionic-framework/commit/3b6e6318bf94125b3f8305b4d072a5945ceb3730)), closes [#28431](https://github.com/ionic-team/ionic-framework/issues/28431)
|
||||
* **angular:** NavController works with nested outlets ([#28421](https://github.com/ionic-team/ionic-framework/issues/28421)) ([90acad1](https://github.com/ionic-team/ionic-framework/commit/90acad1837b117542830ec0083389a35c5b4ee76)), closes [#28417](https://github.com/ionic-team/ionic-framework/issues/28417)
|
||||
* **angular:** run platform subscriptions inside zone ([#28404](https://github.com/ionic-team/ionic-framework/issues/28404)) ([a4b303e](https://github.com/ionic-team/ionic-framework/commit/a4b303e1338a35756a9cf7f67508d24d2f8537a2)), closes [#19539](https://github.com/ionic-team/ionic-framework/issues/19539)
|
||||
* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418)
|
||||
* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121)
|
||||
* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388)
|
||||
* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f))
|
||||
* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373)
|
||||
* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert, action-sheet:** show scrollbar for long list of options ([#28369](https://github.com/ionic-team/ionic-framework/issues/28369)) ([60f3d65](https://github.com/ionic-team/ionic-framework/commit/60f3d6579498ebad75c4f5163fca3947ac2dadff)), closes [#18487](https://github.com/ionic-team/ionic-framework/issues/18487)
|
||||
* **angular:** remove form control side effects ([#28359](https://github.com/ionic-team/ionic-framework/issues/28359)) ([82d6309](https://github.com/ionic-team/ionic-framework/commit/82d6309ef1675c0a6e767e87c23f166d84579d8f)), closes [#28358](https://github.com/ionic-team/ionic-framework/issues/28358)
|
||||
* **fab:** apply safe area in positioning to proper side regardless of direction ([#28377](https://github.com/ionic-team/ionic-framework/issues/28377)) ([331c08a](https://github.com/ionic-team/ionic-framework/commit/331c08aad542de158e53ed351705d4c396bb4e90))
|
||||
* **input, searchbar, textarea:** ensure nativeInput is always available ([#28362](https://github.com/ionic-team/ionic-framework/issues/28362)) ([2b015b2](https://github.com/ionic-team/ionic-framework/commit/2b015b22144e306444f2bf30ace0b5cc7e32a710)), closes [#28283](https://github.com/ionic-team/ionic-framework/issues/28283)
|
||||
* **menu:** menu no longer disappears with multiple split panes ([#28370](https://github.com/ionic-team/ionic-framework/issues/28370)) ([5a30082](https://github.com/ionic-team/ionic-framework/commit/5a30082546cb19eb98128ca9091b35094841d4f2)), closes [#18683](https://github.com/ionic-team/ionic-framework/issues/18683) [#15538](https://github.com/ionic-team/ionic-framework/issues/15538) [#22341](https://github.com/ionic-team/ionic-framework/issues/22341)
|
||||
* **rtl:** allow :host to use rtl() ([#28353](https://github.com/ionic-team/ionic-framework/issues/28353)) ([6b7d288](https://github.com/ionic-team/ionic-framework/commit/6b7d288536307fcb49231dca66ab938b389ea85e))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.1](https://github.com/ionic-team/ionic-framework/compare/v7.5.0...v7.5.1) (2023-10-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** do not create duplicate menuController instances ([#28343](https://github.com/ionic-team/ionic-framework/issues/28343)) ([fa78676](https://github.com/ionic-team/ionic-framework/commit/fa78676d57eb80655ee9447ffa07dcfdae0c6b2a)), closes [#28337](https://github.com/ionic-team/ionic-framework/issues/28337)
|
||||
* **angular:** export missing lifecycle interfaces for standalone package ([#28346](https://github.com/ionic-team/ionic-framework/issues/28346)) ([dd93e0b](https://github.com/ionic-team/ionic-framework/commit/dd93e0b2689511f3145606f4dbb2c30dcf4c2950)), closes [/github.com/ionic-team/ionic-angular-standalone-codemods/pull/13/files/baa37ef1e3e8ba773b693db280542efba815482a#r1356414362](https://github.com//github.com/ionic-team/ionic-angular-standalone-codemods/pull/13/files/baa37ef1e3e8ba773b693db280542efba815482a/issues/r1356414362)
|
||||
* **react:** cleanup functions are execute for lifecycle hooks ([#28319](https://github.com/ionic-team/ionic-framework/issues/28319)) ([1ba9973](https://github.com/ionic-team/ionic-framework/commit/1ba9973857503c6e47cb225b77a5b89e0a9d2718)), closes [#28186](https://github.com/ionic-team/ionic-framework/issues/28186)
|
||||
* **react:** lifecycle events are removed on page unmount ([#28316](https://github.com/ionic-team/ionic-framework/issues/28316)) ([f14a59c](https://github.com/ionic-team/ionic-framework/commit/f14a59c5e0670ed7cc9ce1a73a087a5af13266e2))
|
||||
* **title:** large title transition supports dynamic font scaling ([#28290](https://github.com/ionic-team/ionic-framework/issues/28290)) ([fe47594](https://github.com/ionic-team/ionic-framework/commit/fe47594dc0bbb047f0bade144cf07b084fbeef5e)), closes [#28351](https://github.com/ionic-team/ionic-framework/issues/28351)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.5.0](https://github.com/ionic-team/ionic-framework/compare/v7.4.4...v7.5.0) (2023-10-11)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** stop Enter keypress for checkboxes ([#28279](https://github.com/ionic-team/ionic-framework/issues/28279)) ([72b3899](https://github.com/ionic-team/ionic-framework/commit/72b389993df4b0dc392262a106d7949e176b13af))
|
||||
* **select:** use correct aria-haspopup value ([#28265](https://github.com/ionic-team/ionic-framework/issues/28265)) ([01167fc](https://github.com/ionic-team/ionic-framework/commit/01167fc185db9bbb45b3a4086aff98008a76af2c))
|
||||
* **toast:** toast does not warn when positionAnchor is undefined ([#28312](https://github.com/ionic-team/ionic-framework/issues/28312)) ([c37b3d8](https://github.com/ionic-team/ionic-framework/commit/c37b3d8bf4b440506fdc96455a532c6316e5673d))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **a11y:** add dynamic font scaling ([#28314](https://github.com/ionic-team/ionic-framework/issues/28314)) ([f806781](https://github.com/ionic-team/ionic-framework/commit/f8067819eeb577db163bf3e0f95fc73064d62b8a)), closes [#24638](https://github.com/ionic-team/ionic-framework/issues/24638) [#18592](https://github.com/ionic-team/ionic-framework/issues/18592)
|
||||
* **angular, react, vue, core:** export openURL utility ([#28295](https://github.com/ionic-team/ionic-framework/issues/28295)) ([6da82aa](https://github.com/ionic-team/ionic-framework/commit/6da82aab816b28bfc174f7634ded1fc1e06502ab)), closes [#27911](https://github.com/ionic-team/ionic-framework/issues/27911)
|
||||
* **angular:** ship Ionic components as Angular standalone components ([#28311](https://github.com/ionic-team/ionic-framework/issues/28311)) ([57e2476](https://github.com/ionic-team/ionic-framework/commit/57e247637005b10f0d21d5ac5f5232bcb1908301))
|
||||
* **datetime:** add support for h11 and h24 hour formats ([#28219](https://github.com/ionic-team/ionic-framework/issues/28219)) ([597bc3f](https://github.com/ionic-team/ionic-framework/commit/597bc3f085c5ff1451c73d0cf4d7d664943e712f)), closes [#23750](https://github.com/ionic-team/ionic-framework/issues/23750)
|
||||
* **toast:** allow custom positioning relative to specific element ([#28248](https://github.com/ionic-team/ionic-framework/issues/28248)) ([897ff6f](https://github.com/ionic-team/ionic-framework/commit/897ff6f7493d8d7e4ab22c6ae59de066b43ce682)), closes [#17499](https://github.com/ionic-team/ionic-framework/issues/17499)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.4.4](https://github.com/ionic-team/ionic-framework/compare/v7.4.3...v7.4.4) (2023-10-11)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animation:** play method resolves when animation is stopped ([#28264](https://github.com/ionic-team/ionic-framework/issues/28264)) ([e6031fb](https://github.com/ionic-team/ionic-framework/commit/e6031fbef0698dac0a346cd6202c47f2abf54f95))
|
||||
* **checkbox, radio, toggle:** disabled elements are not interactive ([#28294](https://github.com/ionic-team/ionic-framework/issues/28294)) ([c70432e](https://github.com/ionic-team/ionic-framework/commit/c70432e6934bcf1d570e1f7cf671c52d2bb52a8b)), closes [#28293](https://github.com/ionic-team/ionic-framework/issues/28293)
|
||||
* **content:** fullscreen offset is computed correctly with tab bar ([#28245](https://github.com/ionic-team/ionic-framework/issues/28245)) ([7375dd6](https://github.com/ionic-team/ionic-framework/commit/7375dd6abafdf7457f23deb53ad5f016456a6af2)), closes [#21130](https://github.com/ionic-team/ionic-framework/issues/21130)
|
||||
* **core:** allow fullscreen scroll content to flow outside container for translucent tab bar ([#28246](https://github.com/ionic-team/ionic-framework/issues/28246)) ([b297529](https://github.com/ionic-team/ionic-framework/commit/b297529afc4b93a93f7eaecd31dd5a88a3de5f4e)), closes [#17676](https://github.com/ionic-team/ionic-framework/issues/17676)
|
||||
* **core:** swipe to go back gesture has priority over other horizontal swipe gestures ([#28304](https://github.com/ionic-team/ionic-framework/issues/28304)) ([d5f0c77](https://github.com/ionic-team/ionic-framework/commit/d5f0c776dfb5cb40b8119c596805dad3adb621e0)), closes [#28303](https://github.com/ionic-team/ionic-framework/issues/28303)
|
||||
* **header:** collapsible large title main header does not flicker on load ([#28277](https://github.com/ionic-team/ionic-framework/issues/28277)) ([3259da0](https://github.com/ionic-team/ionic-framework/commit/3259da0de181c8f82c38d9de13733213c77d398f)), closes [#27060](https://github.com/ionic-team/ionic-framework/issues/27060)
|
||||
* **menu:** do not error if disabled or swipeGesture is changed mid-animation ([#28268](https://github.com/ionic-team/ionic-framework/issues/28268)) ([a169044](https://github.com/ionic-team/ionic-framework/commit/a1690441e5bcee8176da32700de6f9e3fde9635e)), closes [#20092](https://github.com/ionic-team/ionic-framework/issues/20092) [#19676](https://github.com/ionic-team/ionic-framework/issues/19676) [#19000](https://github.com/ionic-team/ionic-framework/issues/19000)
|
||||
* **segment:** scroll to active segment-button on first load ([#28276](https://github.com/ionic-team/ionic-framework/issues/28276)) ([1167a93](https://github.com/ionic-team/ionic-framework/commit/1167a9325fb930b6c727bc26889f5488d9620062)), closes [#28096](https://github.com/ionic-team/ionic-framework/issues/28096)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
|
||||
* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **react:** Nav unmounts component while invoking popTo or popToRoot ([#27821](https://github.com/ionic-team/ionic-framework/issues/27821)) ([0edcb2c](https://github.com/ionic-team/ionic-framework/commit/0edcb2cd85133ae8c304c53c37ca829e5fbad447)), closes [#27798](https://github.com/ionic-team/ionic-framework/issues/27798)
|
||||
* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
|
||||
* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
|
||||
* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
|
||||
* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
|
||||
* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **datetime:** scroll to newly selected date when value changes ([#27806](https://github.com/ionic-team/ionic-framework/issues/27806)) ([32244fb](https://github.com/ionic-team/ionic-framework/commit/32244fbdd1931e59a9e3cedd2b143c8ee7d01459)), closes [#26391](https://github.com/ionic-team/ionic-framework/issues/26391)
|
||||
* **many:** add correct scale to stacked labels ([#28163](https://github.com/ionic-team/ionic-framework/issues/28163)) ([8cb8786](https://github.com/ionic-team/ionic-framework/commit/8cb878669e53bad25bbe2787826b6d02d292848a))
|
||||
* **range:** add correct margin in item ([#28161](https://github.com/ionic-team/ionic-framework/issues/28161)) ([1d2b867](https://github.com/ionic-team/ionic-framework/commit/1d2b867f2207d366e355265b081bc9aabe31ce7e))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **checkbox, radio, toggle, range:** stacked labels for form controls ([#28075](https://github.com/ionic-team/ionic-framework/issues/28075)) ([e6c7bb6](https://github.com/ionic-team/ionic-framework/commit/e6c7bb60e7e61c965f45e2bf3e3bd16f5125ad56))
|
||||
* **datetime:** add disabled part ([#28134](https://github.com/ionic-team/ionic-framework/issues/28134)) ([cd8d509](https://github.com/ionic-team/ionic-framework/commit/cd8d5091a133804ac97d0394354dcf7cd73d9355))
|
||||
* **datetime:** add parts for calendar day, active, and today ([#27641](https://github.com/ionic-team/ionic-framework/issues/27641)) ([79b005d](https://github.com/ionic-team/ionic-framework/commit/79b005da704c2ce481e1e3bc4d24cdba06a36d04)), closes [#25340](https://github.com/ionic-team/ionic-framework/issues/25340)
|
||||
* export TransitionOptions interface and getIonPageElement ([#28140](https://github.com/ionic-team/ionic-framework/issues/28140)) ([19f3bb2](https://github.com/ionic-team/ionic-framework/commit/19f3bb23fd5587848fc41a744ca46ef5985c04d2)), closes [#28137](https://github.com/ionic-team/ionic-framework/issues/28137)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.3.4](https://github.com/ionic-team/ionic-framework/compare/v7.3.3...v7.3.4) (2023-09-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **menu:** remove app dir from safe area padding ([#28123](https://github.com/ionic-team/ionic-framework/issues/28123)) ([e0542a7](https://github.com/ionic-team/ionic-framework/commit/e0542a7867871fa45a7fe6a4986e7de633063b4b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** swipe to dismiss resets status bar style ([#28110](https://github.com/ionic-team/ionic-framework/issues/28110)) ([176585f](https://github.com/ionic-team/ionic-framework/commit/176585f446b04a6a0cedab2e09417637dbfc78ee)), closes [#28105](https://github.com/ionic-team/ionic-framework/issues/28105)
|
||||
* **overlays:** prevent overlays from getting stuck open ([#28069](https://github.com/ionic-team/ionic-framework/issues/28069)) ([584e9d3](https://github.com/ionic-team/ionic-framework/commit/584e9d3be220343451c2d4b9bf90658ecd530de1)), closes [#27200](https://github.com/ionic-team/ionic-framework/issues/27200)
|
||||
* **popover:** dynamic width popover is positioned correctly ([#28072](https://github.com/ionic-team/ionic-framework/issues/28072)) ([2a80eb6](https://github.com/ionic-team/ionic-framework/commit/2a80eb6bd0b16a9dab9bea600bb7f935d25c0e1b)), closes [#27190](https://github.com/ionic-team/ionic-framework/issues/27190) [#24780](https://github.com/ionic-team/ionic-framework/issues/24780)
|
||||
* **react:** overlay content is shown with hook ([#28109](https://github.com/ionic-team/ionic-framework/issues/28109)) ([7b551fd](https://github.com/ionic-team/ionic-framework/commit/7b551fd54b9e16a2538e5b82a13d72b3007fa045)), closes [#28102](https://github.com/ionic-team/ionic-framework/issues/28102)
|
||||
* **textarea:** cols property is respected ([#28081](https://github.com/ionic-team/ionic-framework/issues/28081)) ([6d4eabc](https://github.com/ionic-team/ionic-framework/commit/6d4eabcc1046c28c1abf69a8bda3e06f80cf3f8f)), closes [#22142](https://github.com/ionic-team/ionic-framework/issues/22142)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **datetime:** gracefully handle invalid min/max ([#28054](https://github.com/ionic-team/ionic-framework/issues/28054)) ([01fc9b4](https://github.com/ionic-team/ionic-framework/commit/01fc9b45116f7ad6ddc56c7fb1535dec798c2b3a)), closes [#28041](https://github.com/ionic-team/ionic-framework/issues/28041)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** ionTabsWillChange is fired before tab activation ([#27991](https://github.com/ionic-team/ionic-framework/issues/27991)) ([bbfb8f8](https://github.com/ionic-team/ionic-framework/commit/bbfb8f81a61475d7e73b63743db5d6a0cd979d21)), closes [#27212](https://github.com/ionic-team/ionic-framework/issues/27212)
|
||||
* **input, textarea:** clearOnEdit does not clear when pressing Tab ([#28005](https://github.com/ionic-team/ionic-framework/issues/28005)) ([444acc1](https://github.com/ionic-team/ionic-framework/commit/444acc1f1bca348b62dfb398067cc087529f67f1)), closes [#27746](https://github.com/ionic-team/ionic-framework/issues/27746)
|
||||
* **react:** avoid multiple invocations of onDidDismiss and onWillPresent ([#28020](https://github.com/ionic-team/ionic-framework/issues/28020)) ([0ac3df3](https://github.com/ionic-team/ionic-framework/commit/0ac3df3f378bdefc3a927adc798ebd9ec7a54fee)), closes [#28010](https://github.com/ionic-team/ionic-framework/issues/28010)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** radio and checkbox labels wrap to next line ([#27898](https://github.com/ionic-team/ionic-framework/issues/27898)) ([0d3127a](https://github.com/ionic-team/ionic-framework/commit/0d3127ad09df3c914a8c254f14931de5ca3beb31)), closes [#17269](https://github.com/ionic-team/ionic-framework/issues/17269)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **action-sheet:** add htmlAttributes property for passing attributes to buttons ([#27863](https://github.com/ionic-team/ionic-framework/issues/27863)) ([5ce4ec0](https://github.com/ionic-team/ionic-framework/commit/5ce4ec0439e4f31aba31062fd8af4a2ad792a54f))
|
||||
* **alert:** add htmlAttributes property for passing attributes to buttons ([#27862](https://github.com/ionic-team/ionic-framework/issues/27862)) ([06be0e5](https://github.com/ionic-team/ionic-framework/commit/06be0e511164ebdaa6af9a3747d0585260c030a9))
|
||||
* **toast:** add htmlAttributes property for passing attributes to buttons ([#27855](https://github.com/ionic-team/ionic-framework/issues/27855)) ([9a68588](https://github.com/ionic-team/ionic-framework/commit/9a685882b7085d911ff09eedacc367629e32348a))
|
||||
* **toast:** add shadow part for cancel button ([#27921](https://github.com/ionic-team/ionic-framework/issues/27921)) ([e9faf54](https://github.com/ionic-team/ionic-framework/commit/e9faf54d0a7409521706ce9c8b0d26f3fbe9ba41)), closes [#27920](https://github.com/ionic-team/ionic-framework/issues/27920)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.2.4](https://github.com/ionic-team/ionic-framework/compare/v7.2.3...v7.2.4) (2023-08-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **tap-click:** do not error in document-less environment ([#27972](https://github.com/ionic-team/ionic-framework/issues/27972)) ([28bd4ba](https://github.com/ionic-team/ionic-framework/commit/28bd4ba720bb77d5f5c48cd7a45e0015daddc9dd))
|
||||
* **title:** large title aligns with ios spec ([#27969](https://github.com/ionic-team/ionic-framework/issues/27969)) ([8fa12fc](https://github.com/ionic-team/ionic-framework/commit/8fa12fc88857df27a1ca11249f0085e100fe1474)), closes [#27966](https://github.com/ionic-team/ionic-framework/issues/27966)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.2.3](https://github.com/ionic-team/ionic-framework/compare/v7.2.2...v7.2.3) (2023-08-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **button:** hidden button is added when form is set async ([#27955](https://github.com/ionic-team/ionic-framework/issues/27955)) ([e9fa300](https://github.com/ionic-team/ionic-framework/commit/e9fa30002bd5dec4f2f56a15c84eec1b3e794942)), closes [#27952](https://github.com/ionic-team/ionic-framework/issues/27952)
|
||||
* **datetime:** changing months work if partially visible ([#27917](https://github.com/ionic-team/ionic-framework/issues/27917)) ([eb19c28](https://github.com/ionic-team/ionic-framework/commit/eb19c289d6581639f6df7aff002bebdf2b27d31c)), closes [#27913](https://github.com/ionic-team/ionic-framework/issues/27913)
|
||||
* **item-sliding:** account for options added before watcher ([#27915](https://github.com/ionic-team/ionic-framework/issues/27915)) ([a0b3ef0](https://github.com/ionic-team/ionic-framework/commit/a0b3ef02af718e232246515bb873ad8c090fa55d)), closes [#27910](https://github.com/ionic-team/ionic-framework/issues/27910)
|
||||
* **many:** overlays present if isOpen is true on load ([#27933](https://github.com/ionic-team/ionic-framework/issues/27933)) ([a0e6ac6](https://github.com/ionic-team/ionic-framework/commit/a0e6ac6013552c5e3acdde33575d4aaf4d4c0bda)), closes [#27928](https://github.com/ionic-team/ionic-framework/issues/27928)
|
||||
* **modal:** setCurrentBreakpoint respects animated prop ([#27924](https://github.com/ionic-team/ionic-framework/issues/27924)) ([da55ab9](https://github.com/ionic-team/ionic-framework/commit/da55ab949ef1894738da5a6241176089b7a2b6e3)), closes [#27923](https://github.com/ionic-team/ionic-framework/issues/27923)
|
||||
* **nav:** improve reliability of swipe back gesture when quickly swiping back ([#27904](https://github.com/ionic-team/ionic-framework/issues/27904)) ([9500769](https://github.com/ionic-team/ionic-framework/commit/9500769f114d180613f0340b1a328b5e631b7188)), closes [#27893](https://github.com/ionic-team/ionic-framework/issues/27893)
|
||||
* **tab-button:** update event type interface on React ([#27950](https://github.com/ionic-team/ionic-framework/issues/27950)) ([1cf1eca](https://github.com/ionic-team/ionic-framework/commit/1cf1eca00239f3e98854466116e42f9a2e7b4590)), closes [#27949](https://github.com/ionic-team/ionic-framework/issues/27949)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.2.2](https://github.com/ionic-team/ionic-framework/compare/v7.2.1...v7.2.2) (2023-08-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **datetime-button:** render correct text when passing partial date values ([#27816](https://github.com/ionic-team/ionic-framework/issues/27816)) ([bd1910b](https://github.com/ionic-team/ionic-framework/commit/bd1910ba69348877ad5f99d9db2b59d06693b91e)), closes [#27797](https://github.com/ionic-team/ionic-framework/issues/27797)
|
||||
* **input, textarea:** input does not block floating label ([#27870](https://github.com/ionic-team/ionic-framework/issues/27870)) ([f14c440](https://github.com/ionic-team/ionic-framework/commit/f14c440d6321ef9f168b272338e5cd21cab384ef)), closes [#27812](https://github.com/ionic-team/ionic-framework/issues/27812)
|
||||
* **item-options:** use correct safe area padding ([#27853](https://github.com/ionic-team/ionic-framework/issues/27853)) ([0b8f1bc](https://github.com/ionic-team/ionic-framework/commit/0b8f1bc7dd4170a2a8c9ed3aede173dd489b25ea))
|
||||
* **radio:** radios can be focused and are announced with group ([#27817](https://github.com/ionic-team/ionic-framework/issues/27817)) ([ba2f49b](https://github.com/ionic-team/ionic-framework/commit/ba2f49b8a460520d20ac198db800ea2d9e5b015f)), closes [#27438](https://github.com/ionic-team/ionic-framework/issues/27438)
|
||||
* **react, vue:** custom animations are used when going back ([#27895](https://github.com/ionic-team/ionic-framework/issues/27895)) ([824033f](https://github.com/ionic-team/ionic-framework/commit/824033f1d4b4a3e5d4c6a978a39e5bb1f33b5bb4)), closes [#27873](https://github.com/ionic-team/ionic-framework/issues/27873)
|
||||
* **select:** popover uses modern form syntax ([#27818](https://github.com/ionic-team/ionic-framework/issues/27818)) ([0c117cf](https://github.com/ionic-team/ionic-framework/commit/0c117cfe7f383b7c7837d27de5a6eee12ddd6c2f)), closes [#27071](https://github.com/ionic-team/ionic-framework/issues/27071) [#27786](https://github.com/ionic-team/ionic-framework/issues/27786)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.2.1](https://github.com/ionic-team/ionic-framework/compare/v7.2.0...v7.2.1) (2023-07-26)
|
||||
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
| Project | Package | Version | Downloads| Links |
|
||||
| ------- | ------- | ------- | -------- |:-----:|
|
||||
| **Core** | [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) | [](https://www.npmjs.com/package/@ionic/core) | <a href="https://www.npmjs.com/package/@ionic/core" target="_blank"><img src="https://img.shields.io/npm/dm/@ionic/core.svg" alt="NPM Downloads" /></a> | [`README.md`](core/README.md)
|
||||
| **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [](https://www.npmjs.com/package/@ionic/angular) | <a href="https://www.npmjs.com/package/@ionic/angular" target="_blank"><img src="https://img.shields.io/npm/dm/@ionic/angular.svg" alt="NPM Downloads" /></a> | [`README.md`](packages/angular/README.md)
|
||||
| **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [](https://www.npmjs.com/package/@ionic/angular) | <a href="https://www.npmjs.com/package/@ionic/angular" target="_blank"><img src="https://img.shields.io/npm/dm/@ionic/angular.svg" alt="NPM Downloads" /></a> | [`README.md`](angular/README.md)
|
||||
| **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [](https://www.npmjs.com/package/@ionic/vue) | <a href="https://www.npmjs.com/package/@ionic/vue" target="_blank"><img src="https://img.shields.io/npm/dm/@ionic/vue.svg" alt="NPM Downloads" /></a> | [`README.md`](packages/vue/README.md)
|
||||
| **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [](https://www.npmjs.com/package/@ionic/react) | <a href="https://www.npmjs.com/package/@ionic/react" target="_blank"><img src="https://img.shields.io/npm/dm/@ionic/react.svg" alt="NPM Downloads" /></a> |[`README.md`](packages/react/README.md)
|
||||
|
||||
|
||||
@@ -46,8 +46,7 @@ module.exports = {
|
||||
{
|
||||
"files": ["*.e2e.ts"],
|
||||
"rules": {
|
||||
"custom-rules/await-playwright-promise-assertion": "error",
|
||||
"custom-rules/no-playwright-to-match-snapshot-assertion": "error"
|
||||
"custom-rules/await-playwright-promise-assertion": "error"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -3,314 +3,6 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
|
||||
* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** match MD spec on tablet ([#28501](https://github.com/ionic-team/ionic-framework/issues/28501)) ([6a2be9f](https://github.com/ionic-team/ionic-framework/commit/6a2be9fa3c12a893d98dc139a1575a6e7e3c7c26)), closes [#23977](https://github.com/ionic-team/ionic-framework/issues/23977)
|
||||
* **datetime:** updating value with min scrolls to new value ([#28549](https://github.com/ionic-team/ionic-framework/issues/28549)) ([388d19e](https://github.com/ionic-team/ionic-framework/commit/388d19e04f83f85abd4602adb04cc71ac575764a)), closes [#28548](https://github.com/ionic-team/ionic-framework/issues/28548)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
|
||||
* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
|
||||
* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
|
||||
* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
|
||||
* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
|
||||
* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
|
||||
|
||||
> [!NOTE]
|
||||
> Ionic Vue developers utilizing the `v-ion-change` or `v-ion-input` workaround for https://github.com/ionic-team/ionic-framework/issues/27292 should remove this workaround when updating to Ionic v7.5.5.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
|
||||
* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
|
||||
* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406)
|
||||
* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418)
|
||||
* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121)
|
||||
* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388)
|
||||
* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f))
|
||||
* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373)
|
||||
* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert, action-sheet:** show scrollbar for long list of options ([#28369](https://github.com/ionic-team/ionic-framework/issues/28369)) ([60f3d65](https://github.com/ionic-team/ionic-framework/commit/60f3d6579498ebad75c4f5163fca3947ac2dadff)), closes [#18487](https://github.com/ionic-team/ionic-framework/issues/18487)
|
||||
* **fab:** apply safe area in positioning to proper side regardless of direction ([#28377](https://github.com/ionic-team/ionic-framework/issues/28377)) ([331c08a](https://github.com/ionic-team/ionic-framework/commit/331c08aad542de158e53ed351705d4c396bb4e90))
|
||||
* **input, searchbar, textarea:** ensure nativeInput is always available ([#28362](https://github.com/ionic-team/ionic-framework/issues/28362)) ([2b015b2](https://github.com/ionic-team/ionic-framework/commit/2b015b22144e306444f2bf30ace0b5cc7e32a710)), closes [#28283](https://github.com/ionic-team/ionic-framework/issues/28283)
|
||||
* **menu:** menu no longer disappears with multiple split panes ([#28370](https://github.com/ionic-team/ionic-framework/issues/28370)) ([5a30082](https://github.com/ionic-team/ionic-framework/commit/5a30082546cb19eb98128ca9091b35094841d4f2)), closes [#18683](https://github.com/ionic-team/ionic-framework/issues/18683) [#15538](https://github.com/ionic-team/ionic-framework/issues/15538) [#22341](https://github.com/ionic-team/ionic-framework/issues/22341)
|
||||
* **rtl:** allow :host to use rtl() ([#28353](https://github.com/ionic-team/ionic-framework/issues/28353)) ([6b7d288](https://github.com/ionic-team/ionic-framework/commit/6b7d288536307fcb49231dca66ab938b389ea85e))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.1](https://github.com/ionic-team/ionic-framework/compare/v7.5.0...v7.5.1) (2023-10-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **angular:** do not create duplicate menuController instances ([#28343](https://github.com/ionic-team/ionic-framework/issues/28343)) ([fa78676](https://github.com/ionic-team/ionic-framework/commit/fa78676d57eb80655ee9447ffa07dcfdae0c6b2a)), closes [#28337](https://github.com/ionic-team/ionic-framework/issues/28337)
|
||||
* **title:** large title transition supports dynamic font scaling ([#28290](https://github.com/ionic-team/ionic-framework/issues/28290)) ([fe47594](https://github.com/ionic-team/ionic-framework/commit/fe47594dc0bbb047f0bade144cf07b084fbeef5e)), closes [#28351](https://github.com/ionic-team/ionic-framework/issues/28351)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.5.0](https://github.com/ionic-team/ionic-framework/compare/v7.4.4...v7.5.0) (2023-10-11)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** stop Enter keypress for checkboxes ([#28279](https://github.com/ionic-team/ionic-framework/issues/28279)) ([72b3899](https://github.com/ionic-team/ionic-framework/commit/72b389993df4b0dc392262a106d7949e176b13af))
|
||||
* **select:** use correct aria-haspopup value ([#28265](https://github.com/ionic-team/ionic-framework/issues/28265)) ([01167fc](https://github.com/ionic-team/ionic-framework/commit/01167fc185db9bbb45b3a4086aff98008a76af2c))
|
||||
* **toast:** toast does not warn when positionAnchor is undefined ([#28312](https://github.com/ionic-team/ionic-framework/issues/28312)) ([c37b3d8](https://github.com/ionic-team/ionic-framework/commit/c37b3d8bf4b440506fdc96455a532c6316e5673d))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **a11y:** add dynamic font scaling ([#28314](https://github.com/ionic-team/ionic-framework/issues/28314)) ([f806781](https://github.com/ionic-team/ionic-framework/commit/f8067819eeb577db163bf3e0f95fc73064d62b8a)), closes [#24638](https://github.com/ionic-team/ionic-framework/issues/24638) [#18592](https://github.com/ionic-team/ionic-framework/issues/18592)
|
||||
* **angular, react, vue, core:** export openURL utility ([#28295](https://github.com/ionic-team/ionic-framework/issues/28295)) ([6da82aa](https://github.com/ionic-team/ionic-framework/commit/6da82aab816b28bfc174f7634ded1fc1e06502ab)), closes [#27911](https://github.com/ionic-team/ionic-framework/issues/27911)
|
||||
* **angular:** ship Ionic components as Angular standalone components ([#28311](https://github.com/ionic-team/ionic-framework/issues/28311)) ([57e2476](https://github.com/ionic-team/ionic-framework/commit/57e247637005b10f0d21d5ac5f5232bcb1908301))
|
||||
* **datetime:** add support for h11 and h24 hour formats ([#28219](https://github.com/ionic-team/ionic-framework/issues/28219)) ([597bc3f](https://github.com/ionic-team/ionic-framework/commit/597bc3f085c5ff1451c73d0cf4d7d664943e712f)), closes [#23750](https://github.com/ionic-team/ionic-framework/issues/23750)
|
||||
* **toast:** allow custom positioning relative to specific element ([#28248](https://github.com/ionic-team/ionic-framework/issues/28248)) ([897ff6f](https://github.com/ionic-team/ionic-framework/commit/897ff6f7493d8d7e4ab22c6ae59de066b43ce682)), closes [#17499](https://github.com/ionic-team/ionic-framework/issues/17499)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.4.4](https://github.com/ionic-team/ionic-framework/compare/v7.4.3...v7.4.4) (2023-10-11)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animation:** play method resolves when animation is stopped ([#28264](https://github.com/ionic-team/ionic-framework/issues/28264)) ([e6031fb](https://github.com/ionic-team/ionic-framework/commit/e6031fbef0698dac0a346cd6202c47f2abf54f95))
|
||||
* **checkbox, radio, toggle:** disabled elements are not interactive ([#28294](https://github.com/ionic-team/ionic-framework/issues/28294)) ([c70432e](https://github.com/ionic-team/ionic-framework/commit/c70432e6934bcf1d570e1f7cf671c52d2bb52a8b)), closes [#28293](https://github.com/ionic-team/ionic-framework/issues/28293)
|
||||
* **content:** fullscreen offset is computed correctly with tab bar ([#28245](https://github.com/ionic-team/ionic-framework/issues/28245)) ([7375dd6](https://github.com/ionic-team/ionic-framework/commit/7375dd6abafdf7457f23deb53ad5f016456a6af2)), closes [#21130](https://github.com/ionic-team/ionic-framework/issues/21130)
|
||||
* **core:** allow fullscreen scroll content to flow outside container for translucent tab bar ([#28246](https://github.com/ionic-team/ionic-framework/issues/28246)) ([b297529](https://github.com/ionic-team/ionic-framework/commit/b297529afc4b93a93f7eaecd31dd5a88a3de5f4e)), closes [#17676](https://github.com/ionic-team/ionic-framework/issues/17676)
|
||||
* **core:** swipe to go back gesture has priority over other horizontal swipe gestures ([#28304](https://github.com/ionic-team/ionic-framework/issues/28304)) ([d5f0c77](https://github.com/ionic-team/ionic-framework/commit/d5f0c776dfb5cb40b8119c596805dad3adb621e0)), closes [#28303](https://github.com/ionic-team/ionic-framework/issues/28303)
|
||||
* **header:** collapsible large title main header does not flicker on load ([#28277](https://github.com/ionic-team/ionic-framework/issues/28277)) ([3259da0](https://github.com/ionic-team/ionic-framework/commit/3259da0de181c8f82c38d9de13733213c77d398f)), closes [#27060](https://github.com/ionic-team/ionic-framework/issues/27060)
|
||||
* **menu:** do not error if disabled or swipeGesture is changed mid-animation ([#28268](https://github.com/ionic-team/ionic-framework/issues/28268)) ([a169044](https://github.com/ionic-team/ionic-framework/commit/a1690441e5bcee8176da32700de6f9e3fde9635e)), closes [#20092](https://github.com/ionic-team/ionic-framework/issues/20092) [#19676](https://github.com/ionic-team/ionic-framework/issues/19676) [#19000](https://github.com/ionic-team/ionic-framework/issues/19000)
|
||||
* **segment:** scroll to active segment-button on first load ([#28276](https://github.com/ionic-team/ionic-framework/issues/28276)) ([1167a93](https://github.com/ionic-team/ionic-framework/commit/1167a9325fb930b6c727bc26889f5488d9620062)), closes [#28096](https://github.com/ionic-team/ionic-framework/issues/28096)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
|
||||
* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
|
||||
* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
|
||||
* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
|
||||
* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
|
||||
* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **datetime:** scroll to newly selected date when value changes ([#27806](https://github.com/ionic-team/ionic-framework/issues/27806)) ([32244fb](https://github.com/ionic-team/ionic-framework/commit/32244fbdd1931e59a9e3cedd2b143c8ee7d01459)), closes [#26391](https://github.com/ionic-team/ionic-framework/issues/26391)
|
||||
* **many:** add correct scale to stacked labels ([#28163](https://github.com/ionic-team/ionic-framework/issues/28163)) ([8cb8786](https://github.com/ionic-team/ionic-framework/commit/8cb878669e53bad25bbe2787826b6d02d292848a))
|
||||
* **range:** add correct margin in item ([#28161](https://github.com/ionic-team/ionic-framework/issues/28161)) ([1d2b867](https://github.com/ionic-team/ionic-framework/commit/1d2b867f2207d366e355265b081bc9aabe31ce7e))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **checkbox, radio, toggle, range:** stacked labels for form controls ([#28075](https://github.com/ionic-team/ionic-framework/issues/28075)) ([e6c7bb6](https://github.com/ionic-team/ionic-framework/commit/e6c7bb60e7e61c965f45e2bf3e3bd16f5125ad56))
|
||||
* **datetime:** add disabled part ([#28134](https://github.com/ionic-team/ionic-framework/issues/28134)) ([cd8d509](https://github.com/ionic-team/ionic-framework/commit/cd8d5091a133804ac97d0394354dcf7cd73d9355))
|
||||
* **datetime:** add parts for calendar day, active, and today ([#27641](https://github.com/ionic-team/ionic-framework/issues/27641)) ([79b005d](https://github.com/ionic-team/ionic-framework/commit/79b005da704c2ce481e1e3bc4d24cdba06a36d04)), closes [#25340](https://github.com/ionic-team/ionic-framework/issues/25340)
|
||||
* export TransitionOptions interface and getIonPageElement ([#28140](https://github.com/ionic-team/ionic-framework/issues/28140)) ([19f3bb2](https://github.com/ionic-team/ionic-framework/commit/19f3bb23fd5587848fc41a744ca46ef5985c04d2)), closes [#28137](https://github.com/ionic-team/ionic-framework/issues/28137)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.3.4](https://github.com/ionic-team/ionic-framework/compare/v7.3.3...v7.3.4) (2023-09-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **menu:** remove app dir from safe area padding ([#28123](https://github.com/ionic-team/ionic-framework/issues/28123)) ([e0542a7](https://github.com/ionic-team/ionic-framework/commit/e0542a7867871fa45a7fe6a4986e7de633063b4b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.3.3](https://github.com/ionic-team/ionic-framework/compare/v7.3.2...v7.3.3) (2023-09-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** swipe to dismiss resets status bar style ([#28110](https://github.com/ionic-team/ionic-framework/issues/28110)) ([176585f](https://github.com/ionic-team/ionic-framework/commit/176585f446b04a6a0cedab2e09417637dbfc78ee)), closes [#28105](https://github.com/ionic-team/ionic-framework/issues/28105)
|
||||
* **overlays:** prevent overlays from getting stuck open ([#28069](https://github.com/ionic-team/ionic-framework/issues/28069)) ([584e9d3](https://github.com/ionic-team/ionic-framework/commit/584e9d3be220343451c2d4b9bf90658ecd530de1)), closes [#27200](https://github.com/ionic-team/ionic-framework/issues/27200)
|
||||
* **popover:** dynamic width popover is positioned correctly ([#28072](https://github.com/ionic-team/ionic-framework/issues/28072)) ([2a80eb6](https://github.com/ionic-team/ionic-framework/commit/2a80eb6bd0b16a9dab9bea600bb7f935d25c0e1b)), closes [#27190](https://github.com/ionic-team/ionic-framework/issues/27190) [#24780](https://github.com/ionic-team/ionic-framework/issues/24780)
|
||||
* **textarea:** cols property is respected ([#28081](https://github.com/ionic-team/ionic-framework/issues/28081)) ([6d4eabc](https://github.com/ionic-team/ionic-framework/commit/6d4eabcc1046c28c1abf69a8bda3e06f80cf3f8f)), closes [#22142](https://github.com/ionic-team/ionic-framework/issues/22142)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.3.2](https://github.com/ionic-team/ionic-framework/compare/v7.3.1...v7.3.2) (2023-08-30)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **datetime:** gracefully handle invalid min/max ([#28054](https://github.com/ionic-team/ionic-framework/issues/28054)) ([01fc9b4](https://github.com/ionic-team/ionic-framework/commit/01fc9b45116f7ad6ddc56c7fb1535dec798c2b3a)), closes [#28041](https://github.com/ionic-team/ionic-framework/issues/28041)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.3.1](https://github.com/ionic-team/ionic-framework/compare/v7.3.0...v7.3.1) (2023-08-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **input, textarea:** clearOnEdit does not clear when pressing Tab ([#28005](https://github.com/ionic-team/ionic-framework/issues/28005)) ([444acc1](https://github.com/ionic-team/ionic-framework/commit/444acc1f1bca348b62dfb398067cc087529f67f1)), closes [#27746](https://github.com/ionic-team/ionic-framework/issues/27746)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.3.0](https://github.com/ionic-team/ionic-framework/compare/v7.2.4...v7.3.0) (2023-08-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** radio and checkbox labels wrap to next line ([#27898](https://github.com/ionic-team/ionic-framework/issues/27898)) ([0d3127a](https://github.com/ionic-team/ionic-framework/commit/0d3127ad09df3c914a8c254f14931de5ca3beb31)), closes [#17269](https://github.com/ionic-team/ionic-framework/issues/17269)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **action-sheet:** add htmlAttributes property for passing attributes to buttons ([#27863](https://github.com/ionic-team/ionic-framework/issues/27863)) ([5ce4ec0](https://github.com/ionic-team/ionic-framework/commit/5ce4ec0439e4f31aba31062fd8af4a2ad792a54f))
|
||||
* **alert:** add htmlAttributes property for passing attributes to buttons ([#27862](https://github.com/ionic-team/ionic-framework/issues/27862)) ([06be0e5](https://github.com/ionic-team/ionic-framework/commit/06be0e511164ebdaa6af9a3747d0585260c030a9))
|
||||
* **toast:** add htmlAttributes property for passing attributes to buttons ([#27855](https://github.com/ionic-team/ionic-framework/issues/27855)) ([9a68588](https://github.com/ionic-team/ionic-framework/commit/9a685882b7085d911ff09eedacc367629e32348a))
|
||||
* **toast:** add shadow part for cancel button ([#27921](https://github.com/ionic-team/ionic-framework/issues/27921)) ([e9faf54](https://github.com/ionic-team/ionic-framework/commit/e9faf54d0a7409521706ce9c8b0d26f3fbe9ba41)), closes [#27920](https://github.com/ionic-team/ionic-framework/issues/27920)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.2.4](https://github.com/ionic-team/ionic-framework/compare/v7.2.3...v7.2.4) (2023-08-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **tap-click:** do not error in document-less environment ([#27972](https://github.com/ionic-team/ionic-framework/issues/27972)) ([28bd4ba](https://github.com/ionic-team/ionic-framework/commit/28bd4ba720bb77d5f5c48cd7a45e0015daddc9dd))
|
||||
* **title:** large title aligns with ios spec ([#27969](https://github.com/ionic-team/ionic-framework/issues/27969)) ([8fa12fc](https://github.com/ionic-team/ionic-framework/commit/8fa12fc88857df27a1ca11249f0085e100fe1474)), closes [#27966](https://github.com/ionic-team/ionic-framework/issues/27966)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.2.3](https://github.com/ionic-team/ionic-framework/compare/v7.2.2...v7.2.3) (2023-08-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **button:** hidden button is added when form is set async ([#27955](https://github.com/ionic-team/ionic-framework/issues/27955)) ([e9fa300](https://github.com/ionic-team/ionic-framework/commit/e9fa30002bd5dec4f2f56a15c84eec1b3e794942)), closes [#27952](https://github.com/ionic-team/ionic-framework/issues/27952)
|
||||
* **datetime:** changing months work if partially visible ([#27917](https://github.com/ionic-team/ionic-framework/issues/27917)) ([eb19c28](https://github.com/ionic-team/ionic-framework/commit/eb19c289d6581639f6df7aff002bebdf2b27d31c)), closes [#27913](https://github.com/ionic-team/ionic-framework/issues/27913)
|
||||
* **item-sliding:** account for options added before watcher ([#27915](https://github.com/ionic-team/ionic-framework/issues/27915)) ([a0b3ef0](https://github.com/ionic-team/ionic-framework/commit/a0b3ef02af718e232246515bb873ad8c090fa55d)), closes [#27910](https://github.com/ionic-team/ionic-framework/issues/27910)
|
||||
* **many:** overlays present if isOpen is true on load ([#27933](https://github.com/ionic-team/ionic-framework/issues/27933)) ([a0e6ac6](https://github.com/ionic-team/ionic-framework/commit/a0e6ac6013552c5e3acdde33575d4aaf4d4c0bda)), closes [#27928](https://github.com/ionic-team/ionic-framework/issues/27928)
|
||||
* **modal:** setCurrentBreakpoint respects animated prop ([#27924](https://github.com/ionic-team/ionic-framework/issues/27924)) ([da55ab9](https://github.com/ionic-team/ionic-framework/commit/da55ab949ef1894738da5a6241176089b7a2b6e3)), closes [#27923](https://github.com/ionic-team/ionic-framework/issues/27923)
|
||||
* **nav:** improve reliability of swipe back gesture when quickly swiping back ([#27904](https://github.com/ionic-team/ionic-framework/issues/27904)) ([9500769](https://github.com/ionic-team/ionic-framework/commit/9500769f114d180613f0340b1a328b5e631b7188)), closes [#27893](https://github.com/ionic-team/ionic-framework/issues/27893)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.2.2](https://github.com/ionic-team/ionic-framework/compare/v7.2.1...v7.2.2) (2023-08-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **datetime-button:** render correct text when passing partial date values ([#27816](https://github.com/ionic-team/ionic-framework/issues/27816)) ([bd1910b](https://github.com/ionic-team/ionic-framework/commit/bd1910ba69348877ad5f99d9db2b59d06693b91e)), closes [#27797](https://github.com/ionic-team/ionic-framework/issues/27797)
|
||||
* **input, textarea:** input does not block floating label ([#27870](https://github.com/ionic-team/ionic-framework/issues/27870)) ([f14c440](https://github.com/ionic-team/ionic-framework/commit/f14c440d6321ef9f168b272338e5cd21cab384ef)), closes [#27812](https://github.com/ionic-team/ionic-framework/issues/27812)
|
||||
* **item-options:** use correct safe area padding ([#27853](https://github.com/ionic-team/ionic-framework/issues/27853)) ([0b8f1bc](https://github.com/ionic-team/ionic-framework/commit/0b8f1bc7dd4170a2a8c9ed3aede173dd489b25ea))
|
||||
* **radio:** radios can be focused and are announced with group ([#27817](https://github.com/ionic-team/ionic-framework/issues/27817)) ([ba2f49b](https://github.com/ionic-team/ionic-framework/commit/ba2f49b8a460520d20ac198db800ea2d9e5b015f)), closes [#27438](https://github.com/ionic-team/ionic-framework/issues/27438)
|
||||
* **select:** popover uses modern form syntax ([#27818](https://github.com/ionic-team/ionic-framework/issues/27818)) ([0c117cf](https://github.com/ionic-team/ionic-framework/commit/0c117cfe7f383b7c7837d27de5a6eee12ddd6c2f)), closes [#27071](https://github.com/ionic-team/ionic-framework/issues/27071) [#27786](https://github.com/ionic-team/ionic-framework/issues/27786)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.2.1](https://github.com/ionic-team/ionic-framework/compare/v7.2.0...v7.2.1) (2023-07-26)
|
||||
|
||||
|
||||
|
||||
21
core/api.txt
21
core/api.txt
@@ -289,13 +289,12 @@ ion-card-title,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-card-title,css-prop,--color
|
||||
|
||||
ion-checkbox,shadow
|
||||
ion-checkbox,prop,alignment,"center" | "start",'center',false,false
|
||||
ion-checkbox,prop,checked,boolean,false,false,false
|
||||
ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-checkbox,prop,disabled,boolean,false,false,false
|
||||
ion-checkbox,prop,indeterminate,boolean,false,false,false
|
||||
ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-checkbox,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
|
||||
ion-checkbox,prop,legacy,boolean | undefined,undefined,false,false
|
||||
ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-checkbox,prop,name,string,this.inputId,false,false
|
||||
@@ -394,7 +393,7 @@ ion-datetime,prop,disabled,boolean,false,false,false
|
||||
ion-datetime,prop,doneText,string,'Done',false,false
|
||||
ion-datetime,prop,firstDayOfWeek,number,0,false,false
|
||||
ion-datetime,prop,highlightedDates,((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined,undefined,false,false
|
||||
ion-datetime,prop,hourCycle,"h11" | "h12" | "h23" | "h24" | undefined,undefined,false,false
|
||||
ion-datetime,prop,hourCycle,"h12" | "h23" | undefined,undefined,false,false
|
||||
ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
|
||||
ion-datetime,prop,isDateEnabled,((dateIsoString: string) => boolean) | undefined,undefined,false,false
|
||||
ion-datetime,prop,locale,string,'default',false,false
|
||||
@@ -428,10 +427,6 @@ ion-datetime,css-prop,--background-rgb
|
||||
ion-datetime,css-prop,--title-color
|
||||
ion-datetime,css-prop,--wheel-fade-background-rgb
|
||||
ion-datetime,css-prop,--wheel-highlight-background
|
||||
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,month-year-button
|
||||
ion-datetime,part,time-button
|
||||
ion-datetime,part,time-button active
|
||||
@@ -1013,11 +1008,10 @@ ion-progress-bar,part,stream
|
||||
ion-progress-bar,part,track
|
||||
|
||||
ion-radio,shadow
|
||||
ion-radio,prop,alignment,"center" | "start",'center',false,false
|
||||
ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-radio,prop,disabled,boolean,false,false,false
|
||||
ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-radio,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
|
||||
ion-radio,prop,legacy,boolean | undefined,undefined,false,false
|
||||
ion-radio,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-radio,prop,name,string,this.inputId,false,false
|
||||
@@ -1044,7 +1038,7 @@ ion-range,prop,debounce,number | undefined,undefined,false,false
|
||||
ion-range,prop,disabled,boolean,false,false,false
|
||||
ion-range,prop,dualKnobs,boolean,false,false,false
|
||||
ion-range,prop,label,string | undefined,undefined,false,false
|
||||
ion-range,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-range,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
|
||||
ion-range,prop,legacy,boolean | undefined,undefined,false,false
|
||||
ion-range,prop,max,number,100,false,false
|
||||
ion-range,prop,min,number,0,false,false
|
||||
@@ -1370,7 +1364,7 @@ ion-textarea,prop,autocapitalize,string,'none',false,false
|
||||
ion-textarea,prop,autofocus,boolean,false,false,false
|
||||
ion-textarea,prop,clearOnEdit,boolean,false,false,false
|
||||
ion-textarea,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-textarea,prop,cols,number | undefined,undefined,false,true
|
||||
ion-textarea,prop,cols,number | undefined,undefined,false,false
|
||||
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
|
||||
@@ -1445,7 +1439,6 @@ ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin
|
||||
ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false
|
||||
ion-toast,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
|
||||
ion-toast,prop,positionAnchor,HTMLElement | string | undefined,undefined,false,false
|
||||
ion-toast,prop,translucent,boolean,false,false,false
|
||||
ion-toast,prop,trigger,string | undefined,undefined,false,false
|
||||
ion-toast,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
|
||||
@@ -1478,20 +1471,18 @@ ion-toast,css-prop,--start
|
||||
ion-toast,css-prop,--white-space
|
||||
ion-toast,css-prop,--width
|
||||
ion-toast,part,button
|
||||
ion-toast,part,button cancel
|
||||
ion-toast,part,container
|
||||
ion-toast,part,header
|
||||
ion-toast,part,icon
|
||||
ion-toast,part,message
|
||||
|
||||
ion-toggle,shadow
|
||||
ion-toggle,prop,alignment,"center" | "start",'center',false,false
|
||||
ion-toggle,prop,checked,boolean,false,false,false
|
||||
ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
|
||||
ion-toggle,prop,disabled,boolean,false,false,false
|
||||
ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
|
||||
ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
|
||||
ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
|
||||
ion-toggle,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
|
||||
ion-toggle,prop,legacy,boolean | undefined,undefined,false,false
|
||||
ion-toggle,prop,mode,"ios" | "md",undefined,false,false
|
||||
ion-toggle,prop,name,string,this.inputId,false,false
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
module.exports = {
|
||||
rules: {
|
||||
'no-component-on-ready-method': require('./no-component-on-ready-method.js'),
|
||||
'await-playwright-promise-assertion': require('./await-playwright-promise-assertion.js'),
|
||||
'no-playwright-to-match-snapshot-assertion': require('./no-playwright-to-match-snapshot-assertion.js')
|
||||
'await-playwright-promise-assertion': require('./await-playwright-promise-assertion.js')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
module.exports = {
|
||||
meta: {
|
||||
messages: {
|
||||
noPlaywrightToMatchSnapshotAssertion: '"toHaveScreenshot" assertions should be used in favor of "toMatchSnapshot". "toHaveScreenshot" brings file size reductions and anti-flake behaviors such as disabling animations by default.',
|
||||
},
|
||||
},
|
||||
create(context) {
|
||||
return {
|
||||
ExpressionStatement(node) {
|
||||
if (node.expression.callee === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { property } = node.expression.callee;
|
||||
|
||||
/**
|
||||
* Check to see if toMatchSnapshot is being used
|
||||
*/
|
||||
if (
|
||||
property !== undefined &&
|
||||
property.type === 'Identifier' &&
|
||||
property.name === 'toMatchSnapshot'
|
||||
) {
|
||||
context.report({ node: node, messageId: 'noPlaywrightToMatchSnapshotAssertion' });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
6004
core/package-lock.json
generated
6004
core/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.5.7",
|
||||
"version": "7.2.1",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -31,29 +31,30 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.8.0",
|
||||
"ionicons": "^7.2.1",
|
||||
"@stencil/core": "^3.4.0",
|
||||
"ionicons": "7.1.0",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.8.1",
|
||||
"@capacitor/core": "^5.5.1",
|
||||
"@axe-core/playwright": "^4.7.3",
|
||||
"@capacitor/core": "^5.2.2",
|
||||
"@capacitor/haptics": "^5.0.6",
|
||||
"@capacitor/keyboard": "^5.0.6",
|
||||
"@capacitor/status-bar": "^5.0.6",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@playwright/test": "^1.39.0",
|
||||
"@jest/core": "^27.5.1",
|
||||
"@playwright/test": "^1.36.2",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/angular-output-target": "^0.7.1",
|
||||
"@stencil/react-output-target": "^0.5.3",
|
||||
"@stencil/sass": "^3.0.7",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^29.5.6",
|
||||
"@stencil/sass": "^3.0.5",
|
||||
"@stencil/vue-output-target": "^0.8.6",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
"@typescript-eslint/parser": "^6.7.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.17.0",
|
||||
"@typescript-eslint/parser": "^5.17.0",
|
||||
"clean-css-cli": "^5.6.1",
|
||||
"domino": "^2.1.6",
|
||||
"eslint": "^7.32.0",
|
||||
@@ -61,15 +62,15 @@
|
||||
"eslint-plugin-custom-rules": "file:custom-rules",
|
||||
"execa": "^5.0.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
"jest": "^29.7.0",
|
||||
"jest-cli": "^29.7.0",
|
||||
"jest": "^27.5.1",
|
||||
"jest-cli": "^27.5.1",
|
||||
"prettier": "^2.6.1",
|
||||
"puppeteer": "21.1.1",
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.33.0",
|
||||
"sass": "^1.26.10",
|
||||
"serve": "^14.0.1",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-order": "^4.1.0"
|
||||
"stylelint-order": "^4.1.0",
|
||||
"typescript": "^4.0.5"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
|
||||
@@ -86,13 +87,14 @@
|
||||
"lint.sass.fix": "npm run lint.sass -- --fix",
|
||||
"lint.ts": "npm run eslint",
|
||||
"lint.ts.fix": "npm run eslint -- --fix",
|
||||
"prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
|
||||
"prerender.e2e": "node scripts/testing/prerender.js",
|
||||
"prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
|
||||
"start": "npm run build.css && stencil build --dev --watch --serve",
|
||||
"test": "npm run test.spec && npm run test.e2e",
|
||||
"test.spec": "stencil test --spec --max-workers=2",
|
||||
"test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
|
||||
"test.e2e": "npx playwright test",
|
||||
"test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
|
||||
"test.watch": "jest --watch --no-cache",
|
||||
"test.treeshake": "node scripts/treeshaking.js dist/index.js",
|
||||
"validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"
|
||||
|
||||
@@ -55,21 +55,21 @@ const config: PlaywrightTestConfig = {
|
||||
timeout: 5000,
|
||||
toHaveScreenshot: {
|
||||
threshold: 0.1
|
||||
},
|
||||
toMatchSnapshot: {
|
||||
threshold: 0.1
|
||||
}
|
||||
},
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: !!process.env.CI,
|
||||
maxFailures: 0,
|
||||
/* Test retries help catch flaky tests on CI */
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
reportSlowTests: null,
|
||||
/* Fail fast on CI */
|
||||
maxFailures: process.env.CI ? 1 : 0,
|
||||
/* Flaky test should be either addressed or disabled until we can address them */
|
||||
retries: 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: [
|
||||
['html'],
|
||||
['github']
|
||||
],
|
||||
reporter: 'html',
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,151 +0,0 @@
|
||||
/*
|
||||
* Dark Colors
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
:root {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66, 140, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80, 200, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106, 100, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47, 223, 117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255, 213, 52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255, 73, 97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244, 245, 248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152, 154, 162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34, 36, 40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.ios body {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0, 0, 0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-toolbar-background: #0d0d0d;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
/*
|
||||
* Material Design Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.md body {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18, 18, 18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-card-background: #1e1e1e;
|
||||
}
|
||||
727
core/src/components.d.ts
vendored
727
core/src/components.d.ts
vendored
File diff suppressed because it is too large
Load Diff
@@ -180,16 +180,6 @@ export class AccordionGroup implements ComponentInterface {
|
||||
if (this.readonly) {
|
||||
this.readonlyChanged();
|
||||
}
|
||||
/**
|
||||
* When binding values in frameworks such as Angular
|
||||
* it is possible for the value to be set after the Web Component
|
||||
* initializes but before the value watcher is set up in Stencil.
|
||||
* As a result, the watcher callback may not be fired.
|
||||
* We work around this by manually calling the watcher
|
||||
* callback when the component has loaded and the watcher
|
||||
* is configured.
|
||||
*/
|
||||
this.valueChanged();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { AccordionGroup } from '../../accordion-group/accordion-group';
|
||||
import { Item } from '../../item/item';
|
||||
import { Accordion } from '../accordion';
|
||||
import { AccordionGroup } from '../../accordion-group/accordion-group.tsx';
|
||||
import { Item } from '../../item/item.tsx';
|
||||
import { Accordion } from '../accordion.tsx';
|
||||
|
||||
it('should open correct accordions when accordion group value is set', async () => {
|
||||
const page = await newSpecPage({
|
||||
@@ -25,7 +25,7 @@ it('should open correct accordions when accordion group value is set', async ()
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
accordions.forEach((accordion) => {
|
||||
@@ -61,7 +61,7 @@ it('should open correct accordions when accordion value is set', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
accordions.forEach((accordion) => {
|
||||
@@ -97,7 +97,7 @@ it('should open more than one accordion when multiple="true"', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
accordions.forEach((accordion) => {
|
||||
@@ -133,7 +133,7 @@ it('should render with accordion open', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
|
||||
@@ -162,7 +162,7 @@ it('should accept a string when multiple="true"', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordions = accordionGroup.querySelectorAll('ion-accordion');
|
||||
|
||||
expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
|
||||
@@ -183,8 +183,8 @@ it('should set default values if not provided', async () => {
|
||||
`,
|
||||
});
|
||||
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group')!;
|
||||
const accordion = accordionGroup.querySelector('ion-accordion')!;
|
||||
const accordionGroup = page.body.querySelector('ion-accordion-group');
|
||||
const accordion = accordionGroup.querySelector('ion-accordion');
|
||||
|
||||
/**
|
||||
* ID is determined via an auto incrementing counter
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 8.2 KiB |
@@ -23,7 +23,6 @@ export interface ActionSheetButton<T = any> {
|
||||
icon?: string;
|
||||
cssClass?: string | string[];
|
||||
id?: string;
|
||||
htmlAttributes?: { [key: string]: any };
|
||||
handler?: () => boolean | void | Promise<boolean | void>;
|
||||
data?: T;
|
||||
}
|
||||
|
||||
@@ -131,11 +131,11 @@
|
||||
.action-sheet-button {
|
||||
@include padding($action-sheet-ios-button-padding);
|
||||
|
||||
min-height: $action-sheet-ios-button-height;
|
||||
height: $action-sheet-ios-button-height;
|
||||
|
||||
font-size: $action-sheet-ios-button-font-size;
|
||||
|
||||
contain: content;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.action-sheet-button .action-sheet-icon {
|
||||
|
||||
@@ -50,7 +50,7 @@ $action-sheet-ios-title-padding-start: $action-sheet-
|
||||
$action-sheet-ios-title-color: $text-color-step-600 !default;
|
||||
|
||||
/// @prop - Font size of the action sheet title
|
||||
$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default;
|
||||
$action-sheet-ios-title-font-size: 13px !default;
|
||||
|
||||
/// @prop - Font weight of the action sheet title
|
||||
$action-sheet-ios-title-font-weight: 400 !default;
|
||||
@@ -58,11 +58,24 @@ $action-sheet-ios-title-font-weight: 400 !default;
|
||||
/// @prop - Font weight of the action sheet title when it has a sub title
|
||||
$action-sheet-ios-title-with-sub-title-font-weight: 600 !default;
|
||||
|
||||
/// @prop - Border width of the action sheet title
|
||||
$action-sheet-ios-title-border-width: $hairlines-width !default;
|
||||
|
||||
/// @prop - Border style of the action sheet title
|
||||
$action-sheet-ios-title-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color alpha of the action sheet title
|
||||
$action-sheet-ios-title-border-color-alpha: .08 !default;
|
||||
|
||||
/// @prop - Border color of the action sheet title
|
||||
$action-sheet-ios-title-border-color: rgba($text-color-rgb, $action-sheet-ios-title-border-color-alpha) !default;
|
||||
|
||||
|
||||
// Action Sheet Subtitle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the action sheet sub title
|
||||
$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default;
|
||||
$action-sheet-ios-sub-title-font-size: 13px !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet sub title
|
||||
$action-sheet-ios-sub-title-padding-top: 6px !default;
|
||||
@@ -84,19 +97,19 @@ $action-sheet-ios-sub-title-padding-start: $action-sheet-
|
||||
$action-sheet-ios-button-height: 56px !default;
|
||||
|
||||
/// @prop - Padding of the action sheet button
|
||||
$action-sheet-ios-button-padding: 14px !default;
|
||||
$action-sheet-ios-button-padding: 18px !default;
|
||||
|
||||
/// @prop - Text color of the action sheet button
|
||||
$action-sheet-ios-button-text-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Font size of the action sheet button icon
|
||||
$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px) !default;
|
||||
$action-sheet-ios-button-icon-font-size: 28px !default;
|
||||
|
||||
/// @prop - Padding right of the action sheet button icon
|
||||
$action-sheet-ios-button-icon-padding-right: .3em !default;
|
||||
|
||||
/// @prop - Font size of the action sheet button
|
||||
$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default;
|
||||
$action-sheet-ios-button-font-size: 20px !default;
|
||||
|
||||
/// @prop - Border color alpha of the action sheet button
|
||||
$action-sheet-ios-button-border-color-alpha: .08 !default;
|
||||
@@ -116,6 +129,9 @@ $action-sheet-ios-button-background-selected: var(--ion-colo
|
||||
/// @prop - Destructive text color of the action sheet button
|
||||
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default;
|
||||
|
||||
/// @prop - Background color of the action sheet cancel button
|
||||
$action-sheet-ios-button-cancel-background: $background-color !default;
|
||||
|
||||
/// @prop - Font weight of the action sheet cancel button
|
||||
$action-sheet-ios-button-cancel-font-weight: 600 !default;
|
||||
|
||||
|
||||
@@ -67,13 +67,13 @@
|
||||
|
||||
position: relative;
|
||||
|
||||
min-height: $action-sheet-md-button-height;
|
||||
height: $action-sheet-md-button-height;
|
||||
|
||||
font-size: $action-sheet-md-button-font-size;
|
||||
|
||||
text-align: $action-sheet-md-text-align;
|
||||
|
||||
contain: content;
|
||||
contain: strict;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ $action-sheet-md-title-height: 60px !default;
|
||||
$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default;
|
||||
|
||||
/// @prop - Font size of the action sheet title
|
||||
$action-sheet-md-title-font-size: dynamic-font(16px) !default;
|
||||
$action-sheet-md-title-font-size: 16px !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet title
|
||||
$action-sheet-md-title-padding-top: 20px !default;
|
||||
@@ -45,7 +45,7 @@ $action-sheet-md-title-padding-start: $action-sheet-md-title-p
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the action sheet sub title
|
||||
$action-sheet-md-sub-title-font-size: dynamic-font(14px) !default;
|
||||
$action-sheet-md-sub-title-font-size: 14px !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet sub title
|
||||
$action-sheet-md-sub-title-padding-top: 16px !default;
|
||||
@@ -70,10 +70,10 @@ $action-sheet-md-button-height: 52px !default;
|
||||
$action-sheet-md-button-text-color: $text-color-step-150 !default;
|
||||
|
||||
/// @prop - Font size of the action sheet button
|
||||
$action-sheet-md-button-font-size: dynamic-font(16px) !default;
|
||||
$action-sheet-md-button-font-size: 16px !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet button
|
||||
$action-sheet-md-button-padding-top: 12px !default;
|
||||
$action-sheet-md-button-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the action sheet button
|
||||
$action-sheet-md-button-padding-end: 16px !default;
|
||||
@@ -84,11 +84,14 @@ $action-sheet-md-button-padding-bottom: $action-sheet-md-button-
|
||||
/// @prop - Padding start of the action sheet button
|
||||
$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default;
|
||||
|
||||
/// @prop - Background color of the action sheet button
|
||||
$action-sheet-md-button-background: transparent !default;
|
||||
|
||||
// Action Sheet Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the icon in the action sheet button
|
||||
$action-sheet-md-icon-font-size: dynamic-font(24px) !default;
|
||||
$action-sheet-md-icon-font-size: 24px !default;
|
||||
|
||||
/// @prop - Margin top of the icon in the action sheet button
|
||||
$action-sheet-md-icon-margin-top: 0 !default;
|
||||
@@ -101,3 +104,6 @@ $action-sheet-md-icon-margin-bottom: 0 !default;
|
||||
|
||||
/// @prop - Margin start of the icon in the action sheet button
|
||||
$action-sheet-md-icon-margin-start: 0 !default;
|
||||
|
||||
/// @prop - Color of the icon in the action sheet button
|
||||
$action-sheet-md-icon-color: $action-sheet-md-title-color !default;
|
||||
|
||||
@@ -126,10 +126,7 @@
|
||||
justify-content: flex-end;
|
||||
|
||||
height: 100%;
|
||||
|
||||
/* Fallback for browsers that do not support dvh */
|
||||
max-height: calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
|
||||
max-height: calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
@@ -142,22 +139,8 @@
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/**
|
||||
* Scrollbars on mobile devices will be hidden.
|
||||
* Users can still scroll the content by swiping.
|
||||
* If a user has a fine pointing device, such as a
|
||||
* mouse or trackpad, then scrollbars will be
|
||||
* visible. This allows users to scroll the
|
||||
* content with their pointing device.
|
||||
* Otherwise, the user would have to use the
|
||||
* keyboard to navigate through the options.
|
||||
* This may not be intuitive for users who
|
||||
* are not familiar with keyboard navigation.
|
||||
*/
|
||||
@media (any-pointer: coarse) {
|
||||
.action-sheet-group::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.action-sheet-group::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-sheet-group-cancel {
|
||||
|
||||
@@ -2,8 +2,6 @@ import type { ComponentInterface, EventEmitter } 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';
|
||||
import { createLockController } from '@utils/lock-controller';
|
||||
import {
|
||||
BACKDROP,
|
||||
createDelegateController,
|
||||
@@ -41,8 +39,8 @@ import { mdLeaveAnimation } from './animations/md.leave';
|
||||
})
|
||||
export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
private readonly delegateController = createDelegateController(this);
|
||||
private readonly lockController = createLockController();
|
||||
private readonly triggerController = createTriggerController();
|
||||
private currentTransition?: Promise<any>;
|
||||
private wrapperEl?: HTMLElement;
|
||||
private groupEl?: HTMLElement;
|
||||
private gesture?: Gesture;
|
||||
@@ -199,13 +197,25 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
*/
|
||||
@Method()
|
||||
async present(): Promise<void> {
|
||||
const unlock = await this.lockController.lock();
|
||||
/**
|
||||
* When using an inline action sheet
|
||||
* and dismissing a action sheet it is possible to
|
||||
* quickly present the action sheet while it is
|
||||
* dismissing. We need to await any current
|
||||
* transition to allow the dismiss to finish
|
||||
* before presenting again.
|
||||
*/
|
||||
if (this.currentTransition !== undefined) {
|
||||
await this.currentTransition;
|
||||
}
|
||||
|
||||
await this.delegateController.attachViewToDom();
|
||||
|
||||
await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
|
||||
this.currentTransition = present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
|
||||
|
||||
unlock();
|
||||
await this.currentTransition;
|
||||
|
||||
this.currentTransition = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -219,16 +229,13 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
*/
|
||||
@Method()
|
||||
async dismiss(data?: any, role?: string): Promise<boolean> {
|
||||
const unlock = await this.lockController.lock();
|
||||
|
||||
const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
|
||||
this.currentTransition = dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
|
||||
const dismissed = await this.currentTransition;
|
||||
|
||||
if (dismissed) {
|
||||
this.delegateController.removeViewFromDom();
|
||||
}
|
||||
|
||||
unlock();
|
||||
|
||||
return dismissed;
|
||||
}
|
||||
|
||||
@@ -311,43 +318,25 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
|
||||
componentDidLoad() {
|
||||
/**
|
||||
* Only create gesture if:
|
||||
* 1. A gesture does not already exist
|
||||
* 2. App is running in iOS mode
|
||||
* 3. A wrapper ref exists
|
||||
* 4. A group ref exists
|
||||
* Do not create gesture if:
|
||||
* 1. A gesture already exists
|
||||
* 2. App is running in MD mode
|
||||
* 3. A wrapper ref does not exist
|
||||
*/
|
||||
const { groupEl, wrapperEl } = this;
|
||||
if (!this.gesture && getIonMode(this) === 'ios' && wrapperEl && groupEl) {
|
||||
readTask(() => {
|
||||
const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
|
||||
if (!isScrollable) {
|
||||
this.gesture = createButtonActiveGesture(wrapperEl, (refEl: HTMLElement) =>
|
||||
refEl.classList.contains('action-sheet-button')
|
||||
);
|
||||
this.gesture.enable(true);
|
||||
}
|
||||
});
|
||||
if (this.gesture || getIonMode(this) === 'md' || !wrapperEl || !groupEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* If action sheet was rendered with isOpen="true"
|
||||
* then we should open action sheet immediately.
|
||||
*/
|
||||
if (this.isOpen === true) {
|
||||
raf(() => this.present());
|
||||
}
|
||||
|
||||
/**
|
||||
* When binding values in frameworks such as Angular
|
||||
* it is possible for the value to be set after the Web Component
|
||||
* initializes but before the value watcher is set up in Stencil.
|
||||
* As a result, the watcher callback may not be fired.
|
||||
* We work around this by manually calling the watcher
|
||||
* callback when the component has loaded and the watcher
|
||||
* is configured.
|
||||
*/
|
||||
this.triggerChanged();
|
||||
readTask(() => {
|
||||
const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
|
||||
if (!isScrollable) {
|
||||
this.gesture = createButtonActiveGesture(wrapperEl, (refEl: HTMLElement) =>
|
||||
refEl.classList.contains('action-sheet-button')
|
||||
);
|
||||
this.gesture.enable(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -397,13 +386,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
</div>
|
||||
)}
|
||||
{buttons.map((b) => (
|
||||
<button
|
||||
{...b.htmlAttributes}
|
||||
type="button"
|
||||
id={b.id}
|
||||
class={buttonClass(b)}
|
||||
onClick={() => this.buttonClick(b)}
|
||||
>
|
||||
<button type="button" id={b.id} class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
|
||||
<span class="action-sheet-button-inner">
|
||||
{b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
|
||||
{b.text}
|
||||
@@ -415,12 +398,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
|
||||
{cancelButton && (
|
||||
<div class="action-sheet-group action-sheet-group-cancel">
|
||||
<button
|
||||
{...cancelButton.htmlAttributes}
|
||||
type="button"
|
||||
class={buttonClass(cancelButton)}
|
||||
onClick={() => this.buttonClick(cancelButton)}
|
||||
>
|
||||
<button type="button" class={buttonClass(cancelButton)} onClick={() => this.buttonClick(cancelButton)}>
|
||||
<span class="action-sheet-button-inner">
|
||||
{cancelButton.icon && (
|
||||
<ion-icon icon={cancelButton.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />
|
||||
|
||||
@@ -10,36 +10,16 @@ const testAria = async (page: E2EPage, buttonID: string, expectedAriaLabelledBy:
|
||||
await button.click();
|
||||
await didPresent.next();
|
||||
|
||||
const actionSheet = page.locator('ion-action-sheet');
|
||||
const alert = page.locator('ion-action-sheet');
|
||||
|
||||
/**
|
||||
* expect().toHaveAttribute() can't check for a null value, so grab and check
|
||||
* the value manually instead.
|
||||
*/
|
||||
const ariaLabelledBy = await actionSheet.getAttribute('aria-labelledby');
|
||||
const ariaLabelledBy = await alert.getAttribute('aria-labelledby');
|
||||
|
||||
expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
|
||||
};
|
||||
|
||||
const testAriaButton = async (
|
||||
page: E2EPage,
|
||||
buttonID: string,
|
||||
expectedAriaLabelledBy: string,
|
||||
expectedAriaLabel: string
|
||||
) => {
|
||||
const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
|
||||
|
||||
const button = page.locator(`#${buttonID}`);
|
||||
await button.click();
|
||||
|
||||
await didPresent.next();
|
||||
|
||||
const actionSheetButton = page.locator('ion-action-sheet .action-sheet-button');
|
||||
|
||||
await expect(actionSheetButton).toHaveAttribute('aria-labelledby', expectedAriaLabelledBy);
|
||||
await expect(actionSheetButton).toHaveAttribute('aria-label', expectedAriaLabel);
|
||||
};
|
||||
|
||||
configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
test.describe(title('action-sheet: a11y'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
@@ -72,51 +52,5 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
test('should allow for manually specifying aria attributes', async ({ page }) => {
|
||||
await testAria(page, 'customAria', 'Custom title');
|
||||
});
|
||||
|
||||
test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({
|
||||
page,
|
||||
}) => {
|
||||
await testAriaButton(page, 'ariaLabelButton', 'close-label', 'close button');
|
||||
});
|
||||
|
||||
test('should have aria-labelledby and aria-label added to the cancel button when htmlAttributes is set', async ({
|
||||
page,
|
||||
}) => {
|
||||
await testAriaButton(page, 'ariaLabelCancelButton', 'cancel-label', 'cancel button');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('action-sheet: font scaling'), () => {
|
||||
test('should scale text on larger font sizes', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
html {
|
||||
font-size: 36px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-action-sheet></ion-action-sheet>
|
||||
|
||||
<script>
|
||||
const actionSheet = document.querySelector('ion-action-sheet');
|
||||
actionSheet.header = 'Header';
|
||||
actionSheet.subHeader = 'Sub Header';
|
||||
actionSheet.buttons = ['Ok', { role: 'cancel', text: 'Cancel' }];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
|
||||
const actionSheet = page.locator('ion-action-sheet');
|
||||
|
||||
await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
|
||||
await ionActionSheetDidPresent.next();
|
||||
|
||||
await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-scale`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
@@ -23,10 +23,6 @@
|
||||
<ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
|
||||
<ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
|
||||
<ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
|
||||
<ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
|
||||
<ion-button id="ariaLabelCancelButton" expand="block" onclick="presentAriaLabelCancelButton()"
|
||||
>Aria Label Cancel Button</ion-button
|
||||
>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
@@ -67,39 +63,6 @@
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function presentAriaLabelButton() {
|
||||
openActionSheet({
|
||||
header: 'Header',
|
||||
subHeader: 'Subtitle',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Close',
|
||||
htmlAttributes: {
|
||||
'aria-label': 'close button',
|
||||
'aria-labelledby': 'close-label',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function presentAriaLabelCancelButton() {
|
||||
openActionSheet({
|
||||
header: 'Header',
|
||||
subHeader: 'Subtitle',
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
htmlAttributes: {
|
||||
'aria-label': 'cancel button',
|
||||
'aria-labelledby': 'cancel-label',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -100,69 +100,3 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* This behavior needs to be tested in both modes but does not vary
|
||||
* across directions due to the component only applying safe area
|
||||
* to the top and bottom
|
||||
*/
|
||||
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('action-sheet: basic'), () => {
|
||||
test.describe('safe area', () => {
|
||||
test('should have padding added by the safe area', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/27777',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
:root {
|
||||
--ion-safe-area-top: 60px;
|
||||
--ion-safe-area-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-action-sheet></ion-action-sheet>
|
||||
|
||||
<script>
|
||||
const actionSheet = document.querySelector('ion-action-sheet');
|
||||
actionSheet.header = 'Header';
|
||||
actionSheet.subHeader = 'Sub Header';
|
||||
actionSheet.buttons = [
|
||||
'Add Reaction',
|
||||
'Copy Text',
|
||||
'Share Text',
|
||||
'Copy Link to Message',
|
||||
'Remind Me',
|
||||
'Pin File',
|
||||
'Star File',
|
||||
'Mark Unread',
|
||||
'Mark Read',
|
||||
'Edit Title',
|
||||
'Erase Title',
|
||||
'Save Image',
|
||||
'Copy Image',
|
||||
'Erase Image',
|
||||
'Delete File',
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel'
|
||||
},
|
||||
];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
|
||||
const actionSheet = page.locator('ion-action-sheet');
|
||||
|
||||
await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
|
||||
await ionActionSheetDidPresent.next();
|
||||
|
||||
await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-safe-area`));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -7,17 +7,10 @@ describe('action sheet: htmlAttributes inheritance', () => {
|
||||
it('should correctly inherit attributes on host', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [ActionSheet],
|
||||
template: () => (
|
||||
<ion-action-sheet
|
||||
htmlAttributes={{
|
||||
'data-testid': 'basic-action-sheet',
|
||||
}}
|
||||
overlayIndex={1}
|
||||
></ion-action-sheet>
|
||||
),
|
||||
template: () => <ion-action-sheet htmlAttributes={{ 'data-testid': 'basic-action-sheet' }}></ion-action-sheet>,
|
||||
});
|
||||
|
||||
const actionSheet = page.body.querySelector('ion-action-sheet')!;
|
||||
const actionSheet = page.body.querySelector('ion-action-sheet');
|
||||
|
||||
await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet');
|
||||
});
|
||||
|
||||
@@ -30,10 +30,5 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ config, title }) =>
|
||||
|
||||
await expect(actionSheet).toBeHidden();
|
||||
});
|
||||
|
||||
test('should open if isOpen is true on load', async ({ page }) => {
|
||||
await page.setContent('<ion-action-sheet is-open="true"></ion-action-sheet>', config);
|
||||
await expect(page.locator('ion-action-sheet')).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -48,7 +48,6 @@ export interface AlertButton {
|
||||
role?: 'cancel' | 'destructive' | string;
|
||||
cssClass?: string | string[];
|
||||
id?: string;
|
||||
htmlAttributes?: { [key: string]: any };
|
||||
// TODO(FW-2832): type
|
||||
handler?: (value: any) => AlertButtonOverlayHandler | Promise<AlertButtonOverlayHandler>;
|
||||
}
|
||||
|
||||
@@ -105,17 +105,6 @@
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-date-and-time-value {
|
||||
/**
|
||||
* The -webkit-date-and-time-value pseudo element is used
|
||||
* to style the date/time input on iOS/Mobile Safari.
|
||||
* To avoid layout shift between an empty state and a selected state,
|
||||
* we set the height `18px` to match the native input height for
|
||||
* date/time inputs on iOS/Mobile Safari.
|
||||
*/
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -134,7 +123,7 @@
|
||||
}
|
||||
|
||||
.alert-tappable {
|
||||
min-height: $alert-ios-tappable-height;
|
||||
height: $alert-ios-tappable-height;
|
||||
}
|
||||
|
||||
|
||||
@@ -148,6 +137,12 @@
|
||||
order: 0;
|
||||
|
||||
color: $alert-ios-radio-label-text-color;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -201,6 +196,12 @@
|
||||
flex: 1;
|
||||
|
||||
color: $alert-ios-checkbox-label-text-color;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// iOS Alert Checkbox Outer Circle: Unchecked
|
||||
@@ -266,19 +267,13 @@
|
||||
}
|
||||
|
||||
.alert-button {
|
||||
/**
|
||||
* This padding ensures that alerts
|
||||
* with multiple buttons render on separate lines
|
||||
* so the text does not run up against the edge of the button.
|
||||
*/
|
||||
@include padding-horizontal($alert-ios-button-padding);
|
||||
@include margin($alert-ios-button-margin);
|
||||
@include border-radius($alert-ios-button-border-radius);
|
||||
|
||||
flex: $alert-ios-button-flex;
|
||||
|
||||
min-width: $alert-ios-button-min-width;
|
||||
height: $alert-ios-button-height;
|
||||
height: $alert-ios-button-min-height;
|
||||
|
||||
border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
|
||||
border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the alert
|
||||
$alert-ios-font-size: dynamic-font-min(1, 14px) !default;
|
||||
$alert-ios-font-size: 14px !default;
|
||||
|
||||
/// @prop - Max width of the alert
|
||||
$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !default;
|
||||
$alert-ios-max-width: 270px !default;
|
||||
|
||||
/// @prop - Border radius of the alert
|
||||
$alert-ios-border-radius: 13px !default;
|
||||
@@ -48,13 +48,13 @@ $alert-ios-title-color: $text-color !default;
|
||||
$alert-ios-title-margin-top: 8px !default;
|
||||
|
||||
/// @prop - Font size of the alert title
|
||||
$alert-ios-title-font-size: dynamic-font-min(1, 17px) !default;
|
||||
$alert-ios-title-font-size: 17px !default;
|
||||
|
||||
/// @prop - Font weight of the alert title
|
||||
$alert-ios-title-font-weight: 600 !default;
|
||||
|
||||
/// @prop - Font size of the alert sub title
|
||||
$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px) !default;
|
||||
$alert-ios-sub-title-font-size: 14px !default;
|
||||
|
||||
/// @prop - Text color of the alert sub title
|
||||
$alert-ios-sub-title-text-color: $text-color-step-400 !default;
|
||||
@@ -72,7 +72,7 @@ $alert-ios-message-padding-bottom: 21px !default;
|
||||
$alert-ios-message-padding-start: $alert-ios-message-padding-end !default;
|
||||
|
||||
/// @prop - Font size of the alert message
|
||||
$alert-ios-message-font-size: dynamic-font-min(1, 13px) !default;
|
||||
$alert-ios-message-font-size: 13px !default;
|
||||
|
||||
/// @prop - Text align of the alert message
|
||||
$alert-ios-message-text-align: center !default;
|
||||
@@ -137,23 +137,11 @@ $alert-ios-button-margin: 0 !default;
|
||||
/// @prop - Min width of the alert button
|
||||
$alert-ios-button-min-width: 50% !default;
|
||||
|
||||
/// @prop - Height of the alert button
|
||||
/**
|
||||
* We want the height of the button to
|
||||
* scale with the text so the next never runs
|
||||
* into the edge of the button. We change the height
|
||||
* instead of adding padding because we would need to offset
|
||||
* the height the padding and the border. Since the border uses
|
||||
* a hairline (<1px) width, this will cause subpixel rendering
|
||||
* differences across browsers.
|
||||
*/
|
||||
$alert-ios-button-height: dynamic-font-min(1, 44px) !default;
|
||||
|
||||
/// @prop - Padding of the alert button
|
||||
$alert-ios-button-padding: 8px !default;
|
||||
/// @prop - Minimum height of the alert button
|
||||
$alert-ios-button-min-height: 44px !default;
|
||||
|
||||
/// @prop - Font size of the alert button
|
||||
$alert-ios-button-font-size: dynamic-font-min(1, 17px) !default;
|
||||
$alert-ios-button-font-size: 17px !default;
|
||||
|
||||
/// @prop - Color of the text in the alert button
|
||||
$alert-ios-button-text-color: ion-color(primary, base) !default;
|
||||
@@ -264,10 +252,10 @@ $alert-ios-checkbox-margin-bottom: 10px !default;
|
||||
$alert-ios-checkbox-margin-start: 16px !default;
|
||||
|
||||
/// @prop - Size of the checkbox in the alert
|
||||
$alert-ios-checkbox-size: dynamic-font-max(24px, 2.75) !default;
|
||||
$alert-ios-checkbox-size: 24px !default;
|
||||
|
||||
/// @prop - Border width of the checkbox in the alert
|
||||
$alert-ios-checkbox-border-width: dynamic-font(1px) !default;
|
||||
$alert-ios-checkbox-border-width: 1px !default;
|
||||
|
||||
/// @prop - Border style of the checkbox in the alert
|
||||
$alert-ios-checkbox-border-style: solid !default;
|
||||
@@ -288,16 +276,16 @@ $alert-ios-checkbox-background-color-off: $item-ios-background !de
|
||||
$alert-ios-checkbox-background-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Top of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 6) !default;
|
||||
$alert-ios-checkbox-icon-top: math.div($alert-ios-checkbox-size, 6) !default;
|
||||
|
||||
/// @prop - Start of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3 + 1px) !default;
|
||||
$alert-ios-checkbox-icon-start: math.div($alert-ios-checkbox-size, 3) + 1px !default;
|
||||
|
||||
/// @prop - Width of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px) !default;
|
||||
$alert-ios-checkbox-icon-width: math.div($alert-ios-checkbox-size, 6) + 1px !default;
|
||||
|
||||
/// @prop - Height of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5) !default;
|
||||
$alert-ios-checkbox-icon-height: $alert-ios-checkbox-size * 0.5 !default;
|
||||
|
||||
/// @prop - Border width of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default;
|
||||
|
||||
@@ -52,18 +52,9 @@
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-size: $alert-md-message-font-size;
|
||||
}
|
||||
max-height: $alert-md-content-max-height;
|
||||
|
||||
/**
|
||||
* MD Alerts on tablets can expand vertically up to
|
||||
* a total maximum height. We only want to set a max-height
|
||||
* on mobile phones.
|
||||
*/
|
||||
@include mobile-viewport() {
|
||||
.alert-message {
|
||||
max-height: $alert-md-content-max-height;
|
||||
}
|
||||
font-size: $alert-md-message-font-size;
|
||||
}
|
||||
|
||||
.alert-message:empty {
|
||||
@@ -111,28 +102,20 @@
|
||||
.alert-checkbox-group {
|
||||
position: relative;
|
||||
|
||||
max-height: $alert-md-content-max-height;
|
||||
|
||||
border-top: $alert-md-list-border-top;
|
||||
border-bottom: $alert-md-list-border-bottom;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* MD Alerts on tablets can expand vertically up to
|
||||
* a total maximum height. We only want to set a max-height
|
||||
* on mobile phones.
|
||||
*/
|
||||
@include mobile-viewport() {
|
||||
.alert-radio-group,
|
||||
.alert-checkbox-group {
|
||||
max-height: $alert-md-content-max-height;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-tappable {
|
||||
position: relative;
|
||||
|
||||
min-height: $alert-md-tappable-height;
|
||||
height: $alert-md-tappable-height;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -147,6 +130,12 @@
|
||||
color: $alert-md-radio-label-text-color;
|
||||
|
||||
font-size: $alert-md-radio-label-font-size;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Material Design Alert Radio Unchecked Circle
|
||||
@@ -211,13 +200,15 @@
|
||||
|
||||
flex: 1;
|
||||
|
||||
// Required for the checkbox icon to stay on the screen without
|
||||
// being squished when the font size scales up.
|
||||
width: calc(100% - $alert-md-checkbox-label-padding-start);
|
||||
|
||||
color: $alert-md-checkbox-label-text-color;
|
||||
|
||||
font-size: $alert-md-checkbox-label-font-size;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -301,14 +292,3 @@
|
||||
.alert-button-inner {
|
||||
justify-content: $alert-md-button-group-justify-content;
|
||||
}
|
||||
|
||||
/**
|
||||
* MD alerts should scale up to 560px x 560px
|
||||
* on tablet dimensions.
|
||||
*/
|
||||
@include tablet-viewport() {
|
||||
:host {
|
||||
--max-width: #{$alert-md-max-width-tablet};
|
||||
--max-height: #{$alert-md-max-height-tablet};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,25 +5,11 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the alert
|
||||
$alert-md-font-size: dynamic-font(14px) !default;
|
||||
$alert-md-font-size: 14px !default;
|
||||
|
||||
/// @prop - Max width of the alert
|
||||
$alert-md-max-width: 280px !default;
|
||||
|
||||
/// @prop - Max width of the alert on a tablet
|
||||
/**
|
||||
* Large display requirements for MD Alert:
|
||||
* 1. Maintain a minimum of 48px distance from the leading and
|
||||
* trailing edges of the screen. (48px * 2 = 96px)
|
||||
* 2. The width can increase up to 560px.
|
||||
* 3. The height can increase up to 560px.
|
||||
* Source: https://m2.material.io/components/dialogs#behavior
|
||||
*/
|
||||
$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px) !default;
|
||||
|
||||
/// @prop - Max width of the alert on a tablet
|
||||
$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px) !default;
|
||||
|
||||
/// @prop - Border radius of the alert
|
||||
$alert-md-border-radius: 4px !default;
|
||||
|
||||
@@ -52,13 +38,13 @@ $alert-md-head-text-align: start !default;
|
||||
$alert-md-title-color: $text-color !default;
|
||||
|
||||
/// @prop - Font size of the alert title
|
||||
$alert-md-title-font-size: dynamic-font(20px) !default;
|
||||
$alert-md-title-font-size: 20px !default;
|
||||
|
||||
/// @prop - Font weight of the alert title
|
||||
$alert-md-title-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Font size of the alert sub title
|
||||
$alert-md-sub-title-font-size: dynamic-font(16px) !default;
|
||||
$alert-md-sub-title-font-size: 16px !default;
|
||||
|
||||
/// @prop - Text color of the alert sub title
|
||||
$alert-md-sub-title-text-color: $text-color !default;
|
||||
@@ -76,7 +62,7 @@ $alert-md-message-padding-bottom: $alert-md-message-padding-top !def
|
||||
$alert-md-message-padding-start: $alert-md-message-padding-end !default;
|
||||
|
||||
/// @prop - Font size of the alert message
|
||||
$alert-md-message-font-size: dynamic-font(16px) !default;
|
||||
$alert-md-message-font-size: 16px !default;
|
||||
|
||||
/// @prop - Text color of the alert message
|
||||
$alert-md-message-text-color: $text-color-step-450 !default;
|
||||
@@ -171,6 +157,9 @@ $alert-md-button-text-color: ion-color(primary, base) !default;
|
||||
/// @prop - Background color of the alert button
|
||||
$alert-md-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background color of the alert activated button
|
||||
$alert-md-button-background-color-activated: ion-color(primary, base, .04) !default;
|
||||
|
||||
/// @prop - Border radius of the alert button
|
||||
$alert-md-button-border-radius: 2px !default;
|
||||
|
||||
@@ -250,7 +239,7 @@ $alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top
|
||||
$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px !default;
|
||||
|
||||
/// @prop - Font size of the label for the radio alert
|
||||
$alert-md-radio-label-font-size: dynamic-font(16px) !default;
|
||||
$alert-md-radio-label-font-size: 16px !default;
|
||||
|
||||
/// @prop - Text color of the label for the radio alert
|
||||
$alert-md-radio-label-text-color: $text-color-step-150 !default;
|
||||
@@ -325,7 +314,7 @@ $alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-e
|
||||
$alert-md-checkbox-label-text-color: $text-color-step-150 !default;
|
||||
|
||||
/// @prop - Font size of the label for the checkbox in the alert
|
||||
$alert-md-checkbox-label-font-size: dynamic-font(16px) !default;
|
||||
$alert-md-checkbox-label-font-size: 16px !default;
|
||||
|
||||
/// @prop - Height of the tappable inputs in the checkbox alert
|
||||
$alert-md-tappable-height: $item-md-min-height !default;
|
||||
|
||||
@@ -84,59 +84,17 @@
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Alert has a maximum height in scenarios
|
||||
* such as the MD alert on tablet devices.
|
||||
* As a result, we need to make sure the inner
|
||||
* containers can scroll otherwise content
|
||||
* may be cut off.
|
||||
*/
|
||||
.alert-message,
|
||||
.alert-input-group {
|
||||
.alert-message {
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
.alert-checkbox-label,
|
||||
.alert-radio-label {
|
||||
/**
|
||||
* This allows long words to wrap to the next line
|
||||
* instead of flowing outside of the container.
|
||||
*
|
||||
* The "anywhere" keyword should be used instead
|
||||
* of the "break-word" keyword since the parent
|
||||
* container is using flexbox. Flex relies on min-content and
|
||||
* max-content intrinsic sizes to structure the layout. Flex will
|
||||
* wrap content only until it reaches its min-content intrinsic size
|
||||
* which in this case is equal to the longest word in this container.
|
||||
* "break-word" does not shrink the min-content intrinsic size
|
||||
* of the flex item which causes the long word to still overflow.
|
||||
* "anywhere" on the other hand does shrink the min-content
|
||||
* intrinsic size which allows the long word to wrap to the next line.
|
||||
*/
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/**
|
||||
* Scrollbars on mobile devices will be hidden.
|
||||
* Users can still scroll the content by swiping.
|
||||
* If a user has a fine pointing device, such as a
|
||||
* mouse or trackpad, then scrollbars will be
|
||||
* visible. This allows users to scroll the
|
||||
* content with their pointing device.
|
||||
* Otherwise, the user would have to use the
|
||||
* keyboard to navigate through the options.
|
||||
* This may not be intuitive for users who
|
||||
* are not familiar with keyboard navigation.
|
||||
*/
|
||||
@media (any-pointer: coarse) {
|
||||
.alert-checkbox-group::-webkit-scrollbar,
|
||||
.alert-radio-group::-webkit-scrollbar,
|
||||
.alert-message::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.alert-checkbox-group::-webkit-scrollbar,
|
||||
.alert-radio-group::-webkit-scrollbar,
|
||||
.alert-message::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert-input {
|
||||
@@ -194,8 +152,6 @@
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
@@ -228,7 +184,7 @@
|
||||
text-align: start;
|
||||
appearance: none;
|
||||
|
||||
contain: content;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.alert-button,
|
||||
|
||||
@@ -3,8 +3,6 @@ import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpda
|
||||
import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
|
||||
import type { Gesture } from '@utils/gesture';
|
||||
import { createButtonActiveGesture } from '@utils/gesture/button-active';
|
||||
import { raf } from '@utils/helpers';
|
||||
import { createLockController } from '@utils/lock-controller';
|
||||
import {
|
||||
createDelegateController,
|
||||
createTriggerController,
|
||||
@@ -47,7 +45,6 @@ import { mdLeaveAnimation } from './animations/md.leave';
|
||||
})
|
||||
export class Alert implements ComponentInterface, OverlayInterface {
|
||||
private readonly delegateController = createDelegateController(this);
|
||||
private readonly lockController = createLockController();
|
||||
private readonly triggerController = createTriggerController();
|
||||
private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
|
||||
private activeId?: string;
|
||||
@@ -56,6 +53,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
private processedButtons: AlertButton[] = [];
|
||||
private wrapperEl?: HTMLElement;
|
||||
private gesture?: Gesture;
|
||||
private currentTransition?: Promise<any>;
|
||||
|
||||
presented = false;
|
||||
lastFocus?: HTMLElement;
|
||||
@@ -228,15 +226,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
onKeydown(ev: any) {
|
||||
const inputTypes = new Set(this.processedInputs.map((i) => i.type));
|
||||
|
||||
/**
|
||||
* Based on keyboard navigation requirements, the
|
||||
* checkbox should not respond to the enter keydown event.
|
||||
*/
|
||||
if (inputTypes.has('checkbox') && ev.key === 'Enter') {
|
||||
ev.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// The only inputs we want to navigate between using arrow keys are the radios
|
||||
// ignore the keydown event if it is not on a radio button
|
||||
if (
|
||||
@@ -357,36 +346,19 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
|
||||
componentDidLoad() {
|
||||
/**
|
||||
* Only create gesture if:
|
||||
* 1. A gesture does not already exist
|
||||
* 2. App is running in iOS mode
|
||||
* 3. A wrapper ref exists
|
||||
* Do not create gesture if:
|
||||
* 1. A gesture already exists
|
||||
* 2. App is running in MD mode
|
||||
* 3. A wrapper ref does not exist
|
||||
*/
|
||||
if (!this.gesture && getIonMode(this) === 'ios' && this.wrapperEl) {
|
||||
this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl: HTMLElement) =>
|
||||
refEl.classList.contains('alert-button')
|
||||
);
|
||||
this.gesture.enable(true);
|
||||
if (this.gesture || getIonMode(this) === 'md' || !this.wrapperEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* If alert was rendered with isOpen="true"
|
||||
* then we should open alert immediately.
|
||||
*/
|
||||
if (this.isOpen === true) {
|
||||
raf(() => this.present());
|
||||
}
|
||||
|
||||
/**
|
||||
* When binding values in frameworks such as Angular
|
||||
* it is possible for the value to be set after the Web Component
|
||||
* initializes but before the value watcher is set up in Stencil.
|
||||
* As a result, the watcher callback may not be fired.
|
||||
* We work around this by manually calling the watcher
|
||||
* callback when the component has loaded and the watcher
|
||||
* is configured.
|
||||
*/
|
||||
this.triggerChanged();
|
||||
this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl: HTMLElement) =>
|
||||
refEl.classList.contains('alert-button')
|
||||
);
|
||||
this.gesture.enable(true);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -394,13 +366,23 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
*/
|
||||
@Method()
|
||||
async present(): Promise<void> {
|
||||
const unlock = await this.lockController.lock();
|
||||
/**
|
||||
* When using an inline alert
|
||||
* and dismissing an alert it is possible to
|
||||
* quickly present the alert while it is
|
||||
* dismissing. We need to await any current
|
||||
* transition to allow the dismiss to finish
|
||||
* before presenting again.
|
||||
*/
|
||||
if (this.currentTransition !== undefined) {
|
||||
await this.currentTransition;
|
||||
}
|
||||
|
||||
await this.delegateController.attachViewToDom();
|
||||
|
||||
await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
|
||||
|
||||
unlock();
|
||||
this.currentTransition = present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
|
||||
await this.currentTransition;
|
||||
this.currentTransition = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -414,16 +396,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
*/
|
||||
@Method()
|
||||
async dismiss(data?: any, role?: string): Promise<boolean> {
|
||||
const unlock = await this.lockController.lock();
|
||||
|
||||
const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
|
||||
this.currentTransition = dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
|
||||
const dismissed = await this.currentTransition;
|
||||
|
||||
if (dismissed) {
|
||||
this.delegateController.removeViewFromDom();
|
||||
}
|
||||
|
||||
unlock();
|
||||
|
||||
return dismissed;
|
||||
}
|
||||
|
||||
@@ -687,7 +666,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
<div class={alertButtonGroupClass}>
|
||||
{buttons.map((button) => (
|
||||
<button
|
||||
{...button.htmlAttributes}
|
||||
type="button"
|
||||
id={button.id}
|
||||
class={buttonClass(button)}
|
||||
|
||||
@@ -10,10 +10,10 @@ $alert-min-width: 250px !default;
|
||||
$alert-max-height: 90% !default;
|
||||
|
||||
/// @prop - Line height of the alert button
|
||||
$alert-button-line-height: dynamic-font(20px) !default;
|
||||
$alert-button-line-height: 20px !default;
|
||||
|
||||
/// @prop - Font size of the alert button
|
||||
$alert-button-font-size: dynamic-font(14px) !default;
|
||||
$alert-button-font-size: 14px !default;
|
||||
|
||||
/// @prop - Minimum height of a textarea in the alert
|
||||
$alert-input-min-height: 37px !default;
|
||||
|
||||
@@ -28,67 +28,6 @@ const testAria = async (
|
||||
expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
|
||||
};
|
||||
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('alert: text wrapping'), () => {
|
||||
test('should break on words and white spaces for radios', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-alert header='Text Wrapping'></ion-alert>
|
||||
|
||||
<script>
|
||||
const alert = document.querySelector('ion-alert');
|
||||
alert.inputs = [
|
||||
{ type: 'radio', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
|
||||
{ type: 'radio', value: 'b', label: 'These are separate words that should wrap' }
|
||||
];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
const alert = page.locator('ion-alert');
|
||||
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.present());
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`alert-radio-text-wrap`));
|
||||
});
|
||||
test('should break on words and white spaces for checkboxes', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-alert header='Text Wrapping'></ion-alert>
|
||||
|
||||
<script>
|
||||
const alert = document.querySelector('ion-alert');
|
||||
alert.inputs = [
|
||||
{ type: 'checkbox', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
|
||||
{ type: 'checkbox', value: 'b', label: 'These are separate words that should wrap' }
|
||||
];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
const alert = page.locator('ion-alert');
|
||||
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.present());
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-text-wrap`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
test.describe(title('alert: a11y'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
@@ -121,174 +60,5 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
|
||||
test('should allow for manually specifying aria attributes', async ({ page }) => {
|
||||
await testAria(page, 'customAria', 'Custom title', 'Custom description');
|
||||
});
|
||||
|
||||
test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({
|
||||
page,
|
||||
}) => {
|
||||
const didPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
|
||||
const button = page.locator('#ariaLabelButton');
|
||||
await button.click();
|
||||
|
||||
await didPresent.next();
|
||||
|
||||
const alertButton = page.locator('ion-alert .alert-button');
|
||||
|
||||
await expect(alertButton).toHaveAttribute('aria-labelledby', 'close-label');
|
||||
await expect(alertButton).toHaveAttribute('aria-label', 'close button');
|
||||
});
|
||||
|
||||
test('should not toggle the checkbox when pressing the Enter key', async ({ page }) => {
|
||||
const didPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
|
||||
const button = page.locator('#checkbox');
|
||||
await button.click();
|
||||
|
||||
await didPresent.next();
|
||||
|
||||
const alertCheckbox = page.locator('ion-alert .alert-checkbox');
|
||||
const ariaChecked = await alertCheckbox.getAttribute('aria-checked');
|
||||
|
||||
await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked!);
|
||||
|
||||
await alertCheckbox.press('Enter');
|
||||
await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked!);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* This behavior does not vary across directions
|
||||
*/
|
||||
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('alert: font scaling'), () => {
|
||||
test('should scale text on larger font sizes', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
html {
|
||||
font-size: 36px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
|
||||
|
||||
<script>
|
||||
const alert = document.querySelector('ion-alert');
|
||||
alert.buttons = ['Ok', 'Cancel'];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const alert = page.locator('ion-alert');
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.present());
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`alert-scale`));
|
||||
});
|
||||
test('should scale text on larger font sizes with checkboxes', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
html {
|
||||
font-size: 36px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
|
||||
|
||||
<script>
|
||||
const alert = document.querySelector('ion-alert');
|
||||
alert.inputs = [
|
||||
{ type: 'checkbox', value: 'a', label: 'Checkbox A', checked: true },
|
||||
{ type: 'checkbox', value: 'b', label: 'Checkbox B' },
|
||||
{ type: 'checkbox', value: 'c', label: 'Checkbox C' },
|
||||
{ type: 'checkbox', value: 'd', label: 'Checkbox D' },
|
||||
];
|
||||
alert.buttons = ['Ok', 'Cancel'];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const alert = page.locator('ion-alert');
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.present());
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-scale`));
|
||||
});
|
||||
test('should scale text on larger font sizes with radios', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
html {
|
||||
font-size: 36px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
|
||||
|
||||
<script>
|
||||
const alert = document.querySelector('ion-alert');
|
||||
alert.inputs = [
|
||||
{ type: 'radio', value: 'a', label: 'Radio A', checked: true },
|
||||
{ type: 'radio', value: 'b', label: 'Radio B' },
|
||||
{ type: 'radio', value: 'c', label: 'Radio C' },
|
||||
{ type: 'radio', value: 'd', label: 'Radio D' },
|
||||
];
|
||||
alert.buttons = ['Ok', 'Cancel'];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const alert = page.locator('ion-alert');
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.present());
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`alert-radio-scale`));
|
||||
});
|
||||
test('should scale text on larger font sizes with text fields', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
html {
|
||||
font-size: 36px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
|
||||
|
||||
<script>
|
||||
const alert = document.querySelector('ion-alert');
|
||||
alert.inputs = [
|
||||
{ type: 'text', value: 'My Input', label: 'Input' },
|
||||
{ type: 'textarea', value: 'My Textarea', label: 'Textarea' },
|
||||
];
|
||||
alert.buttons = ['Ok', 'Cancel'];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const alert = page.locator('ion-alert');
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.present());
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`alert-text-fields-scale`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user