chore: sync with main

This commit is contained in:
Liam DeBeasi 2024-04-17 09:08:18 -04:00
commit cde84983b2
19 changed files with 799 additions and 191 deletions

View File

@ -11,7 +11,7 @@ jobs:
issues: write
steps:
- name: 'Auto-assign issue'
uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
with:
assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
numOfAssignee: 1

1
.vercelignore Normal file
View File

@ -0,0 +1 @@
core/src/components/**/*/*.png

View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
### Bug Fixes
* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)

View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
### Bug Fixes
* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)

727
core/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -54,12 +54,13 @@
"@types/node": "^14.6.0",
"@typescript-eslint/eslint-plugin": "^6.7.2",
"@typescript-eslint/parser": "^6.7.2",
"chalk": "^5.3.0",
"clean-css-cli": "^5.6.1",
"domino": "^2.1.6",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-custom-rules": "file:custom-rules",
"execa": "^5.0.0",
"execa": "^8.0.1",
"fs-extra": "^9.0.1",
"jest": "^29.7.0",
"jest-cli": "^29.7.0",
@ -96,10 +97,9 @@
"test.treeshake": "node scripts/treeshaking.js dist/index.js",
"validate": "npm run lint && npm run test && npm run build && npm run test.treeshake",
"docker.build": "docker build -t ionic-playwright .",
"test.e2e.docker": "npm run docker.build && docker run -it --rm -e DISPLAY=$(cat docker-display.txt) -v $(cat docker-display-volume.txt) --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
"test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
"test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
"test.e2e.docker.ci": "npm run docker.build && docker run -e CI='true' --rm --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
"test.report": "npx playwright show-report"
"test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
},
"author": "Ionic Team",
"license": "MIT",

56
core/scripts/docker.mjs Normal file
View File

@ -0,0 +1,56 @@
import { execa } from 'execa';
import * as fs from 'fs';
import { resolve } from 'path';
import chalk from 'chalk';
const removeNewline = (string) => {
return string.replace(/(\r\n|\n|\r)/gm, "");
}
const readConfigFile = (file) => {
if (fs.existsSync(file)) {
return fs.readFileSync(file, { encoding: 'utf-8' });
}
return '';
}
// These files are optional, so we don't want to error if they don't exist
const display = removeNewline(readConfigFile('docker-display.txt'));
const displayVolume = removeNewline(readConfigFile('docker-display-volume.txt'));
// Using --mount requires an absolute path which is what this gives us.
const pwd = resolve('./');
/**
* -it will let the user gracefully kill the process using Ctrl+C (or equivalent)
* -e DISPLAY and -v handle configuration for headed mode
* --ipc=host is recommended when using Chromium to avoid out of memory crashes: https://playwright.dev/docs/ci#docker
* --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
* --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
*/
const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
// Set the CI env variable so Playwright uses the CI config
if (process.env.CI) {
args.splice(1, 0, '-e CI=true');
/**
* Otherwise, we should let the session be interactive locally. This will
* not work on CI which is why we do not apply it there.
*/
} else {
args.splice(1, 0, '-it');
}
/**
* While these config files are optional to run the tests, they are required to run
* the tests in headed mode. Add a warning if dev tries to run headed tests without
* the correct config files.
*/
const requestHeaded = process.argv.find(arg => arg.includes('headed'));
const hasHeadedConfigFiles = display && displayVolume;
if (requestHeaded && !hasHeadedConfigFiles) {
console.warn(chalk.yellow.bold('\n⚠ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
}
execa('docker', args, { shell: true, stdio: 'inherit' });

View File

@ -1,5 +1,6 @@
import { isIonContent, findClosestIonContent } from '@utils/content';
import { createGesture } from '@utils/gesture';
import { clamp, raf } from '@utils/helpers';
import { clamp, raf, getElementRoot } from '@utils/helpers';
import type { Animation } from '../../../interface';
import type { GestureDetail } from '../../../utils/gesture';
@ -142,22 +143,35 @@ export const createSheetGesture = (
const canStart = (detail: GestureDetail) => {
/**
* If the sheet is fully expanded and
* the user is swiping on the content,
* the gesture should not start to
* allow for scrolling on the content.
* If we are swiping on the content, swiping should only be possible if the content
* is scrolled all the way to the top so that we do not interfere with scrolling.
*
* We cannot assume that the `ion-content` target will remain consistent between swipes.
* For example, when using ion-nav within a modal it is possible to swipe, push a view,
* and then swipe again. The target content will not be the same between swipes.
*/
const content = (detail.event.target! as HTMLElement).closest('ion-content');
const contentEl = findClosestIonContent(detail.event.target! as HTMLElement);
currentBreakpoint = getCurrentBreakpoint();
if (currentBreakpoint === 1 && content) {
return false;
if (currentBreakpoint === 1 && contentEl) {
/**
* The modal should never swipe to close on the content with a refresher.
* Note 1: We cannot solve this by making this gesture have a higher priority than
* the refresher gesture as the iOS native refresh gesture uses a scroll listener in
* addition to a gesture.
*
* Note 2: Do not use getScrollElement here because we need this to be a synchronous
* operation, and getScrollElement is asynchronous.
*/
const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
return !hasRefresherInContent && scrollEl!.scrollTop === 0;
}
return true;
};
const onStart = () => {
const onStart = (detail: GestureDetail) => {
/**
* If canDismiss is anything other than `true`
* then users should be able to swipe down
@ -173,11 +187,10 @@ export const createSheetGesture = (
canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
/**
* If swiping on the content
* we should disable scrolling otherwise
* the sheet will expand and the content will scroll.
* If we are pulling down, then it is possible we are pulling on the content.
* We do not want scrolling to happen at the same time as the gesture.
*/
if (contentEl) {
if (detail.deltaY > 0 && contentEl) {
contentEl.scrollY = false;
}
@ -193,6 +206,16 @@ export const createSheetGesture = (
};
const onMove = (detail: GestureDetail) => {
/**
* If we are pulling down, then it is possible we are pulling on the content.
* We do not want scrolling to happen at the same time as the gesture.
* This accounts for when the user scrolls down, scrolls all the way up, and then
* pulls down again such that the modal should start to move.
*/
if (detail.deltaY > 0 && contentEl) {
contentEl.scrollY = false;
}
/**
* Given the change in gesture position on the Y axis,
* compute where the offset of the animation should be
@ -314,6 +337,17 @@ export const createSheetGesture = (
onDismiss();
}
/**
* If the sheet is going to be fully expanded then we should enable
* scrolling immediately. The sheet modal animation takes ~500ms to finish
* so if we wait until then there is a visible delay for when scrolling is
* re-enabled. Native iOS allows for scrolling on the sheet modal as soon
* as the gesture is released, so we align with that.
*/
if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
contentEl.scrollY = true;
}
return new Promise<void>((resolve) => {
animation
.onFinish(
@ -334,14 +368,6 @@ export const createSheetGesture = (
currentBreakpoint = snapToBreakpoint;
onBreakpointChange(currentBreakpoint);
/**
* If the sheet is fully expanded, we can safely
* enable scrolling again.
*/
if (contentEl && currentBreakpoint === breakpoints[breakpoints.length - 1]) {
contentEl.scrollY = true;
}
/**
* Backdrop should become enabled
* after the backdropBreakpoint value

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -32,6 +32,21 @@ The [Running Tests](#running-tests) and [Managing Screenshots](#managing-screens
Docker can be installed by [following the steps on the Docker website](https://docs.docker.com/get-docker/).
### Docker and Windows Development
Developers using Windows who wish to run tests using Docker must use the [Windows Subsystem for Linux v2 (WSL 2)](https://learn.microsoft.com/en-us/windows/wsl/about). Developers who wish to run headed tests will also need to use WSLg.
If you are running Docker Desktop on Windows 10 or 11 you likely already have both WSL and WSLg installed. The following steps show how to verify that WSL and WSLg are installed. If either of the below verification checks fail, then developers should [download the latest version of WSL](https://apps.microsoft.com/store/detail/9P9TQF7MRM4R?hl=en-us&gl=US).
1. To verify WSL is installed, launch "WSL" from the start menu. If "WSL" does not show up in the start menu then you do not have WSL installed.
2. With WSL open, verify that WSLg is installed: `ls -a -w 1 /mnt/wslg`. If the command fails with `No such file or directory` then your system is either missing WSLg or running an old version.
3. Verify that you have a Linux subsystem installed (such as Ubuntu) by running `wsl --list --verbose`. If you do not see a Linux subsystem in the list, run `wsl --install` to install it. Once installed, it's recommended to set this subsystem as the default Linux subsystem using `wsl --set-default [subsystem]`. Example: `wsl --set-default Ubuntu`.
4. Verify that your local version of Ubuntu (or other Linux subsystem) is using WSL 2 by running `wsl --list --verbose`. If your subsystem has a `1` under the "VERSION" heading, then that means it is using WSL 1, not WSL 2. To correct this, run `wsl --set-version [subsystem] 2`. Example: `wsl --set-version Ubuntu 2`.
If you are using VSCode, the WSL terminal can be accessed by selecting "Ubuntu (WSL)" from the terminal dropdown menu:
<img src="./assets/vscode-wsl.png" />
### Configuring Docker for Headed Tests (Optional)
Additional software is needed to run headed tests inside of Docker. The Docker-specific test commands such as `npm run test.e2e.docker` are configured to use this additional software, but it is up to the developer to ensure that the software is installed and running.
@ -56,14 +71,13 @@ macOS uses [XQuartz](https://www.xquartz.org) to use XServer on macOS.
#### Windows
Windows has a native XServer called [WSLg](https://github.com/microsoft/wslg#readme) that is included as part of the [Windows Subsystem for Linux (WSL)](https://apps.microsoft.com/store/detail/9P9TQF7MRM4R?hl=en-us&gl=US). If you are running Docker Desktop on Windows 10 or 11 you likely already have both WSL and WSLg installed. The following steps show how to verify the WSL and WSLg are installed as well as how to configure your environment for headed tests in Docker.
Windows has a native XServer called [WSLg](https://github.com/microsoft/wslg#readme) that is included as part of the [Windows Subsystem for Linux (WSL)](https://learn.microsoft.com/en-us/windows/wsl/about). See [Docker and Windows Development](#docker-and-windows-development) for information on how to ensure both WSL and WSLg are installed. Once completed, follow the steps below to configure headed tests to use XServer.
If either of the below verification checks fail, then developers should [download the latest version of WSL](https://apps.microsoft.com/store/detail/9P9TQF7MRM4R?hl=en-us&gl=US).
> [!NOTE]
> The following steps should be done in WSL, not PowerShell. Running the commands in PowerShell may result in extra hidden characters being added.
1. To verify WSL is installed, launch "WSL" from the start menu. If "WSL" does not show up in the start menu then you do not have WSL installed.
2. With WSL open, verify that WSLg is installed: `ls -a -w 1 /mnt/wslg`. If the command fails with `No such file or directory` then your system is either missing WSL or running an old version.
3. In the `core` directory run `echo :0 > docker-display.txt`. This information is used to set the `DISPLAY` environment variable which tells Playwright how to render a headed UI from the Docker container.
4. In the `core` directory run `echo /tmp/.X11-unix:/tmp/.X11-unix > docker-display-volume.txt`. This information is used to make XServer available inside of the Docker container.
1. In the `core` directory run `echo :0 > docker-display.txt`. This information is used to set the `DISPLAY` environment variable which tells Playwright how to render a headed UI from the Docker container.
2. In the `core` directory run `echo /tmp/.X11-unix:/tmp/.X11-unix > docker-display-volume.txt`. This information is used to make XServer available inside of the Docker container.
## Running Tests

View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
**Note:** Version bump only for package @ionic/angular-server
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
**Note:** Version bump only for package @ionic/angular-server

View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
**Note:** Version bump only for package @ionic/angular
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
**Note:** Version bump only for package @ionic/angular

View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
**Note:** Version bump only for package @ionic/docs
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
**Note:** Version bump only for package @ionic/docs

View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
**Note:** Version bump only for package @ionic/react-router
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
**Note:** Version bump only for package @ionic/react-router

View File

@ -667,9 +667,9 @@
]
},
"node_modules/@stencil/core": {
"version": "4.15.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.15.0.tgz",
"integrity": "sha512-C5syM3chCyxX0Os5M+ZWrBujjqwUfrTb87YiLr8RC+kMTmIpnRvvtj8/s3QYDGdDENGRxGkBpeboVh82IGqk0w==",
"version": "4.16.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz",
"integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw==",
"bin": {
"stencil": "bin/stencil"
},
@ -4304,9 +4304,9 @@
"optional": true
},
"@stencil/core": {
"version": "4.15.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.15.0.tgz",
"integrity": "sha512-C5syM3chCyxX0Os5M+ZWrBujjqwUfrTb87YiLr8RC+kMTmIpnRvvtj8/s3QYDGdDENGRxGkBpeboVh82IGqk0w=="
"version": "4.16.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz",
"integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw=="
},
"@types/estree": {
"version": "1.0.4",

View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
**Note:** Version bump only for package @ionic/react
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
**Note:** Version bump only for package @ionic/react

View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
**Note:** Version bump only for package @ionic/vue-router
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
**Note:** Version bump only for package @ionic/vue-router

View File

@ -1508,9 +1508,9 @@
}
},
"node_modules/@stencil/core": {
"version": "4.15.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.15.0.tgz",
"integrity": "sha512-C5syM3chCyxX0Os5M+ZWrBujjqwUfrTb87YiLr8RC+kMTmIpnRvvtj8/s3QYDGdDENGRxGkBpeboVh82IGqk0w==",
"version": "4.16.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz",
"integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw==",
"bin": {
"stencil": "bin/stencil"
},
@ -8461,9 +8461,9 @@
}
},
"@stencil/core": {
"version": "4.15.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.15.0.tgz",
"integrity": "sha512-C5syM3chCyxX0Os5M+ZWrBujjqwUfrTb87YiLr8RC+kMTmIpnRvvtj8/s3QYDGdDENGRxGkBpeboVh82IGqk0w=="
"version": "4.16.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz",
"integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw=="
},
"@tootallnate/once": {
"version": "2.0.0",

View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
**Note:** Version bump only for package @ionic/vue
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
**Note:** Version bump only for package @ionic/vue