Compare commits

..

13 Commits

Author SHA1 Message Date
Shawn Taylor
ef95520e08 Rename tag; upsert instead of recreate 2023-09-22 14:18:01 -04:00
Shawn Taylor
604c0246c9 Try to recreate comment 2023-09-22 13:51:07 -04:00
Shawn Taylor
0f5d5df9e1 Try to recreate comment 2023-09-22 13:20:28 -04:00
Shawn Taylor
b22a670d77 Combine actions 2023-09-22 13:16:12 -04:00
Shawn Taylor
8178a9df96 Continue on error 2023-09-22 13:14:38 -04:00
Shawn Taylor
59a911bcb0 Try to recreate comment 2023-09-22 13:04:16 -04:00
Shawn Taylor
e7aedce8b7 Merge branch 'main' into dev-build-comment 2023-09-22 12:07:00 -04:00
Shawn Taylor
e17879fb23 output pr number 2023-09-21 17:45:42 -04:00
Shawn Taylor
d0abe6681c fix step 2023-09-21 17:29:00 -04:00
Shawn Taylor
41200ed7ed Get PR 2023-09-21 16:47:54 -04:00
Shawn Taylor
5c9e1d3c83 Checkout 2023-09-21 15:04:24 -04:00
Shawn Taylor
e2fa2e565c Comment on PR 2023-09-21 13:44:17 -04:00
Shawn Taylor
288b237a31 Add empty job 2023-09-21 13:37:25 -04:00
1487 changed files with 8667 additions and 24151 deletions

7
.github/CODEOWNERS vendored
View File

@@ -81,3 +81,10 @@
/core/src/css/ @brandyscarney
/core/src/themes/ @brandyscarney
# Tests
**/datetime.e2e.ts @mapsandapps
**/datetime-button.e2e.ts @mapsandapps
**/icon.e2e.ts @mapsandapps
**/loading.e2e.ts @mapsandapps

View File

@@ -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

View File

@@ -1,10 +1,5 @@
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:
@@ -16,13 +11,6 @@ runs:
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

View File

@@ -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]

View File

@@ -1,4 +1,4 @@
name: 'Ionic Dev Build'
name: "Ionic Dev Build"
on:
workflow_dispatch:
@@ -40,3 +40,26 @@ jobs:
steps:
- run: echo ${{ needs.create-dev-hash.outputs.dev-hash }}
comment-on-pr:
runs-on: ubuntu-latest
needs: [create-dev-hash, release-ionic]
continue-on-error: true
outputs:
pr-number: ${{ steps.PR.outputs.number }}
steps:
- name: Checkout
uses: actions/checkout@v3
- uses: 8BitJonny/gh-get-current-pr@2.2.0
id: PR
- name: Comment on PR
uses: thollander/actions-comment-pull-request@v2
with:
message: |
A dev build has been generated for this PR. To use the dev build, update your Ionic packages to the following version:
```
${{ needs.create-dev-hash.outputs.dev-hash }}
```
pr_number: ${{ steps.PR.outputs.number }}
comment_tag: dev-build

View File

@@ -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]
@@ -52,7 +47,7 @@ jobs:
- uses: actions/checkout@v3
- uses: ./.github/workflows/actions/test-core-spec
with:
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
stencil-version: nightly
test-core-screenshot:
strategy:

View File

@@ -3,134 +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.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)

View File

@@ -3,126 +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.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)

View File

@@ -394,7 +394,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
@@ -1445,7 +1445,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>

