Add group class to Collapsible for state change listening

[ixfloma]

Description

Added proper group/collapsible declaration to ensure the chevron icon animates correctly when the collapsible is opened.
Previously, the chevron rotation did not trigger because the parent group class was missing, so Tailwind’s group-data-[state=open]/collapsible:rotate-180 variant had no effect.

Related Issues

No linked issue

Checklist

• My code follows the code style of this project.
• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have updated the documentation, if necessary.
• I have added tests that prove my fix is effective or my feature works.
• New and existing tests pass locally with my changes.

Screenshots (if applicable)

Additional Notes

I've added the initial state of rotate-0 and change the rotation into -rotate-180 since it felt unintuitive rotating counter-clockwise

Summary by CodeRabbit

• Bug Fixes
  • Chevron icon now reliably rotates to reflect open/closed states in collapsible sections, improving visual feedback and consistency.
• Style
  • Smoother, state-synced toggle animation for collapsible headers, aligned with grouped interactions.

[vercel]

@ixfloma is attempting to deploy a commit to the Haste Ventures Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates a Collapsible usage by adding a group/collapsible class to listen for group-data state and modifying the ChevronDown icon’s rotation classes to rely on that state. Adds inline comments describing the new behavior.

Changes

Cohort / File(s)	Summary
Collapsible group-data classes apps/docs/app/patterns/components/client.tsx	Add group/collapsible to Collapsible; change ChevronDown rotation from rotate-180 to rotate-0 with group-data-[state=open]/collapsible:-rotate-180; insert explanatory comments.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly captures the primary change of adding a group class to the Collapsible component to enable state change listening, using clear and concise phrasing without extraneous details.
Description Check	✅ Passed	The pull request description closely follows the repository’s template by providing a clear description of the change, a Related Issues section noting no linked issue, a populated checklist reflecting the current work, screenshots, and additional notes explaining implementation details.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/docs/app/patterns/components/client.tsx (2)

218-219: LGTM! Consider refining the comment.

The group/collapsible class correctly enables Tailwind's group-data state variants. The implementation is sound and fixes the chevron animation issue.

However, the comment could be more concise and grammatically correct. Consider:

-        // Seems group hasn't declared yet, this is important to listen the group-data state change
+        // Named group enables group-data state variants for child elements
         className="group/collapsible"

---

238-239: LGTM! Consider refining the comment.

The rotation classes correctly implement the chevron animation. The explicit rotate-0 initial state is good practice, and -rotate-180 provides the intended clockwise rotation effect.

However, the comment has a grammatical error. Consider:

-              {/* this chevron group-data now listen to group/collapsible */}
+              {/* Chevron rotation responds to collapsible group state */}
               <ChevronDown className="ml-auto transition-transform rotate-0 group-data-[state=open]/collapsible:-rotate-180" />

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 56e8dc4 and 48b1f73.

📒 Files selected for processing (1)

• apps/docs/app/patterns/components/client.tsx (2 hunks)

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
kibo	Ready	Preview	Comment	Oct 14, 2025 3:45am