5.0.0-beta.6
Pre-release
Bug Fixes
- animation: add property conversions for CSS Animations (#20252), fixes #20251 (32a7401)
- content: set min-height to allow for sticky headers (#20265), fixes #20258 (e613f63)
- modal: card-style modal now opens at full width on larger devices (#20256), fixes #20255 (443cbd9)
- segment: clicking disabled button no longer adds ripple to active button (#20254), fixes #20253 (f896821)
Features
- components: improve button states and add new css properties (#19440) (9415929), closes #20213 #19965
- react: add Ionic Animations wrapper (experimental) (#20273) (b59d764)
- segment-button: add --indicator-height property to segment button (#19653) (d76a503)
BREAKING CHANGES
We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the developer console.
Activated Class
The activated class that is automatically added to buttons on press has been renamed to ion-activated. This will be more consistent with our ion-focused class we add and also will reduce conflicts with users' CSS.
CSS Variables
The --background-hover, --background-focused and --background-activated CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:
--background-hover: rgba(44, 44, 44, 0.08);
You will likely not see a hover state anymore. It should be updated to only set the desired color:
--background-hover: rgba(44, 44, 44);
If the opacity desired is something other than what the spec asks for, use:
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;