feat(Interaction): new Interaction component#617
Open
noahchoii wants to merge 27 commits into
Open
Conversation
|
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 12 minutes and 18 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
📝 WalkthroughWalkthroughIntroduces a new ChangesInteraction Component Extraction and Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
noahchoii
changed the title
Interaction componentInteraction component
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 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 `@packages/core/src/components/checkbox/checkbox.tsx`:
- Around line 63-64: The CheckboxProvider component on line 63 of checkbox.tsx
is missing the invalid prop in its value object, preventing
CheckboxIndicatorPrimitive from accessing the invalid state needed for proper
styling and data attributes. Add the invalid prop to the value object passed to
CheckboxProvider alongside the existing size and indeterminate props to ensure
the invalid state is properly propagated through the context.
In `@packages/core/src/components/interaction/interaction.test.tsx`:
- Around line 95-107: The console.error mocking in the test may not be properly
restored if the assertion fails, causing the mock to leak into subsequent tests.
Wrap the code block containing the console.error mocking assignment and the
expect().toThrow() call in a try-finally statement to guarantee that
console.error is restored to its previousError value regardless of assertion
outcome. This same pattern needs to be applied at both affected locations (lines
95-107 and lines 110-118) to ensure consistent cleanup in all test cases.
In `@packages/core/src/components/interaction/interaction.tsx`:
- Around line 40-50: The children merge logic in the cloneElement call has two
issues: first, the order is incorrect with the overlay (element) appearing first
instead of last, which contradicts the test contract in interaction.test.tsx
Line 121; second, when variantProps.type is 'form', setting children to
undefined removes the original child.props.children instead of preserving them.
Fix this by reordering the children fragment to have child.props.children first
followed by element, and change the conditional to always include the merged
children regardless of type, ensuring the overlay consistently appears as the
last child.
In `@packages/core/src/components/navigation-menu/navigation-menu.tsx`:
- Around line 128-139: The Interaction wrapper migration is inconsistently
applied across components, causing inconsistent interaction state handling. At
packages/core/src/components/navigation-menu/navigation-menu.tsx, wrap the
NavigationMenuTriggerPrimitive component with the Interaction wrapper (similar
to how NavigationMenuLink is wrapped at the anchor location) to ensure
consistent state representation. Additionally, at
packages/core/src/components/pagination/pagination.tsx, apply the same
Interaction wrapping strategy to both PaginationPreviousPrimitive and
PaginationNextPrimitive components (which share the same styles.button axis as
PaginationButtonPrimitive) to maintain consistent state handling across all
pagination button variants.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 52a65614-385a-41d0-9755-909281737125
⛔ Files ignored due to path filters (4)
packages/core/__tests__/screenshots/interaction--test-bed-1-chrome-darwin-.pngis excluded by!**/*.pngpackages/core/__tests__/screenshots/interaction--test-bed-1-edge-darwin-.pngis excluded by!**/*.pngpackages/core/__tests__/screenshots/interaction--test-bed-1-firefox-darwin-.pngis excluded by!**/*.pngpackages/core/__tests__/screenshots/interaction--test-bed-1-safari-darwin-.pngis excluded by!**/*.png
📒 Files selected for processing (34)
packages/core/src/components/button/button.css.tspackages/core/src/components/button/button.tsxpackages/core/src/components/checkbox/checkbox.css.tspackages/core/src/components/checkbox/checkbox.tsxpackages/core/src/components/interaction/index.tspackages/core/src/components/interaction/interaction.css.tspackages/core/src/components/interaction/interaction.stories.tsxpackages/core/src/components/interaction/interaction.test.tsxpackages/core/src/components/interaction/interaction.tsxpackages/core/src/components/menu/menu.css.tspackages/core/src/components/menu/menu.tsxpackages/core/src/components/multi-select/multi-select.css.tspackages/core/src/components/multi-select/multi-select.tsxpackages/core/src/components/navigation-menu/navigation-menu.css.tspackages/core/src/components/navigation-menu/navigation-menu.tsxpackages/core/src/components/pagination/pagination.css.tspackages/core/src/components/pagination/pagination.tsxpackages/core/src/components/radio-card/radio-card.css.tspackages/core/src/components/radio-card/radio-card.tsxpackages/core/src/components/radio/radio.css.tspackages/core/src/components/radio/radio.tsxpackages/core/src/components/segmented-control/segmented-control.css.tspackages/core/src/components/segmented-control/segmented-control.tsxpackages/core/src/components/select/select.css.tspackages/core/src/components/select/select.tsxpackages/core/src/components/switch/switch.css.tspackages/core/src/components/switch/switch.tsxpackages/core/src/components/tabs/tabs.css.tspackages/core/src/components/tabs/tabs.tsxpackages/core/src/components/text-input/text-input.css.tspackages/core/src/components/text-input/text-input.tsxpackages/core/src/components/textarea/textarea.css.tspackages/core/src/components/textarea/textarea.tsxpackages/core/src/index.ts
💤 Files with no reviewable changes (13)
- packages/core/src/components/text-input/text-input.css.ts
- packages/core/src/components/switch/switch.css.ts
- packages/core/src/components/tabs/tabs.css.ts
- packages/core/src/components/button/button.css.ts
- packages/core/src/components/checkbox/checkbox.css.ts
- packages/core/src/components/textarea/textarea.css.ts
- packages/core/src/components/radio/radio.css.ts
- packages/core/src/components/segmented-control/segmented-control.css.ts
- packages/core/src/components/radio-card/radio-card.css.ts
- packages/core/src/components/select/select.css.ts
- packages/core/src/components/menu/menu.css.ts
- packages/core/src/components/navigation-menu/navigation-menu.css.ts
- packages/core/src/components/multi-select/multi-select.css.ts
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/core/src/components/interaction/interaction.test.tsx (1)
66-67: 💤 Low value중복 검증을 제거하여 가독성을 개선하세요.
queryByTestId가null을 반환하면 해당 요소는 자동으로 document에 존재하지 않습니다. Line 67의not.toBeInTheDocument()검증만으로 충분합니다.♻️ 제안하는 수정
- expect(interactionElement).toBeNull(); expect(interactionElement).not.toBeInTheDocument();🤖 Prompt for 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. In `@packages/core/src/components/interaction/interaction.test.tsx` around lines 66 - 67, The code contains redundant assertions checking the same condition twice. The expect(interactionElement).toBeNull() assertion on the first line is redundant because when queryByTestId returns null, the subsequent expect(interactionElement).not.toBeInTheDocument() assertion already verifies this condition. Remove the redundant toBeNull() assertion and keep only the not.toBeInTheDocument() check to improve code readability and avoid unnecessary duplicate validation.
🤖 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.
Nitpick comments:
In `@packages/core/src/components/interaction/interaction.test.tsx`:
- Around line 66-67: The code contains redundant assertions checking the same
condition twice. The expect(interactionElement).toBeNull() assertion on the
first line is redundant because when queryByTestId returns null, the subsequent
expect(interactionElement).not.toBeInTheDocument() assertion already verifies
this condition. Remove the redundant toBeNull() assertion and keep only the
not.toBeInTheDocument() check to improve code readability and avoid unnecessary
duplicate validation.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 53b7ceae-ea4d-4646-8f52-09c3b4d04040
⛔ Files ignored due to path filters (5)
packages/core/__tests__/screenshots/interaction--test-bed-1-chrome-darwin-.pngis excluded by!**/*.pngpackages/core/__tests__/screenshots/interaction--test-bed-1-edge-darwin-.pngis excluded by!**/*.pngpackages/core/__tests__/screenshots/interaction--test-bed-1-firefox-darwin-.pngis excluded by!**/*.pngpackages/core/__tests__/screenshots/interaction--test-bed-1-safari-darwin-.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yaml
📒 Files selected for processing (4)
apps/storybook/.storybook/main.tsapps/storybook/package.jsonpackages/core/src/components/interaction/interaction.stories.tsxpackages/core/src/components/interaction/interaction.test.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/storybook/.storybook/main.ts
6 tasks
Collaborator
|
✅ All tests passed!
Click here if you need to update snapshots. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description of Changes
Summary by CodeRabbit
::beforepseudo-element to handle interaction states. However, this approach had limitations, as it consumed one of the available pseudo-element slots for users, and if a user absolutely had to use::before, the interaction styles could break.Interactioncomponent that inserts an actualdivelement inside the interactive element, replacing the previous method for handling interaction styles.Checklist
Before submitting the PR, please make sure you have checked all of the following items.