721
core/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,6 @@
{
"name": "@ionic/core",
"version": "7.5.4",
"version": "7.4.1",
"description": "Base components for Ionic",
"keywords": [
"ionic",
@@ -31,30 +31,30 @@
"loader/"
],
"dependencies": {
"@stencil/core": "^4.7.1",
"ionicons": "^7.2.1",
"@stencil/core": "^4.3.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.4.1",
"@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",
"@jest/core": "^27.5.1",
"@playwright/test": "^1.39.0",
"@playwright/test": "^1.38.1",
"@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.8.2",
"@stencil/react-output-target": "^0.5.3",
"@stencil/sass": "^3.0.7",
"@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",
@@ -66,10 +66,11 @@
"jest-cli": "^27.5.1",
"prettier": "^2.6.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"

View File

File diff suppressed because one or more lines are too long

View File

File diff suppressed because it is too large Load Diff

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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;

View File

@@ -126,10 +126,7 @@
justify-content: flex-end;
height: 100%;
/* Fallback for browsers that do not support dvh */
max-height: 100vh;
max-height: 100dvh;
}
.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 {

View File

@@ -86,37 +86,3 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
});
});
});
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`));
});
});
});

View File

@@ -255,19 +255,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;

View File

@@ -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;

View File

@@ -192,10 +192,6 @@
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;

View File

@@ -5,7 +5,7 @@
// --------------------------------------------------
/// @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;
@@ -38,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;
@@ -62,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;
@@ -157,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;
@@ -236,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;
@@ -311,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;

View File

@@ -91,44 +91,10 @@
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 {

View File

@@ -228,15 +228,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 (

View File

@@ -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;

View File

@@ -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 }) => {
@@ -137,158 +76,5 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
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`));
});
});
});

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

View File

@@ -25,7 +25,6 @@
<ion-button id="noMessage" expand="block" onclick="presentNoMessage()">No Message</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="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
</main>
<script>
@@ -95,21 +94,6 @@
],
});
}
function presentAlertCheckbox() {
openAlert({
header: 'Checkbox',
inputs: [
{
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
checked: true,
},
],
buttons: ['OK'],
});
}
</script>
</body>
</html>

View File

@@ -1,6 +1,5 @@
import type { ComponentInterface } from '@stencil/core';
import { Build, Component, Element, Host, Method, h } from '@stencil/core';
import type { FocusVisibleUtility } from '@utils/focus-visible';
import { isPlatform } from '@utils/platform';
import { config } from '../../global/config';
@@ -11,7 +10,7 @@ import { getIonMode } from '../../global/ionic-global';
styleUrl: 'app.scss',
})
export class App implements ComponentInterface {
private focusVisible?: FocusVisibleUtility;
private focusVisible?: any; // TODO(FW-2832): type
@Element() el!: HTMLElement;

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 34 KiB

View File

@@ -13,26 +13,10 @@
--color: #{$back-button-ios-color};
--icon-margin-end: 1px;
--icon-margin-start: -4px;
/**
* The icon should be sized relative
* to the size of the text which is
* why we use em here instead of rem.
* This allows developers to override
* the text font size while ensuring that
* the icon is sized relative to that.
*/
--icon-font-size: 1.6em;
--min-height: 32px;
/**
* Main content should be prioritized over the back
* button which is why a maximum font size is applied.
* Also, we want the text to remain readable
* so a minimum font size is applied.
* Using 1.294 instead of 1.3 aligns the text
* with the icon a bit nicer in Firefox.
*/
font-size: dynamic-font-clamp(1, 17px, 1.294);
font-size: 17px;
}
.button-native {

View File

@@ -13,14 +13,14 @@
--color: #{$back-button-md-color};
--icon-margin-end: 0;
--icon-margin-start: 0;
--icon-font-size: #{dynamic-font(24px)};
--icon-font-size: 24px;
--icon-font-weight: normal;
--min-height: 32px;
--min-width: 44px;
--padding-start: 12px;
--padding-end: 12px;
font-size: dynamic-font(14px);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
@@ -30,14 +30,7 @@
--border-radius: 50%;
min-width: 48px;
min-height: 48px;
/**
* This allows the icon only button to
* keep its circular shape even when the
* text scales up.
*/
aspect-ratio: 1 / 1;
height: 48px;
}
.button-native {

View File

@@ -1,29 +0,0 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('back-button: font scaling'), () => {
test('should scale text on larger font sizes', async ({ page }) => {
await page.setContent(
`
<style>
html {
font-size: 36px;
}
</style>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button default-href="/" text="Back"></ion-back-button>
</ion-buttons>
</ion-toolbar>
`,
config
);
const backButton = page.locator('ion-back-button');
await expect(backButton).toHaveScreenshot(screenshot(`back-button-scale`));
});
});
});

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 51 KiB

