feat(Picker): support 'root' attribute #1442
Conversation
bolchowka
added
feature
WalkthroughThe changes introduce a new optional Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Picker
participant FloatingPortal
User->>Picker: Render Picker
Picker->>FloatingPortal: Pass root prop
FloatingPortal->>FloatingPortal: Render with custom root
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
packages/react-components/src/components/Picker/Picker.tsx(2 hunks)packages/react-components/src/components/Picker/types.ts(2 hunks)
🔇 Additional comments (3)
packages/react-components/src/components/Picker/types.ts (2)
4-4: LGTM: Clean import addition
Import is properly placed with other floating-ui imports.
136-139: LGTM: Well-documented root property
The new root property is:
- Properly typed using FloatingPortalProps
- Well documented with clear JSDoc
- Correctly marked as optional
packages/react-components/src/components/Picker/Picker.tsx (1)
42-42: LGTM: Clean prop addition
The root prop is properly positioned among other portal-related props.
| @@ -149,7 +150,7 @@ export const Picker: React.FC<IPickerProps> = ({ | |||
| </PickerTrigger> | |||
| <FloatingNode id={nodeId}> | |||
| {isOpen && ( | |||
| <FloatingPortal> | |||
| <FloatingPortal root={root}> | |||
There was a problem hiding this comment.
💡 Codebase verification
Add story for custom portal root
The root prop is properly typed and implemented, but there's no story demonstrating its usage. Current stories don't cover portal behavior customization.
- Add a new story in
Picker.stories.tsxshowcasing therootprop with a custom container element - Include examples of portal mounting to different DOM elements
🔗 Analysis chain
Verify portal behavior with custom root
The implementation looks correct. Consider adding a Storybook story that demonstrates the root prop functionality with different root elements.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if there's a corresponding story for root prop
rg -l "root.*?FloatingPortal" "packages/react-components/src/components/Picker/**/*.stories.tsx"
Length of output: 203
Script:
#!/bin/bash
# Let's first check if stories exist in the correct location
fd "stories.tsx" packages/react-components/src/components/Picker/
# Check for any stories related to Picker component
fd "stories.tsx" . | grep -i "picker"
# Let's also verify the actual implementation of FloatingPortal usage
rg "FloatingPortal" packages/react-components/src/components/Picker/
Length of output: 951
Script:
#!/bin/bash
# Let's check the content of the Picker stories to see if root prop is covered
cat packages/react-components/src/components/Picker/Picker.stories.tsx
# Also check the types file to understand root prop definition
cat packages/react-components/src/components/Picker/types.ts
Length of output: 13484
Description
Adds support for
rootproperty of FloatingPortal used inPickercomponent.Storybook
https://feature-picker-root--613a8e945a5665003a05113b.chromatic.com
Summary by CodeRabbit
rootprop to thePickercomponent, allowing users to customize the portal's root element.Pickercomponent with the addition of therootproperty in the interface.