IgniteUI / igniteui-angular / 21351760281

92%

push

github

fix(ripple): prevent layout break when ripple styles excluded and migrate to Web Animations API (#16792)

Fixes #16759

Problem:
- igxRipple directive caused host element layout breaks when ripple CSS was excluded from theme
- Ripple element relied on CSS (.igx-ripple__inner) for position: absolute
- Without the CSS, ripple became a regular block element, causing parent to expand
- AnimationBuilder and @angular/animations APIs deprecated in v20.2, scheduled for removal in v23

Solution:
1. Added position: absolute as inline style to ensure layout stability regardless of theme configuration
2. Migrated from deprecated AnimationBuilder to native Web Animations API
   - Removed dependency on @angular/animations package
   - Replaced builder.build().create() with element.animate()
   - Updated animation lifecycle handling (onDone -> onfinish)
3. Created comprehensive test suite (previously missing) with 8 test cases including:
   - Layout stability verification without CSS
   - Inline style application checks
   - Disabled, centered, and targeted ripple scenarios
   - Custom color support

Benefits:
- Fixes layout issue when ripple styles excluded from production builds
- Future-proof: removes usage of deprecated Angular animations
- Better performance: hardware-accelerated native Web Animations API
- Smaller bundle: no @angular/animations dependency needed
- Comprehensive test coverage for ripple directive

BREAKING CHANGES: None - all existing ripple functionality and API remain unchanged

14302 of 16846 branches covered (84.9%)

3 of 3 new or added lines in 1 file covered. (100.0%)

28770 of 31399 relevant lines covered (91.63%)

34871.04 hits per line