View File

@@ -6,13 +6,4 @@
:host {
@include border-radius($badge-ios-border-radius);
/**
* "-apple-system-body" on iOS never goes smaller than
* 14px according to https://developer.apple.com/design/human-interface-guidelines/typography#Specifications.
* However, we still keep the max() usage here for consistency
* with other components and in case "-apple-system-body" does
* go smaller than 14px in the future.
*/
font-size: dynamic-font-min(1, $badge-baseline-font-size);
}

View File

@@ -18,11 +18,8 @@ $badge-padding-start: $badge-padding-end !default;
/// @prop - Minimum width of the badge
$badge-min-width: 10px !default;
/// @prop - Baseline font size of the badge
$badge-baseline-font-size: 13px !default;
/// @prop - Font size of the badge
$badge-font-size: dynamic-font($badge-baseline-font-size) !default;
$badge-font-size: 13px !default;
/// @prop - Font weight of the badge
$badge-font-weight: bold !default;

View File

@@ -1,25 +0,0 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('badge: font scaling'), () => {
test('should scale text on larger font sizes', async ({ page }) => {
await page.setContent(
`
<style>
html {
font-size: 36px;
}
</style>
<ion-badge>123</ion-badge>
`,
config
);
const badge = page.locator('ion-badge');
await expect(badge).toHaveScreenshot(screenshot(`badge-scale`));
});
});
});

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -10,14 +10,6 @@
--color-hover: #{$breadcrumb-ios-color-active};
--color-focused: var(--color-active);
--background-focused: #{$breadcrumb-ios-background-focused};
/**
* Main content should be prioritized
* on iOS, so we set max font size for breadcrumbs.
* Breadcrumbs can be placed in the content too, so
* we add a min font size to keep the text legible.
*/
font-size: dynamic-font-clamp(1, $breadcrumb-baseline-font-size, 1.375);
}
:host(.breadcrumb-active) {
@@ -66,7 +58,7 @@
::slotted(ion-icon) {
color: $breadcrumb-ios-icon-color;
font-size: dynamic-font-max(18px, 1.2);
font-size: 18px;
}
::slotted(ion-icon[slot="start"]) {
@@ -100,7 +92,3 @@
.breadcrumbs-collapsed-indicator:focus {
background: $breadcrumb-ios-indicator-background-focused;
}
.breadcrumbs-collapsed-indicator ion-icon {
font-size: dynamic-font-max(22px, 1);
}

View File

@@ -53,7 +53,7 @@
::slotted(ion-icon) {
color: $breadcrumb-md-icon-color;
font-size: dynamic-font(18px);
font-size: 18px;
}
::slotted(ion-icon[slot="start"]) {

View File

@@ -156,5 +156,5 @@
.breadcrumbs-collapsed-indicator ion-icon {
margin-top: 1px;
font-size: dynamic-font(22px);
font-size: 22px;
}

View File

@@ -6,10 +6,8 @@
/// @prop - Font weight of the breadcrumb
$breadcrumb-font-weight: 400 !default;
$breadcrumb-baseline-font-size: 16px !default;
/// @prop - Font size of the breadcrumb
$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default;
$breadcrumb-font-size: 16px !default;
/// @prop - Color of the breadcrumb separator
$breadcrumb-separator-color: var(--ion-color-step-550, #73849a) !default;

View File

@@ -12,30 +12,3 @@ configs().forEach(({ config, title }) => {
});
});
});
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('breadcrumbs: font scaling'), () => {
test('should scale text on larger font sizes', async ({ page }) => {
await page.setContent(
`
<style>
html {
font-size: 36px;
}
</style>
<ion-breadcrumbs max-items="2" items-before-collapse="1">
<ion-breadcrumb>Home</ion-breadcrumb>
<ion-breadcrumb>Electronics</ion-breadcrumb>
<ion-breadcrumb>Photography</ion-breadcrumb>
</ion-breadcrumbs>
`,
config
);
const breadcrumbs = page.locator('ion-breadcrumbs');
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-scale`));
});
});
});

Some files were not shown because too many files have changed in this diff Show More