* chore(core): better animations
Updates animations to be closer to native
* Add css alternative
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
* 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 be91296e97.
Revert chromedriver update
* Revert "update webdriver"
This reverts commit e49bc9d76e.
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
- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling
fixes#17608
styles the item option properly when icons are slotted. This was not working before at all for `top` and `bottom` slots.
- removes the e2e test from item/sliding in favor of all of them being under item-sliding
- adds more usage examples for all frameworks
- updates the styling for an anchor option so that it displays properly
- updates the standalone e2e test to take screenshots of the start icon, top icon, and anchor options
- updates the interactive e2e test to work locally
- cleaned up the CSS for start/end icons
- verified the styles for ben approval 💪closes#17737fixes#17402
Reviews the `--width` and `--height` variables in each component to either remove or add them based on need.
- fixes a bug where the spinner color wasn't being set properly in loading
- adds css variables for customizing background, color, some borders in overlays
- fixes a bug where prefix, suffix are taking up too much width in picker
closes#16097
references ionic-team/ionic-docs#228
BREAKING CHANGES
## Core Components
Removes the `--width` and `--height` variables from the following components, in favor of CSS:
- Button
- FAB Button
- Checkbox
- Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable
- Radio
- Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size.
## Overlay Components
The following components have all be converted to shadow (or scoped) and have CSS variables for width/height:
- Action Sheet _(scoped)_
- Alert _(scoped)_
- Loading _(scoped)_
- Menu _(shadow)_
- Modal _(scoped)_
- Picker _(scoped)_
- Popover _(scoped)_
- Toast _(shadow)_
The above components will now have the following CSS variables for consistency among overlays:
| Name |
| ----------------- |
| `--height` |
| `--max-height` |
| `--max-width` |
| `--min-height` |
| `--min-width` |
| `--width` |
If the component does not set the value, it will default to `auto`.
## Removed CSS Variables
The following CSS properties have been removed:
| Component | Property | Reason |
| ---------------| --------------------| --------------------------------|
| **Button** | `--height` | Use CSS instead |
| **Button** | `--margin-bottom` | Use CSS instead |
| **Button** | `--margin-end` | Use CSS instead |
| **Button** | `--margin-start` | Use CSS instead |
| **Button** | `--margin-top` | Use CSS instead |
| **Button** | `--width` | Use CSS instead |
| **Checkbox** | `--height` | Use CSS or `--size` |
| **Checkbox** | `--width` | Use CSS or `--size` |
| **FAB Button** | `--width` | Use CSS instead |
| **FAB Button** | `--height` | Use CSS instead |
| **FAB Button** | `--margin-bottom` | Use CSS instead |
| **FAB Button** | `--margin-end` | Use CSS instead |
| **FAB Button** | `--margin-start` | Use CSS instead |
| **FAB Button** | `--margin-top | Use CSS instead |
| **Menu** | `--width-small` | Use a media query and `--width` |
| **Radio** | `--width` | Use CSS instead |
| **Radio** | `--height` | Use CSS instead |
| **Radio** | `--inner-height` | Calculated based on parent |
| **Radio** | `--inner-width` | Calculated based on parent |
BREAKING CHANGES
The outer-content class has been removed in favor of setting the color in your app instead:
```
.outer-content {
--background: #f2f2f2;
}
```
