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;