Issue number: resolves #
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Currently, if you focus on something and then refresh with a refresher,
the browser will try to scroll to what's focused after refreshing. This
can be an unexpected and disrupting user experience.
https://github.com/user-attachments/assets/3ef5999d-d104-422a-a6a9-4f478912f48a
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
With these changes, we blur the active element to prevent the browser
from trying to scroll back to something off screen after refreshing.
Also, I did try to create regression tests for this, but playwright
actually doesn't currently seem to make it possible as far as I can tell
- that's actually what I spent most of my time on this issue trying to
do. Looks like the only way to trigger the refresher with playwright
uses mouse click events, which inherently blurs the active element. You
need to use cursor events for this to work, because cursor events do not
cause a blur on the active element.
https://github.com/user-attachments/assets/bd1a3bfc-9b48-4b3f-b8dc-6959eefc9107
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
**Current dev build:**
```
8.7.3-dev.11755285796.12743331
```
Issue number: internal
---------
## What is the current behavior?
- `LogLevel` throws error `Error: Cannot access ambient const enums when
'isolatedModules' is enabled`
- Several existing console warns and errors are not calling the function
that respects the `logLevel` config
## What is the new behavior?
- Remove `const` from the `enum` to work with `isolatedModules`
- Update `console.warn`s to `printIonWarning`
- Update `console.error`s to `printIonError`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.5.5-dev.11744729748.174bf7e0`
---------
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The test page has the wrong title text.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updated the text to reflect the purpose of the page.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
Issue number: resolves#18714
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When the `ion-content` has the fullscreen attribute, the `ion-refresher`
will be hidden while refreshing. This can be seen by dragging far enough
to trigger it to snap back and refresh.
The refresher ends up being hidden behind the background content
element.
https://github.com/ionic-team/ionic-framework/assets/13530427/27b5393b-dd31-44a5-b872-97709e3a0980
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Set the `--offset-top` to `0px` for the background content element.
This reflects the same behavior of when the content is not fullscreen.
By setting this to `0px`, the refresher is visible while refreshing.
- Added a private prop within refresher to keep track of whether
`ion-content` is `fullscreen` or not.
- Added test.
Originally, I was going to update the `pullMin` and `pullMax` as agreed
on from the investigation ticket. However, it ended up adding too much
space between the refresher and the content. This is the reason why I
decided to modify the background background instead. Otherwise, it
wouldn't mimic the behavior when content doesn't have the `fullscreen`
attribute.
Example of what the spacing looked like:
https://github.com/ionic-team/ionic-framework/assets/13530427/389cea62-48c1-4464-be47-44bc3b6c0315
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[Preview](https://ionic-framework-git-rou-4950-ionic1.vercel.app/src/components/refresher/test/fullscreen)
How to test:
1. Navigate to the preview page
2. Use the browser's simulator to chose an iOS device (might need to
refresh the page)
3. Drag the screen down
4. Verify that the refreshing text is shown
5. Use the browser's simulator to chose an Android device (might need to
refresh the page)
6. Drag the screen down
7. Verify that the refreshing text is shown
Issue number: N/A
---------
## What is the current behavior?
Currently, every Sass variable in Ionic has the `!default` flag added to
the end.
From the [Sass variables
documentation](https://sass-lang.com/documentation/variables/):
> Normally when you assign a value to a variable, if that variable
already had a value, its old value is overwritten. But if you’re writing
a Sass library, you might want to allow your users to configure your
library’s variables before you use them to generate CSS.
>
> To make this possible, Sass provides the `!default` flag. This assigns
a value to a variable only if that variable isn’t defined or its value
is [null](https://sass-lang.com/documentation/values/null). Otherwise,
the existing value will be used.
In past versions of Ionic Framework, developers wrote Sass variables to
rebuild Ionic Framework using their own values. In the latest versions
of Ionic Framework, this is not possible.
## What is the new behavior?
Removes the `!default` flag from all Sass variables.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
-------
Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
Issue number: None
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
This PR follows the architectural changes defined on the _SCSS
Architecture Design Doc_. Due to some of the developments done in the
meantime, not everything that was defined on that document was followed
and some sections were simplified.
Overall, there were two guidelines that supported the work on this PR:
- Have no impact on the current scss partials & CSS architecture for the
`md/iOS` themes.
- Make everything related to the new `Ionic` Theme separated.
Based on these, here're the changes made:
**On Themes folder (private):**
- Renamed current internal scss partials on src/themes, related to
md/iOS, to `native.*.scss` and move them to a new folder, called
`native`. Updated imports on all framework.
- Removed the ionic prefix from the name of the mixins and function
partials on src/themes. Updated imports on all framework.
- Created new folder, named ionic, inside src/themes. This holds the
`ionic.globals.scss`, with all the mixins and functions forwarded, to be
used on other scopes.
- Replaced on already created Ionic theme files, the usage of tokens and
mixins with @use, to instead _@use
"../../themes/ionic/ionic.globals.scss" as globals;_. This ensures an
equal approach is followed everywhere and also makes it easier to change
the files imported or paths, in the future, as its all in the same
global file.
- Updated the foundations `readMe` file, with the new process for using
globals.
**On css folder (public):**
- Created new folder, named `ionic`, inside src/css. This holds all the
files related exclusively to Ionic Theme, following the same structure
as exists now for md/iOS, with a core, a bundle, utils, etc. Some files
were a bit duplicated, to eliminate imports from ios or md theme
partials. The only file common to both Themes is the `normalize.scss`.
- No folder structure or renamings were done on the existing output, to
prevent breaking-changes for developers already making imports from this
folder.
- Updated typography and link partials to use globals instead of tokens.
- Changed `font-size` styles on typography to be on `body`, instead of
`html`, to enable correct support of accessibility features on browsers
and devices, related to `font-size`.
**Other changes related to global styles new architecture:**
- Updated margin & padding utility-classed generated by token, to
include css variables and padding/margin mixins.
- Updated link test to use new global Ionic bundle, correct
utility-class on ion-content and updated snapshots. The font-size
changed to 16, as its now the default on the body.
- Updated typography snapshots.
- Updated prettier format on all scss files. Later on we should make
sure this is equal for all team members.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
---------
Co-authored-by: Sean Perkins <sean@ionic.io>
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Adds the base architecture to add a new theme configuration to Ionic
Framework components.
- Components can now specify an additional stylesheet for the `ionic`
theme.
- Developers can specify the `theme` and `mode` independently to control
look and feel of a component.
Test infrastructure has been updated to add support for testing the
theme configuration with Playwright.
- Existing `themes` test configuration has been renamed to `palettes`
This PR is just the initial effort to decouple Ionic's architecture to
separate look and feel and allow our dev team to start introducing the
new component appearance to the UI. There will be additional changes
required to completely add support for the Ionic theme. These changes
are targeted against the `next` branch and are not expected to be used
in a production environment at this time.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Migrates the test infrastructure to use `palettes` instead of `themes`
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This **does not** change where the light/dark/high contrast styles live
or how they are consumed in the test infra. That work is done here:
https://github.com/ionic-team/ionic-framework/pull/29149
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
⚠️ This is a combination of previously approved PRs with the
exception of
fe9dca513c.
This change was made as a result of
https://github.com/ionic-team/ionic-framework-design-documents/pull/248.
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Users do not have a way of increasing the contrast in Ionic apps. This
is valuable for people with low vision as increasing the contrast
between foreground and background content helps improve readability.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds a high contrast light and high contrast dark theme. As with our
other themes, developers can choose between system, class, and always
stylesheets.
While we aim to improve contrast for text and UI components, this
feature prioritizes text in the event that both text and UI component
cannot be improved without one negatively impacting the other.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.6.7-dev.11706894781.1cd59fde`
Testing instructions:
1. Open `src/themes/test/css-variables`. Activate the high contrast
light and dark themes to verify that contrast does increase.
2. Use the dev build to integrate the theme into a test app (conference
app, starter app, etc).
I'd recommend using these imports:
```css
@import "@ionic/angular/css/themes/high-contrast.system.css";
@import "@ionic/angular/css/themes/high-contrast-dark.system.css";
```
Note: Make sure this is imported **after** `core.scss`
---------
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
There are some tests that use Playwright's `waitForSelector`
[function](https://playwright.dev/docs/api/class-page#page-wait-for-selector).
However, Playwright has informed the community to not use this function
by labeling it as
[discouraged](https://playwright.dev/docs/api/class-page#page-wait-for-selector).
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Replaced `waitForSelector` with the
[recommended](https://playwright.dev/docs/api/class-page#page-wait-for-selector)
`waitFor`
[function](https://playwright.dev/docs/api/class-locator#locator-wait-for).
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
N/A
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The team would like to ensure that Ionic Framework components that use
an Ionic color (primary, secondary, etc) on top of a contrast color pass
minimum contrast ratios as defined in the WCAG.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Introduces a revised set of Ionic colors that pass AA color contrast
guidelines when with the appropriate contrast.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Issue number: resolves#28617
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
We currently check to see if `webkitOverflowScrolling` is supported on
the refresher's style object in order to enable to native iOS refresher.
This works well for iOS, but it does not work for iPadOS. This is
because this property was removed in iPadOS 13:
https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
> Disabled -webkit-overflow-scrolling: touch on iPad. All frames and
scrollable overflow areas now use accelerated one-finger scrolling
without changing stacking.
As a result, the native iOS refresher does not activate on iPadOS.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- I think it's safe to assume that `webkitOverflowScrolling` may be
removed on iOS in the future too since it was already removed on iPadOS.
As a result, I implemented a solution that avoids checking this.
- The `CSS.supports` check is required because otherwise the native iOS
refresher would be activated in an emulated environment such as Chrome
dev tools because the user agent is spoofed. The `apple-pay-logo-black`
named image is only supported on Apple devices.
Risks:
- Apple could remove the `apple-pay-logo-black` named image in the
future. However, we currently use this check elsewhere in Ionic too and
it has worked well:
60303aad23/core/src/components/datetime/datetime.ios.scss (L177).
- Apple could add touch emulation to desktop Safari which could cause
the native refresher to activate when using responsive design mode for
testing. However, this would only impact app developer and would not
impact production use cases.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.5.8-dev.11703088210.14a72b83`
Co-authored-by: Sean Perkins <sean-perkins@users.noreply.github.com>
---------
Co-authored-by: Sean Perkins <sean-perkins@user.noreply.github.com>
Issue number: resolves#28716
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
All components that have per-mode stylesheets can have their mode
adjusted by setting `mode` on the component. We use the `setMode`
function to determine which mode to use on the component:
516b84475e/core/src/global/ionic-global.ts (L75)
While this works on refresher, it is missing the `virtualProp` jsdoc
comment which causes it to not have the appropriate type information. As
a result, when developers try to use a JS binding for `mode`, they will
get compilation errors.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds virtualProp for mode to refresher
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
I am considering this a bug fix instead of a feature. In non-TypeScript
environments you can set `mode` on `ion-refresher` and it does change
the mode. What's missing here is the type information associated with
it.
Dev build: `7.6.2-dev.11702914017.1ae72da5`
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
As part of FW-2832, the team would like to swap out usages of the any
type for stronger types.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
c529bc23f1
- `scrollToTop` doesn't return anything, so I added the `void` return
type
a96971ad28
- `animation.effect` is a type of
[AnimationEffect](https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect).
One of the more common types of effects is a `KeyframeEffect`. However,
TypeScript doesn't know which specific type of AnimationEffect we are
using, so I cast `animation.effect` as KeyframeEffect where appropriate.
- I also added `!` to places where we know the effect and other
properties are always defined (since they run after the web animation
has been constructed)
- Added stronger types to the internal to/from/fromTo functions (the
public facing type improvements are in
https://github.com/ionic-team/ionic-framework/pull/28334)
fdaf550059
- `getRootNode` can return multiple types of objects, so I cast it to
the specific types that we work with in `isFocused`.
46a6efa510
- Added the "Animation" type and resolved related errors once we had
stronger types
a7cb9a5685
- Made heavier use of the `T` generic
- Once we know `node` is an Element (`nodeType === 1`) we manually cast
the element as `T`
6a9d1f095d
- The focus visible utility is an internal utility, but it was lacking
an interface, so I added one.
90b64c2de5
- Removed unneeded HTMLElement casting
- Added `!` since we can assume the selected elements are defined with
the refresher
- Added documentation as to why casting `referencEl.style` as `any` is
something we need to keep.
3a084caf83
- Avoided the Event naming collision by using globalThis
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Note: This PR contains only type changes. Changes the required updates
to the implementation of Ionic are pulled out into separate PRs and
target a minor release branch to minimize risk.
---------
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: multiple internals
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Multiple tests that use gestures are flaky on GitHub. Due to that those
tests are being skipped.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `page.mouse.move` will not work as expected if it the mouse moves
outside of the viewport. This may lead to events to not fire every time.
There's now a check to determine if the coordinates are valid. If they
are not, then it will update the coordinates to be as close to the
viewport's edge instead of being outside.
- Safari doesn't repaint the frame as often as the other browsers. This
causes the tests on GitHub to appear to be lagging. Now the frame is
forced to repaint only for Safari.
- Most tests are no longer being skipped.
- Range is still having issues on GitHub. It is no longer flaky locally
with the changes in this PR. I've had to revert them back to skip until
further notice.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
If this PR is merged, then:
- FW-3006, FW-2795, and FW-3079 can be closed
- FW-4556 still needs to remain open since range is still flaky on
GitHub
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: Internal
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Ionic currently detects and uses Capacitor APIs for different plugins
(haptics, status bar and keyboard). This implementation does not have
type safety and can result in unexpected behaviors.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Adds `@capacitor/core`, `@capacitor/keyboard`, `@capacitor/haptics`
and `@capacitor/status-bar` as dev dependencies. These should _only_ be
used with `import type { }`.
- Refactors the plugin usages to be typed against the plugin packages,
while using a duplicate enum when needing a value. This allows us to not
bundle the capacitor plugins with Ionic Framework.
- Introduces a `getCapacitor()` function for interacting with the
`window.Capacitor` object through a typed object.
**How does it work?**
The idea is we want the type safety from the Capacitor packages, without
directly bundling that source code within Ionic Framework. This means we
use the Capacitor deps where a type is needed, but clone any enums where
a value is referenced. If a Capacitor dep changes the supported values,
Typescript will fail to compile and that will signal to use to update
our enum values to match any changes.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev-build: `7.1.2-dev.11688696027.1c4d4ad1`
Tested against a demo app for some of the core behavior:
https://github.com/sean-perkins/capacitor-ionic-plugins-demo
Issue number: resolves#27601
---------
## What is the current behavior?
The current behavior restores overflow styles while moving (within the
setCSS function).
## What is the new behavior?
Overflow styles are restored when refresher gesture ends.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
Honestly, I don't know exactly. From code perspective I would say 'Yes',
but I can't get the impact of the change.
Ionic Team edit: There are no changes to the public API, and this is
fixing a behavior that used to work so there are no breaking changes.
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Refresher tests are using legacy syntax
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Refresher tests are using modern syntax
299b562d52
- These tests check the pull to refresh behavior which does not vary
across directions, so I removed the extra checks.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->
<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
This is the first PR to introduce the infrastructure required to add
test generators to the Ionic Framework project. This PR introduces the
file name changes necessary to support two playwright configs, so I
recommend reviewing the PR by commit:
1e5012cea1
- Created a `playwright.config-legacy.ts` file and updates
`package.json`.
- Running `npm run test.e2e` will run the generator tests, and running
`npm run test.e2e.legacy` will run the legacy tests.
4fe8de7df7
- Updates the GitHub Action scripts to run both the modern and legacy
E2E tests. I added command modifiers to avoid collisions with output
directories.
e8bcfaf926
- Updates `*.e2e.ts` files to have the legacy format name:
`*.e2e-legacy.ts`. This naming scheme is required for the two Playwright
configs to pull in the correct files. When migrating tests to
generators, team members will rename the file to remove the `-legacy`
part.
5bf196c36d
(warning: lots of files!)
- Updates the `*.e2e.ts-snapshots` directories to have the legacy format
name: `*.e2e-legacy.ts-snapshots`. The screenshot directory in
Playwright is generated based on the test file name which is why we are
updating the screenshot directory. When migrating tests to generators,
team members will rename the directory to remove the `-legacy` part.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The Ionic Framework team would like to re-evaluate our approach to improving customization options when building mobile applications. We are looking at other solutions that a) make customizing an app UI easier and b) are applicable to a broader set of developers.
