* 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
This changes the border into a linear gradient background image which allows us to avoid the height decrease on press and have the same border as the background color when pressed.
- merges all action sheet tests to the basic directory (except standalone, translucent), references #16715
- removes the height shift on press, fixes#16790
- fixes the cancel button on iOS so it is `#ffffff` by default
- gets the look of the action sheet closer to native for iOS
- only applies the translucent and backdrop filter if it is supported by the browser (chrome will not show transparent anymore)
- updates documentation to describe when translucent will show up
- adds documentation on how to use screenshot tests
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 |
This commit also refactors ion-toast, so it uses shadow-dom,
this is required since CSS variables
does not work well in non-shadow-dom components.
fixes#16099
Updates all of the global variables to make sure their naming is consistent, their default values are correct, they are used properly by the related components, and remove any that are not used.
- removes some of the non mode-specific global Sass variables
- updates the md and ios values so that the default is the css variable
with different fallbacks
- removes non-color related css variables from the global file
- fixes item so it uses the background color that is set by the global
file
# Breaking Changes
## Removed Global CSS Variables
The following global CSS variables have been removed for the reasons listed.
| Variable Name | Reason |
| ----------------------------------| ------------------------------------------------|
| `--ion-toolbar-color-inactive` | Unused |
| `--ion-ripple-background-color` | Unused / Ripple color is based on component |
| `--ion-header-size` | Removed in favor of using CSS for h1-h6 |
| `--ion-header-step` | Removed in favor of using CSS for h1-h6 |
## Renamed Global CSS Variables
The following global CSS variables have been renamed for the reasons listed.
| Old Variable Name | New Variable Name | Reason |
| -----------------------------------------| -----------------------------------| ------------------------------------------------------------------------------|
| `--ion-toolbar-text-color` | `--ion-toolbar-color` | Variable is not limited to text color |
| `--ion-toolbar-color-active` | `--ion-toolbar-color-activated` | Consistency with our component variables |
| `--ion-tabbar-text-color` | `--ion-tab-bar-color` | Variable is not limited to text color |
| `--ion-tabbar-text-color-active` | `--ion-tab-bar-color-activated` | Consistency with our component variables |
| `--ion-tabbar-background-color` | `--ion-tab-bar-background` | Applies to the background property |
| `--ion-tabbar-background-color-focused` | `--ion-tab-bar-background-focused` | Applies to the background property |
| `--ion-item-background-color` | `--ion-item-background` | Applies to the background property |
| `--ion-item-background-color-active` | `--ion-item-background-activated` | Applies to the background property / Consistency with our component variables |
| `--ion-item-text-color` | `--ion-item-color` | Variable is not limited to text color |
| `--ion-placeholder-text-color` | `--ion-placeholder-color` | Consistency with other variables |
Fixes#15989Fixes#15559
