Skip to content

feat(Dropdown): add boxMode for inline dropdown display #3171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 12 commits into
base: master
Choose a base branch
from
Draft

feat(Dropdown): add boxMode for inline dropdown display #3171

wants to merge 12 commits into from

Conversation

@rivka-ungar
Copy link
Contributor

@rivka-ungar rivka-ungar commented Nov 2, 2025 •
edited by qodo-merge-for-open-source bot
Loading

User description

https://monday.monday.com/boards/3532714909/views/113184182/pulses/18326494666

PR Type

Enhancement

Description

  • Add boxMode prop for inline dropdown display without popup

  • Implement type constraints ensuring boxMode requires searchable: true

  • Create new DropdownBoxMode component for inline menu rendering

  • Refactor menu logic into reusable MenuList component

  • Hide chevron button and adjust styling in box mode

  • Add comprehensive tests and documentation for box mode

Diagram Walkthrough

flowchart LR
  A["boxMode Prop Added"] --> B["Type Constraint: searchable required"]
  A --> C["DropdownBoxMode Component"]
  C --> D["Inline Menu Display"]
  C --> E["Input Container"]
  A --> F["Styling Updates"]
  F --> G["Hide Chevron"]
  F --> H["Box Mode Styles"]
  A --> I["Tests & Docs"]
Loading

File Walkthrough
Relevant files
Enhancement
12 files
Dropdown.types.ts
Add boxMode prop with searchable constraint                           
+193/-168
DropdownContext.types.ts
Include boxMode in inherited dropdown props                           
+1/-0     
DropdownBase.module.scss
Add box mode styling with transparent background                 
+15/-0   
DropdownBoxMode.module.scss
Create new box mode container and input styles                     
+41/-0   
DropdownBoxMode.tsx
Implement new DropdownBoxMode component                                   
+36/-0   
DropdownWrapperUI.tsx
Conditionally render DropdownBoxMode or DropdownPopup       
+2/-1     
Menu.tsx
Refactor menu logic into MenuList component                           
+3/-47   
MenuList.tsx
Extract reusable menu list rendering logic                             
+58/-0   
TriggerActions.tsx
Hide chevron button when boxMode is enabled                           
+16/-13 
DropdownBase.tsx
Apply boxMode class to wrapper element                                     
+13/-7   
DropdownComboboxController.tsx
Force menu open state in box mode                                               
+5/-2     
DropdownMultiComboboxController.tsx
Force menu open state in multi-select box mode                     
+5/-2     
Tests
1 files
Dropdown.test.tsx
Add comprehensive box mode test cases                                       
+50/-0   
Documentation
2 files
Dropdown.mdx
Add box mode documentation section                                             
+6/-0     
Dropdown.stories.tsx
Add BoxMode story with single and multi select                     
+63/-1   

@rivka-ungar rivka-ungar requested a review from a team as a code owner November 2, 2025 10:46
@rivka-ungar rivka-ungar changed the title Dropdown-add-boxmode-prop-18326494666 feat(Dropdown): add boxMode for inline dropdown display Nov 2, 2025
@qodo-merge-for-open-source qodo-merge-for-open-source bot changed the title feat(Dropdown): add boxMode for inline dropdown display Dropdown-add-boxmode-prop-18326494666 Nov 2, 2025
@qodo-merge-for-open-source
Copy link
Contributor

qodo-merge-for-open-source bot commented Nov 2, 2025

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
 Summary: ⚠️ Title violates Conventional Commits
⚡ Recommended focus areas for review

Console Side-Effect

Rendering logs an error via console.error when searchable is false; consider surfacing this through development-only warnings or prop-type/TS enforcement only to avoid runtime side-effects in production.

 
if (!searchable) {
  console.error("DropdownBoxMode: boxMode requires searchable to be true");
  return null;
}
Accessibility

