-
Notifications
You must be signed in to change notification settings - Fork 2.5k
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.
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
[Workflow] Add search in variable dropdown #8479
Conversation
04d8eb4
to
261f830
Compare
261f830
to
c5fbdf3
Compare
d876080
to
c07dc56
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PR Summary
This PR adds search functionality to variable dropdowns and improves their UI, including transparent backgrounds and updated icons for better visual consistency.
- Added search input with case-insensitive filtering in
SearchVariablesDropdownStepSubItem.tsx
- Introduced
transparentBackground
prop in/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
for nested UI elements - Modified
/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
padding and width for better search input accommodation - Replaced IconVariable with IconVariablePlus in
/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
- Added
hasMaxHeight
prop to DropdownMenuItemsContainer for improved scrolling behavior
5 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile
isUnfolded ? theme.background.transparent.light : theme.background.primary}; | ||
background: ${({ theme, isUnfolded, transparentBackground }) => | ||
transparentBackground | ||
? 'none' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: 'none' and 'transparent' used inconsistently between normal and hover states. Should use 'transparent' in both places for consistency.
const filteredOptions = searchInputValue | ||
? options.filter(([key]) => | ||
key.toLowerCase().includes(searchInputValue.toLowerCase()), | ||
) | ||
: options; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Consider debouncing the filter operation for better performance with large option sets
- fix Icon variable Plus - add search input - fix dropdown height ## Before ![image](https://github.com/user-attachments/assets/49f73efd-21cc-4ecd-a494-f51edc34dc57) ## After ![image](https://github.com/user-attachments/assets/2af2c7ee-72fd-4dae-a1ef-19e75e1ac026)
Before
After