fix(components/tabs)!: replace @angular/animations with CSS transitions#4288
fix(components/tabs)!: replace @angular/animations with CSS transitions#4288Blackbaud-SteveBrush merged 26 commits intomainfrom
@angular/animations with CSS transitions#4288Conversation
📝 WalkthroughWalkthroughThis pull request migrates the tabs components from Angular animations to CSS-based animations with provider-based test configuration. Changes include replacing Angular animation triggers with CSS class bindings, removing animation state properties from services, introducing a reactive animation-enabled signal, and updating all test files to use the new Changes
Sequence DiagramsequenceDiagram
participant Component as Sectioned Form<br/>Component
participant Signal as animationEnabled<br/>Signal
participant Template as Template<br/>(HTML)
participant CSS as CSS<br/>Transitions
Note over Component,CSS: Animation Initialization
Component->>Signal: Set animationEnabled = false (initial)
Component->>Component: afterNextRender callback registered
Note over Component,CSS: First Render Completes
Component->>Signal: Enable animationEnabled via signal(true)
Signal-->>Template: Notify of state change
Note over Component,CSS: Animation Playback
Template->>Template: Apply class when animationEnabled = true
Template->>CSS: Bind sky-animation-slide-enter-left/right
CSS->>CSS: CSS transition executes
CSS-->>Template: transitionEnd event fires
Template->>Component: Handler processes completion
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
Comment Tip You can disable poems in the walkthrough.Disable the |
|
View your CI Pipeline Execution ↗ for commit 836bf08
☁️ Nx Cloud last updated this comment at |
libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.spec.ts
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
This PR migrates SkySectionedFormComponent and SkyVerticalTabsetComponent from @angular/animations to CSS-based transitions (SKY UX animations), and updates affected tests/fixtures to disable CSS transitions via provideNoopSkyAnimations().
Changes:
- Replace Angular animation triggers with CSS transition classes and a transition-end handler where needed.
- Update unit tests, harness tests, and example/integration specs to use
provideNoopSkyAnimations()(andprovideNoopAnimations()where Angular animations are still relevant). - Remove
@angular/animationsfrom@skyux/tabspeer dependencies.
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| libs/components/tabs/testing/src/modules/vertical-tabset/vertical-tabset-harness.spec.ts | Switch harness tests from NoopAnimationsModule to provideNoopSkyAnimations(). |
| libs/components/tabs/testing/src/modules/sectioned-form/sectioned-form-harness.spec.ts | Switch harness tests from NoopAnimationsModule to provideNoopSkyAnimations(). |
| libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.service.ts | Remove Angular-animation state fields/constants previously used by triggers. |
| libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.module.ts | Import _SkyAnimationTransitionHandlerDirective needed for CSS transition completion events. |
| libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts | Remove @angular/animations; add afterNextRender/signal-based animation enabling. |
| libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html | Replace Angular triggers with CSS classes + skyAnimationTransitionHandler and (transitionEnd). |
| libs/components/tabs/src/lib/modules/vertical-tabset/fixtures/vertical-tabs-fixtures.module.ts | Replace NoopAnimationsModule with provideNoopSkyAnimations() for fixtures. |
| libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.ts | Remove @angular/animations; add afterNextRender/signal-based animation enabling. |
| libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.html | Replace Angular triggers with CSS transition classes. |
| libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.spec.ts | Update expectations to validate actual visible content rather than animation state. |
| libs/components/tabs/src/lib/modules/sectioned-form/fixtures/sectioned-form-fixtures.module.ts | Replace NoopAnimationsModule with provideNoopSkyAnimations() for fixtures. |
| libs/components/tabs/package.json | Remove @angular/animations peer dependency. |
| libs/components/core/src/lib/modules/animations/shared/transition-handler.ts | Tighten transitionTrigger typing and adjust noop-mode emission behavior. |
| libs/components/core/src/lib/modules/animations/shared/transition-handler.spec.ts | Update tests for new transitionTrigger typing + new noop-mode init behavior. |
| libs/components/code-examples/src/lib/modules/tabs/wizard/basic/modal.component.spec.ts | Replace NoopAnimationsModule with provider-based noop for Angular + SKY UX animations. |
| libs/components/code-examples/src/lib/modules/tabs/vertical-tabs/mixed/example.component.spec.ts | Update example tests to disable SKY UX CSS transitions via provider. |
| libs/components/code-examples/src/lib/modules/tabs/vertical-tabs/grouped/example.component.spec.ts | Update example tests to disable SKY UX CSS transitions via provider. |
| libs/components/code-examples/src/lib/modules/tabs/vertical-tabs/basic/example.component.spec.ts | Update example tests to disable SKY UX CSS transitions via provider. |
| libs/components/code-examples/src/lib/modules/tabs/sectioned-form/modal/example.component.spec.ts | Update example tests to disable SKY UX CSS transitions via provider. |
| apps/integration/src/app/integrations/vertical-tabset-back-to-top/vertical-tabset-back-to-top.component.spec.ts | Update integration test to disable SKY UX CSS transitions via provider. |
libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.ts
Outdated
Show resolved
Hide resolved
libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
Outdated
Show resolved
Hide resolved
libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
Show resolved
Hide resolved
libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.html (1)
22-25: ReplacengClasswith explicit class bindings in this touched template block.The newly updated block still uses
ngClass, which conflicts with the template guideline and can be converted directly to class bindings.♻️ Proposed refactor
`@if` (maintainSectionContent || tabService.tabsVisible()) { <div class="sky-sectioned-form-tabs" [class.sky-animation-slide-enter-left]="animationEnabled()" - [ngClass]="{ - 'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(), - 'sky-sectioned-form-tabs-only': !tabService.contentVisible() - }" + [class.sky-sectioned-form-tabs-hidden]="!tabService.tabsVisible()" + [class.sky-sectioned-form-tabs-only]="!tabService.contentVisible()" > <ng-content /> </div> } `@if` (maintainSectionContent || tabService.contentVisible()) { <div `#skySectionSideContent` class="sky-sectioned-form-content" [class.sky-animation-slide-enter-right]="animationEnabled()" - [ngClass]="{ - 'sky-sectioned-form-content-hidden': !tabService.contentVisible() - }" + [class.sky-sectioned-form-content-hidden]="!tabService.contentVisible()" ></div> }As per coding guidelines:
**/*.component.html: Do NOT usengClass; useclassbindings instead in Angular templates.Also applies to: 35-37
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.html` around lines 22 - 25, The template is using ngClass for conditional classes which violates the component HTML guideline; replace the ngClass usage with explicit class bindings: bind the 'sky-sectioned-form-tabs-hidden' class to the inverse of tabService.tabsVisible() and bind the 'sky-sectioned-form-tabs-only' class to the inverse of tabService.contentVisible(), and apply the same replacement for the other touched block that uses ngClass (the block referencing tabService.contentVisible()/tabService.tabsVisible()). Ensure you remove the ngClass attribute and add the corresponding explicit class bindings on the same element.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@libs/components/code-examples/src/lib/modules/tabs/wizard/basic/modal.component.spec.ts`:
- Line 4: Remove the redundant NoopAnimationsModule import and its inclusion in
the TestBed imports, and rely solely on provideNoopSkyAnimations() in the
TestBed providers; specifically delete the "import { NoopAnimationsModule } ..."
line and remove NoopAnimationsModule from the TestBed.configureTestingModule({
imports: [...] }) array while keeping provideNoopSkyAnimations() in providers so
the test follows the migration pattern.
In
`@libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html`:
- Line 33: The template uses [ngClass] to toggle single classes; replace those
with direct class bindings: change the [ngClass] that adds
'sky-vertical-tabset-hidden' based on tabService.tabsVisible() to a class
binding [class.sky-vertical-tabset-hidden]="!tabService.tabsVisible()", and
change the [ngClass] that toggles 'sky-vertical-tabset-content-hidden' based on
tabService.contentVisible() to
[class.sky-vertical-tabset-content-hidden]="!tabService.contentVisible()";
update the occurrences in vertical-tabset template where
tabService.tabsVisible() and tabService.contentVisible() are used (replace the
ngClass attributes with the corresponding [class.*] bindings).
---
Nitpick comments:
In
`@libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.html`:
- Around line 22-25: The template is using ngClass for conditional classes which
violates the component HTML guideline; replace the ngClass usage with explicit
class bindings: bind the 'sky-sectioned-form-tabs-hidden' class to the inverse
of tabService.tabsVisible() and bind the 'sky-sectioned-form-tabs-only' class to
the inverse of tabService.contentVisible(), and apply the same replacement for
the other touched block that uses ngClass (the block referencing
tabService.contentVisible()/tabService.tabsVisible()). Ensure you remove the
ngClass attribute and add the corresponding explicit class bindings on the same
element.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b9bf7559-c040-43ac-9591-d4f3b8158a7b
📒 Files selected for processing (20)
apps/integration/src/app/integrations/vertical-tabset-back-to-top/vertical-tabset-back-to-top.component.spec.tslibs/components/code-examples/src/lib/modules/tabs/sectioned-form/modal/example.component.spec.tslibs/components/code-examples/src/lib/modules/tabs/vertical-tabs/basic/example.component.spec.tslibs/components/code-examples/src/lib/modules/tabs/vertical-tabs/grouped/example.component.spec.tslibs/components/code-examples/src/lib/modules/tabs/vertical-tabs/mixed/example.component.spec.tslibs/components/code-examples/src/lib/modules/tabs/wizard/basic/modal.component.spec.tslibs/components/docs-tools/src/lib/modules/code-example-viewer/code-example-viewer.component.spec.tslibs/components/tabs/package.jsonlibs/components/tabs/src/lib/modules/sectioned-form/fixtures/sectioned-form-fixtures.module.tslibs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.htmllibs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.spec.tslibs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.tslibs/components/tabs/src/lib/modules/vertical-tabset/fixtures/vertical-tabs-fixtures.module.tslibs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.htmllibs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.tslibs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.module.tslibs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.service.spec.tslibs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.service.tslibs/components/tabs/testing/src/modules/sectioned-form/sectioned-form-harness.spec.tslibs/components/tabs/testing/src/modules/vertical-tabset/vertical-tabset-harness.spec.ts
💤 Files with no reviewable changes (2)
- libs/components/tabs/package.json
- libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.service.ts
libs/components/code-examples/src/lib/modules/tabs/wizard/basic/modal.component.spec.ts
Show resolved
Hide resolved
libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset.component.html
Show resolved
Hide resolved
## [14.0.0-alpha.9](14.0.0-alpha.8...14.0.0-alpha.9) (2026-03-17) ### ⚠ BREAKING CHANGES * **components/indicators:** replace `@angular/animations` in tokens component with CSS transitions (#4303) * **components/tabs:** replace `@angular/animations` with CSS transitions (#4288) * **components/flyout:** replace `@angular/animations` with CSS transitions (#4285) ### Features * **components/lists:** deprecate filter summary ([#4307](#4307)) ([b5567d9](b5567d9)), closes [AB#3611503](https://dev.azure.com/blackbaud/Products/_workitems/edit/3611503) * **components/modals:** add modal banner ([#4275](#4275)) ([#4280](#4280)) ([b186fc2](b186fc2)) ### Bug Fixes * **components/core:** transition handler emits via microtask when animations disabled ([#4304](#4304)) ([3b9cd2d](3b9cd2d)) * **components/data-manager:** address data mutation during view updates ([#4309](#4309)) ([#4311](#4311)) ([6cadb59](6cadb59)), closes [AB#3705639](https://dev.azure.com/blackbaud/Products/_workitems/edit/3705639) * **components/flyout:** replace `@angular/animations` with CSS transitions ([#4285](#4285)) ([96aa341](96aa341)) * **components/indicators:** replace `@angular/animations` in tokens component with CSS transitions ([#4303](#4303)) ([bcb9d88](bcb9d88)) * **components/tabs:** replace `@angular/animations` with CSS transitions ([#4288](#4288)) ([90b183b](90b183b)) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Breaking Changes** * Indicators, tabs, and flyout components now use CSS transitions instead of animations. * **New Features** * Added modal banner component. * **Deprecations** * Filter summary in list components deprecated. * **Bug Fixes** * Animation behavior when disabled, data handling during updates, and transition styling improvements. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
@angular/animations with CSS transitions for search component
#4319
BREAKING CHANGE
SkySectionedFormComponentandSkyVerticalTabsetComponenthave replaced@angular/animationswith CSS transitions. Tests that interact with sectioned forms or vertical tabs in responsive/mobile mode may need to addprovideNoopSkyAnimations()from@skyux/coreto theirTestBedproviders to disable SKY UX CSS transitions during tests.AB#3913635
AB#3913634
Summary by CodeRabbit
Refactor
Tests
Chores