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 has an initiative to remove much of the
`any` usage in favor of stronger types. This will make modifications to
this codebase safer as we will have access to proper type checking.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed several `any` usages in favor of stronger types.
Note that not all of the `any` types within these files have been
removed. I mainly stuck to the low hanging fruit 😄
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
I intentionally made type changes that do not impact public APIs. Any
incorrect type changes would cause our CI checks to fail.
<!--
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. -->
Issue number: resolves#28351
---------
<!-- 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 collapsible large title transition does not support Dynamic Font
Scaling as the position values are all hardcoded. Additionally, I
noticed that the title and the text do not align very well even at the
default font scale.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
I made a few changes to support Dynamic Font Scaling, fix the default
scale alignment, and generally make this code easier to maintain (or at
least I hope it will):
1. Removed most hardcoded values in favor of bounding box calculations.
The hardcoded values that remain have comments explaining what they are.
2. Modified the back button animation so the container handles the
translation and have the back button text animation handle its scale.
Having the back button text handle the translation and the scale at the
same time made it hard to figure out what the correct values should be.
3. Added a lot of comments explaining what we are doing/why
**When the Large Title and Back Button Texts Do Not Match**
| `FW-4146` (default) | branch (default) | `FW-4146` (scaled) | branch
(scale) |
| - | - | - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/a6261499-c5ca-4ee3-af62-fa124718ca46"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/0648c0b1-e1f8-43c1-9e7e-91489cc8ec4a"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/0def6d88-22d0-48b9-98b3-0ed2bbb407aa"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/3650ceb1-f4cb-4530-b7c6-17194f4ccd66"></video>
|
**When the Large Title and Back Button Texts Do Match**
| `FW-4146` (default) | branch (default) | `FW-4146` (scaled) | branch
(scale) |
| - | - | - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/2b8035a4-81aa-4901-99e1-fd49db1fd0d7"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/e3c66978-2015-484e-b337-73ac1c4c02a1"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/437483a8-2495-4c54-9c27-47c91af4c562"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/05ef08b0-cf0d-469d-8834-533071a8c583"></video>
|
## 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 that the alignment of the title/button will not exactly match
native iOS. The goal of this PR is to get something that is pretty close
(similar to how it was when we originally implemented this)
---------
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: resolves#24638, resolves#18592
---------
<!-- 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. -->
Developers have requested that Ionic Framework support the dynamic type
feature on iOS for accessibility purposes. Ionic applications do not
respond to font scaling on iOS which can create inaccessible
applications particularly for users with low vision. Ionic apps on
Android devices currently support the Android equivalent due to
functionality in the Chromium webview.
Developers have also requested a way of adjusting the fonts in their
Ionic UI components consistently.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ionic components now use `rem` instead of `px` where appropriate. This
means devs can change the font size on `html` and the text in supported
Ionic components will scale up/down appropriately
- Add support for Dynamic Type on iOS (the iOS version of Dynamic Font
Scaling)
## 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. -->
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
* begin fix collapsible title with multi toolbars
* fix back button
* adjust large title positioning
* a few adjustments
* remove whitespace
* add types
* fix type
* make requested changes
* add e2e
* add RTL support
* fix typo
* add info on how to make collapsable title
* add usage examples
* fix typo
* fix another typo
* fix typos
* update usage
* fix alpha order
* update api
* add class to collapse buttons
* merge
* update
* change back to collapse
* remove platform specific class
* update docs
* run build
* update api again
* run build
* Add new keyframes proof of concept
* update esm import
* add base before and after methods, add tests
* add base before and after hooks
* update clean up methods, add tests
* add web animations support, change to arrow functions
* remove console logs
* add from, to, fromTo, and other properties
* add more tests, fix onFinish functionality, being testing with nav transitions
* add progress methods, use force linear
* run linter
* Add playSync
* integrate animations with framework components
* onFinish now supports multiple callbacks
* change const to let
* testing reverse
* add support for both animation utilities
* bug fix
* export createAnimation, a few tweaks
* add base tests
* fix issue with onFinish being called out of order. added tests
* fix race conditions in tests
* clean up
* fix bug where onFinish not calling for empty elements array, update test
* clean up
* fix treeshaking, remove old comments
* remove old tests
* Add test for animationbuilder backwards compat
* update typings for menu controller
* mock web animations in tests
* run build
* fix type errors
* sync with master
* use requestAnimationFrame instead of writeTask
* fix flaky tests, fix menu
* fix ordering
* update webdriver
* fix wrong version
* Revert "fix wrong version"
This reverts commit be91296e9701399f8d784b08d09a3c475ca15df7.
Revert chromedriver update
* Revert "update webdriver"
This reverts commit e49bc9d76e335a0af5828725065399bd6795fa37.
Revert chromedriver update
* expose raw animation object, add tests
* add stylesheet recycling
* finalize before and after hook tests
* a few styling changes
* fix lint warnings
* get rid of old code
* Fix progressStep overflow bug
* disable reuse stylesheet
* small updates
* fix old animation create
* setStyleProperty helper
* reuse keyframe styles
* keyframes
* fix css animation issue with display: none, add tests
* add comment
* fix issue with progress animations and css animations
* clean up
* clean up pt2
* fix tests
* fix linter
* add fill for overlays
* fix swipe to go back
* clean up css animations when done
* fix edge cases with css animations
* fix menu open and close
* add reset function
* clean up reset fn
* Fix issue where animation always being reset
* allow updating animations on the fly
* add clear onfinish method
* fix linter
* add callback options, expand force direction
* ensure opts is defined
* fix css animations open and close for menus
* remove test
* add extra check
* clean up
* fix css anim bug swipe to go back
* fix pause
* setup alt animation to avoid flickering
* clean up
* reset flags on destroy
* add ability to change duration on progressEnd
* fix flicker on duration change for css animations
* fix ios transition
* remove unneeded recursion
* increase durability of updating css animations on the fly
* fix gesture anim
* fix web anim as well. more work for cleanup
* simplify progressEnd for css animations
* fix swipe to go back race condition
* clean up
* Add todo
* fix one more bug
* fix(transition): add all header toolbars to ios transition
* test(nav): add 2nd toolbar to test transition
* fix(transition): add remaining toolbar children to animation
* fix(transition): fix incorrect variable name
* fix(toolbar): fix bug in safari, clean up code, update test
* fix typo
* change elems to els
* change Elem to El
