fix: add smooth transitions to FAQ accordion for better UX #4783
Conversation
Recxsmacx
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg,
princerajpoot20 and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThe AccordionItem component now measures its content height via a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
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. Comment |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4783--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/Accordion/AccordionItem.tsx
🧰 Additional context used
🪛 GitHub Actions: PR testing - if Node project
components/Accordion/AccordionItem.tsx
[error] 45-45: Prettier formatting issue detected. Run 'prettier --write' to fix code style in this file.
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
🔇 Additional comments (3)
components/Accordion/AccordionItem.tsx (3)
26-27: LGTM!Good approach using a ref to measure the actual content height and state to drive the CSS transition.
35-39: LGTM!The effect correctly recalculates height on active state change. For static FAQ content, this works well.
Note: If the accordion content ever becomes dynamic (e.g., async-loaded), you may need to add a ResizeObserver to handle content size changes while expanded.
57-67: LGTM!Clean implementation of height-based animation. The structure correctly separates the animated container (with
overflow-hiddenandmaxHeight) from the inner content div that holds the ref for height measurement.
| <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> | ||
| <path | ||
| d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' | ||
| stroke='#556061' | ||
| stroke-width='1.5' | ||
| stroke-linecap='round' | ||
| stroke-linejoin='round' | ||
| /> | ||
| </svg> |
There was a problem hiding this comment.
Use camelCase for SVG attributes in JSX.
React requires camelCase for SVG attributes. The kebab-case attributes will cause React warnings in the console.
🔎 Proposed fix
<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9'
stroke='#556061'
- stroke-width='1.5'
- stroke-linecap='round'
- stroke-linejoin='round'
+ strokeWidth='1.5'
+ strokeLinecap='round'
+ strokeLinejoin='round'
/>
</svg>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> | |
| <path | |
| d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' | |
| stroke='#556061' | |
| stroke-width='1.5' | |
| stroke-linecap='round' | |
| stroke-linejoin='round' | |
| /> | |
| </svg> | |
| <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> | |
| <path | |
| d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' | |
| stroke='#556061' | |
| strokeWidth='1.5' | |
| strokeLinecap='round' | |
| strokeLinejoin='round' | |
| /> | |
| </svg> |
🤖 Prompt for AI Agents
In components/Accordion/AccordionItem.tsx around lines 46 to 54, the SVG uses
kebab-case attributes (stroke-width, stroke-linecap, stroke-linejoin) which
React warns about; change them to camelCase (strokeWidth, strokeLinecap,
strokeLinejoin) and keep other attributes (width, height, viewBox, fill, xmlns)
unchanged, then rebuild/lint to ensure no more JSX SVG attribute warnings.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4783 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 22 22
Lines 798 798
Branches 146 146
=========================================
Hits 798 798 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
@Recxsmacx Please don’t ignore the PR description template. |
|
@princerajpoot20 Sure !! mentioned the issue number will take care in future |
3 participants
fixes #4566
https://github.com/user-attachments/assets/3d40af93-6e61-4652-b742-a8ffaf90ce33
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.