[WEB-5072] chore: propel combobox improvement

[anmolsinghbhatia]

Description

This PR includes propel combobox improvements.

Type of Change

• Improvement

Summary by CodeRabbit

• New Features
  • Added an optional property to Combobox options to apply a custom class to the dropdown positioner, enabling finer control over its styling (e.g., width, shadows, z-index, animations).
  • Backwards compatible: no behavior changes; existing implementations continue to work without modification.

[Copilot]

Pull Request Overview

This PR adds positioning customization capabilities to the propel combobox component by introducing a new positionerClassName prop.

• Adds positionerClassName prop to the ComboboxOptionsProps interface
• Passes the new prop through to the Popover.Panel component for positioning control

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[coderabbitai]

Walkthrough

Adds an optional positionerClassName prop to ComboboxOptionsProps and forwards it to Popover.Panel via a matching attribute in the Combobox options render path. No other logic or control flow changes.

Changes

Cohort / File(s)	Change summary
Combobox options prop pass-through packages/propel/src/combobox/combobox.tsx	Introduces positionerClassName?: string in ComboboxOptionsProps and passes it to Popover.Panel (positioner). No other behavior modified.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [WEB-4683] feat: popover component added to propel package #7607 — Introduces Popover/Positioner/Panel implementation that the new Combobox prop targets.
• [WEB-4682 | WEB-4685] feat: propel comobobox and command component  #7615 — Prior changes to Combobox/ComboboxOptions that this prop extension builds upon.

Suggested labels

🌟enhancement

Suggested reviewers

• vamsikrishnamathala

Poem

A twitch of whiskers, a hop in place,
I gift a class for the dropdown space.
Positioner primped, with style so fine,
Combobox sighs, “At last, a line!”
I thump in joy—CSS aligned. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The PR description only includes a brief summary and the type of change but omits required sections such as Test Scenarios and References from the repository template and lacks detail on the specific improvements made.	Please expand the description to detail the specific changes (for example, the new positionerClassName prop), add a Test Scenarios section outlining how you verified the changes, and include References to related issues or tickets.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title references the combobox improvement and includes the ticket number and change type, which aligns with the changeset adding a new optional positionerClassName prop, but it remains somewhat generic and does not specify the core addition.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chore-propel-combobox-improvement

---

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.}

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5072] Propel combobox z-index problem

This comment was auto-generated by Plane

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/propel/src/combobox/combobox.tsx (1)

245-245: Consider wrapping positionerClassName with cn() for consistency.

The className prop is wrapped with cn() to merge and deduplicate Tailwind classes, but positionerClassName is passed directly. For consistency and to support scenarios where multiple class names need merging, consider applying the same treatment.

Apply this diff:

-    <Popover.Panel sideOffset={8} className={cn(className)} positionerClassName={positionerClassName}>
+    <Popover.Panel sideOffset={8} className={cn(className)} positionerClassName={cn(positionerClassName)}>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f6677f2 and dfdf71b.

📒 Files selected for processing (1)

• packages/propel/src/combobox/combobox.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/propel/src/combobox/combobox.tsx (1)

packages/propel/src/utils/classname.tsx (1)

• cn (4-4)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (2)

packages/propel/src/combobox/combobox.tsx (2)

42-42: LGTM!

The addition of the optional positionerClassName prop follows existing naming conventions and provides a clean way to customize the positioner styling.

---

241-241: LGTM!

The parameter destructuring correctly includes the new positionerClassName prop.