When boxMode forces renderOptions=true, ensure getMenuProps provides appropriate aria attributes for an always-visible listbox and that focus management still works without a popup.

 
return (
  <BaseList<Item>
    size={size}
    options={filteredOptions}
    selectedItems={currentSelection}
    highlightedIndex={highlightedIndex}
    menuAriaLabel={menuAriaLabel}
    getMenuProps={enhancedGetMenuProps}
    getItemProps={getItemProps}
    withGroupDivider={withGroupDivider}
    stickyGroupTitle={stickyGroupTitle}
    dir={dir}
    itemRenderer={optionRenderer}
    noOptionsMessage={noOptionsMessage}
    renderOptions={boxMode ? true : isOpen}
    onScroll={onScroll}
    maxMenuHeight={maxMenuHeight}
    menuRenderer={menuRenderer}
  />
Visual Contrast

Box mode removes shadow and sets transparent background; verify contrast and focus indicators remain sufficient across themes for accessibility.

 
&.boxMode {
  box-shadow: none;
  background: transparent;
  cursor: default;

  &:hover {
    --border-color: var(--ui-border-color);
  }

  &.active,
  &:focus {
    --border-color: var(--ui-border-color);
  }
}

@rivka-ungar rivka-ungar changed the title Dropdown-add-boxmode-prop-18326494666 feat(Dropdown): add boxMode for inline dropdown display Nov 2, 2025
@rivka-ungar rivka-ungar marked this pull request as draft November 2, 2025 10:46
@github-actions
Copy link
Contributor

github-actions bot commented Nov 4, 2025 •
edited
Loading

📦 Bundle Size Analysis

✅ No bundle size changes detected.

Unchanged Components
Component Base PR Diff
@vibe/button 17.7KB 17.7KB 0B ➖
@vibe/icon 13.03KB 13.03KB 0B ➖
@vibe/loader 5.81KB 5.81KB 0B ➖
Accordion 6.32KB 6.32KB 0B ➖
AccordionItem 68.14KB 68.14KB 0B ➖
AlertBanner 72.95KB 72.95KB 0B ➖
AlertBannerButton 19.15KB 19.15KB 0B ➖
AlertBannerLink 15.5KB 15.5KB 0B ➖
AlertBannerText 65.53KB 65.53KB 0B ➖
AttentionBox 74.38KB 74.38KB 0B ➖
AttentionBoxLink 15.36KB 15.36KB 0B ➖
Avatar 68.36KB 68.36KB 0B ➖
AvatarGroup 95.79KB 95.79KB 0B ➖
Badge 43.47KB 43.47KB 0B ➖
Box 9.3KB 9.3KB 0B ➖
BreadcrumbItem 66.21KB 66.21KB 0B ➖
BreadcrumbMenu 70.2KB 70.2KB 0B ➖
BreadcrumbMenuItem 79.12KB 79.12KB 0B ➖
BreadcrumbsBar 5.78KB 5.78KB 0B ➖
ButtonGroup 70.17KB 70.17KB 0B ➖
Checkbox 68.45KB 68.45KB 0B ➖
Chips 77KB 77KB 0B ➖
Clickable 6.27KB 6.27KB 0B ➖
ColorPicker 76.21KB 76.21KB 0B ➖
ColorPickerContent 75.43KB 75.43KB 0B ➖
Combobox 85.9KB 85.9KB 0B ➖
Counter 42.41KB 42.41KB 0B ➖
DatePicker 134.31KB 134.31KB 0B ➖
Dialog 54.01KB 54.01KB 0B ➖
DialogContentContainer 6.29KB 6.29KB 0B ➖
Divider 5.55KB 5.55KB 0B ➖
Dropdown 125.52KB 125.52KB 0B ➖
menu 59.95KB 59.95KB 0B ➖
option 93.18KB 93.18KB 0B ➖
singleValue 93.03KB 93.03KB 0B ➖
EditableHeading 68.03KB 68.03KB 0B ➖
EditableText 68.07KB 68.07KB 0B ➖
EmptyState 72.66KB 72.66KB 0B ➖
ExpandCollapse 67.97KB 67.97KB 0B ➖
Flex 7.49KB 7.49KB 0B ➖
FormattedNumber 5.87KB 5.87KB 0B ➖
GridKeyboardNavigationContext 4.65KB 4.65KB 0B ➖
Heading 66.85KB 66.85KB 0B ➖
HiddenText 5.43KB 5.43KB 0B ➖
IconButton 69.99KB 69.99KB 0B ➖
Info 74.12KB 74.12KB 0B ➖
Label 70.38KB 70.38KB 0B ➖
LayerProvider 2.95KB 2.95KB 0B ➖
LegacyModal 76.75KB 76.75KB 0B ➖
LegacyModalContent 66.95KB 66.95KB 0B ➖
LegacyModalFooter 3.46KB 3.46KB 0B ➖
LegacyModalFooterButtons 20.73KB 20.73KB 0B ➖
LegacyModalHeader 72.81KB 72.81KB 0B ➖
Link 15.12KB 15.12KB 0B ➖
List 74.77KB 74.77KB 0B ➖
ListItem 67.45KB 67.45KB 0B ➖
ListItemAvatar 68.58KB 68.58KB 0B ➖
ListItemIcon 14.18KB 14.18KB 0B ➖
ListTitle 66.95KB 66.95KB 0B ➖
Menu 8.67KB 8.67KB 0B ➖
MenuDivider 5.65KB 5.65KB 0B ➖
MenuGridItem 7.22KB 7.22KB 0B ➖
MenuItem 79.15KB 79.15KB 0B ➖
MenuItemButton 72.01KB 72.01KB 0B ➖
MenuTitle 67.15KB 67.15KB 0B ➖
MenuButton 67.72KB 67.72KB 0B ➖
Modal 111.85KB 111.85KB 0B ➖
ModalContent 4.76KB 4.76KB 0B ➖
ModalHeader 67.63KB 67.63KB 0B ➖
ModalMedia 7.65KB 7.65KB 0B ➖
ModalFooter 69.62KB 69.62KB 0B ➖
ModalFooterWizard 70.54KB 70.54KB 0B ➖
ModalBasicLayout 9.06KB 9.06KB 0B ➖
ModalMediaLayout 8.18KB 8.18KB 0B ➖
ModalSideBySideLayout 6.34KB 6.34KB 0B ➖
MultiStepIndicator 53.27KB 53.27KB 0B ➖
NumberField 74.86KB 74.86KB 0B ➖
LinearProgressBar 7.46KB 7.46KB 0B ➖
RadioButton 67.66KB 67.66KB 0B ➖
Search 72.49KB 72.49KB 0B ➖
Skeleton 6.2KB 6.2KB 0B ➖
Slider 75.84KB 75.84KB 0B ➖
SplitButton 68.53KB 68.53KB 0B ➖
SplitButtonMenu 8.79KB 8.79KB 0B ➖
Steps 73.42KB 73.42KB 0B ➖
Table 7.29KB 7.29KB 0B ➖
TableBody 68.65KB 68.65KB 0B ➖
TableCell 67.02KB 67.02KB 0B ➖
TableContainer 5.36KB 5.36KB 0B ➖
TableHeader 5.7KB 5.7KB 0B ➖
TableHeaderCell 74.2KB 74.2KB 0B ➖
TableRow 5.58KB 5.58KB 0B ➖
TableRowMenu 70.41KB 70.41KB 0B ➖
TableVirtualizedBody 73.35KB 73.35KB 0B ➖
Tab 65.53KB 65.53KB 0B ➖
TabList 8.9KB 8.9KB 0B ➖
TabPanel 5.35KB 5.35KB 0B ➖
TabPanels 5.93KB 5.93KB 0B ➖
TabsContext 5.54KB 5.54KB 0B ➖
Text 66.72KB 66.72KB 0B ➖
TextArea 68.04KB 68.04KB 0B ➖
TextField 71.31KB 71.31KB 0B ➖
TextWithHighlight 65.91KB 65.91KB 0B ➖
ThemeProvider 4.69KB 4.69KB 0B ➖
Tipseen 73.1KB 73.1KB 0B ➖
TipseenContent 73.7KB 73.7KB 0B ➖
TipseenImage 73.47KB 73.47KB 0B ➖
TipseenMedia 73.41KB 73.41KB 0B ➖
TipseenWizard 75.89KB 75.89KB 0B ➖
Toast 76.13KB 76.13KB 0B ➖
ToastButton 19.03KB 19.03KB 0B ➖
ToastLink 15.34KB 15.34KB 0B ➖
Toggle 68.37KB 68.37KB 0B ➖
Tooltip 64.69KB 64.69KB 0B ➖
TransitionView 37.62KB 37.62KB 0B ➖
VirtualizedGrid 12.58KB 12.58KB 0B ➖
VirtualizedList 12.37KB 12.37KB 0B ➖
AttentionBox (Next) 76.26KB 76.26KB 0B ➖
Dropdown (Next) 96.22KB 96.51KB +298B 🔺

📊 Summary:

  • Total Base Size: 5.65MB
  • Total PR Size: 5.65MB
  • Total Difference: +298B

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Review effort 3/5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@rivka-ungar