fix(components/layout)!: replace @angular/animations in text expand component with CSS transitions

[Blackbaud-SteveBrush]

BREAKING CHANGE

SkyTextExpandComponent has replaced @angular/animations with CSS transitions. Tests that interact with text expand may need to add provideNoopSkyAnimations() from @skyux/core to their TestBed providers to disable SKY UX CSS transitions during tests.

import { provideNoopSkyAnimations } from '@skyux/core';

TestBed.configureTestingModule({
  providers: [provideNoopSkyAnimations()],
});

AB#3913628

Summary by CodeRabbit

Release Notes

• New Features

  • Added text-expand component examples to the playground with support for inline expansion, modal display, custom truncation limits, and newline preservation options.

• Refactor

  • Improved text expand/collapse animations by replacing animation directives with CSS-based transitions for enhanced performance and reliability.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2e9189e8-ffd8-44b1-926a-de9bf78b1a4c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR migrates the text-expand component from Angular animations to CSS transitions with new utilities for detecting disabled motion, adds a new playground feature demonstrating text-expand functionality, and updates test infrastructure from NoopAnimationsModule to provideNoopSkyAnimations across multiple test files.

Changes

Cohort / File(s)	Summary
Playground text-expand feature apps/playground/src/app/components/layout/layout.module.ts, apps/playground/src/app/components/layout/text-expand/text-expand-routing.module.ts, apps/playground/src/app/components/layout/text-expand/text-expand.component.ts, apps/playground/src/app/components/layout/text-expand/text-expand.component.html, apps/playground/src/app/components/layout/text-expand/text-expand.module.ts	New lazy-loaded playground feature module for text-expand component with routing configuration and sample usage scenarios demonstrating inline expansion, modal expand, custom max length, and newline preservation.
Text-expand component library libs/components/layout/src/lib/modules/text-expand/text-expand.component.ts, libs/components/layout/src/lib/modules/text-expand/text-expand.component.html, libs/components/layout/src/lib/modules/text-expand/text-expand.component.scss, libs/components/layout/src/lib/modules/text-expand/text-expand.module.ts, libs/components/layout/src/lib/modules/text-expand/text-expand-adapter.service.ts	Migrated component from Angular animations to CSS transitions with transition-based height control; added setContainerMaxHeight method to adapter service; converted module to standalone import pattern.
Animation handler utilities libs/components/core/src/lib/modules/animations/shared/animation-handler.ts, libs/components/core/src/lib/modules/animations/shared/animation-handler.spec.ts, libs/components/core/src/lib/modules/animations/shared/transition-handler.ts, libs/components/core/src/lib/modules/animations/shared/transition-handler.spec.ts, libs/components/core/src/lib/modules/animations/shared/utils.ts, libs/components/core/src/lib/modules/animations/shared/mimic-css-motion-event.ts	Introduced watchForDisabledCssAnimations and watchForDisabledCssTransitions utilities for microtask-based emission when CSS motion is disabled; removed legacy mimicCssMotionEvent; updated transition-handler with transitionPropertyToTrack input and setPropertyToTrack method.
Test infrastructure updates libs/components/layout/src/lib/modules/text-expand/text-expand.component.spec.ts, libs/components/layout/testing/src/modules/text-expand/text-expand-harness.spec.ts, libs/components/code-examples/src/lib/modules/layout/text-expand/.../example.component.spec.ts, libs/components/layout/src/lib/modules/text-expand/fixtures/*	Replaced NoopAnimationsModule with provideNoopSkyAnimations provider pattern; simplified test fixture by removing animation wrapper div; updated test cases to cover transitionend event cleanup.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~55 minutes

Possibly related PRs

• fix(components/split-view)!: replace @angular/animations with CSS transitions #4284: Closely related animation handling refactor with transitionPropertyToTrack and CSS transition migration
• feat(components/animations)!: deprecate @skyux/animations #4270: Parallel animation infrastructure changes replacing Angular animations with CSS transitions and provideNoopSkyAnimations
• fix(components/core): transition handler emits via microtask when animations disabled #4304: Related animation/transition utility modifications with watchForDisabledCss helpers and legacy mimicCssMotionEvent removal

Suggested reviewers

• johnhwhite
• Blackbaud-TrevorBurch

Poem

🐰 Hops of joy, transitions flow,
Animations watch where CSS lives below,
From Angular dance to CSS grace,
Max-heights expand at just the right pace! 🎨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 30.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: replacing Angular animations with CSS transitions in the text-expand component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch text-expand-animations

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 45c9943

Command	Status	Duration	Result
nx build code-examples-playground --baseHref=ht...	✅ Succeeded	6m 48s	View ↗
nx build playground --baseHref=https://blackbau...	✅ Succeeded	2m 42s	View ↗
nx build integration --baseHref=https://blackba...	✅ Succeeded	1m 6s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-18 14:47:11 UTC

[blackbaud-sky-build-user]

Storybook preview

Component Storybooks:

• ag-grid-storybook
• angular-tree-component-storybook
• data-manager-storybook
• errors-storybook
• filter-bar-storybook
• forms-storybook
• indicators-storybook
• layout-storybook
• lists-storybook
• lookup-storybook
• pages-storybook
• phone-field-storybook
• split-view-storybook
• tabs-storybook
• text-editor-storybook
• theme-storybook

Apps:

• code-examples-playground
• integration
• playground

[Copilot]

Pull request overview

Migrates the SkyTextExpandComponent expansion/collapse behavior from Angular animation triggers to CSS max-height transitions using SKY UX’s transition-end handler, and updates associated tests/examples to use SKY UX’s noop animation provider.

Changes:

• Replace Angular animation trigger usage with CSS max-height transitions + skyTransitionEndHandler to drive cleanup.
• Update unit tests and harness/code-example specs to use provideNoopSkyAnimations() instead of NoopAnimationsModule.
• Add a playground route and example page for the Text Expand component.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
libs/components/layout/src/lib/modules/text-expand/text-expand.component.ts	Reworks expand/collapse logic to set max-height for CSS transitions and cleans up on transition end.
libs/components/layout/src/lib/modules/text-expand/text-expand.component.html	Switches from Angular animation bindings to skyTransitionEndHandler directive bindings.
libs/components/layout/src/lib/modules/text-expand/text-expand.component.scss	Adds CSS transition rules for max-height on the container.
libs/components/layout/src/lib/modules/text-expand/text-expand-adapter.service.ts	Adds an adapter method to set max-height via the renderer.
libs/components/layout/src/lib/modules/text-expand/text-expand.module.ts	Updates module metadata to import the component (standalone-style).
libs/components/layout/src/lib/modules/text-expand/text-expand.component.spec.ts	Uses provideNoopSkyAnimations() and adds coverage for transitionend cleanup.
libs/components/layout/testing/src/modules/text-expand/text-expand-harness.spec.ts	Updates harness tests to use provideNoopSkyAnimations().
libs/components/layout/src/lib/modules/text-expand/fixtures/text-expand.module.fixture.ts	Removes NoopAnimationsModule from fixture module imports.
libs/components/layout/src/lib/modules/text-expand/fixtures/text-expand.component.fixture.html	Removes the Angular animation-disabled wrapper that’s no longer relevant.
libs/components/code-examples/src/lib/modules/layout/text-expand/modal/example.component.spec.ts	Updates example spec to use provideNoopSkyAnimations().
libs/components/code-examples/src/lib/modules/layout/text-expand/inline/example.component.spec.ts	Updates example spec to use provideNoopSkyAnimations().
apps/playground/src/app/components/layout/layout.module.ts	Adds a new lazy route entry for text-expand.
apps/playground/src/app/components/layout/text-expand/text-expand.module.ts	Adds a playground feature module for the new Text Expand route.
apps/playground/src/app/components/layout/text-expand/text-expand-routing.module.ts	Adds routing that lazy-loads the Text Expand playground component.
apps/playground/src/app/components/layout/text-expand/text-expand.component.ts	Adds a playground component demonstrating multiple Text Expand scenarios.
apps/playground/src/app/components/layout/text-expand/text-expand.component.html	Adds the playground template showcasing inline/modal/newlines configurations.

[coderabbitai]

🧹 Nitpick comments (1)

libs/components/core/src/lib/modules/animations/shared/utils.ts (1)

9-21: Consider exporting the interface for external consumers.

The EmitWhenMotionDisabledArgs interface is currently not exported. If external code needs to call these utility functions directly (outside of the animation/transition handlers), they would benefit from access to this type for proper typing.

However, given these utilities appear to be internal (@internal directive usage), keeping it unexported is likely intentional.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@libs/components/core/src/lib/modules/animations/shared/utils.ts` around lines
9 - 21, The interface EmitWhenMotionDisabledArgs is currently unexported; decide
whether it should be part of the public API: if external consumers must use it,
export the interface (add "export interface EmitWhenMotionDisabledArgs") so
callers get proper typing; if it is intentionally internal, add an explicit
`@internal` JSDoc comment above EmitWhenMotionDisabledArgs to make the intent
clear to readers and tooling. Ensure references in this file to
EmitWhenMotionDisabledArgs remain unchanged after the export/annotation.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@libs/components/core/src/lib/modules/animations/shared/utils.ts`:
- Around line 9-21: The interface EmitWhenMotionDisabledArgs is currently
unexported; decide whether it should be part of the public API: if external
consumers must use it, export the interface (add "export interface
EmitWhenMotionDisabledArgs") so callers get proper typing; if it is
intentionally internal, add an explicit `@internal` JSDoc comment above
EmitWhenMotionDisabledArgs to make the intent clear to readers and tooling.
Ensure references in this file to EmitWhenMotionDisabledArgs remain unchanged
after the export/annotation.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2b235ceb-abd4-43b0-83fd-bd45382de5ba

📥 Commits

Reviewing files that changed from the base of the PR and between f5685f6 and 6176ac4.

📒 Files selected for processing (7)

• apps/playground/src/app/components/layout/text-expand/text-expand.component.ts
• libs/components/core/src/lib/modules/animations/shared/animation-handler.spec.ts
• libs/components/core/src/lib/modules/animations/shared/animation-handler.ts
• libs/components/core/src/lib/modules/animations/shared/mimic-css-motion-event.ts
• libs/components/core/src/lib/modules/animations/shared/transition-handler.spec.ts
• libs/components/core/src/lib/modules/animations/shared/transition-handler.ts
• libs/components/core/src/lib/modules/animations/shared/utils.ts

💤 Files with no reviewable changes (1)

• libs/components/core/src/lib/modules/animations/shared/mimic-css-motion-event.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/playground/src/app/components/layout/text-expand/text-expand.component.ts