Skip to content

feat(elements): Enable Blueprint animations#4718

Open
jfox-box wants to merge 4 commits into
masterfrom
add-blueprint-animations
Open

feat(elements): Enable Blueprint animations#4718
jfox-box wants to merge 4 commits into
masterfrom
add-blueprint-animations

Conversation

@jfox-box

@jfox-box jfox-box commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Enables Blueprint animations in Elements (Explorer, Picker, Preview, Sidebar, Uploader, Sharing, Presence)

  • Adds withBlueprintAnimations to enable Blueprint phase 1 & 2 animations by default
  • Users can opt out with animationsEnabled={false}.
    • they can also opt into specific phases of animations:
      animationsEnabled={{ animationsPhase1Enabled: true }}

Followup: animations phase 3 is in progress in Blueprint, we should add when they ship it.

Summary by CodeRabbit

  • New Features

    • Added configurable animation support across content explorer, picker, preview, sharing, sidebar, and uploader experiences.
    • Animations can be enabled or disabled globally or independently by animation phase.
    • Storybook previews now display components with both animation phases enabled by default.
  • Tests

    • Added coverage for animation defaults, overrides, prop handling, and phase-specific behavior.

@jfox-box
jfox-box requested review from a team as code owners July 22, 2026 22:56
@jfox-box jfox-box changed the title feat(deps): enable Blueprint animations feat(elements): enable Blueprint animations Jul 22, 2026
@coderabbitai

coderabbitai Bot commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

Adds a reusable withBlueprintAnimations HOC with boolean and per-phase controls, applies it to content component exports, and configures Storybook stories with both Blueprint animation phases enabled. Tests cover resolution, prop filtering, and passthrough behavior.

Changes

Blueprint animations

Layer / File(s) Summary
Animation HOC contract and validation
src/elements/common/withBlueprintAnimations.tsx, src/elements/common/__tests__/withBlueprintAnimations.test.tsx
Defines animation prop types, resolves phase settings, configures BlueprintProvider, filters animationsEnabled, and tests defaults, overrides, and prop forwarding.
Component export integration
src/elements/content-explorer/ContentExplorer.tsx, src/elements/content-picker/ContentPicker.js, src/elements/content-preview/ContentPreview.js, src/elements/content-sharing/*, src/elements/content-sidebar/ContentSidebar.js, src/elements/content-uploader/ContentUploader.tsx
Adds withBlueprintAnimations to the default export wrapper chains and exposes the raw ContentSharingV2Component.
Storybook animation decorator
.storybook/preview.tsx
Types the preview configuration and wraps stories with BlueprintProvider, noop treatment, and both animation phases enabled.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Storybook
  participant AnimationDecorator
  participant BlueprintProvider
  participant Story
  Storybook->>AnimationDecorator: render story
  AnimationDecorator->>BlueprintProvider: set animation phases enabled
  BlueprintProvider->>Story: render wrapped story
Loading

Possibly related PRs

Suggested labels: ready-to-merge

Suggested reviewers: tjuanitas, jpan-box

Poem

I’m a rabbit with phases that glow,
Wrapping each story in Blueprint’s flow.
Props hop through clean,
With animations seen—
Two bright little ears say “go!”

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly states the main change: enabling Blueprint animations in Elements.
Description check ✅ Passed The description covers the main change, affected areas, opt-out behavior, and follow-up note.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch add-blueprint-animations

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.storybook/preview.tsx:
- Around line 33-47: Update withBlueprintAnimations in .storybook/preview.tsx so
Chromatic explicitly disables both animationsPhase1Enabled and
animationsPhase2Enabled for all wrapped components, including their nested
BlueprintProvider instances; retain the existing enabled configuration for
non-Chromatic runs.

In `@src/elements/common/withBlueprintAnimations.tsx`:
- Around line 15-26: Update the WithBlueprintAnimations wrapper to destructure
enableBlueprintAnimations before rendering Component, forwarding only the
remaining props so the HOC-only control prop cannot reach wrapped DOM elements.
Add a regression test using a DOM-facing child that verifies the control prop is
not rendered as an attribute.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c2c55441-2ad1-43c4-b541-7dc19de20c7f

📥 Commits

Reviewing files that changed from the base of the PR and between e8139fd and b487b80.

📒 Files selected for processing (11)
  • .storybook/preview.tsx
  • src/elements/common/__tests__/withBlueprintAnimations.test.tsx
  • src/elements/common/withBlueprintAnimations.tsx
  • src/elements/content-explorer/ContentExplorer.tsx
  • src/elements/content-picker/ContentPicker.js
  • src/elements/content-preview/ContentPreview.js
  • src/elements/content-sharing/ContentSharing.js
  • src/elements/content-sharing/ContentSharingV2.tsx
  • src/elements/content-sidebar/ContentSidebar.js
  • src/elements/content-uploader/ContentUploader.tsx
  • src/features/presence/PresenceAvatarList.tsx

Comment thread .storybook/preview.tsx Outdated
Comment thread src/elements/common/withBlueprintAnimations.tsx Outdated
@jfox-box jfox-box changed the title feat(elements): enable Blueprint animations feat(elements): Enable Blueprint animations Jul 23, 2026
@jfox-box
jfox-box force-pushed the add-blueprint-animations branch 2 times, most recently from f5221ff to ee33922 Compare July 23, 2026 03:26

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/elements/common/withBlueprintAnimations.tsx`:
- Around line 9-16: Rename the exported control prop in BlueprintAnimationsProps
and its resolution in withBlueprintAnimations to enableBlueprintAnimations,
preserving the existing boolean and per-phase behavior. Update
src/elements/common/withBlueprintAnimations.tsx lines 9-16 and the resolver at
line 53; replace animationsEnabled inputs in
src/elements/common/__tests__/withBlueprintAnimations.test.tsx lines 50-105 and
verify enableBlueprintAnimations is not forwarded to the rendered element.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d33b4ab9-8aa0-4c19-a746-3baf8b1b850b

📥 Commits

Reviewing files that changed from the base of the PR and between b8af62a and ee33922.

⛔ Files ignored due to path filters (1)
  • src/features/presence/__tests__/__snapshots__/Presence.test.js.snap is excluded by !**/*.snap
