Compare commits
55 Commits
v7.5.2
...
sp/stencil
| Author | SHA1 | Date | |
|---|---|---|---|
|
395b14317f | ||
|
|
9fad566175 | ||
|
|
6dcf9cadb3 | ||
|
|
9bb45b3772 | ||
|
|
78ce39f8c6 | ||
|
|
093c671e3e | ||
|
|
ed80b7f118 | ||
|
|
83f9ac0fac | ||
|
|
a000dd2c0b | ||
|
|
04d32b6d68 | ||
|
|
342511959a | ||
|
|
900267eb36 | ||
|
|
73b8bfde3f | ||
|
|
f0a5d2704c | ||
|
|
fbc9f53d35 | ||
|
|
d69ad43482 | ||
|
|
33200a9311 | ||
|
|
aeeb84b77d | ||
|
|
61b6bd0a0a | ||
|
|
8227b0ee6d | ||
|
|
c1304b7004 | ||
|
|
c5dd622bbe | ||
|
|
c053fd9c68 | ||
|
|
9e1e55a898 | ||
|
|
4513e0c6b0 | ||
|
|
95b52ac8ba | ||
|
|
5bd4af2c51 | ||
|
|
8b877f8fb9 | ||
|
|
c765dcbac4 | ||
|
|
dfaa006a7a | ||
|
|
dfafb27435 | ||
|
|
63a8b765bb | ||
|
|
cafafcc9d1 | ||
|
|
00c3a4431a | ||
|
|
ed040b09e9 | ||
|
|
b7d1a5c86b | ||
|
|
a4551470a9 | ||
|
|
70212d5ab2 | ||
|
|
a608a11ad0 | ||
|
|
d70c89c0e2 | ||
|
|
f6a6877044 | ||
|
|
3b6e6318bf | ||
|
|
89698b338f | ||
|
|
90acad1837 | ||
|
|
a5c68aa529 | ||
|
|
dbcd1ac489 | ||
|
|
b31ecbbfe8 | ||
|
|
dc94ae01fe | ||
|
|
8e2f818671 | ||
|
|
a4b303e133 | ||
|
|
34257d681e | ||
|
|
d47b7e7503 | ||
|
|
f99d5305fb | ||
|
|
6e771e07d4 | ||
|
|
afa0e3c4d1 |
2
.github/CONTRIBUTING.md
vendored
@@ -163,7 +163,7 @@ npm i
|
||||
npm run build
|
||||
npm pack --pack-destination ~
|
||||
|
||||
cd ../angular
|
||||
cd ../packages/angular
|
||||
npm i
|
||||
npm run sync
|
||||
npm run build
|
||||
|
||||
@@ -8,7 +8,7 @@ runs:
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
node-version: 18
|
||||
- uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
name: ionic-core
|
||||
|
||||
2
.github/workflows/build.yml
vendored
@@ -140,7 +140,7 @@ jobs:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [ng14, ng15, ng16]
|
||||
apps: [ng14, ng15, ng16, ng17]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
|
||||
49
CHANGELOG.md
@@ -3,6 +3,55 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
|
||||
* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
|
||||
* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
|
||||
* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
|
||||
* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
|
||||
* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
|
||||
* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
|
||||
* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406)
|
||||
* **angular:** inputs on standalone form controls are reactive ([#28434](https://github.com/ionic-team/ionic-framework/issues/28434)) ([3b6e631](https://github.com/ionic-team/ionic-framework/commit/3b6e6318bf94125b3f8305b4d072a5945ceb3730)), closes [#28431](https://github.com/ionic-team/ionic-framework/issues/28431)
|
||||
* **angular:** NavController works with nested outlets ([#28421](https://github.com/ionic-team/ionic-framework/issues/28421)) ([90acad1](https://github.com/ionic-team/ionic-framework/commit/90acad1837b117542830ec0083389a35c5b4ee76)), closes [#28417](https://github.com/ionic-team/ionic-framework/issues/28417)
|
||||
* **angular:** run platform subscriptions inside zone ([#28404](https://github.com/ionic-team/ionic-framework/issues/28404)) ([a4b303e](https://github.com/ionic-team/ionic-framework/commit/a4b303e1338a35756a9cf7f67508d24d2f8537a2)), closes [#19539](https://github.com/ionic-team/ionic-framework/issues/19539)
|
||||
* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418)
|
||||
* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121)
|
||||
* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388)
|
||||
* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f))
|
||||
* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373)
|
||||
* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25)
|
||||
|
||||
|
||||
|
||||
@@ -3,6 +3,55 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
|
||||
* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
|
||||
* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
|
||||
* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
|
||||
* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
|
||||
* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
|
||||
|
||||
> [!NOTE]
|
||||
> Ionic Vue developers utilizing the `v-ion-change` or `v-ion-input` workaround for https://github.com/ionic-team/ionic-framework/issues/27292 should remove this workaround when updating to Ionic v7.5.5.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
|
||||
* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
|
||||
* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406)
|
||||
* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418)
|
||||
* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121)
|
||||
* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388)
|
||||
* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f))
|
||||
* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373)
|
||||
* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25)
|
||||
|
||||
|
||||
|
||||
4158
core/package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.5.2",
|
||||
"version": "7.5.5",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -31,27 +31,26 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.6.0",
|
||||
"@stencil/core": "^4.6.0-dev.1698410852.c526078",
|
||||
"ionicons": "^7.2.1",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.8.1",
|
||||
"@capacitor/core": "^5.5.0",
|
||||
"@capacitor/core": "^5.5.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",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.2",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/react-output-target": "^0.5.3",
|
||||
"@stencil/sass": "^3.0.7",
|
||||
"@stencil/vue-output-target": "^0.8.6",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^29.5.6",
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
"@typescript-eslint/parser": "^6.7.2",
|
||||
@@ -62,8 +61,8 @@
|
||||
"eslint-plugin-custom-rules": "file:custom-rules",
|
||||
"execa": "^5.0.0",
|
||||
"fs-extra": "^9.0.1",
|
||||
"jest": "^27.5.1",
|
||||
"jest-cli": "^27.5.1",
|
||||
"jest": "^29.7.0",
|
||||
"jest-cli": "^29.7.0",
|
||||
"prettier": "^2.6.1",
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.33.0",
|
||||
@@ -86,13 +85,11 @@
|
||||
"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",
|
||||
|
||||
4
core/src/components.d.ts
vendored
@@ -915,7 +915,7 @@ export namespace Components {
|
||||
*/
|
||||
"presentation": DatetimePresentation;
|
||||
/**
|
||||
* If `true`, the datetime appears normal but is not interactive.
|
||||
* If `true`, the datetime appears normal but the selected date cannot be changed.
|
||||
*/
|
||||
"readonly": boolean;
|
||||
/**
|
||||
@@ -5595,7 +5595,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"presentation"?: DatetimePresentation;
|
||||
/**
|
||||
* If `true`, the datetime appears normal but is not interactive.
|
||||
* If `true`, the datetime appears normal but the selected date cannot be changed.
|
||||
*/
|
||||
"readonly"?: boolean;
|
||||
/**
|
||||
|
||||
@@ -180,6 +180,16 @@ export class AccordionGroup implements ComponentInterface {
|
||||
if (this.readonly) {
|
||||
this.readonlyChanged();
|
||||
}
|
||||
/**
|
||||
* When binding values in frameworks such as Angular
|
||||
* it is possible for the value to be set after the Web Component
|
||||
* initializes but before the value watcher is set up in Stencil.
|
||||
* As a result, the watcher callback may not be fired.
|
||||
* We work around this by manually calling the watcher
|
||||
* callback when the component has loaded and the watcher
|
||||
* is configured.
|
||||
*/
|
||||
this.valueChanged();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -128,8 +128,8 @@
|
||||
height: 100%;
|
||||
|
||||
/* Fallback for browsers that do not support dvh */
|
||||
max-height: 100vh;
|
||||
max-height: 100dvh;
|
||||
max-height: calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
|
||||
max-height: calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
|
||||
@@ -100,3 +100,69 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* This behavior needs to be tested in both modes but does not vary
|
||||
* across directions due to the component only applying safe area
|
||||
* to the top and bottom
|
||||
*/
|
||||
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('action-sheet: basic'), () => {
|
||||
test.describe('safe area', () => {
|
||||
test('should have padding added by the safe area', async ({ page }, testInfo) => {
|
||||
testInfo.annotations.push({
|
||||
type: 'issue',
|
||||
description: 'https://github.com/ionic-team/ionic-framework/issues/27777',
|
||||
});
|
||||
await page.setContent(
|
||||
`
|
||||
<style>
|
||||
:root {
|
||||
--ion-safe-area-top: 60px;
|
||||
--ion-safe-area-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-action-sheet></ion-action-sheet>
|
||||
|
||||
<script>
|
||||
const actionSheet = document.querySelector('ion-action-sheet');
|
||||
actionSheet.header = 'Header';
|
||||
actionSheet.subHeader = 'Sub Header';
|
||||
actionSheet.buttons = [
|
||||
'Add Reaction',
|
||||
'Copy Text',
|
||||
'Share Text',
|
||||
'Copy Link to Message',
|
||||
'Remind Me',
|
||||
'Pin File',
|
||||
'Star File',
|
||||
'Mark Unread',
|
||||
'Mark Read',
|
||||
'Edit Title',
|
||||
'Erase Title',
|
||||
'Save Image',
|
||||
'Copy Image',
|
||||
'Erase Image',
|
||||
'Delete File',
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel'
|
||||
},
|
||||
];
|
||||
</script>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
|
||||
const actionSheet = page.locator('ion-action-sheet');
|
||||
|
||||
await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
|
||||
await ionActionSheetDidPresent.next();
|
||||
|
||||
await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-safe-area`));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 15 KiB |
@@ -91,6 +91,26 @@
|
||||
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.
|
||||
|
||||
@@ -28,6 +28,67 @@ 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 }) => {
|
||||
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 12 KiB |
@@ -136,7 +136,3 @@
|
||||
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:host .datetime-view-buttons ion-button {
|
||||
color: $text-color-step-200;
|
||||
}
|
||||
|
||||
@@ -185,13 +185,37 @@ ion-picker-column-internal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host(.datetime-readonly),
|
||||
:host(.datetime-disabled) {
|
||||
pointer-events: none;
|
||||
|
||||
.calendar-days-of-week,
|
||||
.datetime-time {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
:host(.datetime-disabled) {
|
||||
opacity: 0.4;
|
||||
:host(.datetime-readonly) {
|
||||
pointer-events: none;
|
||||
|
||||
/**
|
||||
* Allow user to navigate months
|
||||
* while in readonly mode
|
||||
*/
|
||||
.calendar-action-buttons,
|
||||
.calendar-body,
|
||||
.datetime-year {
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
||||
/**
|
||||
* Disabled buttons should have full opacity
|
||||
* in readonly mode
|
||||
*/
|
||||
|
||||
.calendar-day[disabled]:not(.calendar-day-constrained),
|
||||
.datetime-action-buttons ion-button[disabled] {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -172,7 +172,7 @@ export class Datetime implements ComponentInterface {
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* If `true`, the datetime appears normal but is not interactive.
|
||||
* If `true`, the datetime appears normal but the selected date cannot be changed.
|
||||
*/
|
||||
@Prop() readonly = false;
|
||||
|
||||
@@ -599,6 +599,14 @@ export class Datetime implements ComponentInterface {
|
||||
};
|
||||
|
||||
private setActiveParts = (parts: DatetimeParts, removeDate = false) => {
|
||||
/** if the datetime component is in readonly mode,
|
||||
* allow browsing of the calendar without changing
|
||||
* the set value
|
||||
*/
|
||||
if (this.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { multiple, minParts, maxParts, activeParts } = this;
|
||||
|
||||
/**
|
||||
@@ -1414,7 +1422,13 @@ export class Datetime implements ComponentInterface {
|
||||
*/
|
||||
|
||||
private renderFooter() {
|
||||
const { showDefaultButtons, showClearButton } = this;
|
||||
const { disabled, readonly, showDefaultButtons, showClearButton } = this;
|
||||
/**
|
||||
* The cancel, clear, and confirm buttons
|
||||
* should not be interactive if the datetime
|
||||
* is disabled or readonly.
|
||||
*/
|
||||
const isButtonDisabled = disabled || readonly;
|
||||
const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
|
||||
if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
|
||||
return;
|
||||
@@ -1444,18 +1458,33 @@ export class Datetime implements ComponentInterface {
|
||||
<slot name="buttons">
|
||||
<ion-buttons>
|
||||
{showDefaultButtons && (
|
||||
<ion-button id="cancel-button" color={this.color} onClick={() => this.cancel(true)}>
|
||||
<ion-button
|
||||
id="cancel-button"
|
||||
color={this.color}
|
||||
onClick={() => this.cancel(true)}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
{this.cancelText}
|
||||
</ion-button>
|
||||
)}
|
||||
<div class="datetime-action-buttons-container">
|
||||
{showClearButton && (
|
||||
<ion-button id="clear-button" color={this.color} onClick={() => clearButtonClick()}>
|
||||
<ion-button
|
||||
id="clear-button"
|
||||
color={this.color}
|
||||
onClick={() => clearButtonClick()}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
{this.clearText}
|
||||
</ion-button>
|
||||
)}
|
||||
{showDefaultButtons && (
|
||||
<ion-button id="confirm-button" color={this.color} onClick={() => this.confirm(true)}>
|
||||
<ion-button
|
||||
id="confirm-button"
|
||||
color={this.color}
|
||||
onClick={() => this.confirm(true)}
|
||||
disabled={isButtonDisabled}
|
||||
>
|
||||
{this.doneText}
|
||||
</ion-button>
|
||||
)}
|
||||
@@ -1957,11 +1986,12 @@ export class Datetime implements ComponentInterface {
|
||||
*/
|
||||
|
||||
private renderCalendarHeader(mode: Mode) {
|
||||
const { disabled } = this;
|
||||
const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
|
||||
const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
|
||||
|
||||
const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
|
||||
const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
|
||||
const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
|
||||
const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
|
||||
|
||||
// don't use the inheritAttributes util because it removes dir from the host, and we still need that
|
||||
const hostDir = this.el.getAttribute('dir') || undefined;
|
||||
@@ -1977,6 +2007,7 @@ export class Datetime implements ComponentInterface {
|
||||
aria-label="Show year picker"
|
||||
detail={false}
|
||||
lines="none"
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
this.toggleMonthAndYearView();
|
||||
/**
|
||||
@@ -2043,23 +2074,28 @@ export class Datetime implements ComponentInterface {
|
||||
);
|
||||
}
|
||||
private renderMonth(month: number, year: number) {
|
||||
const { disabled, readonly } = this;
|
||||
|
||||
const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
|
||||
const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month);
|
||||
const isCalMonthDisabled = !yearAllowed || !monthAllowed;
|
||||
const swipeDisabled = isMonthDisabled(
|
||||
{
|
||||
month,
|
||||
year,
|
||||
day: null,
|
||||
},
|
||||
{
|
||||
// The day is not used when checking if a month is disabled.
|
||||
// Users should be able to access the min or max month, even if the
|
||||
// min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
|
||||
minParts: { ...this.minParts, day: null },
|
||||
maxParts: { ...this.maxParts, day: null },
|
||||
}
|
||||
);
|
||||
const isDatetimeDisabled = disabled || readonly;
|
||||
const swipeDisabled =
|
||||
disabled ||
|
||||
isMonthDisabled(
|
||||
{
|
||||
month,
|
||||
year,
|
||||
day: null,
|
||||
},
|
||||
{
|
||||
// The day is not used when checking if a month is disabled.
|
||||
// Users should be able to access the min or max month, even if the
|
||||
// min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
|
||||
minParts: { ...this.minParts, day: null },
|
||||
maxParts: { ...this.maxParts, day: null },
|
||||
}
|
||||
);
|
||||
// The working month should never have swipe disabled.
|
||||
// Otherwise the CSS scroll snap will not work and the user
|
||||
// can free-scroll the calendar.
|
||||
@@ -2083,7 +2119,14 @@ export class Datetime implements ComponentInterface {
|
||||
const { el, highlightedDates, isDateEnabled, multiple } = this;
|
||||
const referenceParts = { month, day, year };
|
||||
const isCalendarPadding = day === null;
|
||||
const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(
|
||||
const {
|
||||
isActive,
|
||||
isToday,
|
||||
ariaLabel,
|
||||
ariaSelected,
|
||||
disabled: isDayDisabled,
|
||||
text,
|
||||
} = getCalendarDayState(
|
||||
this.locale,
|
||||
referenceParts,
|
||||
this.activeParts,
|
||||
@@ -2094,7 +2137,8 @@ export class Datetime implements ComponentInterface {
|
||||
);
|
||||
|
||||
const dateIsoString = convertDataToISO(referenceParts);
|
||||
let isCalDayDisabled = isCalMonthDisabled || disabled;
|
||||
|
||||
let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
|
||||
|
||||
if (!isCalDayDisabled && isDateEnabled !== undefined) {
|
||||
try {
|
||||
@@ -2113,6 +2157,15 @@ export class Datetime implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Some days are constrained through max & min or allowed dates
|
||||
* and also disabled because the component is readonly or disabled.
|
||||
* These need to be displayed differently.
|
||||
*/
|
||||
const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
|
||||
|
||||
const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
|
||||
|
||||
let dateStyle: DatetimeHighlightStyle | undefined = undefined;
|
||||
|
||||
/**
|
||||
@@ -2158,11 +2211,12 @@ export class Datetime implements ComponentInterface {
|
||||
data-year={year}
|
||||
data-index={index}
|
||||
data-day-of-week={dayOfWeek}
|
||||
disabled={isCalDayDisabled}
|
||||
disabled={isButtonDisabled}
|
||||
class={{
|
||||
'calendar-day-padding': isCalendarPadding,
|
||||
'calendar-day': true,
|
||||
'calendar-day-active': isActive,
|
||||
'calendar-day-constrained': isCalDayConstrained,
|
||||
'calendar-day-today': isToday,
|
||||
}}
|
||||
part={dateParts}
|
||||
@@ -2237,7 +2291,7 @@ export class Datetime implements ComponentInterface {
|
||||
}
|
||||
|
||||
private renderTimeOverlay() {
|
||||
const { hourCycle, isTimePopoverOpen, locale } = this;
|
||||
const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
|
||||
const computedHourCycle = getHourCycle(locale, hourCycle);
|
||||
const activePart = this.getActivePartsWithFallback();
|
||||
|
||||
@@ -2251,6 +2305,7 @@ export class Datetime implements ComponentInterface {
|
||||
part={`time-button${isTimePopoverOpen ? ' active' : ''}`}
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
disabled={disabled}
|
||||
onClick={async (ev) => {
|
||||
const { popoverRef } = this;
|
||||
|
||||
|
||||
@@ -30,3 +30,102 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* This behavior does not differ across
|
||||
* modes/directions.
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('datetime: a11y'), () => {
|
||||
test('datetime should be keyboard navigable', async ({ page, browserName }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const monthYearButton = page.locator('.calendar-month-year ion-item');
|
||||
const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
|
||||
const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(monthYearButton).toBeFocused();
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(prevButton).toBeFocused();
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(nextButton).toBeFocused();
|
||||
|
||||
// check value before & after selecting via keyboard
|
||||
const initialValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
|
||||
expect(initialValue).toBe('2022-02-22T16:30:00');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('ArrowLeft');
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
const newValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
|
||||
expect(newValue).not.toBe('2022-02-22T16:30:00');
|
||||
});
|
||||
|
||||
test('buttons should be keyboard navigable', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
<ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
const selectedDay = page.locator('.calendar-day-active');
|
||||
|
||||
await expect(selectedDay).toHaveText('22');
|
||||
|
||||
await clearButton.focus();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(clearButton).toBeFocused();
|
||||
await page.keyboard.press('Enter');
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(selectedDay).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('should navigate through months via right arrow key', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
<ion-datetime value="2022-02-28"></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const calendarBody = page.locator('.calendar-body');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await calendarBody.focus();
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('ArrowRight');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(calendarMonthYear).toHaveText('March 2022');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
103
core/src/components/datetime/test/disabled/datetime.e2e.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* This behavior does not differ across
|
||||
* modes/directions.
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
|
||||
test.describe(title('datetime: disabled'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-disabled`));
|
||||
});
|
||||
|
||||
test('date should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
|
||||
|
||||
await expect(febFirstButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('month-year button should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear.locator('button')).toBeDisabled();
|
||||
});
|
||||
|
||||
test('next and prev buttons should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:first-of-type button');
|
||||
const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:last-of-type button');
|
||||
|
||||
await expect(prevMonthButton).toBeDisabled();
|
||||
await expect(nextMonthButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('clear button should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
<ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
|
||||
await expect(clearButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('should not navigate through months via right arrow key', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" disabled></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const calendarBody = page.locator('.calendar-body');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await calendarBody.focus();
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('ArrowRight');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 17 KiB |
77
core/src/components/datetime/test/disabled/index.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Datetime - Disabled</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(250px, 1fr));
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: #6f7378;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ion-datetime {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header translucent="true">
|
||||
<ion-toolbar>
|
||||
<ion-title>Datetime - Disabled</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<h2>Inline - Default Value</h2>
|
||||
<ion-datetime id="inline-datetime-value" disabled value="2022-04-21T00:00:00"></ion-datetime>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Inline</h2>
|
||||
<ion-datetime
|
||||
id="inline-datetime"
|
||||
presentation="date"
|
||||
disabled
|
||||
show-default-buttons="true"
|
||||
show-clear-button="true"
|
||||
multiple="true"
|
||||
></ion-datetime>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Inline - No Default Value</h2>
|
||||
<ion-datetime id="inline-datetime-no-value" disabled></ion-datetime>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
<script>
|
||||
const firstDatetime = document.querySelector('#inline-datetime');
|
||||
firstDatetime.value = ['2023-08-03', '2023-08-13', '2023-08-29'];
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
167
core/src/components/datetime/test/readonly/datetime.e2e.ts
Normal file
@@ -0,0 +1,167 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* This behavior does not differ across
|
||||
* modes/directions.
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
|
||||
test.describe(title('datetime: readonly'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-readonly`));
|
||||
});
|
||||
|
||||
test('date should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-28" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
|
||||
|
||||
await expect(febFirstButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('should navigate months via month-year button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await calendarMonthYear.click();
|
||||
await page.waitForChanges();
|
||||
await page.locator('.month-column .picker-item[data-value="3"]').click();
|
||||
await page.waitForChanges();
|
||||
await expect(calendarMonthYear).toHaveText('March 2022');
|
||||
|
||||
await expect(ionChange).not.toHaveReceivedEvent();
|
||||
});
|
||||
|
||||
test('should open picker using keyboard navigation', async ({ page, browserName }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
const monthYearButton = page.locator('.calendar-month-year ion-item');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(monthYearButton).toBeFocused();
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForChanges();
|
||||
|
||||
const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
|
||||
await expect(marchPickerItem).toBeVisible();
|
||||
});
|
||||
|
||||
test('should view next month via next button', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const ionChange = await page.spyOnEvent('ionChange');
|
||||
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button + ion-button');
|
||||
await nextMonthButton.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(calendarMonthYear).toHaveText('March 2022');
|
||||
await expect(ionChange).not.toHaveReceivedEvent();
|
||||
});
|
||||
|
||||
test('should not change value when the month is changed via keyboard navigation', async ({ page, browserName }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
|
||||
|
||||
const datetime = page.locator('ion-datetime');
|
||||
const monthYearButton = page.locator('.calendar-month-year ion-item');
|
||||
const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
|
||||
const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
|
||||
const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(monthYearButton).toBeFocused();
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(prevButton).toBeFocused();
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await expect(nextButton).toBeFocused();
|
||||
|
||||
// check value before & after selecting via keyboard
|
||||
const initialValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
|
||||
expect(initialValue).toBe('2022-02-22T16:30:00');
|
||||
await expect(calendarMonthYear).toHaveText('February 2022');
|
||||
|
||||
await page.keyboard.press(tabKey);
|
||||
await page.waitForChanges();
|
||||
|
||||
await page.keyboard.press('ArrowLeft');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(calendarMonthYear).toHaveText('January 2022');
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForChanges();
|
||||
|
||||
const newValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
|
||||
// should not have changed
|
||||
expect(newValue).toBe('2022-02-22T16:30:00');
|
||||
});
|
||||
|
||||
test('clear button should be disabled', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
|
||||
<ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" readonly></ion-datetime>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
await page.waitForSelector('.datetime-ready');
|
||||
|
||||
const clearButton = page.locator('#clear-button button');
|
||||
|
||||
await expect(clearButton).toBeDisabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 19 KiB |
83
core/src/components/datetime/test/readonly/index.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Datetime - Readonly</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(250px, 1fr));
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
|
||||
color: #6f7378;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ion-datetime {
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header translucent="true">
|
||||
<ion-toolbar>
|
||||
<ion-title>Datetime - Readonly</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<h2>Inline</h2>
|
||||
<ion-datetime
|
||||
id="inline-datetime"
|
||||
presentation="date"
|
||||
readonly
|
||||
show-default-buttons="true"
|
||||
show-clear-button="true"
|
||||
multiple="true"
|
||||
></ion-datetime>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Inline - No Default Value</h2>
|
||||
<ion-datetime id="inline-datetime-no-value" readonly></ion-datetime>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
<script>
|
||||
const firstDatetime = document.querySelector('#inline-datetime');
|
||||
firstDatetime.value = ['2023-08-03', '2023-08-13', '2023-08-29'];
|
||||
|
||||
firstDatetime.isDateEnabled = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
const utcDay = date.getUTCDay();
|
||||
|
||||
/**
|
||||
* Date will be enabled if it is not
|
||||
* Sunday or Saturday
|
||||
*/
|
||||
return utcDay !== 0 && utcDay !== 6;
|
||||
};
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
@@ -130,7 +130,10 @@
|
||||
* 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
|
||||
*
|
||||
* We use opacity: 0 to avoid a layout shift.
|
||||
* We target both the attribute and the class in the event that the attribute
|
||||
* is not reflected on the host in some frameworks.
|
||||
*/
|
||||
ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) {
|
||||
ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"],
|
||||
~ ion-content ion-header.header-collapse-condense) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -28,24 +28,6 @@
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
// Input Wrapper
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
:host(:not(.legacy-input)) {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Since the label sits on top of the element,
|
||||
* the component needs to be taller otherwise the
|
||||
* label will appear too close to the input text.
|
||||
*/
|
||||
:host(.input-label-placement-floating),
|
||||
:host(.input-label-placement-stacked) {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
|
||||
// Input - Disabled
|
||||
// ----------------------------------------------------------------
|
||||
// The input, label, helper text, char counter and placeholder
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
--border-radius: 4px;
|
||||
--padding-start: 16px;
|
||||
--padding-end: 16px;
|
||||
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
:host(.input-fill-outline.input-shape-round) {
|
||||
|
||||
@@ -60,13 +60,6 @@
|
||||
letter-spacing: .0333333333em;
|
||||
}
|
||||
|
||||
// Input Wrapper
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
:host(:not(.legacy-input)) {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
// Input Label
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
--border-radius: 4px;
|
||||
--padding-start: 16px;
|
||||
--padding-end: 16px;
|
||||
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -101,6 +101,23 @@
|
||||
--highlight-color-focused: #{current-color(base)};
|
||||
}
|
||||
|
||||
// Input Wrapper
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
:host(:not(.legacy-input)) {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Since the label sits on top of the element,
|
||||
* the component needs to be taller otherwise the
|
||||
* label will appear too close to the input text.
|
||||
*/
|
||||
:host(.input-label-placement-floating),
|
||||
:host(.input-label-placement-stacked) {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
// Native Text Input
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |