Skip to content

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Oct 31, 2025

Update incidents icon animation to draw exclamation sequentially

Replaced the shake animation on the incidents icon with a draw animation that sequentially draws the exclamation line from top to bottom (0-60% of animation), then shows the dot (60-100%). Animation completes in 0.3s.

What was the motivation & context behind this PR?

User requested in Slack to change the incidents icon animation from shaking on hover to drawing the exclamation mark sequentially. The SVG was also updated to a new design provided by the user. After initial implementation, the user requested speed adjustments (0.8s → 0.5s → 0.3s).

Slack thread: https://buildwithfern.slack.com/archives/C09NRQ471UK/p1761941230058009?thread_ts=1761941230.058009

How has this PR been tested?

⚠️ NOT VISUALLY TESTED - The animation was not tested by hovering over the actual incidents icon because it requires authentication to access the dashboard navigation. All changes were made based on code analysis and mathematical calculations. CI passes but manual visual verification is critically needed.

Review checklist - IMPORTANT

Must verify visually:

  1. Animation appearance: Hover over the incidents icon in the dashboard navigation and verify the line draws smoothly from top to bottom, followed by the dot appearing
  2. Stroke-dasharray accuracy ⚠️: The hardcoded value of 3.125 was calculated mathematically from the path coordinates but may not match the actual rendered path length. Watch for:
    • Gaps or jumps in the line drawing
    • Line not fully drawing to completion
    • Line appearing all at once instead of drawing
  3. Timing: The 60% split (line completes at 60%, dot shows after) was chosen without visual testing and may need adjustment
  4. Duration: The 0.3s duration went through multiple untested iterations (0.8s → 0.5s → 0.3s). Verify it doesn't feel too rushed or too slow
  5. No visual regressions: Verify the icon looks identical when not animating (splitting into 3 paths could cause subtle rendering differences)
  6. Dark mode: Test in both light and dark themes
  7. Accessibility: Verify prefers-reduced-motion properly disables the animation

Technical changes:

  • Updated AlertIconAnimated component to use new SVG structure with separate paths for triangle, exclamation line, and dot
  • Added alert-draw-line keyframe animation using stroke-dasharray/stroke-dashoffset
  • Added alert-show-dot keyframe animation using opacity
  • Updated CSS selectors from .alert to .alert-line and .alert-dot

Link to Devin run: https://app.devin.ai/sessions/59f25a7775e048cbad54c2a0d05cbba7
Requested by: Kapil Gowru ([email protected]) (@kgowru)

@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@vercel
Copy link
Contributor

vercel bot commented Oct 31, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
dev.ferndocs.com Ready Ready Preview Nov 5, 2025 5:02pm
fern-dashboard Ready Ready Preview Nov 5, 2025 5:02pm
fern-dashboard-dev Ready Ready Preview Nov 5, 2025 5:02pm
ferndocs.com Ready Ready Preview Nov 5, 2025 5:02pm
preview.ferndocs.com Ready Ready Preview Nov 5, 2025 5:02pm
prod-assets.ferndocs.com Ready Ready Preview Nov 5, 2025 5:02pm
prod.ferndocs.com Ready Ready Preview Nov 5, 2025 5:02pm
1 Skipped Deployment
Project Deployment Preview Updated (UTC)
fern-platform Ignored Ignored Nov 5, 2025 5:02pm

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