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

[simeonoff]

Summary

• Fixes Themes: Using ripple with its styles excluded breaks layout #16759: igxRipple directive breaking host element layout when ripple CSS excluded from theme
• Migrates ripple directive from deprecated AnimationBuilder to native Web Animations API
• Adds comprehensive test suite (previously missing) with 8 test cases

Problem

1. Layout Issue: The ripple directive created a <span> element that relied on CSS (.igx-ripple__inner) for position: absolute. When ripple styles were excluded from the theme (common in production optimization), the ripple element became a regular block element, causing the parent button to expand in size.

2. Deprecated APIs: AnimationBuilder and the entire @angular/animations package are deprecated as of Angular v20.2 and will be removed in v23.

Solution

1. Fixed Layout Stability

File: projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:112

• Added position: absolute as an inline style in the setStyles() method
• Ensures layout stability regardless of whether ripple CSS is included in the theme
• Uses only the minimal critical style needed (position absolute)

2. Migrated to Web Animations API

File: projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts:150-170

Changes:

• Removed: AnimationBuilder, style, and animate from @angular/animations imports
• Removed: protected builder = inject(AnimationBuilder);
• Replaced: this.builder.build([...]).create(rippleElement) with native rippleElement.animate([...], {...})
• Updated: Animation lifecycle handling from animation.onDone() to animation.onfinish
• Removed: animation.play() call (Web Animations API plays automatically)

3. Comprehensive Test Coverage

File: projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.spec.ts (new)

Created test suite with 8 test cases:

1. Initialization test
2. Critical test: Verifies button size doesn't change when ripple is triggered without CSS
3. Verifies position absolute is set inline
4. Tests disabled ripple functionality
5. Tests custom ripple color
6. Tests centered ripple
7. Tests ripple target specification
8. Tests all required inline styles are applied

All tests use spies on renderer.setStyle to verify styles are applied correctly.

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 for ripple
• ✅ Comprehensive test coverage for ripple directive

Testing

npm test -- projects/igniteui-angular/directives/ripple

All tests passing:

IgxRipple
  ✓ Should initialize ripple directive on button
  ✓ Should not affect host element size when ripple is triggered without CSS styles
  ✓ Should create ripple element with position absolute style
  ✓ Should not create ripple when disabled
  ✓ Should apply custom ripple color as background style
  ✓ Should center ripple when igxRippleCentered is true
  ✓ Should apply ripple to target element when igxRippleTarget is specified
  ✓ Should set all required ripple element styles including position absolute

TOTAL: 8 SUCCESS

Breaking Changes

None - all existing ripple functionality and API remain unchanged.

Files Changed

• Modified: projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.ts

  • Added inline position: absolute style
  • Migrated from AnimationBuilder to Web Animations API
  • Removed dependency on @angular/animations

• Created: projects/igniteui-angular/directives/src/directives/ripple/ripple.directive.spec.ts

  • New comprehensive test suite with 8 test cases