📒 Files selected for processing (11)
  • .storybook/preview.tsx
  • src/elements/common/__tests__/withBlueprintAnimations.test.tsx
  • src/elements/common/withBlueprintAnimations.tsx
  • src/elements/content-explorer/ContentExplorer.tsx
  • src/elements/content-picker/ContentPicker.js
  • src/elements/content-preview/ContentPreview.js
  • src/elements/content-sharing/ContentSharing.js
  • src/elements/content-sharing/ContentSharingV2.tsx
  • src/elements/content-sidebar/ContentSidebar.js
  • src/elements/content-uploader/ContentUploader.tsx
  • src/features/presence/PresenceAvatarList.tsx
🚧 Files skipped from review as they are similar to previous changes (8)
  • src/elements/content-picker/ContentPicker.js
  • src/elements/content-sidebar/ContentSidebar.js
  • src/elements/content-sharing/ContentSharingV2.tsx
  • src/elements/content-uploader/ContentUploader.tsx
  • src/elements/content-preview/ContentPreview.js
  • src/elements/content-explorer/ContentExplorer.tsx
  • .storybook/preview.tsx
  • src/elements/content-sharing/ContentSharing.js

Comment thread src/elements/common/withBlueprintAnimations.tsx Outdated
@jfox-box
jfox-box force-pushed the add-blueprint-animations branch from ee33922 to 0bce84c Compare July 23, 2026 04:05
Comment thread src/features/presence/PresenceAvatarList.tsx Outdated
Comment thread .storybook/preview.tsx Outdated
jfox-box added 2 commits July 23, 2026 13:37
Animations will be turned on by default in all elements. Opt out with `animationsEnabled={false}`.
@jfox-box
jfox-box force-pushed the add-blueprint-animations branch from 0bce84c to 4ff5fa3 Compare July 23, 2026 20:45
}

export default withBlueprintModernization(ContentSharing);
export default withBlueprintAnimations(withBlueprintModernization(ContentSharing));

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think V2 AND V1 both need the providers right? V1 doesn't have any blueprint components in it. it's just calling v2

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the wrapper from V1 and put it around V2 instead.

Comment on lines +22 to +23
await waitFor(() => {
expect(screen.getByRole('heading', { name: 'Share ‘Box Development Guide.pdf’' })).toBeVisible();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you able to just await the expect? or does it actually need the waitFor?

Suggested change
await waitFor(() => {
expect(screen.getByRole('heading', { name: 'Share ‘Box Development Guide.pdf’' })).toBeVisible();
await expect(screen.getByRole('heading', { name: 'Share ‘Box Development Guide.pdf’' }).toBeVisible();

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately await expect won't work because it will find the element but the opacity won't be high enough to count as visible. waitFor will keep retrying until it becomes visible

* - `false`: all phases off
* - object: per-phase overrides (omitted keys default on)
*/
animationsEnabled?: boolean | BlueprintAnimationPhases;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

consumers pass this prop in from the root element right?

such as:

<ContentPreview ... animationsEnabled={...} />

if that's the case, I think coderabbits suggestion is better. something like enableBlueprintAnimations:

  1. it matches the modernization prop
  2. it specifies that this is specifically for blueprint

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok makes sense 🆗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants