mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
37 Commits
ld/datetim
...
v7.5.1
| Author | SHA1 | Date | |
|---|---|---|---|
|
38f2a027f0 | ||
|
|
3a3ebcf659 | ||
|
|
feda7a0e96 | ||
|
|
ed7a5e5f4a | ||
|
|
3d96ccb7b2 | ||
|
|
fe47594dc0 | ||
|
|
fa78676d57 | ||
|
|
1ba9973857 | ||
|
|
dd93e0b268 | ||
|
|
79725d7d7a | ||
|
|
d669fbefd2 | ||
|
|
f14a59c5e0 | ||
|
|
dcbf45101f | ||
|
|
4837f0debf | ||
|
|
59f23dcc2c | ||
|
|
053b7d59d3 | ||
|
|
e097439abf | ||
|
|
dc2f55f0fb | ||
|
|
895bcb04d0 | ||
|
|
2caaf6a526 | ||
|
|
cb47273f26 | ||
|
|
f8067819ee | ||
|
|
57e2476370 | ||
|
|
4f43d5ce08 | ||
|
|
8601977aa7 | ||
|
|
c37b3d8bf4 | ||
|
|
8450564eba | ||
|
|
b5261e0f41 | ||
|
|
6da82aab81 | ||
|
|
72b389993d | ||
|
|
897ff6f749 | ||
|
|
01167fc185 | ||
|
|
597bc3f085 | ||
|
|
d0d9e35c37 | ||
|
|
0b7f6cf573 | ||
|
|
bd0ee0b316 | ||
|
|
6b9c6fcd4d |
7
.github/CODEOWNERS
vendored
7
.github/CODEOWNERS
vendored
@@ -81,10 +81,3 @@
|
||||
|
||||
/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
|
||||
|
||||
12
.github/workflows/actions/build-core/action.yml
vendored
12
.github/workflows/actions/build-core/action.yml
vendored
@@ -1,5 +1,10 @@
|
||||
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:
|
||||
@@ -11,6 +16,13 @@ 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
|
||||
|
||||
8
.github/workflows/build.yml
vendored
8
.github/workflows/build.yml
vendored
@@ -4,6 +4,12 @@ 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
|
||||
@@ -18,6 +24,8 @@ 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]
|
||||
|
||||
59
CHANGELOG.md
59
CHANGELOG.md
@@ -3,6 +3,65 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [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))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **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)
|
||||
|
||||
|
||||
|
||||
@@ -3,6 +3,62 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [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)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **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)
|
||||
|
||||
|
||||
|
||||
@@ -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,"h12" | "h23" | undefined,undefined,false,false
|
||||
ion-datetime,prop,hourCycle,"h11" | "h12" | "h23" | "h24" | 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,6 +1445,7 @@ 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>
|
||||
|
||||
693
core/package-lock.json
generated
693
core/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.4.3",
|
||||
"version": "7.5.1",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -31,20 +31,20 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.4.1",
|
||||
"ionicons": "7.1.0",
|
||||
"@stencil/core": "^4.5.0",
|
||||
"ionicons": "^7.2.1",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.7.3",
|
||||
"@capacitor/core": "^5.4.2",
|
||||
"@axe-core/playwright": "^4.8.1",
|
||||
"@capacitor/core": "^5.5.0",
|
||||
"@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.38.1",
|
||||
"@playwright/test": "^1.39.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.2",
|
||||
@@ -53,8 +53,8 @@
|
||||
"@stencil/vue-output-target": "^0.8.6",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.17.0",
|
||||
"@typescript-eslint/parser": "^5.17.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
"@typescript-eslint/parser": "^6.7.2",
|
||||
"clean-css-cli": "^5.6.1",
|
||||
"domino": "^2.1.6",
|
||||
"eslint": "^7.32.0",
|
||||
@@ -66,11 +66,10 @@
|
||||
"jest-cli": "^27.5.1",
|
||||
"prettier": "^2.6.1",
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.26.10",
|
||||
"sass": "^1.33.0",
|
||||
"serve": "^14.0.1",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-order": "^4.1.0",
|
||||
"typescript": "^4.0.5"
|
||||
"stylelint-order": "^4.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
|
||||
|
||||
File diff suppressed because one or more lines are too long
24
core/src/components.d.ts
vendored
24
core/src/components.d.ts
vendored
@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
|
||||
import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
|
||||
import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
|
||||
import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
|
||||
import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
import { SpinnerTypes } from "./components/spinner/spinner-configs";
|
||||
import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
|
||||
import { CounterFormatter } from "./components/item/item-interface";
|
||||
@@ -39,7 +39,7 @@ import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
|
||||
import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
|
||||
import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
|
||||
import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
|
||||
import { ToastButton, ToastLayout, ToastPosition } from "./components/toast/toast-interface";
|
||||
import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface";
|
||||
import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
|
||||
export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
|
||||
export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
|
||||
@@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
|
||||
export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
|
||||
export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
|
||||
export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
|
||||
export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
|
||||
export { SpinnerTypes } from "./components/spinner/spinner-configs";
|
||||
export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
|
||||
export { CounterFormatter } from "./components/item/item-interface";
|
||||
@@ -75,7 +75,7 @@ export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
|
||||
export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
|
||||
export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
|
||||
export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
|
||||
export { ToastButton, ToastLayout, ToastPosition } from "./components/toast/toast-interface";
|
||||
export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface";
|
||||
export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
|
||||
export namespace Components {
|
||||
interface IonAccordion {
|
||||
@@ -865,7 +865,7 @@ export namespace Components {
|
||||
/**
|
||||
* The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
|
||||
*/
|
||||
"hourCycle"?: 'h23' | 'h12';
|
||||
"hourCycle"?: DatetimeHourCycle;
|
||||
/**
|
||||
* Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
|
||||
*/
|
||||
@@ -3157,9 +3157,13 @@ export namespace Components {
|
||||
"onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
|
||||
"overlayIndex": number;
|
||||
/**
|
||||
* The position of the toast on the screen.
|
||||
* The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
|
||||
*/
|
||||
"position": ToastPosition;
|
||||
/**
|
||||
* The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
|
||||
*/
|
||||
"positionAnchor"?: HTMLElement | string;
|
||||
/**
|
||||
* Present the toast overlay after it has been created.
|
||||
*/
|
||||
@@ -4889,7 +4893,7 @@ declare namespace LocalJSX {
|
||||
/**
|
||||
* The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
|
||||
*/
|
||||
"hourCycle"?: 'h23' | 'h12';
|
||||
"hourCycle"?: DatetimeHourCycle;
|
||||
/**
|
||||
* Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
|
||||
*/
|
||||
@@ -7308,9 +7312,13 @@ declare namespace LocalJSX {
|
||||
"onWillPresent"?: (event: IonToastCustomEvent<void>) => void;
|
||||
"overlayIndex": number;
|
||||
/**
|
||||
* The position of the toast on the screen.
|
||||
* The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
|
||||
*/
|
||||
"position"?: ToastPosition;
|
||||
/**
|
||||
* The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
|
||||
*/
|
||||
"positionAnchor"?: HTMLElement | string;
|
||||
/**
|
||||
* If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
|
||||
*/
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
@@ -131,11 +131,11 @@
|
||||
.action-sheet-button {
|
||||
@include padding($action-sheet-ios-button-padding);
|
||||
|
||||
height: $action-sheet-ios-button-height;
|
||||
min-height: $action-sheet-ios-button-height;
|
||||
|
||||
font-size: $action-sheet-ios-button-font-size;
|
||||
|
||||
contain: strict;
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.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: 13px !default;
|
||||
$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default;
|
||||
|
||||
/// @prop - Font weight of the action sheet title
|
||||
$action-sheet-ios-title-font-weight: 400 !default;
|
||||
@@ -75,7 +75,7 @@ $action-sheet-ios-title-border-color: rgba($text-col
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the action sheet sub title
|
||||
$action-sheet-ios-sub-title-font-size: 13px !default;
|
||||
$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet sub title
|
||||
$action-sheet-ios-sub-title-padding-top: 6px !default;
|
||||
@@ -97,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: 18px !default;
|
||||
$action-sheet-ios-button-padding: 14px !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: 28px !default;
|
||||
$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 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: 20px !default;
|
||||
$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default;
|
||||
|
||||
/// @prop - Border color alpha of the action sheet button
|
||||
$action-sheet-ios-button-border-color-alpha: .08 !default;
|
||||
|
||||
@@ -67,13 +67,13 @@
|
||||
|
||||
position: relative;
|
||||
|
||||
height: $action-sheet-md-button-height;
|
||||
min-height: $action-sheet-md-button-height;
|
||||
|
||||
font-size: $action-sheet-md-button-font-size;
|
||||
|
||||
text-align: $action-sheet-md-text-align;
|
||||
|
||||
contain: strict;
|
||||
contain: content;
|
||||
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: 16px !default;
|
||||
$action-sheet-md-title-font-size: dynamic-font(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: 14px !default;
|
||||
$action-sheet-md-sub-title-font-size: dynamic-font(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: 16px !default;
|
||||
$action-sheet-md-button-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet button
|
||||
$action-sheet-md-button-padding-top: 0 !default;
|
||||
$action-sheet-md-button-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the action sheet button
|
||||
$action-sheet-md-button-padding-end: 16px !default;
|
||||
@@ -91,7 +91,7 @@ $action-sheet-md-button-background: transparent !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the icon in the action sheet button
|
||||
$action-sheet-md-icon-font-size: 24px !default;
|
||||
$action-sheet-md-icon-font-size: dynamic-font(24px) !default;
|
||||
|
||||
/// @prop - Margin top of the icon in the action sheet button
|
||||
$action-sheet-md-icon-margin-top: 0 !default;
|
||||
|
||||
@@ -126,7 +126,10 @@
|
||||
justify-content: flex-end;
|
||||
|
||||
height: 100%;
|
||||
|
||||
/* Fallback for browsers that do not support dvh */
|
||||
max-height: 100vh;
|
||||
max-height: 100dvh;
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
|
||||
@@ -86,3 +86,37 @@ 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`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -255,13 +255,19 @@
|
||||
}
|
||||
|
||||
.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-min-height;
|
||||
height: $alert-ios-button-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: 14px !default;
|
||||
$alert-ios-font-size: dynamic-font-min(1, 14px) !default;
|
||||
|
||||
/// @prop - Max width of the alert
|
||||
$alert-ios-max-width: 270px !default;
|
||||
$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !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: 17px !default;
|
||||
$alert-ios-title-font-size: dynamic-font-min(1, 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: 14px !default;
|
||||
$alert-ios-sub-title-font-size: dynamic-font-min(1, 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: 13px !default;
|
||||
$alert-ios-message-font-size: dynamic-font-min(1, 13px) !default;
|
||||
|
||||
/// @prop - Text align of the alert message
|
||||
$alert-ios-message-text-align: center !default;
|
||||
@@ -137,11 +137,23 @@ $alert-ios-button-margin: 0 !default;
|
||||
/// @prop - Min width of the alert button
|
||||
$alert-ios-button-min-width: 50% !default;
|
||||
|
||||
/// @prop - Minimum height of the alert button
|
||||
$alert-ios-button-min-height: 44px !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 - Font size of the alert button
|
||||
$alert-ios-button-font-size: 17px !default;
|
||||
$alert-ios-button-font-size: dynamic-font-min(1, 17px) !default;
|
||||
|
||||
/// @prop - Color of the text in the alert button
|
||||
$alert-ios-button-text-color: ion-color(primary, base) !default;
|
||||
@@ -252,10 +264,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: 24px !default;
|
||||
$alert-ios-checkbox-size: dynamic-font-max(24px, 2.75) !default;
|
||||
|
||||
/// @prop - Border width of the checkbox in the alert
|
||||
$alert-ios-checkbox-border-width: 1px !default;
|
||||
$alert-ios-checkbox-border-width: dynamic-font(1px) !default;
|
||||
|
||||
/// @prop - Border style of the checkbox in the alert
|
||||
$alert-ios-checkbox-border-style: solid !default;
|
||||
@@ -276,16 +288,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: math.div($alert-ios-checkbox-size, 6) !default;
|
||||
$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 6) !default;
|
||||
|
||||
/// @prop - Start of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-start: math.div($alert-ios-checkbox-size, 3) + 1px !default;
|
||||
$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3 + 1px) !default;
|
||||
|
||||
/// @prop - Width of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-width: math.div($alert-ios-checkbox-size, 6) + 1px !default;
|
||||
$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px) !default;
|
||||
|
||||
/// @prop - Height of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-height: $alert-ios-checkbox-size * 0.5 !default;
|
||||
$alert-ios-checkbox-icon-height: calc($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;
|
||||
|
||||
@@ -192,6 +192,10 @@
|
||||
|
||||
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;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the alert
|
||||
$alert-md-font-size: 14px !default;
|
||||
$alert-md-font-size: dynamic-font(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: 20px !default;
|
||||
$alert-md-title-font-size: dynamic-font(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: 16px !default;
|
||||
$alert-md-sub-title-font-size: dynamic-font(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: 16px !default;
|
||||
$alert-md-message-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Text color of the alert message
|
||||
$alert-md-message-text-color: $text-color-step-450 !default;
|
||||
@@ -239,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: 16px !default;
|
||||
$alert-md-radio-label-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Text color of the label for the radio alert
|
||||
$alert-md-radio-label-text-color: $text-color-step-150 !default;
|
||||
@@ -314,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: 16px !default;
|
||||
$alert-md-checkbox-label-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Height of the tappable inputs in the checkbox alert
|
||||
$alert-md-tappable-height: $item-md-min-height !default;
|
||||
|
||||
@@ -228,6 +228,15 @@ 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 (
|
||||
|
||||
@@ -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: 20px !default;
|
||||
$alert-button-line-height: dynamic-font(20px) !default;
|
||||
|
||||
/// @prop - Font size of the alert button
|
||||
$alert-button-font-size: 14px !default;
|
||||
$alert-button-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Minimum height of a textarea in the alert
|
||||
$alert-input-min-height: 37px !default;
|
||||
|
||||
@@ -76,5 +76,158 @@ 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`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -25,6 +25,7 @@
|
||||
<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>
|
||||
@@ -94,6 +95,21 @@
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function presentAlertCheckbox() {
|
||||
openAlert({
|
||||
header: 'Checkbox',
|
||||
inputs: [
|
||||
{
|
||||
type: 'checkbox',
|
||||
label: 'Checkbox 1',
|
||||
value: 'value1',
|
||||
checked: true,
|
||||
},
|
||||
],
|
||||
buttons: ['OK'],
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 35 KiB |
@@ -13,10 +13,26 @@
|
||||
--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;
|
||||
|
||||
font-size: 17px;
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
|
||||
.button-native {
|
||||
|
||||
@@ -13,14 +13,14 @@
|
||||
--color: #{$back-button-md-color};
|
||||
--icon-margin-end: 0;
|
||||
--icon-margin-start: 0;
|
||||
--icon-font-size: 24px;
|
||||
--icon-font-size: #{dynamic-font(24px)};
|
||||
--icon-font-weight: normal;
|
||||
--min-height: 32px;
|
||||
--min-width: 44px;
|
||||
--padding-start: 12px;
|
||||
--padding-end: 12px;
|
||||
|
||||
font-size: 14px;
|
||||
font-size: dynamic-font(14px);
|
||||
font-weight: 500;
|
||||
|
||||
text-transform: uppercase;
|
||||
@@ -30,7 +30,14 @@
|
||||
--border-radius: 50%;
|
||||
|
||||
min-width: 48px;
|
||||
height: 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;
|
||||
}
|
||||
|
||||
.button-native {
|
||||
|
||||
29
core/src/components/back-button/test/a11y/back-button.e2e.ts
Normal file
29
core/src/components/back-button/test/a11y/back-button.e2e.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
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`));
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
@@ -6,4 +6,13 @@
|
||||
|
||||
: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);
|
||||
}
|
||||
|
||||
@@ -18,8 +18,11 @@ $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: 13px !default;
|
||||
$badge-font-size: dynamic-font($badge-baseline-font-size) !default;
|
||||
|
||||
/// @prop - Font weight of the badge
|
||||
$badge-font-weight: bold !default;
|
||||
|
||||
25
core/src/components/badge/test/a11y/badge.e2e.ts
Normal file
25
core/src/components/badge/test/a11y/badge.e2e.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
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`));
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -10,6 +10,14 @@
|
||||
--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) {
|
||||
@@ -58,7 +66,7 @@
|
||||
::slotted(ion-icon) {
|
||||
color: $breadcrumb-ios-icon-color;
|
||||
|
||||
font-size: 18px;
|
||||
font-size: dynamic-font-max(18px, 1.2);
|
||||
}
|
||||
|
||||
::slotted(ion-icon[slot="start"]) {
|
||||
@@ -92,3 +100,7 @@
|
||||
.breadcrumbs-collapsed-indicator:focus {
|
||||
background: $breadcrumb-ios-indicator-background-focused;
|
||||
}
|
||||
|
||||
.breadcrumbs-collapsed-indicator ion-icon {
|
||||
font-size: dynamic-font-max(22px, 1);
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
::slotted(ion-icon) {
|
||||
color: $breadcrumb-md-icon-color;
|
||||
|
||||
font-size: 18px;
|
||||
font-size: dynamic-font(18px);
|
||||
}
|
||||
|
||||
::slotted(ion-icon[slot="start"]) {
|
||||
|
||||
@@ -156,5 +156,5 @@
|
||||
.breadcrumbs-collapsed-indicator ion-icon {
|
||||
margin-top: 1px;
|
||||
|
||||
font-size: 22px;
|
||||
font-size: dynamic-font(22px);
|
||||
}
|
||||
|
||||
@@ -6,8 +6,10 @@
|
||||
/// @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: 16px !default;
|
||||
$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default;
|
||||
|
||||
/// @prop - Color of the breadcrumb separator
|
||||
$breadcrumb-separator-color: var(--ion-color-step-550, #73849a) !default;
|
||||
|
||||
@@ -12,3 +12,30 @@ 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`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
@@ -24,20 +24,6 @@
|
||||
letter-spacing: #{$button-ios-letter-spacing};
|
||||
}
|
||||
|
||||
/**
|
||||
* The default buttons in a toolbar
|
||||
* have a different font size/weight
|
||||
* than buttons outside of a toolbar on iOS.
|
||||
* However, we still want the "size"/"strong"
|
||||
* properties to be usable in a toolbar, so we add
|
||||
* the .in-buttons selector such that we
|
||||
* can add the different font size/weight in a toolbar
|
||||
* but still let "size"/"strong" override it.
|
||||
*/
|
||||
:host(.in-buttons) {
|
||||
font-size: #{$toolbar-ios-button-font-size};
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// iOS Solid Button
|
||||
// --------------------------------------------------
|
||||
@@ -82,6 +68,25 @@
|
||||
}
|
||||
|
||||
|
||||
// iOS Toolbar Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
/**
|
||||
* The default buttons in a toolbar
|
||||
* have a different font size/weight
|
||||
* than buttons outside of a toolbar on iOS.
|
||||
* However, we still want the "size"/"strong"
|
||||
* properties to be usable in a toolbar, so we add
|
||||
* the .in-buttons selector such that we
|
||||
* can add the different font size/weight in a toolbar
|
||||
* but still let "size"/"strong" override it.
|
||||
*/
|
||||
:host(.in-buttons) {
|
||||
font-size: #{$toolbar-ios-button-font-size};
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
// iOS Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -127,7 +132,7 @@
|
||||
}
|
||||
|
||||
|
||||
// iOS strong Button
|
||||
// iOS Strong Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-strong) {
|
||||
|
||||
@@ -34,7 +34,9 @@ $button-ios-min-height: 3.1em !default;
|
||||
$button-ios-border-radius: 14px !default;
|
||||
|
||||
/// @prop - Font size of the button text
|
||||
$button-ios-font-size: 16px !default;
|
||||
/// The maximum font size is calculated by taking the default font size
|
||||
/// and multiplying it by 3, since 310% of the default is the maximum
|
||||
$button-ios-font-size: dynamic-font-max(16px, 3) !default;
|
||||
|
||||
/// @prop - Font weight of the button text
|
||||
$button-ios-font-weight: 500 !default;
|
||||
@@ -83,7 +85,9 @@ $button-ios-large-min-height: 3.1em !default;
|
||||
$button-ios-large-border-radius: 16px !default;
|
||||
|
||||
/// @prop - Font size of the large button
|
||||
$button-ios-large-font-size: 20px !default;
|
||||
/// The maximum font size is calculated by taking the default font size
|
||||
/// and multiplying it by 3, since 310% of the default is the maximum
|
||||
$button-ios-large-font-size: dynamic-font-max(20px, 3) !default;
|
||||
|
||||
|
||||
// iOS Small Button
|
||||
@@ -108,7 +112,9 @@ $button-ios-small-min-height: 2.1em !default;
|
||||
$button-ios-small-border-radius: 6px !default;
|
||||
|
||||
/// @prop - Font size of the small button
|
||||
$button-ios-small-font-size: 13px !default;
|
||||
/// The maximum font size is calculated by taking the default font size
|
||||
/// and multiplying it by 3, since 310% of the default is the maximum
|
||||
$button-ios-small-font-size: dynamic-font-max(13px, 3) !default;
|
||||
|
||||
|
||||
// iOS Outline Button
|
||||
@@ -151,13 +157,15 @@ $button-ios-outline-background-color-focused: ion-color(primary, base, $
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the clear button
|
||||
$button-ios-clear-font-size: 17px !default;
|
||||
/// The maximum font size is calculated by taking the default font size
|
||||
/// and multiplying it by 3, since 310% of the default is the maximum
|
||||
$button-ios-clear-font-size: dynamic-font-max(17px, 3) !default;
|
||||
|
||||
/// @prop - Font weight of the clear button
|
||||
$button-ios-clear-font-weight: normal !default;
|
||||
|
||||
/// @prop - Letter spacing of the button
|
||||
$button-ios-letter-spacing: 0 !default;
|
||||
$button-ios-letter-spacing: 0 !default;
|
||||
|
||||
/// @prop - Border color of the clear button
|
||||
$button-ios-clear-border-color: transparent !default;
|
||||
|
||||
@@ -34,7 +34,7 @@ $button-md-min-height: 36px !default;
|
||||
$button-md-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Font size of the button text
|
||||
$button-md-font-size: 14px !default;
|
||||
$button-md-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Font weight of the button text
|
||||
$button-md-font-weight: 500 !default;
|
||||
@@ -78,7 +78,7 @@ $button-md-large-padding-start: $button-md-large-padding
|
||||
$button-md-large-min-height: 2.8em !default;
|
||||
|
||||
/// @prop - Font size of the large button
|
||||
$button-md-large-font-size: 20px !default;
|
||||
$button-md-large-font-size: dynamic-font(20px) !default;
|
||||
|
||||
|
||||
// Material Design Small Button
|
||||
@@ -100,7 +100,7 @@ $button-md-small-padding-start: $button-md-small-padding
|
||||
$button-md-small-min-height: 2.1em !default;
|
||||
|
||||
/// @prop - Font size of the small button
|
||||
$button-md-small-font-size: 13px !default;
|
||||
$button-md-small-font-size: dynamic-font(13px) !default;
|
||||
|
||||
|
||||
// Material Design Outline Button
|
||||
|
||||
82
core/src/components/button/test/a11y/button.e2e.ts
Normal file
82
core/src/components/button/test/a11y/button.e2e.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('button: font scaling'), () => {
|
||||
test('should scale default button text on larger font sizes', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
html {
|
||||
font-size: 310%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-button>Default</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-default-scale`));
|
||||
});
|
||||
|
||||
test('should scale clear button text on larger font sizes', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
html {
|
||||
font-size: 310%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-button fill="clear">Clear</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-clear-scale`));
|
||||
});
|
||||
|
||||
test('should scale small button text on larger font sizes', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
html {
|
||||
font-size: 310%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-button size="small">Small</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-small-scale`));
|
||||
});
|
||||
|
||||
test('should scale large button text on larger font sizes', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
html {
|
||||
font-size: 310%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-button size="large">Large</ion-button>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const button = page.locator('ion-button');
|
||||
|
||||
await expect(button).toHaveScreenshot(screenshot(`button-large-scale`));
|
||||
});
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user