Skip to content
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

Merged
merged 4 commits into from
Nov 14, 2024
Merged

Conversation

martmull
Copy link
Contributor

@martmull martmull commented Nov 13, 2024

  • fix Icon variable Plus
  • add search input
  • fix dropdown height

Before

image

After

image

@martmull martmull self-assigned this Nov 13, 2024
@martmull martmull marked this pull request as ready for review November 14, 2024 10:23
Copy link
Contributor

@greptile-apps greptile-apps bot left a 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'
Copy link
Contributor

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.

Comment on lines +53 to +57
const filteredOptions = searchInputValue
? options.filter(([key]) =>
key.toLowerCase().includes(searchInputValue.toLowerCase()),
)
: options;
Copy link
Contributor

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

@martmull martmull merged commit 9ac949d into main Nov 14, 2024
19 checks passed
@martmull martmull deleted the add-search-in-dropdown branch November 14, 2024 10:40
khuddite pushed a commit to khuddite/twenty that referenced this pull request Nov 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants