feat(ui): Add <Collapsible /> component
#7716
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: f552f0e The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📝 WalkthroughWalkthroughA new Collapsible component was added. CardAlert now conditionally wraps its Alert in the Collapsible when children are present and no longer applies the previous inline animation or imports. Collapsible animates height, opacity, and a mask-based collapse, respects prefers-reduced-motion and theme appearance settings, and controls mount/unmount timing. Two new appearance keys, `collapsible` and `collapsibleInner`, were added to element descriptors and ElementsConfig. CardAlert’s public signature is unchanged. 🚥 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. Comment |
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/ui/src/elements/__tests__/Collapsible.test.tsx`:
- Around line 266-287: The test replaces window.matchMedia with mockMatchMedia
but never restores the original, causing test pollution; update the test to save
the original (e.g., const originalMatchMedia = window.matchMedia) before
overriding, and after the assertion restore it (window.matchMedia =
originalMatchMedia) — preferably wrap the override in a try/finally or move the
restore into an afterEach that checks and resets window.matchMedia so
createFixtures / Collapsible tests don't leak the mocked matchMedia into other
tests.
| it('disables transitions when prefersReducedMotion is true', async () => { | ||
| const mockMatchMedia = vi.fn().mockReturnValue({ | ||
| matches: true, | ||
| media: '(prefers-reduced-motion: reduce)', | ||
| onchange: null, | ||
| addListener: vi.fn(), | ||
| removeListener: vi.fn(), | ||
| addEventListener: vi.fn(), | ||
| removeEventListener: vi.fn(), | ||
| dispatchEvent: vi.fn(), | ||
| }); | ||
|
|
||
| Object.defineProperty(window, 'matchMedia', { | ||
| writable: true, | ||
| value: mockMatchMedia, | ||
| }); | ||
|
|
||
| const { wrapper } = await createFixtures(); | ||
| const { container } = render(<Collapsible open>Content</Collapsible>, { wrapper }); | ||
|
|
||
| expect(container.querySelector('.cl-collapsible')).toBeInTheDocument(); | ||
| }); |
There was a problem hiding this comment.
Restore window.matchMedia after test to prevent test pollution.
The Object.defineProperty modification to window.matchMedia persists beyond this test since vi.clearAllMocks() only clears mock call history, not property definitions. This can cause flaky behavior in subsequent tests that rely on the real matchMedia.
Proposed fix
describe('Reduced Motion Handling', () => {
+ let originalMatchMedia: typeof window.matchMedia;
+
+ beforeEach(() => {
+ originalMatchMedia = window.matchMedia;
+ });
+
+ afterEach(() => {
+ Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: originalMatchMedia,
+ });
+ });
+
it('disables transitions when prefersReducedMotion is true', async () => {🤖 Prompt for AI Agents
In `@packages/ui/src/elements/__tests__/Collapsible.test.tsx` around lines 266 -
287, The test replaces window.matchMedia with mockMatchMedia but never restores
the original, causing test pollution; update the test to save the original
(e.g., const originalMatchMedia = window.matchMedia) before overriding, and
after the assertion restore it (window.matchMedia = originalMatchMedia) —
preferably wrap the override in a try/finally or move the restore into an
afterEach that checks and resets window.matchMedia so createFixtures /
Collapsible tests don't leak the mocked matchMedia into other tests.
Description
<Collapsible />component<CardAlert />to use<Collapsible />to smooth out animations when alerts are shownBEFORE
before.mov
AFTER
after.mov
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Tests
✏️ Tip: You can customize this high-level summary in your review settings.